From 688d31e6b4ca6aeafd3cd3fe72180cfc0405cb93 Mon Sep 17 00:00:00 2001
From: Mike Fortman <michael.fortman@datastax.com>
Date: Mon, 27 Oct 2025 16:02:53 -0500
Subject: [PATCH] Allow skip onboarding

---
 .../components/progress-bar.tsx               | 26 ++++++++++++++++---
 frontend/src/components/chat-renderer.tsx     |  9 +++++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/new-onboarding/components/progress-bar.tsx b/frontend/src/app/new-onboarding/components/progress-bar.tsx
index 419a2ae4..ef16dc54 100644
--- a/frontend/src/app/new-onboarding/components/progress-bar.tsx
+++ b/frontend/src/app/new-onboarding/components/progress-bar.tsx
@@ -1,15 +1,20 @@
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
 interface ProgressBarProps {
   currentStep: number;
   totalSteps: number;
+  onSkip?: () => void;
 }
 
-export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
+export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProps) {
   const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
 
   return (
-    <div className="w-full">
-      <div className="flex items-center max-w-48 mx-auto gap-3">
-        <div className="flex-1 h-1 bg-background rounded-full overflow-hidden">
+    <div className="w-full flex items-center px-6 gap-4">
+      <div className="flex-1" />
+      <div className="flex items-center gap-3">
+        <div className="w-48 h-1 bg-background rounded-full overflow-hidden">
           <div
             className="h-full transition-all duration-300 ease-in-out"
             style={{
@@ -22,6 +27,19 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
           {currentStep + 1}/{totalSteps}
         </span>
       </div>
+      <div className="flex-1 flex justify-end">
+        {currentStep > 0 && onSkip && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onSkip}
+            className="flex items-center gap-2 text-xs text-muted-foreground"
+          >
+            Skip onboarding
+            <ArrowRight className="w-4 h-4" />
+          </Button>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/chat-renderer.tsx b/frontend/src/components/chat-renderer.tsx
index 9d6402e6..d20864a8 100644
--- a/frontend/src/components/chat-renderer.tsx
+++ b/frontend/src/components/chat-renderer.tsx
@@ -86,6 +86,14 @@ export function ChatRenderer({
 		}
 	};
 
+	const handleSkipOnboarding = () => {
+		// Skip onboarding by marking it as complete
+		if (typeof window !== "undefined") {
+			localStorage.removeItem(ONBOARDING_STEP_KEY);
+		}
+		setShowLayout(true);
+	};
+
 	// List of paths with smaller max-width
 	const smallWidthPaths = ["/settings/connector/new"];
 	const isSmallWidthPath = smallWidthPaths.includes(pathname);
@@ -196,6 +204,7 @@ export function ChatRenderer({
 					<ProgressBar
 						currentStep={currentStep}
 						totalSteps={TOTAL_ONBOARDING_STEPS}
+						onSkip={handleSkipOnboarding}
 					/>
 				</motion.div>
 			</main>