fix(site): fix filters errors display (#8103)

site/src/components/Filter/filter.tsx

@@ -210,6 +210,9 @@ export const Filter = ({
                   "& .MuiInputAdornment-root": {
                     marginLeft: 0,
                   },
+                  "&.Mui-error": {
+                    zIndex: 3,
+                  },
                 },
                 startAdornment: (
                   <InputAdornment position="start">

site/src/pages/AuditPage/AuditPage.tsx

@@ -77,6 +77,7 @@ const AuditPage: FC = () => {
           dashboard.experiments.includes("workspace_filter")
             ? {
                 filter,
+                error,
                 menus: {
                   user: userMenu,
                   action: actionMenu,

site/src/pages/AuditPage/AuditPageView.tsx

@@ -74,8 +74,8 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
 }) => {
   const { t } = useTranslation("auditLog")
 
-  const isLoading = auditLogs === undefined || count === undefined
-  const isEmpty = !isLoading && auditLogs.length === 0
+  const isLoading = (auditLogs === undefined || count === undefined) && !error
+  const isEmpty = !isLoading && auditLogs?.length === 0
 
   return (
     <Margins>
@@ -104,8 +104,8 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
 
           <PaginationStatus
             isLoading={Boolean(isLoading)}
-            showing={auditLogs?.length}
-            total={count}
+            showing={auditLogs?.length ?? 0}
+            total={count ?? 0}
             label="audit logs"
           />
 

site/src/pages/UsersPage/UsersPage.tsx

@@ -159,6 +159,7 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
           dashboard.experiments.includes("workspace_filter")
             ? {
                 filter: useFilterResult,
+                error: getUsersError,
                 menus: {
                   status: statusMenu,
                 },

site/src/pages/UsersPage/UsersPageView.stories.tsx

@@ -17,6 +17,7 @@ const meta: Meta<typeof UsersPageView> = {
     isNonInitialPage: false,
     users: [MockUser, MockUser2],
     roles: MockAssignableSiteRoles,
+    count: 2,
     canEditUsers: true,
     filterProps: {
       onFilter: action("onFilter"),
@@ -41,12 +42,13 @@ export const Member = {
 }
 
 export const Empty = {
-  args: { users: [] },
+  args: { users: [], count: 0 },
 }
 
 export const EmptyPage = {
   args: {
     users: [],
+    count: 0,
     isNonInitialPage: true,
   },
 }

site/src/pages/UsersPage/UsersPageView.tsx

@@ -77,8 +77,8 @@ export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
 
       <PaginationStatus
         isLoading={Boolean(isLoading)}
-        showing={users?.length}
-        total={count}
+        showing={users?.length ?? 0}
+        total={count ?? 0}
         label="users"
       />
 

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -146,9 +146,9 @@ export const WorkspacesPageView: FC<
       </Stack>
 
       <PaginationStatus
-        isLoading={!workspaces}
-        showing={workspaces?.length}
-        total={count}
+        isLoading={!workspaces && !error}
+        showing={workspaces?.length ?? 0}
+        total={count ?? 0}
         label="workspaces"
       />
 

site/src/xServices/users/usersXService.ts

@@ -166,11 +166,7 @@ export const usersMachine =
             onError: [
               {
                 target: "idle",
-                actions: [
-                  "clearUsers",
-                  "assignGetUsersError",
-                  "displayGetUsersErrorMessage",
-                ],
+                actions: ["clearUsers", "assignGetUsersError"],
               },
             ],
           },
@@ -487,13 +483,6 @@ export const usersMachine =
         clearUpdateUserRolesError: assign({
           updateUserRolesError: (_) => undefined,
         }),
-        displayGetUsersErrorMessage: (context) => {
-          const message = getErrorMessage(
-            context.getUsersError,
-            Language.getUsersError,
-          )
-          displayError(message)
-        },
         displaySuspendSuccess: () => {
           displaySuccess(Language.suspendUserSuccess)
         },