add back button in onboard connection creation flow

Author: msukkari

packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx

@@ -15,6 +15,8 @@ import { useCallback } from "react";
 import { OnboardingSteps } from "@/lib/constants";
 import { Button } from "@/components/ui/button";
 import useCaptureEvent from "@/hooks/useCaptureEvent";
+import { BackButton } from "./onboardBackButton";
+
 interface ConnectCodeHostProps {
     nextStep: OnboardingSteps;
 }
@@ -26,6 +28,10 @@ export const ConnectCodeHost = ({ nextStep }: ConnectCodeHostProps) => {
         router.push(`?step=${nextStep}`);
     }, [nextStep, router]);
 
+    const onBack = useCallback(() => {
+        setSelectedCodeHost(null);
+    }, []);
+
     if (!selectedCodeHost) {
         return (
             <CodeHostSelection onSelect={setSelectedCodeHost} />
@@ -34,25 +40,37 @@ export const ConnectCodeHost = ({ nextStep }: ConnectCodeHostProps) => {
 
     if (selectedCodeHost === "github") {
         return (
-            <GitHubConnectionCreationForm onCreated={onCreated} />
+            <>
+                <BackButton onClick={onBack} />
+                <GitHubConnectionCreationForm onCreated={onCreated} />
+            </>
         )
     }
 
     if (selectedCodeHost === "gitlab") {
         return (
-            <GitLabConnectionCreationForm onCreated={onCreated} />
+            <>
+                <BackButton onClick={onBack} />
+                <GitLabConnectionCreationForm onCreated={onCreated} />
+            </>
         )
     }
 
     if (selectedCodeHost === "gitea") {
         return (
-            <GiteaConnectionCreationForm onCreated={onCreated} />
+            <>
+                <BackButton onClick={onBack} />
+                <GiteaConnectionCreationForm onCreated={onCreated} />
+            </>
         )
     }
 
     if (selectedCodeHost === "gerrit") {
         return (
-            <GerritConnectionCreationForm onCreated={onCreated} />
+            <>
+                <BackButton onClick={onBack} />
+                <GerritConnectionCreationForm onCreated={onCreated} />
+            </>
         )
     }
 

packages/web/src/app/[domain]/onboard/components/onboardBackButton.tsx

@@ -0,0 +1,23 @@
+import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+
+interface BackButtonProps {
+  onClick: () => void
+}
+
+export function BackButton({ onClick }: BackButtonProps) {
+  return (
+    <div className="mb-4">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onClick}
+        className="text-gray-400 hover:text-white hover:bg-gray-800 focus-visible:ring-offset-gray-900 h-8 px-3 rounded-md"
+      >
+        <ArrowLeft size={16} className="mr-1" />
+        <span>Back</span>
+      </Button>
+    </div>
+  )
+}
+