Add upload

coder · BrunoQuaresma · Dec 21, 2022 · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022
commit fe71988b18f635eb77bed4e153b18a0174e7da9b
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -744,60 +744,13 @@ export const getTemplateExamples = async (
   return response.data
 }
 
-// for creating a new template:
-// 1. upload template tar or use the example ID
-// 2. create template version
-// 3. wait for it to complete
-// 4. if the job failed with the missing parameter error then:
-//    a. prompt for params
-//    b. create template version again with the same file hash
-//    c. wait for it to complete
-// 5.create template with the successful template version ID
-// https://github.com/coder/coder/blob/b6703b11c6578b2f91a310d28b6a7e57f0069be6/cli/templatecreate.go#L169-L170
-export const createValidTemplate = async (
-  organizationId: string,
-  exampleId: string,
-  // The template_version_id is calculated in the function
-  data: Omit<TypesGen.CreateTemplateRequest, "template_version_id">,
-): Promise<TypesGen.Template> => {
-  // Step 2.
-  let version = await createTemplateVersion(organizationId, {
-    storage_method: "file",
-    example_id: exampleId,
-    provisioner: "terraform",
-    tags: {},
-  })
-
-  // Step 3.
-  let status = version.job.status
-  while (["pending", "running"].includes(status)) {
-    version = await getTemplateVersion(version.id)
-    status = version.job.status
-  }
-  if (status === "failed") {
-    console.error(version.job.error)
-    throw new Error(version.job.error)
-  }
-
-  // // Get schema and create a new template version with the parameters
-  // const schema = await getTemplateVersionSchema(version.id)
-  // version = await createTemplateVersion(organizationId, {
-  //   storage_method: "file",
-  //   example_id: exampleId,
-  //   provisioner: "terraform",
-  //   tags: {},
-  //   parameter_values: schema.map((parameter) => ({
-  //     name: parameter.name,
-  //     source_scheme: parameter.default_source_scheme,
-  //     destination_scheme: parameter.default_destination_scheme,
-  //     source_value: parameter.default_source_value,
-  //   })),
-  // })
-
-  // Step 5.
-  const template = await createTemplate(organizationId, {
-    ...data,
-    template_version_id: version.id,
+export const uploadTemplateFile = async (
+  file: File,
+): Promise<TypesGen.UploadResponse> => {
+  const response = await axios.post("/api/v2/files", file, {
+    headers: {
+      "Content-Type": "application/x-tar",
+    },
   })
-  return template
+  return response.data
 }
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -6,6 +6,10 @@ import { FormFooter } from "components/FormFooter/FormFooter"
 import { IconField } from "components/IconField/IconField"
 import { ParameterInput } from "components/ParameterInput/ParameterInput"
 import { Stack } from "components/Stack/Stack"
+import {
+  TemplateUpload,
+  TemplateUploadProps,
+} from "pages/CreateTemplatePage/TemplateUpload"
 import { useFormik } from "formik"
 import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"
 import { FC } from "react"
@@ -55,6 +59,7 @@ interface CreateTemplateFormProps {
   isSubmitting: boolean
   onCancel: () => void
   onSubmit: (data: CreateTemplateData) => void
+  upload: TemplateUploadProps
 }
 
 export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
@@ -64,6 +69,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
   isSubmitting,
   onCancel,
   onSubmit,
+  upload,
 }) => {
   const styles = useStyles()
   const formFooterStyles = useFormFooterStyles()
@@ -90,7 +96,11 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
           </div>
 
           <Stack direction="column" className={styles.formSectionFields}>
-            {starterTemplate && <SelectedTemplate template={starterTemplate} />}
+            {starterTemplate ? (
+              <SelectedTemplate template={starterTemplate} />
+            ) : (
+              <TemplateUpload {...upload} />
+            )}
 
             <TextField
               {...getFieldHelpers("name")}

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx b/site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx
@@ -27,7 +27,7 @@ const CreateTemplatePage: FC = () => {
       },
     },
   })
-  const { starterTemplate, parameters, error } = state.context
+  const { starterTemplate, parameters, error, file } = state.context
   const shouldDisplayForm = !state.hasTag("loading")
 
   const onCancel = () => {
@@ -58,6 +58,16 @@ const CreateTemplatePage: FC = () => {
                 data,
               })
             }}
+            upload={{
+              file,
+              isUploading: state.matches("uploading"),
+              onRemove: () => {
+                send("REMOVE_FILE")
+              },
+              onUpload: (file) => {
+                send({ type: "UPLOAD_FILE", file })
+              },
+            }}
           />
         )}
       </FullPageHorizontalForm>

diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
@@ -0,0 +1,136 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Stack } from "components/Stack/Stack"
+import { FC, useRef } from "react"
+import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
+import { useClickable } from "hooks/useClickable"
+import CircularProgress from "@material-ui/core/CircularProgress"
+import { combineClasses } from "util/combineClasses"
+import IconButton from "@material-ui/core/IconButton"
+import RemoveIcon from "@material-ui/icons/DeleteOutline"
+import FileIcon from "@material-ui/icons/FolderOutlined"
+
+export interface TemplateUploadProps {
+  isUploading: boolean
+  onUpload: (file: File) => void
+  onRemove: () => void
+  file?: File
+}
+
+export const TemplateUpload: FC<TemplateUploadProps> = ({
+  isUploading,
+  onUpload,
+  onRemove,
+  file,
+}) => {
+  const styles = useStyles()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const clickable = useClickable(() => {
+    if (inputRef.current) {
+      inputRef.current.click()
+    }
+  })
+
+  if (!isUploading && file) {
+    return (
+      <Stack
+        className={styles.file}
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack direction="row" alignItems="center">
+          <FileIcon />
+          <span>{file.name}</span>
+        </Stack>
+
+        <IconButton title="Remove file" size="small" onClick={onRemove}>
+          <RemoveIcon />
+        </IconButton>
+      </Stack>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={combineClasses({
+          [styles.root]: true,
+          [styles.disabled]: isUploading,
+        })}
+        {...clickable}
+      >
+        <Stack alignItems="center" spacing={1}>
+          {isUploading ? (
+            <CircularProgress size={32} />
+          ) : (
+            <UploadIcon className={styles.icon} />
+          )}
+
+          <Stack alignItems="center" spacing={0.5}>
+            <span className={styles.title}>Upload template</span>
+            <span className={styles.description}>
+              The template needs to be in a .tar file
+            </span>
+          </Stack>
+        </Stack>
+      </div>
+
+      <input
+        type="file"
+        ref={inputRef}
+        className={styles.input}
+        accept=".tar"
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0]
+          if (file) {
+            onUpload(file)
+          }
+        }}
+      />
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.shape.borderRadius,
+    border: `2px dashed ${theme.palette.divider}`,
+    padding: theme.spacing(6),
+    cursor: "pointer",
+
+    "&:hover": {
+      backgroundColor: theme.palette.background.paper,
+    },
+  },
+
+  disabled: {
+    pointerEvents: "none",
+    opacity: 0.75,
+  },
+
+  icon: {
+    fontSize: theme.spacing(8),
+  },
+
+  title: {
+    fontSize: theme.spacing(2),
+  },
+
+  description: {
+    color: theme.palette.text.secondary,
+  },
+
+  input: {
+    display: "none",
+  },
+
+  file: {
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2),
+    background: theme.palette.background.paper,
+  },
+}))
diff --git a/site/src/xServices/createTemplate/createTemplateXService.ts b/site/src/xServices/createTemplate/createTemplateXService.ts
@@ -4,17 +4,30 @@ import {
   getTemplateVersion,
   createTemplate,
   getTemplateVersionSchema,
+  uploadTemplateFile,
 } from "api/api"
 import {
   CreateTemplateRequest,
   ParameterSchema,
   Template,
   TemplateExample,
   TemplateVersion,
+  UploadResponse,
 } from "api/typesGenerated"
 import { displayError } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
 
+// for creating a new template:
+// 1. upload template tar or use the example ID
+// 2. create template version
+// 3. wait for it to complete
+// 4. if the job failed with the missing parameter error then:
+//    a. prompt for params
+//    b. create template version again with the same file hash
+//    c. wait for it to complete
+// 5.create template with the successful template version ID
+// https://github.com/coder/coder/blob/b6703b11c6578b2f91a310d28b6a7e57f0069be6/cli/templatecreate.go#L169-L170
+
 export interface CreateTemplateData {
   name: string
   display_name: string
@@ -33,6 +46,10 @@ interface CreateTemplateContext {
   version?: TemplateVersion
   templateData?: CreateTemplateData
   parameters?: ParameterSchema[]
+  // file is used in the FE to show the filename and some other visual stuff
+  // uploadedFile is the response from the server to use in the API
+  file?: File
+  uploadResponse?: UploadResponse
 }
 
 export const createTemplateMachine =
@@ -43,8 +60,14 @@ export const createTemplateMachine =
       predictableActionArguments: true,
       schema: {
         context: {} as CreateTemplateContext,
-        events: {} as { type: "CREATE"; data: CreateTemplateData },
+        events: {} as
+          | { type: "CREATE"; data: CreateTemplateData }
+          | { type: "UPLOAD_FILE"; file: File }
+          | { type: "REMOVE_FILE" },
         services: {} as {
+          uploadFile: {
+            data: UploadResponse
+          }
           loadStarterTemplate: {
             data: TemplateExample
           }
@@ -92,6 +115,26 @@ export const createTemplateMachine =
               target: "creating",
               actions: ["assignTemplateData"],
             },
+            UPLOAD_FILE: {
+              actions: ["assignFile"],
+              target: "uploading",
+            },
+            REMOVE_FILE: {
+              actions: ["removeFile"],
+            },
+          },
+        },
+        uploading: {
+          invoke: {
+            src: "uploadFile",
+            onDone: {
+              target: "idle",
+              actions: ["assignUploadResponse"],
+            },
+            onError: {
+              target: "idle",
+              actions: ["displayUploadError", "removeFile"],
+            },
           },
         },
         creating: {
@@ -179,6 +222,7 @@ export const createTemplateMachine =
     },
     {
       services: {
+        uploadFile: (_, { file }) => uploadTemplateFile(file),
         loadStarterTemplate: async ({ organizationId, exampleId }) => {
           if (!exampleId) {
             throw new Error(`Example ID is not defined.`)
@@ -270,12 +314,21 @@ export const createTemplateMachine =
         displayJobError: (_, { data }) => {
           displayError("Provisioner job failed.", data.job.error)
         },
+        displayUploadError: () => {
+          displayError("Error on upload the file.")
+        },
         assignStarterTemplate: assign({
           starterTemplate: (_, { data }) => data,
         }),
         assignVersion: assign({ version: (_, { data }) => data }),
         assignTemplateData: assign({ templateData: (_, { data }) => data }),
         assignParameters: assign({ parameters: (_, { data }) => data }),
+        assignFile: assign({ file: (_, { file }) => file }),
+        assignUploadResponse: assign({ uploadResponse: (_, { data }) => data }),
+        removeFile: assign({
+          file: (_) => undefined,
+          uploadResponse: (_) => undefined,
+        }),
       },
       guards: {
         isExampleProvided: ({ exampleId }) => Boolean(exampleId),