From 4ee877aaec7794a805f25958d9410bc8343caef4 Mon Sep 17 00:00:00 2001
From: Kacper Wojciechowski <39823706+jog1t@users.noreply.github.com>
Date: Sat, 14 Dec 2024 23:38:31 +0100
Subject: [PATCH] feat: new onboarding

---
 apps/hub/src/components/command-panel.tsx     | 10 ++++
 .../command-panel-navigation-provider.tsx     | 11 +++-
 .../environment-command-panel-page.tsx        |  2 +-
 apps/hub/src/components/error-component.tsx   |  2 +
 apps/hub/src/components/get-started.tsx       | 51 ++-----------------
 .../components/header/header-route-loader.tsx |  7 +--
 apps/hub/src/components/intro.tsx             | 35 ++++++++++---
 apps/hub/src/components/shimmer-line.tsx      | 17 +++++++
 .../forms/group-create-project-form.tsx       |  4 +-
 .../domains/project/queries/backend/types.ts  |  2 +-
 .../routes/_authenticated/_layout/index.tsx   |  8 ++-
 .../$environmentNameId/actors.tsx             | 18 ++++---
 .../components/src/lib/create-schema-form.tsx |  5 +-
 13 files changed, 97 insertions(+), 75 deletions(-)
 create mode 100644 apps/hub/src/components/shimmer-line.tsx

diff --git a/apps/hub/src/components/command-panel.tsx b/apps/hub/src/components/command-panel.tsx
index 56da85e8..0bbdad5f 100644
--- a/apps/hub/src/components/command-panel.tsx
+++ b/apps/hub/src/components/command-panel.tsx
@@ -7,6 +7,7 @@ import {
   CommandLoading,
   cn,
 } from "@rivet-gg/components";
