feat: create/update onboarding on first step

Author: comatory

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

@@ -2,9 +2,42 @@ import { useEffect } from 'react';
 import { Link } from '../ui/link';
 import { Button } from '../ui/button';
 import { useOnboarding } from '@/hooks/use-onboarding';
+import { useMutation } from '@connectrpc/connect-query';
+import { createOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
+import { useRouter } from 'next/router';
+import { useCurrentOrganization } from '@/hooks/use-current-organization';
+import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
+import { useToast } from '../ui/use-toast';
 
 export const Step1 = () => {
-  const { setStep, setSkipped } = useOnboarding();
+  const router = useRouter();
+  const { toast } = useToast();
+  const organization = useCurrentOrganization();
+  const { setStep, setSkipped, setOnboarding } = useOnboarding();
+
+  const { mutate, isPending } = useMutation(createOnboarding, {
+    onSuccess: (d) => {
+      if (d.response?.code !== EnumStatusCode.OK) {
+        toast({
+          description: d.response?.details ?? 'We had issues with storing your data. Please try again.',
+          duration: 3000,
+        });
+        return;
+      }
+
+      setOnboarding({
+        federatedGraphsCount: d.federatedGraphsCount,
+        finishedAt: d.finishedAt ? new Date(d.finishedAt) : undefined,
+      });
+      router.push('/onboarding/2');
+    },
+    onError: (error) => {
+      toast({
+        description: error.details.toString() ?? 'We had issues with storing your data. Please try again.',
+        duration: 3000,
+      });
+    },
+  });
 
   useEffect(() => {
     setStep(1);
@@ -21,8 +54,20 @@ export const Step1 = () => {
           <Button className="mr-2" asChild disabled>
             <Link href="#">Back</Link>
           </Button>
-          <Button asChild>
-            <Link href="/onboarding/2">Next</Link>
+          <Button
+            onClick={() => {
+              // TODO: replace with real values in form
+              mutate({
+                organizationName: organization?.name ?? '',
+                slack: true,
+                email: false,
+                invititationEmails: [],
+              });
+            }}
+            isLoading={isPending}
+            disabled={isPending}
+          >
+            Next
           </Button>
         </div>
       </div>