Refactor ImportStarterTemplateView

BrunoQuaresma · BrunoQuaresma · commit db14220cc986 · 2023-10-06T16:37:29.000Z
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -4,6 +4,7 @@ import { Helmet } from "react-helmet-async";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { DuplicateTemplateView } from "./DuplicateTemplateView";
+import { ImportStarterTemplateView } from "./ImportStarterTemplateView";
 
 const CreateTemplatePage: FC = () => {
   const navigate = useNavigate();
@@ -49,7 +50,7 @@ const CreateTemplatePage: FC = () => {
         {searchParams.has("fromTemplate") ? (
           <DuplicateTemplateView />
         ) : searchParams.has("exampleId") ? (
-          <ImportStaterTemplateView />
+          <ImportStarterTemplateView />
         ) : (
           <UploadTemplateView />
         )}
@@ -97,10 +98,6 @@ const CreateTemplatePage: FC = () => {
   );
 };
 
-const ImportStaterTemplateView = () => {
-  return <div>Import</div>;
-};
-
 const UploadTemplateView = () => {
   return <div>Upload</div>;
 };
diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -0,0 +1,69 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { templateVersionLogs } from "api/queries/templateVersions";
+import {
+  JobError,
+  createTemplate,
+  templateExamples,
+} from "api/queries/templates";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { useOrganizationId } from "hooks";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CreateTemplateForm } from "./CreateTemplateForm";
+import { Loader } from "components/Loader/Loader";
+import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { firstVersion, getFormPermissions, newTemplate } from "./utils";
+
+export const ImportStarterTemplateView = () => {
+  const navigate = useNavigate();
+  const organizationId = useOrganizationId();
+  const [searchParams] = useSearchParams();
+  const templateExamplesQuery = useQuery(templateExamples(organizationId));
+  const templateExample = templateExamplesQuery.data?.find(
+    (e) => e.id === searchParams.get("exampleId")!,
+  );
+
+  const isLoading = templateExamplesQuery.isLoading;
+  const loadingError = templateExamplesQuery.error;
+
+  const dashboard = useDashboard();
+  const formPermissions = getFormPermissions(dashboard.entitlements);
+
+  const createTemplateMutation = useMutation(createTemplate());
+  const createError = createTemplateMutation.error;
+  const isJobError = createError instanceof JobError;
+  const templateVersionLogsQuery = useQuery({
+    ...templateVersionLogs(isJobError ? createError.version.id : ""),
+    enabled: isJobError,
+  });
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (loadingError) {
+    return <ErrorAlert error={loadingError} />;
+  }
+
+  return (
+    <CreateTemplateForm
+      {...formPermissions}
+      starterTemplate={templateExample!}
+      error={createTemplateMutation.error}
+      isSubmitting={createTemplateMutation.isLoading}
+      onCancel={() => navigate(-1)}
+      jobError={isJobError ? createError.job.error : undefined}
+      logs={templateVersionLogsQuery.data}
+      onSubmit={async (formData) => {
+        const template = await createTemplateMutation.mutateAsync({
+          organizationId,
+          version: firstVersion(
+            templateExample!,
+            formData.user_variable_values,
+          ),
+          template: newTemplate(formData),
+        });
+        navigate(`/templates/${template.name}`);
+      }}
+    />
+  );
+};
