diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx index 95141c5384..2b9baa94d6 100644 --- 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> = () => { + const styles = useStyles() const organizationId = useOrganizationId() const { t } = useTranslation("templatePage") const templateName = useTemplateName() @@ -40,6 +44,7 @@ export const TemplatePage: FC> = () => { templateVersions, deleteTemplateError, templateDAUs, + getTemplateError, } = templateState.context const xServices = useContext(XServiceContext) const permissions = useSelector(xServices.authXService, selectPermissions) @@ -50,6 +55,16 @@ export const TemplatePage: FC> = () => { templateSend("DELETE") } + if (templateState.matches("error") && Boolean(getTemplateError)) { + return ( + +
+ +
+
+ ) + } + if (isLoading) { return } @@ -90,4 +105,10 @@ export const TemplatePage: FC> = () => { ) } +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 index 671cb9cf2d..a3c1fa7b61 100644 --- 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, }),