feat: onboarding wizard #1

studio/README.md

@@ -33,6 +33,22 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 We use [Connect](https://connect.build/) to unify the communication between all components of the cosmo platform. Connect is a framework build on top of [gRPC](https://grpc.io/) and simplify code-generation and reuse between `Studio` -> `Controlplane`.
 
+## Source Maps (Firefox)
+
+Firefox does not handle webpack's default `eval-source-map` devtool correctly ([webpack#9267](https://github.com/webpack/webpack/issues/9267)). To get proper source maps in Firefox DevTools, set:
+
+```bash
+NEXT_DEVTOOL=source-map pnpm dev
+```
+
+or with make:
+
+```bash
+NEXT_DEVTOOL=source-map make start-studio
+```
+
+This generates separate `.map` files instead of eval-based inline maps. Note: incremental rebuilds will be slower.
+
 ## Docker Info
 
 We want runtime envs for docker for each on prem customer. Therefore we have two files to achieve this. One is .env.docker that uses a placeholder env name and an entrypoint.sh script that replaces all placeholder env name with the correct one at runtime in the .next folder. This also requires us to SSR the studio.

studio/next.config.mjs

@@ -103,7 +103,22 @@ const config = {
   },
   // This is done to reduce the production build size
   // see: https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
-  webpack: (config, { webpack }) => {
+  webpack: (config, { webpack, dev, isServer }) => {
+    // Firefox doesn't handle eval-based source maps well (webpack/webpack#9267).
+    // Replace Next.js's default EvalSourceMapDevToolPlugin with SourceMapDevToolPlugin
+    // to generate proper source maps. Opt-in via NEXT_DEVTOOL=source-map.
+    if (dev && !isServer && process.env.NEXT_DEVTOOL === 'source-map') {
+      config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'EvalSourceMapDevToolPlugin');
+      config.devtool = false;
+      config.plugins.push(
+        new webpack.SourceMapDevToolPlugin({
+          filename: '[file].map',
+          module: true,
+          columns: true,
+        }),
+      );
+    }
+
     config.plugins.push(
       new webpack.DefinePlugin({
         __SENTRY_TRACING__: !isSentryTracesEnabled,

studio/src/components/app-provider.tsx

@@ -9,6 +9,8 @@ import { useCookieOrganization } from '@/hooks/use-cookie-organization';
 import { setUser as setSentryUser } from '@sentry/nextjs';
 import { OrganizationRole } from '@/lib/constants';
 import { WorkspaceProvider } from '@/components/dashboard/workspace-provider';
+import { useFeatureFlags } from '@/components/feature-flag-provider';
+import { OnboardingProvider } from '@/components/onboarding/onboarding-provider';
 
 const sessionQueryClient = new QueryClient();
 
@@ -107,7 +109,6 @@ const fetchSession = async () => {
 export const AppProvider = ({ children }: { children: ReactNode }) => {
   const router = useRouter();
   const currentOrgSlug = router.query.organizationSlug;
-
   // we store the current org slug in a cookie, so that we can redirect to the correct org after login
   // as well as being able to access the cookie on the server.
   const [cookieOrgSlug, setOrgSlugCookie] = useCookieOrganization();
@@ -121,6 +122,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   const queryClient = useQueryClient();
 
   const [user, setUser] = useState<User>();
+  const { onboarding } = useFeatureFlags();
 
   useEffect(() => {
     if (!router.isReady) return;
@@ -184,16 +186,20 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
       setVerifiedOrganizationSlug(organization.slug);
 
-      if (
+      const shouldRedirectToOrg =
         (router.pathname === '/' || router.pathname === '/login' || !currentOrg) &&
-        router.pathname !== '/account/invitations'
-      ) {
+        router.pathname !== '/account/invitations';
+
+      // If onboarding is enabled, OnboardingProvider handles the redirect instead
+      if (onboarding.enabled) return;
+
+      if (shouldRedirectToOrg) {
         const url = new URL(window.location.origin + router.basePath + router.asPath);
         const params = new URLSearchParams(url.search);
         router.replace(params.size !== 0 ? `/${organization.slug}?${params}` : `/${organization.slug}`);
       }
     }
-  }, [router, data, isFetching, error, cookieOrgSlug]);
+  }, [router, data, isFetching, error, cookieOrgSlug, onboarding.enabled]);
 
   useEffect(() => {
     if (!verifiedOrganizationSlug) {
@@ -235,7 +241,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     return (
       <UserContext.Provider value={user}>
         <SessionClientContext.Provider value={sessionQueryClient}>
-          <WorkspaceProvider>{children}</WorkspaceProvider>
+          <WorkspaceProvider>
+            <OnboardingProvider>{children}</OnboardingProvider>
+          </WorkspaceProvider>
         </SessionClientContext.Provider>
       </UserContext.Provider>
     );
@@ -245,7 +253,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     <TransportProvider transport={transport}>
       <UserContext.Provider value={user}>
         <SessionClientContext.Provider value={sessionQueryClient}>
-          <WorkspaceProvider>{children}</WorkspaceProvider>
+          <WorkspaceProvider>
+            <OnboardingProvider>{children}</OnboardingProvider>
+          </WorkspaceProvider>
         </SessionClientContext.Provider>
       </UserContext.Provider>
     </TransportProvider>

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

@@ -0,0 +1,55 @@
+import { ReactNode, createContext, useContext, useEffect, useReducer, useMemo } from 'react';
+import { useFeatureFlagEnabled } from 'posthog-js/react';
+import { Loader } from '@/components/ui/loader';
+
+type FeatureFlagStatus = 'idle' | 'pending' | 'success';
+
+interface FeatureFlagState {
+  status: FeatureFlagStatus;
+  onboarding: {
+    enabled: boolean;
+  };
+}
+
+type FeatureFlagAction = { type: 'LOADING' } | { type: 'LOADED'; onboardingEnabled: boolean };
+
+function featureFlagReducer(_state: FeatureFlagState, action: FeatureFlagAction): FeatureFlagState {
+  switch (action.type) {
+    case 'LOADING':
+      return { status: 'pending', onboarding: { enabled: false } };
+    case 'LOADED':
+      return { status: 'success', onboarding: { enabled: action.onboardingEnabled } };
+  }
+}
+
+const initialState: FeatureFlagState = {
+  status: 'idle',
+  onboarding: { enabled: false },
+};
+
+const FeatureFlagContext = createContext<FeatureFlagState>(initialState);
+
+export const useFeatureFlags = () => useContext(FeatureFlagContext);
+
+export const FeatureFlagProvider = ({ children }: { children: ReactNode }) => {
+  const onboardingFlag = useFeatureFlagEnabled('cosmo-onboarding-v1');
+  const [state, dispatch] = useReducer(featureFlagReducer, initialState);
+
+  useEffect(() => {
+    if (onboardingFlag === undefined) {
+      dispatch({ type: 'LOADING' });
+    } else {
+      dispatch({ type: 'LOADED', onboardingEnabled: onboardingFlag });
+    }
+  }, [onboardingFlag]);
+
+  if (state.status !== 'success') {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-background">
+        <Loader />
+      </div>
+    );
+  }
+
+  return <FeatureFlagContext.Provider value={state}>{children}</FeatureFlagContext.Provider>;
+};

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

@@ -58,7 +58,7 @@ export const TitleLayout = ({
           <div className={cn('flex flex-col justify-between gap-y-4 px-4 lg:flex-row lg:items-center lg:px-8')}>
             <div>
               <h1 className="text-lg font-semibold">{title}</h1>
-              <p className="text-sm text-muted-foreground">{subtitle}</p>
+              <div className="text-sm text-muted-foreground">{subtitle}</div>
             </div>
             {items}
           </div>

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

@@ -0,0 +1,143 @@
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { useZodForm } from '@/hooks/use-form';
+import { emailSchema, organizationNameSchema } from '@/lib/form-schemas';
+import { useCurrentOrganization } from '@/hooks/use-current-organization';
+import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { Controller, useFieldArray } from 'react-hook-form';
+import { z } from 'zod';
+
+const onboardingSchema = z.object({
+  organizationName: organizationNameSchema,
+  members: z.array(
+    z.object({
+      email: emailSchema,
+    }),
+  ),
+  channels: z.object({
+    slack: z.boolean(),
+    email: z.boolean(),
+  }),
+});
+
+type OnboardingFormValues = z.infer<typeof onboardingSchema>;
+
+export function OnboardingForm() {
+  const router = useRouter();
+  const org = useCurrentOrganization();
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    formState: { isValid, errors },
+  } = useZodForm<OnboardingFormValues>({
+    mode: 'onChange',
+    schema: onboardingSchema,
+    defaultValues: {
+      organizationName: '',
+      members: [],
+      channels: { slack: true, email: false },
+    },
+  });
+
+  useEffect(() => {
+    if (org?.name) {
+      reset((prev) => ({ ...prev, organizationName: org.name }));
+    }
+  }, [org?.name, reset]);
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'members',
+  });
+
+  const onSubmit = (data: OnboardingFormValues) => {
+    // TODO: wire up submission
+    console.log(data);
+  };
+
+  return (
+    <form className="space-y-8" onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Organization Name</label>
+        <p className="text-sm text-muted-foreground">
+          This is your organization name. Feel free to keep it or change it.
+        </p>
+        <Input placeholder="Acme Inc." className="max-w-md" {...register('organizationName')} />
+        {errors.organizationName && <span className="text-sm text-destructive">{errors.organizationName.message}</span>}
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Invite Members</label>
+        <p className="text-sm text-muted-foreground">Add team members by email. You can always invite more later.</p>
+        <div className="space-y-2">
+          {fields.map((field, index) => (
+            <div key={field.id} className="flex items-center gap-2">
+              <Input placeholder="janedoe@example.com" className="max-w-md" {...register(`members.${index}.email`)} />
+              <Button type="button" variant="ghost" size="icon-sm" onClick={() => remove(index)}>
+                <Cross1Icon />
+              </Button>
+            </div>
+          ))}
+          {fields.map((_, index) =>
+            errors.members?.[index]?.email ? (
+              <span key={index} className="text-sm text-destructive">
+                {errors.members[index].email.message}
+              </span>
+            ) : null,
+          )}
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => append({ email: '' })}>
+          <PlusIcon className="mr-2" /> Add another
+        </Button>
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">Communication Channels</label>
+        <p className="text-sm text-muted-foreground">Choose how you&apos;d like to receive notifications.</p>
+        <div className="space-y-3">
+          <Controller
+            control={control}
+            name="channels.slack"
+            render={({ field }) => (
+              <label className="flex items-start gap-3">
+                <Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                <div className="flex flex-col gap-y-1">
+                  <span className="text-sm font-medium leading-none">Slack</span>
+                  <span className="text-sm text-muted-foreground">Get notified in your Slack workspace</span>
+                </div>
+              </label>
+            )}
+          />
+          <Controller
+            control={control}
+            name="channels.email"
+            render={({ field }) => (
+              <label className="flex items-start gap-3">
+                <Checkbox checked={field.value} onCheckedChange={(checked) => field.onChange(checked === true)} />
+                <div className="flex flex-col gap-y-1">
+                  <span className="text-sm font-medium leading-none">Email</span>
+                  <span className="text-sm text-muted-foreground">Receive updates via email</span>
+                </div>
+              </label>
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button type="button" variant="outline" onClick={() => router.push(`/${org?.slug}/graphs`)}>
+          Skip
+        </Button>
+        <Button type="submit" disabled={!isValid}>
+          Continue
+        </Button>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { getDashboardLayout } from '@/components/layout/dashboard-layout';
+import { Stepper, type StepperStep } from './stepper';
+
+const ONBOARDING_STEPS: StepperStep[] = [
+  { label: 'Settings' },
+  { label: 'What is GraphQL Federation?' },
+  { label: 'Create your first graph' },
+  { label: 'Run your services' },
+];
+
+export const getOnboardingLayout = (page: React.ReactNode, currentStep: number) => {
+  return getDashboardLayout(
+    page,
+    'Onboarding',
+    <Stepper steps={ONBOARDING_STEPS} currentStep={currentStep} className="pt-2" />,
+  );
+};

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

@@ -0,0 +1,21 @@
+import { ReactNode, useEffect } from 'react';
+import Router from 'next/router';
+import { useFeatureFlags } from '@/components/feature-flag-provider';
+
+const ONBOARDING_PATH_PREFIX = '/onboarding';
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+  const { onboarding } = useFeatureFlags();
+
+  useEffect(
+    function handleRedirectInOnboardingProvider() {
+      if (!onboarding.enabled) return;
+      if (Router.pathname.startsWith(ONBOARDING_PATH_PREFIX)) return;
+
+      Router.replace('/onboarding');
+    },
+    [onboarding.enabled],
+  );
+
+  return children;
+};

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

@@ -0,0 +1,5 @@
+import { OnboardingForm } from '@/components/onboarding/onboarding-form';
+
+export function Step1Welcome() {
+  return <OnboardingForm />;
+}

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

@@ -0,0 +1,3 @@
+export function Step2Federation() {
+  return <p>TODO: What is GraphQL Federation?</p>;
+}

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

@@ -0,0 +1,3 @@
+export function Step3CreateGraph() {
+  return <p>TODO: Create your first graph</p>;
+}

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

@@ -0,0 +1,3 @@
+export function Step4RunServices() {
+  return <p>TODO: Run your services</p>;
+}