refactor(app): create access-control-form react component [EE-2332] (#6346)

* refactor(app): create access-control-form react component [EE-2332]

fix [EE-2332]

* chore(tests): setup msw for async tests and stories

chore(sb): add msw support for storybook

* refactor(access-control): move loading into component

* fix(app): fix users and teams selector stories

* chore(access-control): write test for validation

app/react-tools/test-mocks.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash';
+
+export function createMockUsers(count: number) {
+  return _.range(1, count + 1).map((value) => ({
+    Id: value,
+    Username: `user${value}`,
+    Role: _.random(1, 3),
+    UserTheme: '',
+    RoleName: '',
+    AuthenticationMethod: '',
+    Checked: false,
+    EndpointAuthorizations: {},
+    PortainerAuthorizations: {},
+  }));
+}
+
+export function createMockTeams(count: number) {
+  return _.range(1, count + 1).map((value) => ({
+    Id: value,
+    Name: `team${value}`,
+  }));
+}

app/react-tools/test-utils.tsx

@@ -3,6 +3,7 @@ import '@testing-library/jest-dom';
 import { render, RenderOptions } from '@testing-library/react';
 import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
 import { PropsWithChildren, ReactElement } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 function Provider({ children }: PropsWithChildren<unknown>) {
   return <UIRouter plugins={[pushStateLocationPlugin]}>{children}</UIRouter>;
@@ -17,3 +18,21 @@ export * from '@testing-library/react';
 
 // override render method
 export { customRender as render };
+
+export function renderWithQueryClient(ui: React.ReactElement) {
+  const testQueryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const { rerender, ...result } = customRender(
+    <QueryClientProvider client={testQueryClient}>{ui}</QueryClientProvider>
+  );
+  return {
+    ...result,
+    rerender: (rerenderUi: React.ReactElement) =>
+      rerender(
+        <QueryClientProvider client={testQueryClient}>
+          {rerenderUi}
+        </QueryClientProvider>
+      ),
+  };
+}