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/portainer/components/accessControlForm/AccessControlForm.validation.ts

@@ -0,0 +1,41 @@
+import { object, string, array, number, bool } from 'yup';
+
+import { ResourceControlOwnership } from '@/portainer/models/resourceControl/resourceControlOwnership';
+
+export function validationSchema(isAdmin: boolean) {
+  return object().shape({
+    accessControlEnabled: bool(),
+    ownership: string()
+      .oneOf(Object.values(ResourceControlOwnership))
+      .when('accessControlEnabled', {
+        is: true,
+        then: (schema) => schema.required(),
+      }),
+    authorizedUsers: array(number()).when(
+      ['accessControlEnabled', 'ownership'],
+      {
+        is: (
+          accessControlEnabled: boolean,
+          ownership: ResourceControlOwnership
+        ) =>
+          isAdmin &&
+          accessControlEnabled &&
+          ownership === ResourceControlOwnership.RESTRICTED,
+        then: (schema) =>
+          schema.required('You must specify at least one user.'),
+      }
+    ),
+    authorizedTeams: array(number()).when(
+      ['accessControlEnabled', 'ownership'],
+      {
+        is: (
+          accessControlEnabled: boolean,
+          ownership: ResourceControlOwnership
+        ) =>
+          accessControlEnabled &&
+          ownership === ResourceControlOwnership.RESTRICTED,
+        then: (schema) => schema.required('You must specify at least one team'),
+      }
+    ),
+  });
+}