Repository: supabase/supabase
File: apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx (TypeScript)

Code before:
    return 'ai_assist'
  }
  // Check if it's an external link (href that doesn't start with /project/)
  if (action.href && !action.href.startsWith('/project/')) {
    return 'external_link'
  }
  return 'primary'
}

export interface GettingStartedProps {
  steps: GettingStartedStep[]
  onStepClick: ({
    stepIndex,
    stepTitle,
    actionType,
    wasCompleted,
  }: {
    stepIndex: number
    stepTitle: string
    actionType: 'primary' | 'ai_assist' | 'external_link'
    wasCompleted: boolean
  }) => void
  onDismiss?: () => void
}

export function GettingStarted({ steps, onStepClick, onDismiss }: GettingStartedProps) {
  const allStepsComplete = steps.length > 0 && steps.every((step) => step.status === 'complete')
  const [activeStepKey, setActiveStepKey] = useState<string | null>(null)
  const hasInitializedRef = useRef(false)

  useEffect(() => {
    if (hasInitializedRef.current) {
      // After initial setup, only handle step selection if user hasn't selected one
      return
    }

    if (steps.length === 0) {
      setActiveStepKey(null)
      hasInitializedRef.current = true
      return
    }

    // On initial load: if all steps are complete, don't select any step
    // Otherwise, select the first step
    if (allStepsComplete) {
      setActiveStepKey(null)
    } else {
      setActiveStepKey(steps[0]?.key ?? null)
    }

    hasInitializedRef.current = true

Review comment (suggestion):
`onDismiss` is passed from `GettingStartedSection` so the user can dismiss the entire section from within the ‘end’ state.

Code after:
  ) {
    return 'ai_assist'
  }
  // Check if it's an external link (href that doesn't start with /project/)
  if (action.href && !action.href.startsWith('/project/')) {
    return 'external_link'
  }
  return 'primary'
}

export interface GettingStartedProps {
  steps: GettingStartedStep[]
  onStepClick: ({
    stepIndex,
    stepTitle,
    actionType,
    wasCompleted,
  }: {
    stepIndex: number
    stepTitle: string
    actionType: 'primary' | 'ai_assist' | 'external_link'
    wasCompleted: boolean
  }) => void
}

export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
  const allStepsComplete = steps.length > 0 && steps.every((step) => step.status === 'complete')
  const [activeStepKey, setActiveStepKey] = useState<string | null>(null)

  useEffect(() => {
    if (steps.length === 0) {
      setActiveStepKey(null)
      return
    }

    // Check if the current active step key is still valid in the new steps array
    const isActiveStepValid = activeStepKey && steps.some((step) => step.key === activeStepKey)

    // If no step is selected or the active step is no longer valid (e.g., after tab switch)
    if (!isActiveStepValid) {
      // If all steps are complete, don't select any step
      if (allStepsComplete) {
        setActiveStepKey(null)
      } else {
        // Select the first incomplete step, or the first step if all are complete
        const firstIncompleteStep = steps.find((step) => step.status !== 'complete')
        setActiveStepKey(firstIncompleteStep?.key ?? steps[0]?.key ?? null)
      }
    }
  }, [steps, allStepsComplete, activeStepKey])