From 3d6c7dcca5dace18d2c14cbd41296cb37e34fb9d Mon Sep 17 00:00:00 2001
From: msukkari <michael.sukkarieh@mail.mcgill.ca>
Date: Thu, 27 Feb 2025 09:32:01 -0800
Subject: [PATCH] add back button in onboard connection creation flow

---
 .../onboard/components/connectCodeHost.tsx    | 26 ++++++++++++++++---
 .../onboard/components/onboardBackButton.tsx  | 23 ++++++++++++++++
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 packages/web/src/app/[domain]/onboard/components/onboardBackButton.tsx

diff --git a/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx b/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx
index 71d94f4a..0e20fe41 100644
--- a/packages/web/src/app/[domain]/onboard/components/connectCodeHost.tsx
+++ b/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} />
+            </>
         )
     }
 
diff --git a/packages/web/src/app/[domain]/onboard/components/onboardBackButton.tsx b/packages/web/src/app/[domain]/onboard/components/onboardBackButton.tsx
new file mode 100644
index 00000000..25d93615
--- /dev/null
+++ b/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>
+  )
+}
+