Handle errors

presleyp · presleyp · commit 86caa8026308 · 2022-10-14T19:57:29.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -288,7 +288,7 @@ export const getWorkspaces = async (
 
 // TODO change types
 export const getWorkspacesCount = async (
-  options: TypesGen.AuditLogCountRequest = {}
+  options: TypesGen.AuditLogCountRequest = {},
 ): Promise<TypesGen.AuditLogCountResponse> => {
   const searchParams = new URLSearchParams()
   if (options.q) {
diff --git a/site/src/components/AlertBanner/AlertBanner.tsx b/site/src/components/AlertBanner/AlertBanner.tsx
@@ -11,12 +11,12 @@ import { severityConstants } from "./severityConstants"
 import { AlertBannerCtas } from "./AlertBannerCtas"
 
 /**
- * severity: the level of alert severity (see ./severityTypes.ts)
- * text: default text to be displayed to the user; useful for warnings or as a fallback error message
- * error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
- * actions: an array of CTAs passed in by the consumer
- * dismissible: determines whether or not the banner should have a `Dismiss` CTA
- * retry: a handler to retry the action that spawned the error
+ * @param severity: the level of alert severity (see ./severityTypes.ts)
+ * @param text: default text to be displayed to the user; useful for warnings or as a fallback error message
+ * @param error: should be passed in if the severity is 'Error'; warnings can use 'text' instead
+ * @param actions: an array of CTAs passed in by the consumer
+ * @param dismissible: determines whether or not the banner should have a `Dismiss` CTA
+ * @param retry: a handler to retry the action that spawned the error
  */
 export const AlertBanner: FC<AlertBannerProps> = ({
   severity,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,13 +1,14 @@
 import { useMachine } from "@xstate/react"
 import { FC } from "react"
 import { Helmet } from "react-helmet-async"
-import { useSearchParams } from "react-router-dom"
+import { useNavigate, useSearchParams } from "react-router-dom"
 import { workspaceFilterQuery } from "util/filters"
 import { pageTitle } from "util/page"
 import { workspacesMachine } from "xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
 const WorkspacesPage: FC = () => {
+  const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const filter = searchParams.get("filter") ?? workspaceFilterQuery.me
   const currentPage = searchParams.get("page")
@@ -16,7 +17,7 @@ const WorkspacesPage: FC = () => {
   const [workspacesState, send] = useMachine(workspacesMachine, {
     context: {
       page: currentPage,
-      limit: 25,
+      limit: 2, //TODO
       filter,
     },
     actions: {
@@ -28,7 +29,14 @@ const WorkspacesPage: FC = () => {
     },
   })
 
-  const { workspaceRefs, count, page, limit } = workspacesState.context
+  const {
+    workspaceRefs,
+    count,
+    page,
+    limit,
+    getWorkspacesError,
+    getCountError,
+  } = workspacesState.context
 
   return (
     <>
@@ -41,6 +49,8 @@ const WorkspacesPage: FC = () => {
         isLoading={!workspaceRefs}
         workspaceRefs={workspaceRefs}
         count={count}
+        getWorkspacesError={getWorkspacesError}
+        getCountError={getCountError}
         page={page}
         limit={limit}
         onNext={() => {
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,4 +1,5 @@
 import Link from "@material-ui/core/Link"
+import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { Maybe } from "components/Conditionals/Maybe"
 import { PaginationWidget } from "components/PaginationWidget/PaginationWidget"
 import { FC } from "react"
@@ -29,6 +30,8 @@ export interface WorkspacesPageViewProps {
   isLoading?: boolean
   workspaceRefs?: WorkspaceItemMachineRef[]
   count?: number
+  getWorkspacesError: Error | unknown
+  getCountError: Error | unknown
   page: number
   limit: number
   filter?: string
@@ -44,6 +47,8 @@ export const WorkspacesPageView: FC<
   isLoading,
   workspaceRefs,
   count,
+  getWorkspacesError,
+  getCountError,
   page,
   limit,
   filter,
@@ -80,6 +85,21 @@ export const WorkspacesPageView: FC<
         </PageHeaderSubtitle>
       </PageHeader>
 
+      <Maybe condition={getWorkspacesError !== undefined}>
+        <AlertBanner
+          error={getWorkspacesError}
+          severity={
+            workspaceRefs !== undefined && workspaceRefs.length > 0
+              ? "warning"
+              : "error"
+          }
+        />
+      </Maybe>
+
+      <Maybe condition={getCountError !== undefined}>
+        <AlertBanner error={getCountError} severity="warning" />
+      </Maybe>
+
       <SearchBarWithFilter
         filter={filter}
         onFilter={onFilter}
diff --git a/site/src/xServices/workspaces/workspacesXService.ts b/site/src/xServices/workspaces/workspacesXService.ts
