Add errors to all search bar pages

Emyrk · Emyrk · commit dd481f5f7b46 · 2023-03-01T13:21:26.000-06:00
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx
@@ -20,12 +20,14 @@ export interface WorkspacesTableProps {
   workspaces?: Workspace[]
   isUsingFilter: boolean
   onUpdateWorkspace: (workspace: Workspace) => void
+  error?: Error | unknown
 }
 
 export const WorkspacesTable: FC<WorkspacesTableProps> = ({
   workspaces,
   isUsingFilter,
   onUpdateWorkspace,
+  error,
 }) => {
   return (
     <TableContainer>
@@ -44,6 +46,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
             workspaces={workspaces}
             isUsingFilter={isUsingFilter}
             onUpdateWorkspace={onUpdateWorkspace}
+            error={error}
           />
         </TableBody>
       </Table>
diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx
@@ -15,14 +15,19 @@ interface TableBodyProps {
   workspaces?: Workspace[]
   isUsingFilter: boolean
   onUpdateWorkspace: (workspace: Workspace) => void
+  error?: Error | unknown
 }
 
 export const WorkspacesTableBody: FC<
   React.PropsWithChildren<TableBodyProps>
-> = ({ workspaces, isUsingFilter, onUpdateWorkspace }) => {
+> = ({ workspaces, isUsingFilter, onUpdateWorkspace, error }) => {
   const { t } = useTranslation("workspacesPage")
   const styles = useStyles()
 
+  if (error) {
+    return <TableEmpty message={t("emptyResultsMessage")} />
+  }
+
   if (!workspaces) {
     return <TableLoader />
   }
diff --git a/site/src/pages/AuditPage/AuditPage.tsx b/site/src/pages/AuditPage/AuditPage.tsx
@@ -26,7 +26,7 @@ const AuditPage: FC = () => {
     },
   })
 
-  const { auditLogs, count } = auditState.context
+  const { auditLogs, count, apiError } = auditState.context
   const paginationRef = auditState.context.paginationRef as PaginationMachineRef
   const { audit_log: isAuditLogVisible } = useFeatureVisibility()
 
@@ -45,6 +45,7 @@ const AuditPage: FC = () => {
         paginationRef={paginationRef}
         isNonInitialPage={nonInitialPage(searchParams)}
         isAuditLogVisible={isAuditLogVisible}
+        error={apiError}
       />
     </>
   )
diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx
@@ -54,6 +54,7 @@ export interface AuditPageViewProps {
   paginationRef: PaginationMachineRef
   isNonInitialPage: boolean
   isAuditLogVisible: boolean
+  error?: Error | unknown
 }
 
 export const AuditPageView: FC<AuditPageViewProps> = ({
@@ -64,8 +65,10 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
   paginationRef,
   isNonInitialPage,
   isAuditLogVisible,
+  error,
 }) => {
   const { t } = useTranslation("auditLog")
+
   const isLoading = auditLogs === undefined || count === undefined
   const isEmpty = !isLoading && auditLogs.length === 0
 
@@ -88,12 +91,21 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
             filter={filter}
             onFilter={onFilter}
             presetFilters={presetFilters}
+            error={error}
           />
 
           <TableContainer>
             <Table>
               <TableBody>
                 <ChooseOne>
+                  {/* Error condition should just show an empty table. */}
+                  <Cond condition={Boolean(error)}>
+                    <TableRow>
+                      <TableCell colSpan={999}>
+                        <EmptyState message={t("table.noLogs")} />
+                      </TableCell>
+                    </TableRow>
+                  </Cond>
                   <Cond condition={isLoading}>
                     <TableLoader />
                   </Cond>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -102,6 +102,7 @@ export const WorkspacesPageView: FC<
         workspaces={workspaces}
         isUsingFilter={filter !== workspaceFilterQuery.me}
         onUpdateWorkspace={onUpdateWorkspace}
+        error={error}
       />
       {count !== undefined && (
         <PaginationWidgetBase
diff --git a/site/src/xServices/audit/auditXService.ts b/site/src/xServices/audit/auditXService.ts
@@ -1,5 +1,5 @@
 import { getAuditLogs } from "api/api"
-import { getErrorMessage } from "api/errors"
+import { getErrorMessage, isApiError } from "api/errors"
 import { AuditLog, AuditLogResponse } from "api/typesGenerated"
 import { displayError } from "components/GlobalSnackbar/utils"
 import { getPaginationData } from "components/PaginationWidget/utils"
@@ -18,6 +18,7 @@ interface AuditContext {
   filter: string
   paginationContext: PaginationContext
   paginationRef?: PaginationMachineRef
+  apiError?: Error | unknown
 }
 
 export const auditMachine = createMachine(
@@ -52,7 +53,7 @@ export const auditMachine = createMachine(
         // Right now, XState doesn't a good job with state + context typing so
         // this forces the AuditPageView to showing the loading state when the
         // loading state is called again by cleaning up the audit logs data
-        entry: "clearPreviousAuditLogs",
+        entry: ["clearPreviousAuditLogs", "clearError"],
         invoke: {
           src: "loadAuditLogsAndCount",
           onDone: {
@@ -61,7 +62,7 @@ export const auditMachine = createMachine(
           },
           onError: {
             target: "idle",
-            actions: ["displayApiError"],
+            actions: ["displayApiError", "assignError"],
           },
         },
         onDone: "idle",
@@ -98,6 +99,12 @@ export const auditMachine = createMachine(
       assignFilter: assign({
         filter: (_, { filter }) => filter,
       }),
+      assignError: assign({
+        apiError: (_, event) => event.data,
+      }),
+      clearError: assign({
+        apiError: (_) => undefined,
+      }),
       displayApiError: (_, event) => {
         const message = getErrorMessage(
           event.data,
