Refactor upload view

coder · BrunoQuaresma · Oct 9, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
commit a95ed6d4a2c58a52d6723ebd4acfbbc5e83330f0
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1104,7 +1104,7 @@ export const getTemplateExamples = async (
   return response.data;
 };
 
-export const uploadTemplateFile = async (
+export const uploadFile = async (
   file: File,
 ): Promise<TypesGen.UploadResponse> => {
   const response = await axios.post("/api/v2/files", file, {

diff --git a/site/src/api/queries/files.ts b/site/src/api/queries/files.ts
@@ -0,0 +1,7 @@
+import * as API from "api/api";
+
+export const uploadFile = () => {
+  return {
+    mutationFn: API.uploadFile,
+  };
+};
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -5,36 +5,11 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
 import { DuplicateTemplateView } from "./DuplicateTemplateView";
 import { ImportStarterTemplateView } from "./ImportStarterTemplateView";
+import { UploadTemplateView } from "./UploadTemplateView";
 
 const CreateTemplatePage: FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  // const organizationId = useOrganizationId();
-  // const [state, send] = useMachine(createTemplateMachine, {
-  //   context: {
-  //     organizationId,
-  //     exampleId: searchParams.get("exampleId"),
-  //     templateNameToCopy: searchParams.get("fromTemplate"),
-  //   },
-  //   actions: {
-  //     onCreate: (_, { data }) => {
-  //       navigate(`/templates/${data.name}`);
-  //     },
-  //   },
-  // });
-
-  // const { starterTemplate, error, file, jobError, jobLogs, variables } =
-  //   state.context;
-  // const shouldDisplayForm = !state.hasTag("loading");
-  // const { entitlements } = useDashboard();
-  // const allowAdvancedScheduling =
-  //   entitlements.features["advanced_template_scheduling"].enabled;
-  // // Requires the template RBAC feature, otherwise disabling everyone access
-  // // means no one can access.
-  // const allowDisableEveryoneAccess =
-  //   entitlements.features["template_rbac"].enabled;
-  // const allowAutostopRequirement =
-  //   entitlements.features["template_autostop_requirement"].enabled;
 
   const onCancel = () => {
     navigate(-1);
@@ -54,52 +29,9 @@ const CreateTemplatePage: FC = () => {
         ) : (
           <UploadTemplateView />
         )}
-        {/* {state.hasTag("loading") && <Loader />}
-
-        <Stack spacing={6}>
-          {Boolean(error) && !isApiValidationError(error) && (
-            <ErrorAlert error={error} />
-          )}
-
-          {shouldDisplayForm && (
-            <CreateTemplateForm
-              copiedTemplate={state.context.copiedTemplate}
-              allowAdvancedScheduling={allowAdvancedScheduling}
-              allowDisableEveryoneAccess={allowDisableEveryoneAccess}
-              allowAutostopRequirement={allowAutostopRequirement}
-              error={error}
-              starterTemplate={starterTemplate}
-              isSubmitting={state.hasTag("submitting")}
-              variables={variables}
-              onCancel={onCancel}
-              onSubmit={(data) => {
-                send({
-                  type: "CREATE",
-                  data,
-                });
-              }}
-              upload={{
-                file,
-                isUploading: state.matches("uploading"),
-                onRemove: () => {
-                  send("REMOVE_FILE");
-                },
-                onUpload: (file) => {
-                  send({ type: "UPLOAD_FILE", file });
-                },
-              }}
-              jobError={jobError}
-              logs={jobLogs}
-            />
-          )}
-        </Stack> */}
       </FullPageHorizontalForm>
     </>
   );
 };
 
-const UploadTemplateView = () => {
-  return <div>Upload</div>;
-};
-
 export default CreateTemplatePage;
diff --git a/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx b/site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx
@@ -13,7 +13,7 @@ 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";
+import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
 
 export const DuplicateTemplateView = () => {
   const navigate = useNavigate();
@@ -73,8 +73,8 @@ export const DuplicateTemplateView = () => {
       onSubmit={async (formData) => {
         const template = await createTemplateMutation.mutateAsync({
           organizationId,
-          version: firstVersion(
-            templateVersionQuery.data!,
+          version: firstVersionFromFile(
+            templateVersionQuery.data!.job.file_id,
             formData.user_variable_values,
           ),
           template: newTemplate(formData),

diff --git a/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx b/site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx
@@ -11,7 +11,11 @@ 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";
+import {
+  firstVersionFromExample,
+  getFormPermissions,
+  newTemplate,
+} from "./utils";
 
 export const ImportStarterTemplateView = () => {
   const navigate = useNavigate();
@@ -56,7 +60,7 @@ export const ImportStarterTemplateView = () => {
       onSubmit={async (formData) => {
         const template = await createTemplateMutation.mutateAsync({
           organizationId,
-          version: firstVersion(
+          version: firstVersionFromExample(
             templateExample!,
             formData.user_variable_values,
           ),

diff --git a/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx b/site/src/pages/CreateTemplatePage/UploadTemplateView.tsx
@@ -0,0 +1,56 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { templateVersionLogs } from "api/queries/templateVersions";
+import { JobError, createTemplate } from "api/queries/templates";
+import { useOrganizationId } from "hooks";
+import { useNavigate } from "react-router-dom";
+import { CreateTemplateForm } from "./CreateTemplateForm";
+import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
+import { uploadFile } from "api/queries/files";
+
+export const UploadTemplateView = () => {
+  const navigate = useNavigate();
+  const organizationId = useOrganizationId();
+
+  const dashboard = useDashboard();
+  const formPermissions = getFormPermissions(dashboard.entitlements);
+
+  const uploadFileMutation = useMutation(uploadFile());
+  const uploadedFile = uploadFileMutation.data;
+
+  const createTemplateMutation = useMutation(createTemplate());
+  const createError = createTemplateMutation.error;
+  const isJobError = createError instanceof JobError;
+  const templateVersionLogsQuery = useQuery({
+    ...templateVersionLogs(isJobError ? createError.version.id : ""),
+    enabled: isJobError,
+  });
+
+  return (
+    <CreateTemplateForm
+      {...formPermissions}
+      error={createTemplateMutation.error}
+      isSubmitting={createTemplateMutation.isLoading}
+      onCancel={() => navigate(-1)}
+      jobError={isJobError ? createError.job.error : undefined}
+      logs={templateVersionLogsQuery.data}
+      upload={{
+        onUpload: uploadFileMutation.mutateAsync,
+        isUploading: uploadFileMutation.isLoading,
+        onRemove: uploadFileMutation.reset,
+        file: uploadFileMutation.variables,
+      }}
+      onSubmit={async (formData) => {
+        const template = await createTemplateMutation.mutateAsync({
+          organizationId,
+          version: firstVersionFromFile(
+            uploadedFile!.hash,
+            formData.user_variable_values,
+          ),
+          template: newTemplate(formData),
+        });
+        navigate(`/templates/${template.name}`);
+      }}
+    />
+  );
+};
diff --git a/site/src/pages/CreateTemplatePage/utils.ts b/site/src/pages/CreateTemplatePage/utils.ts
@@ -2,7 +2,6 @@ import {
   Entitlements,
   ProvisionerType,
   TemplateExample,
-  TemplateVersion,
   VariableValue,
 } from "api/typesGenerated";
 import { calculateAutostopRequirementDaysValue } from "utils/schedule";
@@ -54,26 +53,28 @@ export const getFormPermissions = (entitlements: Entitlements) => {
   };
 };
 
-export const firstVersion = (
-  base: TemplateVersion | TemplateExample,
+export const firstVersionFromFile = (
+  fileId: string,
   variables: VariableValue[] | undefined,
 ) => {
-  const baseReq = {
+  return {
     storage_method: "file" as const,
     provisioner: provisioner,
     user_variable_values: variables,
+    file_id: fileId,
     tags: {},
   };
+};
 
-  if ("job" in base) {
-    return {
-      ...baseReq,
-      file_id: base.job.file_id,
-    };
-  }
-
+export const firstVersionFromExample = (
+  example: TemplateExample,
+  variables: VariableValue[] | undefined,
+) => {
   return {
-    ...baseReq,
-    example_id: base.id,
+    storage_method: "file" as const,
+    provisioner: provisioner,
+    user_variable_values: variables,
+    example_id: example.id,
+    tags: {},
   };
 };
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx
@@ -30,7 +30,7 @@ test("Use custom name, message and set it as active when publishing", async () =
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
-  jest.spyOn(api, "uploadTemplateFile").mockResolvedValueOnce({ hash: "hash" });
+  jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
   jest
     .spyOn(api, "createTemplateVersion")
     .mockResolvedValueOnce(MockTemplateVersion);
@@ -95,7 +95,7 @@ test("Do not mark as active if promote is not checked", async () => {
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
-  jest.spyOn(api, "uploadTemplateFile").mockResolvedValueOnce({ hash: "hash" });
+  jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
   jest
     .spyOn(api, "createTemplateVersion")
     .mockResolvedValueOnce(MockTemplateVersion);
@@ -162,7 +162,7 @@ test("Patch request is not send when there are no changes", async () => {
   const topbar = await screen.findByTestId("topbar");
 
   // Build Template
-  jest.spyOn(api, "uploadTemplateFile").mockResolvedValueOnce({ hash: "hash" });
+  jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
   jest
     .spyOn(api, "createTemplateVersion")
     .mockResolvedValueOnce(MockTemplateVersionWithEmptyMessage);

diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts
@@ -3,7 +3,7 @@ import {
   createTemplateVersion,
   getTemplateVersion,
   createTemplate,
-  uploadTemplateFile,
+  uploadFile,
   getTemplateVersionLogs,
   getTemplateVersionVariables,
   getTemplateByName,
@@ -320,7 +320,7 @@ export const createTemplateMachine =
     },
     {
       services: {
-        uploadFile: (_, { file }) => uploadTemplateFile(file),
+        uploadFile: (_, { file }) => uploadFile(file),
         loadStarterTemplate: async ({ organizationId, exampleId }) => {
           if (!exampleId) {
             throw new Error(`Example ID is not defined.`);

diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -350,7 +350,7 @@ export const templateVersionEditorMachine = createMachine(
           tar.addFolder(fullPath);
         });
         const blob = (await tar.write()) as Blob;
-        return API.uploadTemplateFile(new File([blob], "template.tar"));
+        return API.uploadFile(new File([blob], "template.tar"));
       },
       createBuild: (ctx) => {
         if (!ctx.uploadResponse) {