feat: navigate between steps + dismiss

Author: comatory

studio/src/components/layout/onboarding-layout.tsx

@@ -4,8 +4,8 @@ export interface OnboardingLayoutProps {
 
 export const OnboardingLayout = ({ children }: OnboardingLayoutProps) => {
   return (
-    <div className="mx-auto min-h-screen w-full bg-background font-sans antialiased">
-      <main className="flex-1">{children}</main>
+    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-background font-sans antialiased">
+      <main className="w-full max-w-lg px-4">{children}</main>
     </div>
   );
 };

studio/src/components/onboarding/onboarding-provider.tsx

@@ -1,16 +1,17 @@
 import {
   createContext,
   type Dispatch,
+  useCallback,
   useContext,
   useMemo,
   useState,
   type SetStateAction,
   type ReactNode,
 } from 'react';
 import { PostHogFeatureFlagContext } from '../posthog-feature-flag-provider';
+import { useSessionStorage } from '@/hooks/use-session-storage';
 
 type Onboarding = {
-  step: number;
   finishedAt?: Date;
   federatedGraphsCount: number;
 };
@@ -19,25 +20,66 @@ export interface OnboardingState {
   enabled: boolean;
   onboarding?: Onboarding;
   setOnboarding: Dispatch<SetStateAction<Onboarding | undefined>>;
+  currentStep: number | undefined;
+  setStep: (step: number | undefined) => void;
+  skipped: boolean;
+  setSkipped: () => void;
+  resetSkipped: () => void;
 }
 
 export const OnboardingContext = createContext<OnboardingState>({
   onboarding: undefined,
   enabled: false,
   setOnboarding: () => undefined,
+  currentStep: undefined,
+  setStep: () => undefined,
+  skipped: false,
+  setSkipped: () => undefined,
+  resetSkipped: () => undefined,
 });
 
+const ONBOARDING_V1_LAST_STEP = 4;
+
 export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
   const { onboarding: onboardingFlag, status: featureFlagStatus } = useContext(PostHogFeatureFlagContext);
   const [onboarding, setOnboarding] = useState<Onboarding | undefined>(undefined);
+  const [currentStep, setCurrentStep] = useSessionStorage<undefined | number>('cosmo-onboarding-v1-step', undefined);
+  const [skipped, setSkippedValue] = useSessionStorage('cosmo-onboarding-v1-skipped', false);
+
+  const setSkipped = useCallback(() => {
+    setSkippedValue(true);
+  }, [setSkippedValue]);
+
+  const resetSkipped = useCallback(() => {
+    setSkippedValue(false);
+  }, [setSkippedValue]);
+
+  const setStep = useCallback(
+    (step: number | undefined) => {
+      if (step === undefined) {
+        setCurrentStep(1);
+        resetSkipped();
+        return;
+      }
+
+      resetSkipped();
+      setCurrentStep(Math.max(Math.min(step, ONBOARDING_V1_LAST_STEP), 0));
+    },
+    [setCurrentStep, resetSkipped],
+  );
 
   const value = useMemo(
     () => ({
       onboarding,
       enabled: Boolean(onboardingFlag.enabled && featureFlagStatus === 'success' && onboardingFlag),
       setOnboarding,
+      currentStep,
+      setStep,
+      setSkipped,
+      resetSkipped,
+      skipped,
     }),
-    [onboarding, onboardingFlag, featureFlagStatus],
+    [onboarding, onboardingFlag, featureFlagStatus, currentStep, setStep, setSkipped, resetSkipped, skipped],
   );
 
   return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;

studio/src/components/onboarding/step-1.tsx

@@ -1,3 +1,31 @@
+import { useEffect } from 'react';
+import { Link } from '../ui/link';
+import { Button } from '../ui/button';
+import { useOnboarding } from '@/hooks/use-onboarding';
+
 export const Step1 = () => {
-  return <h2>Step 1</h2>;
+  const { setStep, setSkipped } = useOnboarding();
+
+  useEffect(() => {
+    setStep(1);
+  }, [setStep]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <h2 className="text-2xl font-semibold tracking-tight">Step 1</h2>
+      <div className="flex w-full justify-between">
+        <Button asChild variant="secondary" onClick={setSkipped}>
+          <Link href="/">Skip</Link>
+        </Button>
+        <div className="flex">
+          <Button className="mr-2" asChild disabled>
+            <Link href="#">Back</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/onboarding/2">Next</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };

studio/src/components/onboarding/step-2.tsx

@@ -1,3 +1,31 @@
+import { useEffect } from 'react';
+import { Link } from '../ui/link';
+import { Button } from '../ui/button';
+import { useOnboarding } from '@/hooks/use-onboarding';
+
 export const Step2 = () => {
-  return <h2>Step 2</h2>;
+  const { setStep, setSkipped } = useOnboarding();
+
+  useEffect(() => {
+    setStep(2);
+  }, [setStep]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <h2 className="text-2xl font-semibold tracking-tight">Step 2</h2>
+      <div className="flex w-full justify-between">
+        <Button asChild variant="secondary" onClick={setSkipped}>
+          <Link href="/">Skip</Link>
+        </Button>
+        <div className="flex">
+          <Button className="mr-2" asChild>
+            <Link href="/onboarding/1">Back</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/onboarding/3">Next</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };

studio/src/components/onboarding/step-3.tsx

@@ -1,3 +1,31 @@
+import { useEffect } from 'react';
+import { Link } from '../ui/link';
+import { Button } from '../ui/button';
+import { useOnboarding } from '@/hooks/use-onboarding';
+
 export const Step3 = () => {
-  return <h2>Step 3</h2>;
+  const { setStep, setSkipped } = useOnboarding();
+
+  useEffect(() => {
+    setStep(3);
+  }, [setStep]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <h2 className="text-2xl font-semibold tracking-tight">Step 3</h2>
+      <div className="flex w-full justify-between">
+        <Button asChild variant="secondary" onClick={setSkipped}>
+          <Link href="/">Skip</Link>
+        </Button>
+        <div className="flex">
+          <Button className="mr-2" asChild>
+            <Link href="/onboarding/2">Back</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/onboarding/4">Next</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };

studio/src/components/onboarding/step-4.tsx

@@ -1,3 +1,31 @@
+import { useEffect } from 'react';
+import { Link } from '../ui/link';
+import { Button } from '../ui/button';
+import { useOnboarding } from '@/hooks/use-onboarding';
+
 export const Step4 = () => {
-  return <h2>Step 4</h2>;
+  const { setStep, setSkipped } = useOnboarding();
+
+  useEffect(() => {
+    setStep(3);
+  }, [setStep]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      <h2 className="text-2xl font-semibold tracking-tight">Step 4</h2>
+      <div className="flex w-full justify-between">
+        <Button asChild variant="secondary" onClick={setSkipped}>
+          <Link href="/">Skip</Link>
+        </Button>
+        <div className="flex">
+          <Button className="mr-2" asChild>
+            <Link href="/onboarding/3">Back</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/">Finish</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };

studio/src/hooks/use-onboarding-navigation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useMemo } from 'react';
 import Router from 'next/router';
 import { useOnboarding } from './use-onboarding';
 import { useQuery } from '@connectrpc/connect-query';
@@ -10,57 +10,57 @@ import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb
  * the conditions based on feature flag and onboarding metadata
  */
 export const useOnboardingNavigation = () => {
-  const { enabled, onboarding, setOnboarding } = useOnboarding();
-  const { data, isError, isPending, error } = useQuery(getOnboarding);
-  const [initialLoadSuccess, setInitialLoadSuccess] = useState(false);
+  const { enabled, setOnboarding, skipped, currentStep } = useOnboarding();
+  const { data, isError, isPending } = useQuery(getOnboarding);
+  const initialRedirect = useRef<boolean>(false);
 
-  useEffect(
-    function initialOnboardingFetch() {
-      if (isPending) {
-        return;
-      }
+  const initialLoadSuccess = useMemo(() => {
+    if (isPending) return null;
+    if (isError || data?.response?.code !== EnumStatusCode.OK) return false;
+    return true;
+  }, [isPending, isError, data]);
 
-      if (isError || data?.response?.code !== EnumStatusCode.OK) {
-        setInitialLoadSuccess(false);
+  useEffect(
+    function syncOnboardingMetadata() {
+      if (initialLoadSuccess !== true || !data) {
         return;
       }
 
-      setInitialLoadSuccess(true);
       setOnboarding({
-        step: Number(data.step ?? 0),
         finishedAt: data.finishedAt ? new Date(data.finishedAt) : undefined,
         federatedGraphsCount: data.federatedGraphsCount,
       });
     },
-    [data, isError, isPending, setOnboarding, error],
+    [initialLoadSuccess, data, setOnboarding],
   );
 
   useEffect(
     function handleNavigationToOnboarding() {
-      // Redirect user back if onboarding metadata failed
-      if (!initialLoadSuccess && Router.pathname.startsWith('/onboarding')) {
-        Router.replace('/');
+      // Wait for the onboarding metadata query to resolve
+      // Do not initiate redirect if we fail to fetch onboarding metadata. Fail silently in background.
+      if (initialLoadSuccess === null || !initialLoadSuccess) {
         return;
       }
 
-      // Do not initiate redirect if we fail to fetch onboarding metadata. Fail silently in background.
-      if (!initialLoadSuccess) {
+      // If user has dissmissed/skipped the onboarding but, do not redirect
+      if (skipped) {
         return;
       }
 
-      // Do not initiate redirect if the user is not eligible for onboarding
-      if (!onboarding && !enabled) {
+      // If user has already finished the onboarding, don't redirect
+      if (data?.finishedAt) {
         return;
       }
 
-      // Do not initiate redirect if user has already finished the onboarding
-      if (onboarding?.finishedAt) {
+      // skip redirecting on subsequent re-runs of this functions
+      if (initialRedirect.current) {
         return;
       }
 
-      const path = onboarding ? `/onboarding/${onboarding.step}` : '/onboarding';
+      const path = currentStep ? `/onboarding/${currentStep}` : `/onboarding/1`;
+      initialRedirect.current = true;
       Router.replace(path);
     },
-    [onboarding, enabled, initialLoadSuccess],
+    [data, enabled, initialLoadSuccess, skipped, currentStep],
   );
 };

studio/src/hooks/use-session-storage.ts

@@ -9,7 +9,7 @@ declare global {
   }
 }
 
-type SetValue<T> = Dispatch<SetStateAction<T>>;
+export type SetValue<T> = Dispatch<SetStateAction<T>>;
 
 export function useSessionStorage<T>(key: string, initialValue: T): [T, SetValue<T>] {
   // Get from session storage then

studio/src/pages/onboarding/index.tsx

@@ -1,16 +1,21 @@
+import { useRef } from 'react';
 import { OnboardingLayout } from '@/components/layout/onboarding-layout';
 import { NextPageWithLayout } from '@/lib/page';
-import { useRouter } from 'next/router';
+import Router from 'next/router';
 import { useEffect } from 'react';
+import { Loader } from '@/components/ui/loader';
+import { useOnboarding } from '@/hooks/use-onboarding';
 
 const OnboardingIndex: NextPageWithLayout = () => {
-  const router = useRouter();
+  const { currentStep } = useOnboarding();
+  const initialStep = useRef(currentStep);
 
   useEffect(() => {
-    router.replace('/onboarding/1');
-  }, [router]);
+    // Only redirect user when they first enter
+    Router.replace(initialStep.current ? `/onboarding/${initialStep.current}` : '/onboarding/1');
+  }, []);
 
-  return null;
+  return <Loader />;
 };
 
 OnboardingIndex.getLayout = (page) => <OnboardingLayout>{page}</OnboardingLayout>;