refactor(access-control): create access-control-panel component [EE-2345] (#6486)

app/react-tools/RootProvider.tsx

@@ -1,12 +1,29 @@
 import { ReactQueryDevtools } from 'react-query/devtools';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from 'react-query';
 import { UIRouterContextComponent } from '@uirouter/react-hybrid';
 import { PropsWithChildren, StrictMode, useState, useEffect } from 'react';
 
 import { UserProvider } from '@/portainer/hooks/useUser';
 import { UIStateProvider } from '@/portainer/hooks/UIStateProvider';
+import { notifyError } from '@/portainer/services/notifications';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  mutationCache: new MutationCache({
+    onError: (error, variable, context, mutation) => {
+      handleError(error, mutation.meta?.error);
+    },
+  }),
+  queryCache: new QueryCache({
+    onError: (error, mutation) => {
+      handleError(error, mutation.meta?.error);
+    },
+  }),
+});
 
 export function RootProvider({ children }: PropsWithChildren<unknown>) {
   const [showReactQueryDevtools, setShowReactQueryDevtools] = useState(false);
@@ -29,3 +46,20 @@ export function RootProvider({ children }: PropsWithChildren<unknown>) {
     </StrictMode>
   );
 }
+
+function handleError(error: unknown, errorMeta?: unknown) {
+  if (errorMeta && typeof errorMeta === 'object') {
+    if (!('title' in errorMeta)) {
+      return;
+    }
+
+    const { title, message } = errorMeta as {
+      title: unknown;
+      message?: unknown;
+    };
+
+    if (typeof title === 'string') {
+      notifyError(title, error as Error, message as string);
+    }
+  }
+}

app/react-tools/test-mocks.ts

@@ -1,10 +1,16 @@
 import _ from 'lodash';
 
-export function createMockUsers(count: number) {
+import { Team } from '@/portainer/teams/types';
+import { Role, User, UserId } from '@/portainer/users/types';
+
+export function createMockUsers(
+  count: number,
+  roles: Role | Role[] | ((id: UserId) => Role) = () => _.random(1, 3)
+): User[] {
   return _.range(1, count + 1).map((value) => ({
     Id: value,
     Username: `user${value}`,
-    Role: _.random(1, 3),
+    Role: getRoles(roles, value),
     UserTheme: '',
     RoleName: '',
     AuthenticationMethod: '',
@@ -14,7 +20,22 @@ export function createMockUsers(count: number) {
   }));
 }
 
-export function createMockTeams(count: number) {
+function getRoles(
+  roles: Role | Role[] | ((id: UserId) => Role),
+  id: UserId
+): Role {
+  if (typeof roles === 'function') {
+    return roles(id);
+  }
+
+  if (typeof roles === 'number') {
+    return roles;
+  }
+
+  return roles[id];
+}
+
+export function createMockTeams(count: number): Team[] {
   return _.range(1, count + 1).map((value) => ({
     Id: value,
     Name: `team${value}`,