fix(site): Show job error on updating template variables (#6674)

site/src/components/FullPageForm/FullPageHorizontalForm.tsx

@@ -6,7 +6,6 @@ import {
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader"
 import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
 
 export interface FullPageHorizontalFormProps {
   title: string
@@ -17,8 +16,6 @@ export interface FullPageHorizontalFormProps {
 export const FullPageHorizontalForm: FC<
   React.PropsWithChildren<FullPageHorizontalFormProps>
 > = ({ title, detail, onCancel, children }) => {
-  const styles = useStyles()
-
   return (
     <Margins size="medium">
       <PageHeader
@@ -34,13 +31,7 @@ export const FullPageHorizontalForm: FC<
         {detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
       </PageHeader>
 
-      <main className={styles.form}>{children}</main>
+      <main>{children}</main>
     </Margins>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  form: {
-    marginTop: theme.spacing(1),
-  },
-}))

site/src/pages/TemplateVariablesPage/TemplateVariablesPage.tsx

@@ -36,6 +36,7 @@ export const TemplateVariablesPage: FC = () => {
     templateVariables,
     getTemplateDataError,
     updateTemplateError,
+    jobError,
   } = state.context
 
   const { t } = useTranslation("templateVariablesPage")
@@ -52,6 +53,7 @@ export const TemplateVariablesPage: FC = () => {
         errors={{
           getTemplateDataError,
           updateTemplateError,
+          jobError,
         }}
         onCancel={() => {
           navigate(`/templates/${templateName}`)

site/src/pages/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx

@@ -76,3 +76,20 @@ WithUpdateTemplateError.args = {
   onSubmit: action("onSubmit"),
   onCancel: action("cancel"),
 }
+
+export const WithJobError = TemplateVariables.bind({})
+WithJobError.args = {
+  templateVersion: MockTemplateVersion,
+  templateVariables: [
+    MockTemplateVersionVariable1,
+    MockTemplateVersionVariable2,
+    MockTemplateVersionVariable3,
+    MockTemplateVersionVariable4,
+  ],
+  errors: {
+    jobError:
+      "template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1",
+  },
+  onSubmit: action("onSubmit"),
+  onCancel: action("cancel"),
+}

site/src/pages/TemplateVariablesPage/TemplateVariablesPageView.tsx

@@ -22,6 +22,7 @@ export interface TemplateVariablesPageViewProps {
   errors?: {
     getTemplateDataError?: unknown
     updateTemplateError?: unknown
+    jobError?: TemplateVersion["job"]["error"]
   }
   initialTouched?: ComponentProps<
     typeof TemplateVariablesForm
@@ -46,44 +47,53 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
   const { t } = useTranslation("templateVariablesPage")
 
   return (
-    <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
-      {Boolean(errors.getTemplateDataError) && (
-        <Stack className={classes.errorContainer}>
-          <AlertBanner severity="error" error={errors.getTemplateDataError} />
-        </Stack>
-      )}
-      {Boolean(errors.updateTemplateError) && (
-        <Stack className={classes.errorContainer}>
-          <AlertBanner severity="error" error={errors.updateTemplateError} />
-        </Stack>
-      )}
-      {isLoading && <Loader />}
-      {templateVersion && templateVariables && templateVariables.length > 0 && (
-        <TemplateVariablesForm
-          initialTouched={initialTouched}
-          isSubmitting={isSubmitting}
-          templateVersion={templateVersion}
-          templateVariables={templateVariables}
-          onSubmit={onSubmit}
-          onCancel={onCancel}
-          error={errors.updateTemplateError}
-        />
-      )}
-      {templateVariables && templateVariables.length === 0 && (
-        <div>
-          <AlertBanner severity="info" text={t("unusedVariablesNotice")} />
-          <div className={classes.goBackSection}>
-            <GoBackButton onClick={onCancel} />
+    <>
+      <FullPageHorizontalForm title={t("title")} onCancel={onCancel}>
+        {Boolean(errors.getTemplateDataError) && (
+          <Stack className={classes.errorContainer}>
+            <AlertBanner severity="error" error={errors.getTemplateDataError} />
+          </Stack>
+        )}
+        {Boolean(errors.updateTemplateError) && (
+          <Stack className={classes.errorContainer}>
+            <AlertBanner severity="error" error={errors.updateTemplateError} />
+          </Stack>
+        )}
+        {Boolean(errors.jobError) && (
+          <Stack className={classes.errorContainer}>
+            <AlertBanner severity="error" text={errors.jobError} />
+          </Stack>
+        )}
+        {isLoading && <Loader />}
+        {templateVersion &&
+          templateVariables &&
+          templateVariables.length > 0 && (
+            <TemplateVariablesForm
+              initialTouched={initialTouched}
+              isSubmitting={isSubmitting}
+              templateVersion={templateVersion}
+              templateVariables={templateVariables}
+              onSubmit={onSubmit}
+              onCancel={onCancel}
+              error={errors.updateTemplateError}
+            />
+          )}
+        {templateVariables && templateVariables.length === 0 && (
+          <div>
+            <AlertBanner severity="info" text={t("unusedVariablesNotice")} />
+            <div className={classes.goBackSection}>
+              <GoBackButton onClick={onCancel} />
+            </div>
           </div>
-        </div>
-      )}
-    </FullPageHorizontalForm>
+        )}
+      </FullPageHorizontalForm>
+    </>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
   errorContainer: {
-    marginBottom: theme.spacing(2),
+    marginBottom: theme.spacing(8),
   },
   goBackSection: {
     display: "flex",

site/src/xServices/template/templateVariablesXService.ts

@@ -28,6 +28,8 @@ type TemplateVariablesContext = {
 
   getTemplateDataError?: Error | unknown
   updateTemplateError?: Error | unknown
+
+  jobError?: TemplateVersion["job"]["error"]
 }
 
 type UpdateTemplateEvent = {
@@ -117,7 +119,7 @@ export const templateVariablesMachine = createMachine(
       fillingParams: {
         on: {
           UPDATE_TEMPLATE_EVENT: {
-            actions: ["assignCreateTemplateVersionRequest"],
+            actions: ["assignCreateTemplateVersionRequest", "clearJobError"],
             target: "creatingTemplateVersion",
           },
         },
@@ -141,6 +143,11 @@ export const templateVariablesMachine = createMachine(
         invoke: {
           src: "waitForJobToBeCompleted",
           onDone: [
+            {
+              target: "fillingParams",
+              cond: "hasJobError",
+              actions: ["assignJobError"],
+            },
             {
               actions: ["assignNewTemplateVersion"],
               target: "updatingTemplate",
@@ -258,6 +265,17 @@ export const templateVariablesMachine = createMachine(
       clearUpdateTemplateError: assign({
         updateTemplateError: (_) => undefined,
       }),
+      assignJobError: assign({
+        jobError: (_, event) => event.data.job.error,
+      }),
+      clearJobError: assign({
+        jobError: (_) => undefined,
+      }),
+    },
+    guards: {
+      hasJobError: (_, { data }) => {
+        return Boolean(data.job.error)
+      },
     },
   },
 )