coder · BrunoQuaresma · Apr 17, 2023 · Apr 12, 2023 · Apr 12, 2023 · Apr 12, 2023
diff --git a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx
@@ -0,0 +1,148 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Dialog from "@material-ui/core/Dialog"
+import DialogContent from "@material-ui/core/DialogContent"
+import DialogContentText from "@material-ui/core/DialogContentText"
+import DialogTitle from "@material-ui/core/DialogTitle"
+import { DialogProps } from "components/Dialogs/Dialog"
+import { FC, useEffect, useState } from "react"
+import { FormFields, VerticalForm } from "components/Form/Form"
+import { TemplateVersionVariable, VariableValue } from "api/typesGenerated"
+import DialogActions from "@material-ui/core/DialogActions"
+import Button from "@material-ui/core/Button"
+import { VariableInput } from "pages/CreateTemplatePage/VariableInput"
+import { Loader } from "components/Loader/Loader"
+
+export type MissingTemplateVariablesDialogProps = Omit<
+  DialogProps,
+  "onSubmit"
+> & {
+  onClose: () => void
+  onSubmit: (values: VariableValue[]) => void
+  missingVariables?: TemplateVersionVariable[]
+}
+
+export const MissingTemplateVariablesDialog: FC<
+  MissingTemplateVariablesDialogProps
+> = ({ missingVariables, onSubmit, ...dialogProps }) => {
+  const styles = useStyles()
+  const [variableValues, setVariableValues] = useState<VariableValue[]>([])
+
+  // Pre-fill the form with the default values when missing variables are loaded
+  useEffect(() => {
+    if (!missingVariables) {
+      return
+    }
+    setVariableValues(
+      missingVariables.map((v) => ({ name: v.name, value: v.value })),
+    )
+  }, [missingVariables])
+
+  return (
+    <Dialog
+      {...dialogProps}
+      scroll="body"
+      aria-labelledby="update-build-parameters-title"
+      maxWidth="xs"
+      data-testid="dialog"
+    >
+      <DialogTitle
+        id="update-build-parameters-title"
+        classes={{ root: styles.title }}
+      >
+        Template variables
+      </DialogTitle>
+      <DialogContent className={styles.content}>
+        <DialogContentText className={styles.info}>
+          There are a few missing template variable values. Please fill them in.
+        </DialogContentText>
+        <VerticalForm
+          className={styles.form}
+          id="updateVariables"
+          onSubmit={(e) => {
+            e.preventDefault()
+            onSubmit(variableValues)
+          }}
+        >
+          {missingVariables ? (
+            <FormFields>
+              {missingVariables.map((variable, index) => {
+                return (
+                  <VariableInput
+                    defaultValue={variable.value}
+                    variable={variable}
+                    key={variable.name}
+                    onChange={async (value) => {
+                      setVariableValues((prev) => {
+                        prev[index] = {
+                          name: variable.name,
+                          value,
+                        }
+                        return [...prev]
+                      })
+                    }}
+                  />
+                )
+              })}
+            </FormFields>
+          ) : (
+            <Loader />
+          )}
+        </VerticalForm>
+      </DialogContent>
+      <DialogActions disableSpacing className={styles.dialogActions}>
+        <Button color="primary" fullWidth type="submit" form="updateVariables">
+          Submit
+        </Button>
+        <Button
+          fullWidth
+          type="button"
+          variant="outlined"
+          onClick={dialogProps.onClose}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    padding: theme.spacing(3, 5),
+
+    "& h2": {
+      fontSize: theme.spacing(2.5),
+      fontWeight: 400,
+    },
+  },
+
+  content: {
+    padding: theme.spacing(0, 5, 0, 5),
+  },
+
+  info: {
+    margin: 0,
+  },
+
+  form: {
+    paddingTop: theme.spacing(4),
+  },
+
+  infoTitle: {
+    fontSize: theme.spacing(2),
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+
+  formFooter: {
+    flexDirection: "column",
+  },
+
+  dialogActions: {
+    padding: theme.spacing(5),
+    flexDirection: "column",
+    gap: theme.spacing(1),
+  },
+}))
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -9,8 +9,11 @@ import {
   ProvisionerJobLog,
   Template,
   TemplateVersion,
+  TemplateVersionVariable,
+  VariableValue,
   WorkspaceResource,
 } from "api/typesGenerated"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { Avatar } from "components/Avatar/Avatar"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import { bannerHeight } from "components/DeploymentBanner/DeploymentBannerView"
