wip: working

jsjoeio · jsjoeio · commit c9cceba9a85b · 2022-09-20T19:23:41.000Z
diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,5 +1,10 @@
+import Link from "@material-ui/core/Link"
+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 { Stack } from "components/Stack/Stack"
 import { FC, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
@@ -22,7 +27,24 @@ const useTemplateName = () => {
   return template
 }
 
+// const Language = {
+//   emptyMessage: "Template not found",
+//   emptyDescription: (
+//     <>
+//       You can view available templates{" "}
+//       <Link target="_blank" href="https://coder.com/docs/coder-oss/latest/templates">
+//         here
+//       </Link>{" "}
+//       or you can{" "}
+//       <Link target="_blank" href="https://coder.com/docs/coder-oss/latest/templates">
+//         create one from scratch.
+//       </Link>
+//     </>
+//   ),
+// }
+
 export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
+  const styles = useStyles()
   const organizationId = useOrganizationId()
   const { t } = useTranslation("templatePage")
   const templateName = useTemplateName()
@@ -40,6 +62,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateVersions,
     deleteTemplateError,
     templateDAUs,
+    getTemplateError,
   } = templateState.context
   const xServices = useContext(XServiceContext)
   const permissions = useSelector(xServices.authXService, selectPermissions)
@@ -57,6 +80,16 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
   // site/src/xServices/template/templateXService.ts
   // For an example, look here: site/src/xServices/workspaces/workspacesXService.ts
   // displayError is the function we want to use
+  // const templateFound = false
+  if (templateState.matches("error")&& Boolean(getTemplateError)) {
+    return (
+      <Margins>
+        <div className={styles.errorBox}>
+          <ErrorSummary error={getTemplateError} />
+        </div>
+      </Margins>
+    )
+  }
 
   if (isLoading) {
     return <Loader />
@@ -98,4 +131,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,
         }),