+import { useIsFetching } from "@tanstack/react-query";
 import { useMatchRoute } from "@tanstack/react-router";
 import {
   type KeyboardEventHandler,
@@ -25,6 +26,7 @@ import { EnvironmentCommandPanelPage } from "./command-panel/command-panel-page/
 import { GroupCommandPanelPage } from "./command-panel/command-panel-page/group-command-panel-page";
 import { IndexCommandPanelPage } from "./command-panel/command-panel-page/index-command-panel-page";
 import { ProjectCommandPanelPage } from "./command-panel/command-panel-page/project-command-panel-page";
+import { ShimmerLine } from "./shimmer-line";
 
 export function CommandPanel() {
   const [isOpen, setOpen] = useState(false);
@@ -125,6 +127,11 @@ export function CommandPanel() {
     [pages.length, search],
   );
 
+  const isLoading =
+    useIsFetching({
+      predicate: (query) => !query.queryKey.includes("watch"),
+    }) > 0;
+
   return (
     <>
       <Button
@@ -143,6 +150,7 @@ export function CommandPanel() {
       <CommandDialog
         commandProps={{
           onKeyDown: handleKeyDown,
+          shouldFilter: !isLoading,
         }}
         open={isOpen}
         onOpenChange={setOpen}
@@ -154,11 +162,13 @@ export function CommandPanel() {
           placeholder="Type a command or search..."
         />
         <CommandPanelNavigationProvider
+          isLoading={isLoading}
           onClose={handleClose}
           onChangePage={handlePageChange}
         >
           <CommandList>
             <Suspense fallback={<CommandLoading>Hang on…</CommandLoading>}>
+              {isLoading ? <ShimmerLine className="-top-[1px]" /> : null}
               <CommandEmpty>No results found.</CommandEmpty>
               {!page ? <IndexCommandPanelPage /> : null}
               {page?.key === "group" ? (
diff --git a/apps/hub/src/components/command-panel/command-panel-navigation-provider.tsx b/apps/hub/src/components/command-panel/command-panel-navigation-provider.tsx
index 4bdcaed3..6af80087 100644
--- a/apps/hub/src/components/command-panel/command-panel-navigation-provider.tsx
+++ b/apps/hub/src/components/command-panel/command-panel-navigation-provider.tsx
@@ -56,10 +56,12 @@ export function CommandPanelNavigationProvider({
   children,
   onClose,
   onChangePage,
+  isLoading,
 }: {
   children: ReactNode;
   onClose: () => void;
   onChangePage: (page: CommandPanelPage) => void;
+  isLoading: boolean;
 }) {
   const routerNavigate = useNavigate();
 
@@ -73,9 +75,16 @@ export function CommandPanelNavigationProvider({
     [onClose, routerNavigate],
   );
 
+  const handleChangePage = (page: CommandPanelPage) => {
+    if (isLoading) {
+      return;
+    }
+    onChangePage(page);
+  };
+
   return (
     <CommandPanelNavigationContext.Provider
-      value={{ changePage: onChangePage, close: onClose, navigate }}
+      value={{ changePage: handleChangePage, close: onClose, navigate }}
     >
       {children}
     </CommandPanelNavigationContext.Provider>
diff --git a/apps/hub/src/components/command-panel/command-panel-page/environment-command-panel-page.tsx b/apps/hub/src/components/command-panel/command-panel-page/environment-command-panel-page.tsx
index 45c80f11..9d63dcbd 100644
--- a/apps/hub/src/components/command-panel/command-panel-page/environment-command-panel-page.tsx
+++ b/apps/hub/src/components/command-panel/command-panel-page/environment-command-panel-page.tsx
@@ -51,7 +51,7 @@ export function EnvironmentCommandPanelPage({
     },
   ] = useSuspenseQueries({
     queries: [
-      projectQueryOptions(projectNameId),
+      projectQueryOptions(projectId),
       projectMetadataQueryOptions({ projectId, environmentId }),
     ],
   });
diff --git a/apps/hub/src/components/error-component.tsx b/apps/hub/src/components/error-component.tsx
index 82d55af1..87626636 100644
--- a/apps/hub/src/components/error-component.tsx
+++ b/apps/hub/src/components/error-component.tsx
@@ -65,6 +65,8 @@ export const ErrorComponent = ({
         <Button
           onClick={() => {
             router.invalidate();
+            queryClient.resetQueries();
+            queryClient.invalidateQueries();
             reset?.();
           }}
         >
diff --git a/apps/hub/src/components/get-started.tsx b/apps/hub/src/components/get-started.tsx
index eaa2c86e..de185524 100644
--- a/apps/hub/src/components/get-started.tsx
+++ b/apps/hub/src/components/get-started.tsx
@@ -19,12 +19,9 @@ import {
   faChevronRight,
   faCircleNodes,
   faCode,
-  faCog,
   faDiagramNext,
   faGamepadAlt,
-  faHandWave,
   faSparkles,
-  faToolbox,
   faUpRightAndDownLeftFromCenter,
   faWifiSlash,
 } from "@rivet-gg/icons";
@@ -70,7 +67,7 @@ export function GetStarted() {
         <Button
           onClick={() => {
             document
-              .getElementById("getting-started")
+              .getElementById("examples")
               ?.scrollIntoView({ behavior: "smooth" });
           }}
           endIcon={<Icon icon={faChevronDoubleDown} />}
@@ -109,49 +106,7 @@ export function GetStarted() {
           </div>
         </CardContent>
       </Card>
-      <Card
-        id="getting-started"
-        asChild
-        className="max-w-xl w-full mx-auto my-6 scroll-mt-28"
-      >
-        <motion.div>
-          <CardHeader>
-            <CardTitle>Getting Started</CardTitle>
-            <CardDescription>
-              Learn how Rivet works and how you can customize it to suit your
-              needs.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <motion.div
-              variants={containerVariants}
-              initial="hidden"
-              whileInView="show"
-              className="grid md:grid-cols-3 gap-4"
-            >
-              <ExampleLink
-                href="examples"
-                title="Intro to Rivet"
-                size="md"
-                icon={faHandWave}
-              />
-              <ExampleLink
-                href="examples"
-                title="Initial Setup"
-                size="md"
-                icon={faToolbox}
-              />
-              <ExampleLink
-                href="examples"
-                title="Configuration"
-                size="md"
-                icon={faCog}
-              />
-            </motion.div>
-          </CardContent>
-        </motion.div>
-      </Card>
-      <Card asChild className="max-w-xl w-full mx-auto my-6">
+      <Card id="examples" asChild className="max-w-xl w-full mx-auto my-6">
         <motion.div>
           <CardHeader>
             <CardTitle>Examples</CardTitle>
@@ -165,6 +120,7 @@ export function GetStarted() {
               variants={containerVariants}
               initial="hidden"
               whileInView="show"
+              viewport={{ once: true }}
               className="grid md:grid-cols-3 gap-4"
             >
               <ExampleLink
@@ -214,6 +170,7 @@ export function GetStarted() {
               variants={containerVariants}
               initial="hidden"
               whileInView="show"
+              viewport={{ once: true }}
               className="grid md:grid-cols-2 gap-4"
             >
               <ExampleLink
diff --git a/apps/hub/src/components/header/header-route-loader.tsx b/apps/hub/src/components/header/header-route-loader.tsx
index 3322b517..8b63974c 100644
--- a/apps/hub/src/components/header/header-route-loader.tsx
+++ b/apps/hub/src/components/header/header-route-loader.tsx
@@ -1,4 +1,5 @@
 import { useRouterState } from "@tanstack/react-router";
+import { ShimmerLine } from "../shimmer-line";
 
 export function HeaderRouteLoader() {
   const isLoading = useRouterState({
@@ -8,9 +9,5 @@ export function HeaderRouteLoader() {
   if (!isLoading) {
     return null;
   }
-  return (
-    <div className="animate-in fade-in absolute inset-x-0 -bottom-1 w-full overflow-hidden">
-      <div className="animate-bounce-x from-secondary/0 via-primary to-secondary/0 relative -bottom-px h-1 bg-gradient-to-r" />
-    </div>
-  );
+  return <ShimmerLine className="-bottom-1" />;
 }
diff --git a/apps/hub/src/components/intro.tsx b/apps/hub/src/components/intro.tsx
index c458dec1..88e2cd13 100644
--- a/apps/hub/src/components/intro.tsx
+++ b/apps/hub/src/components/intro.tsx
@@ -16,8 +16,9 @@ import {
   CardTitle,
   Skeleton,
 } from "@rivet-gg/components";
+import * as Sentry from "@sentry/react";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
+import { Navigate, useNavigate } from "@tanstack/react-router";
 import { motion } from "framer-motion";
 import { Suspense, useState } from "react";
 
@@ -27,7 +28,12 @@ enum Step {
   ChoosePlan = 2,
 }
 
-export function Intro({ initialStep }: { initialStep?: Step }) {
+interface IntroProps {
+  initialStep?: Step;
+  initialProjectName?: string;
+}
+
+export function Intro({ initialStep, initialProjectName }: IntroProps) {
   const { mutateAsync, data: createdGroupResponse } = useGroupCreateMutation();
   const { mutateAsync: createProject, data: projectCreationData } =
     useProjectCreateMutation();
@@ -38,14 +44,13 @@ export function Intro({ initialStep }: { initialStep?: Step }) {
     data
       .flatMap((team) => team.projects)
       .find((project) => project.gameId === projectCreationData?.gameId) ||
-    // biome-ignore lint/style/noNonNullAssertion: at this point user should have at least one project
-    data.find((team) => team.projects.length > 0)!.projects[0]!;
+    data.find((team) => team.projects.length > 0)?.projects[0];
 
   const [step, setStep] = useState<Step>(
     () => initialStep ?? (!project ? Step.CreateGroup : Step.CreateProject),
   );
 
-  const groupId = createdGroupResponse?.groupId || project.developer.groupId;
+  const groupId = createdGroupResponse?.groupId || project?.developer.groupId;
 
   const navigate = useNavigate();
 
@@ -60,7 +65,10 @@ export function Intro({ initialStep }: { initialStep?: Step }) {
             exit={{ opacity: 0 }}
           >
             <GroupCreateProjectForm.Form
-              defaultValues={{ slug: "", name: "" }}
+              defaultValues={{
+                slug: "",
+                name: initialProjectName ?? "",
+              }}
               onSubmit={async (values) => {
                 await createProject({
                   displayName: values.name,
@@ -80,6 +88,12 @@ export function Intro({ initialStep }: { initialStep?: Step }) {
               </CardHeader>
               <CardContent>
                 <div className="grid grid-cols-[auto_auto_min-content] items-center gap-4 ">
+                  {initialProjectName ? (
+                    <GroupCreateProjectForm.SetValue
+                      name="name"
+                      value={initialProjectName}
+                    />
+                  ) : null}
                   <GroupCreateProjectForm.Name className="contents space-y-0" />
                   <GroupCreateProjectForm.Slug className="contents space-y-0" />
                   <GroupCreateProjectForm.Submit
@@ -98,6 +112,15 @@ export function Intro({ initialStep }: { initialStep?: Step }) {
   }
 
   if (step === Step.ChoosePlan) {
+    if (!groupId || !project) {
+      // At this point those values should be defined, if not, we should redirect to the home page
+      // It's unlikely that this will happen, but it's better to be safe than sorry
+      Sentry.captureMessage(
+        "Group or project not defined in Intro component",
+        "fatal",
+      );
+      return <Navigate to="/" replace />;
+    }
     return (
       <Suspense
         fallback={
diff --git a/apps/hub/src/components/shimmer-line.tsx b/apps/hub/src/components/shimmer-line.tsx
new file mode 100644
index 00000000..ed4f2b09
--- /dev/null
+++ b/apps/hub/src/components/shimmer-line.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@rivet-gg/components";
+
+interface ShimmerLineProps {
+  className?: string;
+}
+export const ShimmerLine = ({ className }: ShimmerLineProps) => {
+  return (
+    <div
+      className={cn(
+        "animate-in fade-in absolute inset-x-0  w-full overflow-hidden",
+        className,
+      )}
+    >
+      <div className="animate-bounce-x from-secondary/0 via-primary to-secondary/0 relative -bottom-px h-1 bg-gradient-to-r" />
+    </div>
+  );
+};
diff --git a/apps/hub/src/domains/project/forms/group-create-project-form.tsx b/apps/hub/src/domains/project/forms/group-create-project-form.tsx
index 36ab4bce..70243db1 100644
--- a/apps/hub/src/domains/project/forms/group-create-project-form.tsx
+++ b/apps/hub/src/domains/project/forms/group-create-project-form.tsx
@@ -46,8 +46,8 @@ export type SubmitHandler = (
   form: UseFormReturn<FormValues>,
 ) => Promise<void>;
 
-const { Form, Submit } = createSchemaForm(formSchema);
-export { Form, Submit };
+const { Form, Submit, SetValue } = createSchemaForm(formSchema);
+export { Form, Submit, SetValue };
 
 export const Name = ({ className }: { className?: string }) => {
   const { control } = useFormContext<FormValues>();
diff --git a/apps/hub/src/domains/project/queries/backend/types.ts b/apps/hub/src/domains/project/queries/backend/types.ts
index 1e79ed4d..b0cfd87e 100644
--- a/apps/hub/src/domains/project/queries/backend/types.ts
+++ b/apps/hub/src/domains/project/queries/backend/types.ts
@@ -37,7 +37,7 @@ type Event = z.infer<typeof Event>;
 
 export const BackendEvent = z
   .object({
-    dispatchEnvironment: z.string(),
+    dispatchEnvironment: z.string().optional(),
     event: Event,
     eventTimestamp: z.string(),
     logs: z
diff --git a/apps/hub/src/routes/_authenticated/_layout/index.tsx b/apps/hub/src/routes/_authenticated/_layout/index.tsx
index 7a67782d..55fcc920 100644
--- a/apps/hub/src/routes/_authenticated/_layout/index.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/index.tsx
@@ -8,7 +8,7 @@ import { LayoutGroup, motion } from "framer-motion";
 import { z } from "zod";
 
 function IndexRoute() {
-  const { initialStep } = Route.useSearch();
+  const { initialStep, project_name: projectName } = Route.useSearch();
   return (
     <>
       <OnboardingBackground />
@@ -34,7 +34,10 @@ function IndexRoute() {
             animate={{ opacity: 1, transition: { delay: 0.5 } }}
           >
             <LayoutGroup>
-              <Intro initialStep={initialStep} />
+              <Intro
+                initialProjectName={projectName}
+                initialStep={initialStep}
+              />
             </LayoutGroup>
           </motion.div>
         </div>
@@ -46,6 +49,7 @@ function IndexRoute() {
 const searchSchema = z.object({
   newbie: z.coerce.boolean().optional(),
   initialStep: z.coerce.number().optional(),
+  project_name: z.coerce.string().optional(),
 });
 
 export const Route = createFileRoute("/_authenticated/_layout/")({
diff --git a/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/actors.tsx b/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/actors.tsx
index c463f12f..9cc6b2ee 100644
--- a/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/actors.tsx
+++ b/apps/hub/src/routes/_authenticated/_layout/projects/$projectNameId/environments/$environmentNameId/actors.tsx
@@ -30,14 +30,16 @@ function ProjectActorsRoute() {
   if (data.length === 0) {
     return (
       <div className="w-full h-full flex flex-col justify-center">
-        <Icon icon={faActors} className="text-6xl mx-auto my-4" />
-        <h3 className="text-center font-bold text-xl max-w-md mb-2 mx-auto">
-          Deploy your first Actor
-        </h3>
-        <p className="text-center text-muted-foreground max-w-sm mx-auto">
-          Install Rivet to get started or use an existing template to get
-          started.
-        </p>
+        <div className="flex flex-col justify-center my-8">
+          <Icon icon={faActors} className="text-6xl mx-auto my-4" />
+          <h3 className="text-center font-bold text-xl max-w-md mb-2 mx-auto">
+            Deploy your first Actor
+          </h3>
+          <p className="text-center text-muted-foreground max-w-sm mx-auto">
+            Install Rivet to get started or use an existing template to get
+            started.
+          </p>
+        </div>
         <GetStarted />
       </div>
     );
diff --git a/packages/components/src/lib/create-schema-form.tsx b/packages/components/src/lib/create-schema-form.tsx
index 4ce5390f..7501903c 100644
--- a/packages/components/src/lib/create-schema-form.tsx
+++ b/packages/components/src/lib/create-schema-form.tsx
@@ -89,10 +89,11 @@ export const createSchemaForm = <Schema extends z.ZodSchema>(
       name: Path;
       value: PathValue<z.TypeOf<Schema>, Path>;
     }) => {
-      const { setValue } = useFormContext<z.TypeOf<Schema>>();
+      const { setValue, reset } = useFormContext<z.TypeOf<Schema>>();
       useEffect(() => {
         setValue(props.name, props.value, { shouldDirty: true });
-      }, [props.name, setValue, props.value]);
+        reset({}, { keepDirty: true, keepValues: true, keepDirtyValues: true });
+      }, [props.name, setValue, reset, props.value]);
       return null;
     },
     useContext: () => useFormContext<z.TypeOf<Schema>>(),