feat: fetch initial onboarding state + redirect

Author: comatory

studio/src/components/dashboard/workspace-provider.tsx

@@ -5,6 +5,7 @@ import { WorkspaceNamespace } from '@wundergraph/cosmo-connect/dist/platform/v1/
 import { useRouter } from 'next/router';
 import { useApplyParams } from '@/components/analytics/use-apply-params';
 import { useLocalStorage } from '@/hooks/use-local-storage';
+import { useOnboardingNavigation } from '@/hooks/use-onboarding-navigation';
 import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
 
 const DEFAULT_NAMESPACE_NAME = 'default';
@@ -103,6 +104,8 @@ export function WorkspaceProvider({ children }: React.PropsWithChildren) {
     [namespace, namespaces, setStoredNamespace, applyParams],
   );
 
+  useOnboardingNavigation();
+
   // Finally, render :)
   return (
     <WorkspaceContext.Provider

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

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  type Dispatch,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type SetStateAction,
+  type ReactNode,
+} from 'react';
+import { PostHogFeatureFlagContext } from '../posthog-feature-flag-provider';
+
+type Onboarding = {
+  step: number;
+  finishedAt?: Date;
+  federatedGraphsCount: number;
+};
+
+export interface OnboardingState {
+  enabled: boolean;
+  onboarding?: Onboarding;
+  setOnboarding: Dispatch<SetStateAction<Onboarding | undefined>>;
+}
+
+export const OnboardingContext = createContext<OnboardingState>({
+  onboarding: undefined,
+  enabled: false,
+  setOnboarding: () => undefined,
+});
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+  const { onboarding: onboardingFlag, status: featureFlagStatus } = useContext(PostHogFeatureFlagContext);
+  const [onboarding, setOnboarding] = useState<Onboarding | undefined>(undefined);
+
+  const value = useMemo(
+    () => ({
+      onboarding,
+      enabled: Boolean(onboardingFlag.enabled && featureFlagStatus === 'success' && onboardingFlag),
+      setOnboarding,
+    }),
+    [onboarding, onboardingFlag, featureFlagStatus],
+  );
+
+  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;
+};

studio/src/components/posthog-feature-flag-provider.tsx

@@ -30,7 +30,7 @@ const initialState: PostHogFeatureFlagState = {
   onboarding: { enabled: false },
 };
 
-const PostHogFeatureFlagContext = createContext<PostHogFeatureFlagState>(initialState);
+export const PostHogFeatureFlagContext = createContext<PostHogFeatureFlagState>(initialState);
 
 export const usePostHogFeatureFlags = () => useContext(PostHogFeatureFlagContext);
 

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

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from 'react';
+import Router from 'next/router';
+import { useOnboarding } from './use-onboarding';
+import { useQuery } from '@connectrpc/connect-query';
+import { getOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
+import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
+
+/**
+ * Manages the initial navigation to onboarding wizard and evaluates
+ * 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);
+
+  useEffect(
+    function initialOnboardingFetch() {
+      if (isPending) {
+        return;
+      }
+
+      if (isError || data?.response?.code !== EnumStatusCode.OK) {
+        setInitialLoadSuccess(false);
+        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],
+  );
+
+  useEffect(
+    function handleNavigationToOnboarding() {
+      // Redirect user back if onboarding metadata failed
+      if (!initialLoadSuccess && Router.pathname.startsWith('/onboarding')) {
+        Router.replace('/');
+        return;
+      }
+
+      // Do not initiate redirect if we fail to fetch onboarding metadata. Fail silently in background.
+      if (!initialLoadSuccess) {
+        return;
+      }
+
+      // Do not initiate redirect if the user is not eligible for onboarding
+      if (!onboarding && !enabled) {
+        return;
+      }
+
+      // Do not initiate redirect if user has already finished the onboarding
+      if (onboarding?.finishedAt) {
+        return;
+      }
+
+      const path = onboarding ? `/onboarding/${onboarding.step}` : '/onboarding';
+      Router.replace(path);
+    },
+    [onboarding, enabled, initialLoadSuccess],
+  );
+};

studio/src/hooks/use-onboarding.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { OnboardingContext } from '@/components/onboarding/onboarding-provider';
+
+export const useOnboarding = () => useContext(OnboardingContext);

studio/src/pages/_app.tsx

@@ -23,6 +23,7 @@ import posthog from 'posthog-js';
 import { PostHogProvider } from 'posthog-js/react';
 import { withErrorBoundary } from '@sentry/nextjs';
 import { Footer } from '@/components/layout/footer';
+import { OnboardingProvider } from '@/components/onboarding/onboarding-provider';
 
 const queryClient = new QueryClient();
 
@@ -73,12 +74,14 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
           <QueryClientProvider client={queryClient}>
             <PostHogFeatureFlagProvider>
-              <AppProvider>
-                <TooltipProvider>
-                  <Toaster />
-                  {getLayout(<Component {...pageProps} />)}
-                </TooltipProvider>
-              </AppProvider>
+              <OnboardingProvider>
+                <AppProvider>
+                  <TooltipProvider>
+                    <Toaster />
+                    {getLayout(<Component {...pageProps} />)}
+                  </TooltipProvider>
+                </AppProvider>
+              </OnboardingProvider>
             </PostHogFeatureFlagProvider>
           </QueryClientProvider>
         </ThemeProvider>