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

Code before:
    [connectActions, openAiChat, ref, statuses]
  )

  const steps = workflow === 'code' ? codeSteps : workflow === 'no-code' ? noCodeSteps : []

  const handleDismiss = useCallback(() => {
    onChange('hidden')
    if (workflow) {
      const completedSteps = (workflow === 'code' ? codeSteps : noCodeSteps).filter(
        (step) => step.status === 'complete'
      ).length
      const totalSteps = (workflow === 'code' ? codeSteps : noCodeSteps).length
      sendEvent({
        action: 'home_getting_started_closed',
        properties: {
          workflow: workflow === 'no-code' ? 'no_code' : 'code',
          steps_completed: completedSteps,
          total_steps: totalSteps,
        },
        groups: {
          project: project?.ref || '',
          organization: organization?.slug || '',
        },
      })
    }
  }, [workflow, codeSteps, noCodeSteps, onChange, sendEvent, project?.ref, organization?.slug])

  return (
    <section className="w-full">
      <div className="flex justify-between items-center mb-6">
        <h3 className="heading-section">Getting started</h3>
        <div className="flex items-center gap-2">
          <ToggleGroup
            type="single"
            value={workflow ?? undefined}
            onValueChange={(v) => {
              if (v) {
                const newWorkflow = v as 'no-code' | 'code'
                setPreviousWorkflow(workflow)
                onChange(newWorkflow)
                sendEvent({
                  action: 'home_getting_started_workflow_clicked',
                  properties: {
                    workflow: newWorkflow === 'no-code' ? 'no_code' : 'code',
                    is_switch: previousWorkflow !== null,
                  },
                  groups: {
                    project: project?.ref || '',
                    organization: organization?.slug || '',
                  },
                })

Review comment (suggestion):
As mentioned above: moved this to a single `handleDismiss` function to consolidate code, now that we’re calling it inside the ‘end’ state too.

Code after:
    [connectActions, openAiChat, ref, statuses]
  )

  const steps = workflow === 'code' ? codeSteps : workflow === 'no-code' ? noCodeSteps : []

  return (
    <section className="w-full">
      <div className="flex justify-between items-center mb-6">
        <h3 className="heading-section">Getting started</h3>
        <div className="flex items-center gap-2">
          <ToggleGroup
            type="single"
            value={workflow ?? undefined}
            onValueChange={(v) => {
              if (v) {
                const newWorkflow = v as 'no-code' | 'code'
                setPreviousWorkflow(workflow)
                onChange(newWorkflow)
                sendEvent({
                  action: 'home_getting_started_workflow_clicked',
                  properties: {
                    workflow: newWorkflow === 'no-code' ? 'no_code' : 'code',
                    is_switch: previousWorkflow !== null,
                  },
                  groups: {
                    project: project?.ref || '',
                    organization: organization?.slug || '',
                  },
                })
              }
            }}
          >
            <ToggleGroupItem
              value="no-code"
              aria-label="No-code workflow"
              size="sm"
              className="text-xs gap-2 h-auto"
            >
              <Table2 size={16} strokeWidth={1.5} />
              No-code
            </ToggleGroupItem>
            <ToggleGroupItem
              value="code"
              size="sm"
              aria-label="Code workflow"
              className="text-xs gap-2 h-auto"
            >
              <Code size={16} strokeWidth={1.5} />
              Code
            </ToggleGroupItem>
          </ToggleGroup>