add back button in onboard connection creation flow

This commit is contained in:
msukkari 2025-02-27 09:32:01 -08:00
parent c0b62a28da
commit 3d6c7dcca5
2 changed files with 45 additions and 4 deletions

View file

@ -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} />
</>
)
}

View file

@ -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>
)
}