fix: display error if template not found

jsjoeio · jsjoeio · commit 6831f8b6ec36 · 2022-09-20T20:24:38.000Z
Previously, we weren't handling a case where we tried to get a template
that returned a 404 from the backend.

Now we handle that case in our state machine and display the error
message from the API on the frontend.
diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,5 +1,8 @@
+import { makeStyles } from "@material-ui/core/styles"
 import { useMachine, useSelector } from "@xstate/react"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { Margins } from "components/Margins/Margins"
 import { FC, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
@@ -23,6 +26,7 @@ const useTemplateName = () => {
 }
 
 export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
+  const styles = useStyles()
   const organizationId = useOrganizationId()
   const { t } = useTranslation("templatePage")
   const templateName = useTemplateName()
@@ -40,6 +44,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateVersions,
     deleteTemplateError,
     templateDAUs,
+    getTemplateError,
   } = templateState.context
   const xServices = useContext(XServiceContext)
   const permissions = useSelector(xServices.authXService, selectPermissions)
@@ -50,6 +55,16 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateSend("DELETE")
   }
 
+  if (templateState.matches("error") && Boolean(getTemplateError)) {
+    return (
+      <Margins>
+        <div className={styles.errorBox}>
+          <ErrorSummary error={getTemplateError} />
+        </div>
+      </Margins>
+    )
+  }
+
   if (isLoading) {
     return <Loader />
   }
@@ -90,4 +105,10 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  errorBox: {
+    padding: theme.spacing(3),
+  },
+}))
+
 export default TemplatePage
diff --git a/site/src/xServices/template/templateXService.ts b/site/src/xServices/template/templateXService.ts
@@ -25,6 +25,7 @@ interface TemplateContext {
   templateVersions?: TemplateVersion[]
   templateDAUs: TemplateDAUsResponse
   deleteTemplateError?: Error | unknown
+  getTemplateError?: Error | unknown
 }
 
 type TemplateEvent = { type: "DELETE" } | { type: "CONFIRM_DELETE" } | { type: "CANCEL_DELETE" }
@@ -71,6 +72,12 @@ export const templateMachine =
                 target: "initialInfo",
               },
             ],
+            onError: [
+              {
+                actions: "assignGetTemplateError",
+                target: "error",
+              },
+            ],
           },
         },
         initialInfo: {
@@ -211,6 +218,9 @@ export const templateMachine =
         deleted: {
           type: "final",
         },
+        error: {
+          type: "final",
+        },
       },
     },
     {
@@ -257,6 +267,9 @@ export const templateMachine =
         assignActiveTemplateVersion: assign({
           activeTemplateVersion: (_, event) => event.data,
         }),
+        assignGetTemplateError: assign({
+          getTemplateError: (_, event) => event.data,
+        }),
         assignTemplateResources: assign({
           templateResources: (_, event) => event.data,
         }),
