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

.storybook/preview.js

@@ -1,6 +1,22 @@
 import '../app/assets/css';
 
 import { pushStateLocationPlugin, UIRouter } from '@uirouter/react';
+import { initialize as initMSW, mswDecorator } from 'msw-storybook-addon';
+import { handlers } from '@/setup-tests/server-handlers';
+
+// Initialize MSW
+initMSW({
+  onUnhandledRequest: ({ method, url }) => {
+    if (url.pathname.startsWith('/api')) {
+      console.error(`Unhandled ${method} request to ${url}.
+
+        This exception has been only logged in the console, however, it's strongly recommended to resolve this error as you don't want unmocked data in Storybook stories.
+
+        If you wish to mock an error response, please refer to this guide: https://mswjs.io/docs/recipes/mocking-error-responses
+      `);
+    }
+  },
+});
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -10,6 +26,9 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  msw: {
+    handlers,
+  },
 };
 
 export const decorators = [
@@ -18,4 +37,5 @@ export const decorators = [
       <Story />
     </UIRouter>
   ),
+  mswDecorator,
 ];