@@ -36,6 +39,7 @@ import {
   RenameFileDialog,
 } from "./FileDialog"
 import { FileTreeView } from "./FileTreeView"
+import { MissingTemplateVariablesDialog } from "./MissingTemplateVariablesDialog"
 import { MonacoEditor } from "./MonacoEditor"
 import { PublishTemplateVersionDialog } from "./PublishTemplateVersionDialog"
 import {
@@ -58,7 +62,11 @@ export interface TemplateVersionEditorProps {
   onCancelPublish: () => void
   publishingError: unknown
   isAskingPublishParameters: boolean
+  isPromptingMissingVariables: boolean
   isPublishing: boolean
+  missingVariables?: TemplateVersionVariable[]
+  onSubmitMissingVariableValues: (values: VariableValue[]) => void
+  onCancelSubmitMissingVariableValues: () => void
 }
 
 const topbarHeight = 80
@@ -91,6 +99,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   isPublishing,
   buildLogs,
   resources,
+  isPromptingMissingVariables,
+  missingVariables,
+  onSubmitMissingVariableValues,
+  onCancelSubmitMissingVariableValues,
 }) => {
   const [selectedTab, setSelectedTab] = useState(() => {
     // If resources are provided, show them by default!
@@ -143,7 +155,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
       return
     }
     if (
-      previousVersion.current.job.status === "running" &&
+      ["running", "pending"].includes(previousVersion.current.job.status) &&
       templateVersion.job.status === "succeeded"
     ) {
       setSelectedTab(1)
@@ -363,22 +375,24 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                   selectedTab === 0 ? "" : "hidden"
                 }`}
               >
-                {buildLogs && (
+                {templateVersion.job.error && (
+                  <AlertBanner
+                    severity="error"
+                    text={templateVersion.job.error}
+                  />
+                )}
+
+                {buildLogs && buildLogs.length > 0 && (
                   <WorkspaceBuildLogs
                     templateEditorPane
                     hideTimestamps
                     logs={buildLogs}
                   />
                 )}
-                {templateVersion.job.error && (
-                  <div className={styles.buildLogError}>
-                    {templateVersion.job.error}
-                  </div>
-                )}
               </div>
 
               <div
-                className={`${styles.panel} ${styles.resources} ${
+                className={`${styles.panel} ${
                   selectedTab === 1 ? "" : "hidden"
                 }`}
               >
@@ -410,6 +424,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
         isPublishing={isPublishing}
         defaultName={templateVersion.name}
       />
+
+      <MissingTemplateVariablesDialog
+        open={isPromptingMissingVariables}
+        onClose={onCancelSubmitMissingVariableValues}
+        onSubmit={onSubmitMissingVariableValues}
+        missingVariables={missingVariables}
+      />
     </>
   )
 }
@@ -570,13 +591,8 @@ const useStyles = makeStyles<
   },
   buildLogs: {
     display: "flex",
-    flexDirection: "column-reverse",
+    flexDirection: "column",
     overflowY: "auto",
-  },
-  buildLogError: {
-    whiteSpace: "pre-wrap",
-  },
-  resources: {
-    // padding: 16,
+    gap: theme.spacing(1),
   },
 }))
diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -90,6 +90,7 @@ const VariableField: React.FC<VariableInputProps> = ({
 
   return (
     <TextField
+      autoComplete="off"
       id={variable.name}
       size="small"
       disabled={disabled}

diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -87,6 +87,19 @@ export const TemplateVersionEditorPage: FC = () => {
           }
           resources={editorState.context.resources}
           buildLogs={editorState.context.buildLogs}
+          isPromptingMissingVariables={editorState.matches("promptVariables")}
+          missingVariables={editorState.context.missingVariables}
+          onSubmitMissingVariableValues={(values) => {
+            sendEvent({
+              type: "SET_MISSING_VARIABLE_VALUES",
+              values,
+            })
+          }}
+          onCancelSubmitMissingVariableValues={() => {
+            sendEvent({
+              type: "CANCEL_MISSING_VARIABLE_VALUES",
+            })
+          }}
         />
       )}
     </>