Add create from scratch flow

coder · BrunoQuaresma · Feb 9, 2024 · Feb 8, 2024 · Feb 9, 2024 · Feb 9, 2024
commit 4c60dccc8981b88d7a6627c0391632f077f3abfa
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -6,11 +6,16 @@ import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizont
 import { DuplicateTemplateView } from "./DuplicateTemplateView";
 import { ImportStarterTemplateView } from "./ImportStarterTemplateView";
 import { UploadTemplateView } from "./UploadTemplateView";
+import { Template } from "api/typesGenerated";
 
 const CreateTemplatePage: FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
+  const onSuccess = (template: Template) => {
+    navigate(`/templates/${template.name}/files`);
+  };
+
   const onCancel = () => {
     navigate(-1);
   };
@@ -23,11 +28,11 @@ const CreateTemplatePage: FC = () => {
 
       <FullPageHorizontalForm title="Create Template" onCancel={onCancel}>
         {searchParams.has("fromTemplate") ? (
-          <DuplicateTemplateView />
+          <DuplicateTemplateView onSuccess={onSuccess} />
         ) : searchParams.has("exampleId") ? (
-          <ImportStarterTemplateView />
+          <ImportStarterTemplateView onSuccess={onSuccess} />
         ) : (
-          <UploadTemplateView />
+          <UploadTemplateView onSuccess={onSuccess} />
         )}
       </FullPageHorizontalForm>
     </>

diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -15,8 +15,15 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
 import { CreateTemplateForm } from "./CreateTemplateForm";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
+import { Template } from "api/typesGenerated";
 
-export const DuplicateTemplateView: FC = () => {
+type DuplicateTemplateViewProps = {
+  onSuccess: (template: Template) => void;
+};
+
+export const DuplicateTemplateView: FC<DuplicateTemplateViewProps> = ({
+  onSuccess,
+}) => {
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
   const [searchParams] = useSearchParams();
@@ -79,7 +86,7 @@ export const DuplicateTemplateView: FC = () => {
           ),
           template: newTemplate(formData),
         });
-        navigate(`/templates/${template.name}`);
+        onSuccess(template);
       }}
     />
   );

diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -18,8 +18,15 @@ import {
   getFormPermissions,
   newTemplate,
 } from "./utils";
+import { Template } from "api/typesGenerated";
 
-export const ImportStarterTemplateView: FC = () => {
+type ImportStarterTemplateViewProps = {
+  onSuccess: (template: Template) => void;
+};
+
+export const ImportStarterTemplateView: FC<ImportStarterTemplateViewProps> = ({
+  onSuccess,
+}) => {
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
   const [searchParams] = useSearchParams();
@@ -76,7 +83,7 @@ export const ImportStarterTemplateView: FC = () => {
           ),
           template: newTemplate(formData),
         });
-        navigate(`/templates/${template.name}`);
+        onSuccess(template);
       }}
     />
   );

diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -11,8 +11,16 @@ import { useOrganizationId } from "contexts/auth/useOrganizationId";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { CreateTemplateForm } from "./CreateTemplateForm";
 import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
+import { Template } from "api/typesGenerated";
+import { FC } from "react";
 
-export const UploadTemplateView = () => {
+type UploadTemplateViewProps = {
+  onSuccess: (template: Template) => void;
+};
+
+export const UploadTemplateView: FC<UploadTemplateViewProps> = ({
+  onSuccess,
+}) => {
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
 
@@ -61,7 +69,7 @@ export const UploadTemplateView = () => {
           ),
         });
-        navigate(`/templates/${template.name}`);
+        onSuccess(template);
       }}
     />
   );

diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -8,7 +8,7 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import AddIcon from "@mui/icons-material/AddOutlined";
 import { type FC } from "react";
-import { useNavigate, Link as RouterLink } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { createDayString } from "utils/createDayString";
 import {
   formatTemplateBuildTime,
@@ -45,6 +45,15 @@ import { docs } from "utils/docs";
 import Skeleton from "@mui/material/Skeleton";
 import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
 import { DeprecatedBadge } from "components/Badges/Badges";
+import {
+  MoreMenu,
+  MoreMenuContent,
+  MoreMenuItem,
+  MoreMenuTrigger,
+} from "components/MoreMenu/MoreMenu";
+import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined";
+import UploadOutlined from "@mui/icons-material/UploadOutlined";
+import Inventory2 from "@mui/icons-material/Inventory2";
 
 export const Language = {
   developerCount: (activeCount: number): string => {
@@ -165,25 +174,46 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
 }) => {
   const isLoading = !templates;
   const isEmpty = templates && templates.length === 0;
+  const navigate = useNavigate();
 
   return (
     <Margins>
       <PageHeader
         actions={
           canCreateTemplates && (
-            <>
-              <Button component={RouterLink} to="/starter-templates">
-                Starter Templates
-              </Button>
-              <Button
-                startIcon={<AddIcon />}
-                component={RouterLink}
-                to="new"
-                variant="contained"
-              >
-                Create Template
-              </Button>
-            </>
+            <MoreMenu>
+              <MoreMenuTrigger>
+                <Button startIcon={<AddIcon />} variant="contained">
+                  Create Template
+                </Button>
+              </MoreMenuTrigger>
+              <MoreMenuContent>
+                <MoreMenuItem
+                  onClick={() => {
+                    navigate(`/templates/new?exampleId=scratch`);
+                  }}
+                >
+                  <NoteAddOutlined />
+                  From scratch
+                </MoreMenuItem>
+                <MoreMenuItem
+                  onClick={() => {
+                    navigate("/templates/new");
+                  }}
+                >
+                  <UploadOutlined />
+                  Upload template
+                </MoreMenuItem>
+                <MoreMenuItem
+                  onClick={() => {
+                    navigate("/starter-templates");
+                  }}
+                >
+                  <Inventory2 />
+                  Choose a starter template
+                </MoreMenuItem>
+              </MoreMenuContent>
+            </MoreMenu>
           )
         }
       >