Improve error handling

coder · presleyp · Dec 21, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
commit 9a267d60bfb539a2bccb9311d3aa1e14c1d497b5
diff --git a/site/src/i18n/en/workspaceSchedulePage.json b/site/src/i18n/en/workspaceSchedulePage.json
@@ -1,7 +1,5 @@
 {
   "forbiddenError": "You don't have permissions to update the schedule for this workspace.",
-  "getWorkspaceError": "Failed to fetch workspace.",
-  "checkPermissionsError": "Failed to fetch permissions.",
   "dialogTitle": "Restart workspace?",
   "dialogDescription": "Would you like to restart your workspace now to apply your new auto-stop setting, or let it apply after your next workspace start?",
   "restart": "Restart workspace now",

diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.test.tsx
@@ -19,9 +19,7 @@ import {
   WorkspaceScheduleFormValues,
   Language as FormLanguage,
 } from "../../components/WorkspaceScheduleForm/WorkspaceScheduleForm"
-import {
-  WorkspaceSchedulePage,
-} from "./WorkspaceSchedulePage"
+import { WorkspaceSchedulePage } from "./WorkspaceSchedulePage"
 import i18next from "i18next"
 
 const { t } = i18next

diff --git a/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -1,6 +1,8 @@
+import { makeStyles } from "@material-ui/core/styles"
 import { useMachine } from "@xstate/react"
 import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
+import { Margins } from "components/Margins/Margins"
 import { scheduleToAutoStart } from "pages/WorkspaceSchedulePage/schedule"
 import { ttlMsToAutoStop } from "pages/WorkspaceSchedulePage/ttl"
 import React, { useEffect } from "react"
@@ -22,8 +24,15 @@ const getAutoStart = (workspace?: TypesGen.Workspace) =>
 const getAutoStop = (workspace?: TypesGen.Workspace) =>
   ttlMsToAutoStop(workspace?.ttl_ms)
 
+const useStyles = makeStyles((theme) => ({
+  topMargin: {
+    marginTop: `${theme.spacing(3)}px`,
+  },
+}))
+
 export const WorkspaceSchedulePage: React.FC = () => {
   const { t } = useTranslation("workspaceSchedulePage")
+  const styles = useStyles()
   const { username: usernameQueryParam, workspace: workspaceQueryParam } =
     useParams()
   const navigate = useNavigate()
@@ -34,6 +43,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
     checkPermissionsError,
     submitScheduleError,
     getWorkspaceError,
+    getTemplateError,
     permissions,
     workspace,
   } = scheduleState.context
@@ -51,34 +61,37 @@ export const WorkspaceSchedulePage: React.FC = () => {
   }
 
   if (
-    scheduleState.matches("idle") ||
-    scheduleState.matches("gettingWorkspace") ||
-    scheduleState.matches("gettingPermissions") ||
-    scheduleState.matches("gettingTemplate") ||
-    !workspace
+    scheduleState.hasTag("loading")
   ) {
     return <FullScreenLoader />
   }
 
   if (scheduleState.matches("error")) {
     return (
-      <AlertBanner
-        severity="error"
-        error={getWorkspaceError || checkPermissionsError}
-        text={
-          getWorkspaceError
-            ? t("getWorkspaceError")
-            : t("checkPermissionsError")
-        }
-        retry={() =>
-          scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
-        }
-      />
+      <Margins>
+        <div className={styles.topMargin}>
+          <AlertBanner
+            severity="error"
+            error={
+              getWorkspaceError || checkPermissionsError || getTemplateError
+            }
+            retry={() =>
+              scheduleSend({ type: "GET_WORKSPACE", username, workspaceName })
+            }
+          />
+        </div>
+      </Margins>
     )
   }
 
   if (!permissions?.updateWorkspace) {
-    return <AlertBanner severity="error" error={Error(t("forbiddenError"))} />
+    return (
+      <Margins>
+        <div className={styles.topMargin}>
+          <AlertBanner severity="error" error={Error(t("forbiddenError"))} />
+        </div>
+      </Margins>
+    )
   }
 
   if (
@@ -129,11 +142,7 @@ export const WorkspaceSchedulePage: React.FC = () => {
   }
 
   if (scheduleState.matches("done")) {
-    return (
-      <Navigate
-        to={`/@${username}/${workspaceName}`}
-      />
-    )
+    return <Navigate to={`/@${username}/${workspaceName}`} />
   }
 
   // Theoretically impossible - log and bail

diff --git a/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts b/site/src/xServices/workspaceSchedule/workspaceScheduleXService.ts
@@ -69,7 +69,7 @@ export const workspaceSchedule =
         services: {} as {
           getWorkspace: {
             data: TypesGen.Workspace
-          },
+          }
           getTemplate: {
             data: TypesGen.Template
           }
@@ -117,6 +117,7 @@ export const workspaceSchedule =
               },
             ],
           },
+          tags: "loading"
         },
         gettingTemplate: {
           entry: "clearGetTemplateError",
@@ -200,13 +201,13 @@ export const workspaceSchedule =
           checkPermissionsError: (_, event) => event.data,
         }),
         assignTemplate: assign({
-          template: (_, event) => event.data
+          template: (_, event) => event.data,
         }),
         assignGetTemplateError: assign({
-          getTemplateError: (_, event) => event.data
+          getTemplateError: (_, event) => event.data,
         }),
         clearGetTemplateError: assign({
-          getTemplateError: (_) => undefined
+          getTemplateError: (_) => undefined,
         }),
         assignAutoStopChanged: assign({
           autoStopChanged: (_, event) => event.autoStopChanged,
@@ -224,9 +225,12 @@ export const workspaceSchedule =
         // user can return to the workspace page to see the restart
         restartWorkspace: (context) => {
           if (context.workspace && context.template) {
-            return API.startWorkspace(context.workspace.id, context.template.active_version_id)
+            return API.startWorkspace(
+              context.workspace.id,
+              context.template.active_version_id,
+            )
           }
-        }
+        },
       },
 
       services: {