From ceddad4e0a447b3cd50997162bf1a2531bd18968 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 21 Nov 2024 10:03:39 +0100
Subject: [PATCH] wip

---
 .../api/src/modules/auth/lib/authz.ts         |   50 +-
 .../shared/permission-picker.spec.ts          |  340 ++++++
 .../components/shared/permission-picker.tsx   |  914 ++++++++++++++
 .../shared/permission-picker/lib.ts           |  223 ++++
 .../shared/permission-picker/permissions.ts   |  277 +++++
 .../new-permissions-picker.stories.tsx        | 1073 -----------------
 .../src/stories/permission-picker.stories.tsx |   62 +
 7 files changed, 1841 insertions(+), 1098 deletions(-)
 create mode 100644 packages/web/app/src/components/shared/permission-picker.spec.ts
 create mode 100644 packages/web/app/src/components/shared/permission-picker.tsx
 create mode 100644 packages/web/app/src/components/shared/permission-picker/lib.ts
 create mode 100644 packages/web/app/src/components/shared/permission-picker/permissions.ts
 delete mode 100644 packages/web/app/src/stories/new-permissions-picker.stories.tsx
 create mode 100644 packages/web/app/src/stories/permission-picker.stories.tsx

diff --git a/packages/services/api/src/modules/auth/lib/authz.ts b/packages/services/api/src/modules/auth/lib/authz.ts
index af58d3b3c81..251a591697b 100644
--- a/packages/services/api/src/modules/auth/lib/authz.ts
+++ b/packages/services/api/src/modules/auth/lib/authz.ts
@@ -322,35 +322,35 @@ function schemaCheckOrPublishIdentity(
  * This is the place to do so.
  */
 const actionDefinitions = {
-  'organization:describe': defaultOrgIdentity,
-  'organization:modifySlug': defaultOrgIdentity,
-  'organization:delete': defaultOrgIdentity,
-  'gitHubIntegration:modify': defaultOrgIdentity,
-  'slackIntegration:modify': defaultOrgIdentity,
-  'oidc:modify': defaultOrgIdentity,
-  'support:manageTickets': defaultOrgIdentity,
-  'billing:describe': defaultOrgIdentity,
-  'billing:update': defaultOrgIdentity,
+  'organization:describe': defaultOrgIdentity, // done
+  'organization:modifySlug': defaultOrgIdentity, // done
+  'organization:delete': defaultOrgIdentity, // done
+  'gitHubIntegration:modify': defaultOrgIdentity, // done
+  'slackIntegration:modify': defaultOrgIdentity, // done
+  'oidc:modify': defaultOrgIdentity, // done
+  'support:manageTickets': defaultOrgIdentity, // done
+  'billing:describe': defaultOrgIdentity, // done
+  'billing:update': defaultOrgIdentity, // done
   'targetAccessToken:modify': defaultTargetIdentity,
   'cdnAccessToken:modify': defaultTargetIdentity,
-  'member:describe': defaultOrgIdentity,
-  'member:assignRole': defaultOrgIdentity,
-  'member:modifyRole': defaultOrgIdentity,
-  'member:removeMember': defaultOrgIdentity,
-  'member:manageInvites': defaultOrgIdentity,
-  'project:create': defaultOrgIdentity,
-  'project:describe': defaultProjectIdentity,
-  'project:delete': defaultProjectIdentity,
-  'project:modifySettings': defaultProjectIdentity,
+  'member:describe': defaultOrgIdentity, // done
+  'member:assignRole': defaultOrgIdentity, // done
+  'member:modifyRole': defaultOrgIdentity, // done
+  'member:removeMember': defaultOrgIdentity, // done
+  'member:manageInvites': defaultOrgIdentity, // done
+  'project:create': defaultOrgIdentity, // done
+  'project:describe': defaultProjectIdentity, // done
+  'project:delete': defaultProjectIdentity, // done
+  'project:modifySettings': defaultProjectIdentity, // done
   'alert:modify': defaultProjectIdentity,
-  'schemaLinting:modifyOrganizationRules': defaultOrgIdentity,
+  'schemaLinting:modifyOrganizationRules': defaultOrgIdentity, // done
   'schemaLinting:modifyProjectRules': defaultProjectIdentity,
-  'target:create': defaultProjectIdentity,
-  'target:delete': defaultTargetIdentity,
-  'target:modifySettings': defaultTargetIdentity,
-  'laboratory:describe': defaultTargetIdentity,
-  'laboratory:modify': defaultTargetIdentity,
-  'appDeployment:describe': defaultTargetIdentity,
+  'target:create': defaultProjectIdentity, // done
+  'target:delete': defaultTargetIdentity, // done
+  'target:modifySettings': defaultTargetIdentity, // done
+  'laboratory:describe': defaultTargetIdentity, // done
+  'laboratory:modify': defaultTargetIdentity, // done
+  'appDeployment:describe': defaultTargetIdentity, // done
   'appDeployment:create': defaultAppDeploymentIdentity,
   'appDeployment:publish': defaultAppDeploymentIdentity,
   'appDeployment:retire': defaultAppDeploymentIdentity,
diff --git a/packages/web/app/src/components/shared/permission-picker.spec.ts b/packages/web/app/src/components/shared/permission-picker.spec.ts
new file mode 100644
index 00000000000..54a74215cdd
--- /dev/null
+++ b/packages/web/app/src/components/shared/permission-picker.spec.ts
@@ -0,0 +1,340 @@
+import {
+  createPermissionSelectionGroup,
+  PermissionsSelectionGroupAccessMode,
+  ResolvedResourcePermissions,
+  resolvePermissionsFromPermissionSelectionGroup,
+  Resource,
+} from './permission-picker/lib';
+import { ResourceLevel } from './permission-picker/permissions';
+
+describe('createPermissionSelectionGroup', () => {
+  test('includes default permissions', () => {
+    const group = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    expect(group).toEqual({
+      id: 'default',
+      level: ResourceLevel.organization,
+      mode: PermissionsSelectionGroupAccessMode.granular,
+      resourceIds: ['the-guild'],
+      selectedPermissions: {
+        'organization:describe': 'allow',
+      },
+      title: 'Default group',
+    });
+
+    expect(group.selectedPermissions).toEqual({
+      'organization:describe': 'allow',
+    });
+  });
+});
+
+describe('resolvePermissionsFromPermissionSelectionGroup', () => {
+  test('resolve permissions for default permissions on single group', () => {
+    const resource: Resource = {
+      id: 'the-guild',
+      level: ResourceLevel.organization,
+    };
+    const group = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([group], [resource]);
+
+    expect(result).toEqual([
+      {
+        resourceId: 'the-guild',
+        permissions: {
+          'organization:describe': 'allow',
+        },
+      } satisfies ResolvedResourcePermissions,
+    ]);
+  });
+
+  test('resolve permissions for default group on single permissions', () => {
+    const resource: Resource = {
+      id: 'the-guild',
+      level: ResourceLevel.organization,
+    };
+    const group = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+    group.selectedPermissions['organization:support'] = 'allow';
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([group], [resource]);
+    expect(result[0].permissions['organization:support']).toEqual('allow');
+  });
+
+  test('resolve permissions for default group on single group', () => {
+    const resource: Resource = {
+      id: 'the-guild',
+      level: ResourceLevel.organization,
+    };
+    const group = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+    group.selectedPermissions['organization:support'] = 'deny';
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([group], [resource]);
+    expect(result[0].permissions['organization:support']).toEqual('deny');
+  });
+
+  test('deny takes precedence over allow', () => {
+    const resource: Resource = {
+      id: 'the-guild',
+      level: ResourceLevel.organization,
+    };
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.selectedPermissions['organization:support'] = 'deny';
+
+    const group1 = createPermissionSelectionGroup({
+      id: 'group-1',
+      level: ResourceLevel.organization,
+      title: 'Group 1',
+      resourceIds: ['the-guild'],
+    });
+
+    group1.selectedPermissions['organization:support'] = 'allow';
+
+    const result = resolvePermissionsFromPermissionSelectionGroup(
+      [defaultGroup, group1],
+      [resource],
+    );
+    expect(result[0].permissions['organization:support']).toEqual('deny');
+  });
+
+  test('permissions are applied on child resources depending on their level', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+        childResourceIds: ['the-guild/graphql-hive'],
+      },
+      {
+        id: 'the-guild/graphql-hive',
+        level: ResourceLevel.project,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.selectedPermissions['project:describe'] = 'allow';
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+    expect(result[0].permissions['project:describe']).toEqual(undefined);
+    expect(result[1].permissions['project:describe']).toEqual('allow');
+  });
+
+  test('"deny" takes precedence on child resource level', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+        childResourceIds: ['the-guild/graphql-hive'],
+      },
+      {
+        id: 'the-guild/graphql-hive',
+        level: ResourceLevel.project,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    const group1 = createPermissionSelectionGroup({
+      id: 'group1',
+      level: ResourceLevel.project,
+      title: 'Group 1',
+      resourceIds: ['the-guild/graphql-hive'],
+    });
+
+    defaultGroup.selectedPermissions['project:describe'] = 'allow';
+    group1.selectedPermissions['project:describe'] = 'deny';
+
+    const result = resolvePermissionsFromPermissionSelectionGroup(
+      [defaultGroup, group1],
+      resources,
+    );
+    expect(result[0].permissions['project:describe']).toEqual(undefined);
+    expect(result[1].permissions['project:describe']).toEqual('deny');
+  });
+
+  test('"PermissionsSelectionGroupAccessMode.allowAll" allow all actions on resource', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.allowAll;
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+
+    expect(result[0].permissions['members:describe']).toEqual('allow');
+  });
+
+  test('"PermissionsSelectionGroupAccessMode.denyAll" deny all actions on resource', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.denyAll;
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+
+    expect(result[0].permissions['members:describe']).toEqual('deny');
+  });
+
+  test('"PermissionsSelectionGroupAccessMode.allowAll" propagates allow all actions on child resource', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+        childResourceIds: ['the-guild/graphql-hive'],
+      },
+      {
+        id: 'the-guild/graphql-hive',
+        level: ResourceLevel.project,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.allowAll;
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+
+    expect(result[0].permissions['project:describe']).toEqual(undefined);
+    expect(result[1].permissions['project:describe']).toEqual('allow');
+  });
+  test('"PermissionsSelectionGroupAccessMode.denyAll" propagates deny all actions on child resource', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+        childResourceIds: ['the-guild/graphql-hive'],
+      },
+      {
+        id: 'the-guild/graphql-hive',
+        level: ResourceLevel.project,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.denyAll;
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+
+    expect(result[0].permissions['project:describe']).toEqual(undefined);
+    expect(result[1].permissions['project:describe']).toEqual('deny');
+  });
+
+  test('"PermissionsSelectionGroupAccessMode.denyAll" and "PermissionsSelectionGroupAccessMode.allowAll" in different groups on same resource result in deny', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.allowAll;
+
+    const group1 = createPermissionSelectionGroup({
+      id: 'group1',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    group1.mode = PermissionsSelectionGroupAccessMode.denyAll;
+
+    const groups = [defaultGroup, group1];
+
+    const result = resolvePermissionsFromPermissionSelectionGroup(groups, resources);
+    expect(result[0].permissions['members:describe']).toEqual('deny');
+  });
+
+  test('"PermissionsSelectionGroupAccessMode.denyAll" does not work on read only fields', () => {
+    const resources: Array<Resource> = [
+      {
+        id: 'the-guild',
+        level: ResourceLevel.organization,
+      },
+    ];
+
+    const defaultGroup = createPermissionSelectionGroup({
+      id: 'default',
+      level: ResourceLevel.organization,
+      title: 'Default group',
+      resourceIds: ['the-guild'],
+    });
+
+    defaultGroup.mode = PermissionsSelectionGroupAccessMode.denyAll;
+
+    const result = resolvePermissionsFromPermissionSelectionGroup([defaultGroup], resources);
+    expect(result[0].permissions['organization:describe']).toEqual('allow');
+  });
+});
diff --git a/packages/web/app/src/components/shared/permission-picker.tsx b/packages/web/app/src/components/shared/permission-picker.tsx
new file mode 100644
index 00000000000..c7b68d2e404
--- /dev/null
+++ b/packages/web/app/src/components/shared/permission-picker.tsx
@@ -0,0 +1,914 @@
+import { Dispatch, useEffect, useMemo, useRef, useState } from 'react';
+import { Check, CheckIcon, ChevronDown, ChevronRight, InfoIcon, XIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import {
+  createPermissionSelectionGroup,
+  GrantedPermissions,
+  PermissionSelectionGroup,
+  PermissionsSelectionGroupAccessMode,
+  resolvePermissionsFromPermissionSelectionGroup,
+  Resource,
+  resourceLevelToScore,
+} from './permission-picker/lib';
+import {
+  allPermissionGroups,
+  PermissionGroup,
+  ResourceLevel,
+} from './permission-picker/permissions';
+
+function PermissionSelector(props: {
+  resourceLevel: ResourceLevel;
+  grantedPermissions: GrantedPermissions;
+  updateGrantedPermissions: (group: GrantedPermissions) => void;
+}) {
+  const grantedPermissions = useMemo<GrantedPermissions>(() => {
+    return {
+      ...props.grantedPermissions,
+      // A lot of the rules depends on 'project:describe'
+      // However, if we are on resource level target or service, project:describe needs to be specified so it can be selected.
+      ...(props.resourceLevel === ResourceLevel.target ||
+      props.resourceLevel === ResourceLevel.service
+        ? {
+            'project:describe': 'allow',
+          }
+        : {}),
+    };
+  }, [props.resourceLevel, props.grantedPermissions]);
+
+  const [filteredGroups, permissionGroupMapping] = useMemo(() => {
+    const filteredGroups: Array<
+      PermissionGroup & {
+        selectedPermissionCount: number;
+      }
+    > = [];
+    const permissionGroupMapping = new Map<string, string>();
+
+    for (const group of allPermissionGroups) {
+      let selectedPermissionCount = 0;
+
+      const filteredGroupPermissions = group.permissions.filter(permission => {
+        const shouldInclude =
+          resourceLevelToScore(props.resourceLevel) >= resourceLevelToScore(permission.level);
+
+        if (shouldInclude === false) {
+          return false;
+        }
+
+        if (props.grantedPermissions[permission.id] !== undefined) {
+          selectedPermissionCount++;
+        }
+
+        permissionGroupMapping.set(permission.id, group.title);
+
+        return true;
+      });
+
+      if (filteredGroupPermissions.length === 0) {
+        continue;
+      }
+
+      filteredGroups.push({
+        ...group,
+        selectedPermissionCount,
+        permissions: filteredGroupPermissions,
+      });
+    }
+
+    return [filteredGroups, permissionGroupMapping] as const;
+  }, [props.resourceLevel, props.grantedPermissions]);
+
+  const permissionRefs = useRef(new Map<string, HTMLElement>());
+  const [focusedPermission, setFocusedPermission] = useState(null as string | null);
+  const [openAccordions, setOpenAccordions] = useState([] as Array<string>);
+
+  return (
+    <Accordion
+      type="multiple"
+      className="w-full"
+      value={openAccordions}
+      onValueChange={values => setOpenAccordions(values)}
+    >
+      {filteredGroups.map(group => {
+        const dependencyGraph = new Map<string, Array<string>>();
+        for (const permission of group.permissions) {
+          if (!permission.dependsOn) {
+            continue;
+          }
+          let arr = dependencyGraph.get(permission.dependsOn);
+          if (!arr) {
+            arr = [];
+            dependencyGraph.set(permission.dependsOn, arr);
+          }
+          arr.push(permission.id);
+        }
+
+        return (
+          <AccordionItem value={group.title} key={group.title}>
+            <AccordionTrigger className="w-full" key={group.title}>
+              {group.title}{' '}
+              {group.selectedPermissionCount > 0 && (
+                <span className="ml-auto mr-1 inline-block text-sm">
+                  {group.selectedPermissionCount} selected
+                </span>
+              )}
+            </AccordionTrigger>
+            <AccordionContent className="pl-2 pt-1" forceMount={true}>
+              {group.permissions.map(permission => {
+                const needsDependency =
+                  !!permission.dependsOn && grantedPermissions[permission.dependsOn] !== 'allow';
+
+                return (
+                  <div
+                    className={cn(
+                      'border-ring flex flex-row items-center justify-between space-x-4 border-orange-500 pb-2 text-sm',
+                      focusedPermission === permission.id && 'margin-[-1px] border',
+                    )}
+                    key={permission.id}
+                    data-permission-id={permission.id}
+                    ref={ref => {
+                      if (ref) {
+                        permissionRefs.current.set(permission.id, ref);
+                      }
+                    }}
+                  >
+                    <div className={cn(needsDependency && 'opacity-30')}>
+                      <div className="font-semibold text-white">{permission.title}</div>
+                      <div className="text-xs text-gray-400">{permission.description}</div>
+                    </div>
+                    {!!permission.dependsOn && permissionGroupMapping.has(permission.dependsOn) && (
+                      <div className="text-gray flex grow justify-end">
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <InfoIcon />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>
+                                This permission depends on another permission.{' '}
+                                <Button
+                                  variant="orangeLink"
+                                  onClick={() => {
+                                    const dependencyPermission = permission.dependsOn;
+                                    if (!dependencyPermission) {
+                                      return;
+                                    }
+                                    const element =
+                                      permissionRefs.current.get(dependencyPermission);
+
+                                    if (!element) {
+                                      return;
+                                    }
+                                    setOpenAccordions(values => {
+                                      const groupName =
+                                        permissionGroupMapping.get(dependencyPermission);
+                                      if (!groupName) {
+                                      }
+                                      if (groupName && values.includes(groupName) === false) {
+                                        return [...values, groupName];
+                                      }
+                                      return values;
+                                    });
+                                    setFocusedPermission(dependencyPermission);
+                                    element.scrollIntoView({ behavior: 'smooth' });
+                                  }}
+                                >
+                                  View permission.
+                                </Button>
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      </div>
+                    )}
+                    <Select
+                      disabled={permission.readOnly || needsDependency}
+                      value={
+                        permission.readOnly
+                          ? 'allow'
+                          : grantedPermissions[permission.id] || 'not-selected'
+                      }
+                      onValueChange={value => {
+                        const dependents = dependencyGraph.get(permission.id) ?? [];
+                        if (value === 'allow') {
+                          props.updateGrantedPermissions({
+                            [permission.id]: 'allow',
+                            ...Object.fromEntries(
+                              dependents.map(value => [value, undefined] as const),
+                            ),
+                          });
+                        } else if (value === 'deny') {
+                          props.updateGrantedPermissions({
+                            [permission.id]: 'deny',
+                            ...Object.fromEntries(
+                              dependents.map(value => [value, 'deny'] as const),
+                            ),
+                          });
+                        } else if (value === 'not-selected') {
+                          props.updateGrantedPermissions({
+                            [permission.id]: undefined,
+                            ...Object.fromEntries(
+                              dependents.map(value => [value, undefined] as const),
+                            ),
+                          });
+                        }
+                        setFocusedPermission(null);
+                      }}
+                    >
+                      <SelectTrigger className="w-[150px] shrink-0">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="not-selected">Not Selected</SelectItem>
+                        <SelectItem value="allow">Allow</SelectItem>
+                        <SelectItem value="deny">Deny</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                );
+              })}
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}
+
+function GroupTeaser(props: {
+  title: string;
+  grantedPermissions: GrantedPermissions;
+  onClick: () => void;
+  mode: PermissionsSelectionGroupAccessMode;
+  resourceLevel: ResourceLevel.target | ResourceLevel.project | ResourceLevel.service | null;
+  selectedResourceIds: Array<string>;
+}) {
+  const assignedPermissionsCount = Array.from(Object.values(props.grantedPermissions)).reduce(
+    (current, next) => {
+      if (!next) {
+        return current;
+      }
+      return current + 1;
+    },
+    0,
+  );
+
+  return (
+    <Button variant="outline" className="w-full" onClick={props.onClick}>
+      {props.resourceLevel && <Badge className="mr-2 capitalize">{props.resourceLevel}</Badge>}
+      <span className="ml-0 mr-auto">{props.title}</span>
+      {props.resourceLevel && props.selectedResourceIds.length === 0 ? (
+        <>
+          <span className="text-red-400">No {props.resourceLevel}s selected</span>
+        </>
+      ) : (
+        <>
+          {props.mode === PermissionsSelectionGroupAccessMode.granular &&
+            (assignedPermissionsCount > 0 ? (
+              <>{assignedPermissionsCount} selected</>
+            ) : (
+              <span className={cn(props.resourceLevel && 'text-red-400')}>
+                No permissions selected
+              </span>
+            ))}
+          {props.mode === PermissionsSelectionGroupAccessMode.allowAll && <>All allowed</>}
+          {props.mode === PermissionsSelectionGroupAccessMode.denyAll && <>All denied</>}
+        </>
+      )}
+      <ChevronRight size={16} className="ml-2" />
+    </Button>
+  );
+}
+
+function ResourceBadge(props: { name: string; onDelete: () => void }) {
+  return (
+    <Badge className="mr-1 pr-1">
+      {props.name}
+      <button className="ml-1" onClick={props.onDelete}>
+        <XIcon size="10" />
+      </button>
+    </Badge>
+  );
+}
+
+function ResourceSelector(props: {
+  onSelect: (value: string) => void;
+  level: ResourceLevel;
+  // availableValues: Array<string>;
+  // selectedResourceIds: Array<string>;
+}) {
+  // const filteredResourceIds = props.availableValues.filter(
+  //   value => !props.selectedResourceIds.includes(value),
+  // );
+
+  const filteredResourceIds: Array<string> = [];
+
+  return (
+    <Select
+      value=""
+      onValueChange={value => {
+        if (value === '__noop__') {
+          return;
+        }
+        props.onSelect(value);
+      }}
+    >
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={'Select a ' + props.level} />
+      </SelectTrigger>
+      <SelectContent>
+        {filteredResourceIds.map(value => (
+          <SelectItem value={value}>{value}</SelectItem>
+        ))}
+        {filteredResourceIds.length === 0 && (
+          <SelectItem value="__noop__" disabled>
+            All {props.level}s assigned.
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+type PermissionPickerProps = {
+  resources: Array<Resource>;
+};
+
+type NavigationState =
+  | {
+      type: 'confirmation';
+    }
+  | {
+      type: 'group';
+      groupId: string;
+    };
+
+export function PermissionPicker(props: PermissionPickerProps) {
+  // TODO: should be passed via props
+  const [navigationState, setNavigationState] = useState<null | NavigationState>(() => {
+    try {
+      return JSON.parse(localStorage.getItem('hive:prototype:permissions')!).navigationState;
+    } catch (err) {
+      return null;
+    }
+  });
+
+  const [dynamicGroups, setDynamicGroups] = useState<Array<PermissionSelectionGroup>>(() => {
+    // TODO: should be passed via props
+    try {
+      return JSON.parse(localStorage.getItem('hive:prototype:permissions')!).dynamicGroups;
+    } catch (err) {
+      return [
+        createPermissionSelectionGroup({
+          id: 'default',
+          level: ResourceLevel.organization,
+          title: 'Global Organization Permissions',
+          resourceIds: props.resources
+            .filter(resource => resource.level === ResourceLevel.organization)
+            .map(resource => resource.id),
+        }),
+      ];
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem(
+      'hive:prototype:permissions',
+      JSON.stringify({
+        navigationState,
+        dynamicGroups,
+      }),
+    );
+  }, [navigationState, dynamicGroups]);
+
+  if (navigationState?.type === 'confirmation') {
+    return (
+      <ConfirmationScreen
+        goBack={() => setNavigationState(null)}
+        groups={dynamicGroups}
+        resources={props.resources}
+      />
+    );
+  }
+
+  if (navigationState?.type === 'group') {
+    const selectedGroup = dynamicGroups.find(group => group.id === navigationState.groupId);
+
+    if (selectedGroup) {
+      return (
+        <PermissionSelectionGroupEditor
+          close={() => setNavigationState(null)}
+          group={selectedGroup}
+          updateGroup={fn => {
+            setDynamicGroups(groups =>
+              groups.map(group => {
+                if (group.id === selectedGroup.id) {
+                  return fn(group);
+                }
+
+                return group;
+              }),
+            );
+          }}
+          onDelete={() => {
+            setDynamicGroups(groups => groups.filter(group => group.id !== selectedGroup.id));
+          }}
+        />
+      );
+    }
+  }
+
+  return (
+    <PermissionOverview
+      navigateToGroup={groupId => setNavigationState({ type: 'group', groupId })}
+      navigateToConfirmation={() => setNavigationState({ type: 'confirmation' })}
+      addGroup={level => {
+        const id = window.crypto.randomUUID();
+        setDynamicGroups(groups => [
+          ...groups,
+          createPermissionSelectionGroup({
+            id,
+            level,
+            title: 'Group ' + id,
+          }),
+        ]);
+        setNavigationState({ type: 'group', groupId: id });
+      }}
+      groups={dynamicGroups}
+    />
+  );
+}
+
+function PermissionOverview(props: {
+  navigateToGroup: (groupId: string) => void;
+  navigateToConfirmation: () => void;
+  addGroup: (level: ResourceLevel) => void;
+  groups: Array<PermissionSelectionGroup>;
+}) {
+  const form = useForm({
+    defaultValues: {},
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Member Role Editor</CardTitle>
+        <CardDescription>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-row space-x-6">
+          <div className="w-72 shrink-0 space-y-4">
+            <Form {...form}>
+              <FormField
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter a name" type="text" autoComplete="off" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea placeholder="Enter a description" autoComplete="off" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </Form>
+          </div>
+
+          <div className="grow">
+            <div className="space-y-2">
+              {props.groups.map(group => {
+                return (
+                  <GroupTeaser
+                    key={group.id}
+                    title={group.title}
+                    grantedPermissions={group.selectedPermissions}
+                    onClick={() => props.navigateToGroup(group.id)}
+                    mode={group.mode}
+                    resourceLevel={
+                      group.id === 'default'
+                        ? null
+                        : (group.level as
+                            | ResourceLevel.project
+                            | ResourceLevel.target
+                            | ResourceLevel.service)
+                    }
+                    selectedResourceIds={group.resourceIds}
+                  />
+                );
+              })}
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size="sm" className="ml-auto mr-0 mt-3 block">
+                  Add More <ChevronDown className="inline" size="16" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={() => props.addGroup(ResourceLevel.project)}>
+                  Project-level
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => props.addGroup(ResourceLevel.target)}>
+                  Target-level
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => props.addGroup(ResourceLevel.service)}>
+                  Service-level
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end space-x-2">
+        <Button className="ml-auto mr-0" onClick={() => props.navigateToConfirmation()}>
+          Continue checking permissions
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+function PermissionSelectionGroupEditor(props: {
+  close: () => void;
+  group: PermissionSelectionGroup;
+  updateGroup: Dispatch<(group: PermissionSelectionGroup) => PermissionSelectionGroup>;
+  onDelete: () => void;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <span className="cursor-pointer" onClick={() => props.close()}>
+            Member Role Editor
+          </span>{' '}
+          <span>{'>'}</span> {props.group.title}
+        </CardTitle>
+        {props.group.id === 'default' && (
+          <CardDescription>
+            These permissions apply to all resources within the organization.
+            <br /> E.g. if you grant access to projects permissions, these apply to all projects.
+          </CardDescription>
+        )}
+        {props.group.level === ResourceLevel.project && (
+          <CardDescription>
+            These permissions apply to all the selected projects.
+            <br /> E.g. if you grant access to access the laboratory, the member is able to access
+            the laboratory on all targets within all the selected projects.
+          </CardDescription>
+        )}
+        {props.group.level === ResourceLevel.target && (
+          <CardDescription>
+            These permissions apply to all the selected targets.
+            <br /> E.g. if you grant access to approve schema checks, the member is able to approve
+            schema checks on all services within the target.
+          </CardDescription>
+        )}
+        {props.group.level === ResourceLevel.service && (
+          <CardDescription>These permission apply to all the selected services.</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-row space-x-6">
+          <div className="w-72 shrink-0 space-y-4">
+            {props.group.level !== ResourceLevel.organization && (
+              <>
+                <div className="grid w-full max-w-sm items-center gap-1.5">
+                  <Label>Group Title</Label>
+                  <Input
+                    value={props.group.title}
+                    onChange={ev => {
+                      props.updateGroup(group => ({
+                        ...group,
+                        title: ev.target.value,
+                      }));
+                    }}
+                  />
+                </div>
+                <div className="grid w-full max-w-sm items-center gap-1.5">
+                  <Label>Selected {props.group.level}s</Label>
+                  <div className="flex w-full max-w-sm items-center space-x-2">
+                    <ResourceSelector
+                      onSelect={value => {
+                        props.updateGroup(group => ({
+                          ...group,
+                          resources: [...group.resourceIds, value],
+                        }));
+                      }}
+                      level={props.group.level}
+                    />
+                  </div>
+                </div>
+                <div className="mt-2">
+                  {props.group.resourceIds.map(resourceId => (
+                    <ResourceBadge
+                      key={resourceId}
+                      name={resourceId}
+                      onDelete={() => {
+                        props.updateGroup(group => ({
+                          ...group,
+                          resources: group.resourceIds.filter(name => name !== resourceId),
+                        }));
+                      }}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+            <div className="grid w-full max-w-sm items-center gap-1.5">
+              <Label>Mode</Label>
+              <Select
+                value={props.group.mode}
+                onValueChange={value => {
+                  props.updateGroup(group => ({
+                    ...group,
+                    mode: value as PermissionsSelectionGroupAccessMode,
+                  }));
+                }}
+              >
+                <SelectTrigger className="w-[150px] shrink-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={PermissionsSelectionGroupAccessMode.granular}>
+                    Granular
+                  </SelectItem>
+                  <SelectItem value={PermissionsSelectionGroupAccessMode.allowAll}>
+                    Allow All
+                  </SelectItem>
+                  <SelectItem value={PermissionsSelectionGroupAccessMode.denyAll}>
+                    Deny all
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {props.group.mode === PermissionsSelectionGroupAccessMode.granular && (
+              <>
+                <p className="text-muted-foreground text-sm">
+                  Grant specific permissions for the specified resources based on your selection.
+                </p>
+              </>
+            )}
+            {props.group.mode === PermissionsSelectionGroupAccessMode.allowAll && (
+              <p className="text-muted-foreground text-sm">
+                All permissions are granted for the specified resources.
+              </p>
+            )}
+            {props.group.mode === PermissionsSelectionGroupAccessMode.denyAll && (
+              <p className="text-muted-foreground text-sm">
+                All permissions are denied for the specified resources.
+              </p>
+            )}
+          </div>
+          <div
+            className={cn(
+              'max-h-[500px] w-full overflow-scroll pr-5',
+              !!(
+                props.group.mode === PermissionsSelectionGroupAccessMode.allowAll ||
+                props.group.mode === PermissionsSelectionGroupAccessMode.denyAll
+              ) && 'pointer-events-none opacity-25',
+            )}
+          >
+            <PermissionSelector
+              resourceLevel={props.group.level}
+              grantedPermissions={
+                props.group.mode === PermissionsSelectionGroupAccessMode.allowAll ||
+                props.group.mode === PermissionsSelectionGroupAccessMode.denyAll
+                  ? {}
+                  : props.group.selectedPermissions
+              }
+              updateGrantedPermissions={updates => {
+                props.updateGroup(group => ({
+                  ...group,
+                  selectedPermissions: { ...group.selectedPermissions, ...updates },
+                }));
+              }}
+            />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-end space-x-2">
+        {props.group.resourceIds.length === 0 &&
+          props.group.level !== ResourceLevel.organization && (
+            <span className="pr-5 text-red-400">Please add at least one {props.group.level}.</span>
+          )}
+        {props.group.id !== 'default' && <Button onClick={props.onDelete}>Delete</Button>}
+        <Button
+          onClick={props.close}
+          disabled={
+            props.group.resourceIds.length === 0 && props.group.level !== ResourceLevel.organization
+          }
+        >
+          <Check size={12} /> Apply
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
+
+function ConfirmationScreen(props: {
+  groups: Array<PermissionSelectionGroup>;
+  resources: Array<Resource>;
+  goBack: () => void;
+}) {
+  const resolvedPermissionsPerResource = useMemo(() => {
+    const resources = resolvePermissionsFromPermissionSelectionGroup(props.groups, props.resources);
+    return resources.map(row => ({
+      resource: props.resources.find(resource => resource.id === row.resourceId)!,
+      permissions: row.permissions,
+    }));
+  }, [props.groups]);
+
+  const [showAllowOnly, setShowAllowOnly] = useState(true);
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle>Member Role Editor</CardTitle>
+        <CardDescription>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="items-top flex space-x-2">
+          <Checkbox
+            id="terms1"
+            checked={showAllowOnly}
+            onCheckedChange={value => setShowAllowOnly(!!value)}
+          />
+          <div className="grid gap-1.5 leading-none">
+            <label
+              htmlFor="terms1"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Show only allowed permissions
+            </label>
+          </div>
+        </div>
+        {resolvedPermissionsPerResource.map(resource => (
+          <MemberRoleConfirmationGroup
+            key={resource.resource.id}
+            title={resource.resource.id}
+            level={resource.resource.level}
+            permissions={resource.permissions}
+            showAllowOnly={showAllowOnly}
+          />
+        ))}
+      </CardContent>
+      <CardFooter className="flex justify-end space-x-2">
+        <Button onClick={() => props.goBack()}>Go back</Button>
+        <Button>Create Member Role</Button>
+      </CardFooter>
+    </>
+  );
+}
+
+function MemberRoleConfirmationGroup(props: {
+  level: ResourceLevel;
+  title: string;
+  permissions: GrantedPermissions;
+  showAllowOnly: boolean;
+}) {
+  const [filteredGroups, totalAllowedCount] = useMemo(() => {
+    let totalAllowedCount = 0;
+    const filteredGroups: Array<
+      PermissionGroup & {
+        totalAllowedCount: number;
+      }
+    > = [];
+    for (const group of allPermissionGroups) {
+      let groupTotalAllowedCount = 0;
+      const filteredPermissions = group.permissions.filter(permission => {
+        if (permission.level !== props.level) {
+          return false;
+        }
+
+        if (props.permissions[permission.id] === 'allow') {
+          totalAllowedCount++;
+          groupTotalAllowedCount++;
+        }
+
+        return true;
+      });
+
+      if (filteredPermissions.length === 0) {
+        continue;
+      }
+
+      filteredGroups.push({
+        ...group,
+        permissions: filteredPermissions,
+        totalAllowedCount: groupTotalAllowedCount,
+      });
+    }
+
+    return [filteredGroups, totalAllowedCount];
+  }, [props.level]);
+
+  if (totalAllowedCount === 0 && props.showAllowOnly) {
+    return null;
+  }
+
+  return (
+    <Accordion
+      type="single"
+      defaultValue={totalAllowedCount > 0 ? props.title : undefined}
+      collapsible
+    >
+      <AccordionItem value={props.title}>
+        <AccordionTrigger className="w-full">
+          {props.title}
+          <Badge className="ml-2">{props.level}</Badge>
+          <span className="ml-auto mr-2">{totalAllowedCount} allowed</span>
+        </AccordionTrigger>
+        <AccordionContent className="ml-1 flex max-w-[800px] flex-wrap items-start overflow-x-scroll">
+          {filteredGroups.map(group =>
+            props.showAllowOnly && group.totalAllowedCount === 0 ? null : (
+              <div className="w-[50%] min-w-[400px] pb-4 pr-12">
+                <table key={group.title} className="w-full">
+                  <tr>
+                    <th className="pb-2 text-left">{group.title}</th>
+                  </tr>
+                  {group.permissions.map(permission =>
+                    props.showAllowOnly && props.permissions[permission.id] !== 'allow' ? null : (
+                      <tr key={permission.id}>
+                        <td>{permission.title}</td>
+                        <td className="bold ml-2 text-right">
+                          {props.permissions[permission.id] === 'allow' ? (
+                            <span className="text-green-500">
+                              <CheckIcon className="inline size-4" /> Allowed
+                            </span>
+                          ) : (
+                            <span>
+                              <XIcon className="inline size-4" /> Deny
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                    ),
+                  )}
+                </table>
+              </div>
+            ),
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/packages/web/app/src/components/shared/permission-picker/lib.ts b/packages/web/app/src/components/shared/permission-picker/lib.ts
new file mode 100644
index 00000000000..d31cf2d892c
--- /dev/null
+++ b/packages/web/app/src/components/shared/permission-picker/lib.ts
@@ -0,0 +1,223 @@
+import { allPermissionGroups, ResourceLevel, type PermissionRecord } from './permissions';
+
+// some caches to avoid some iterations
+const resourceLevelToPermissions = new Map<ResourceLevel, Array<string>>();
+const permissionsById = new Map<string, PermissionRecord>();
+
+for (const permissionGroup of allPermissionGroups) {
+  for (const permission of permissionGroup.permissions) {
+    permissionsById.set(permission.id, permission);
+    let permissions = resourceLevelToPermissions.get(permission.level);
+    if (!permissions) {
+      permissions = [];
+      resourceLevelToPermissions.set(permission.level, permissions);
+    }
+    permissions.push(permission.id);
+  }
+}
+
+export type GrantedPermissions = { [key: string]: 'allow' | 'deny' | undefined };
+
+export const enum PermissionsSelectionGroupAccessMode {
+  granular = 'granular',
+  allowAll = 'allowAll',
+  denyAll = 'denyAll',
+}
+
+export type PermissionSelectionGroup = {
+  id: string;
+  level: ResourceLevel;
+  title: string;
+  selectedPermissions: GrantedPermissions;
+  mode: PermissionsSelectionGroupAccessMode;
+  resourceIds: Array<string>;
+};
+
+export function createPermissionSelectionGroup(args: {
+  id: string;
+  level: ResourceLevel;
+  title: string;
+  resourceIds?: Array<string>;
+}): PermissionSelectionGroup {
+  const permissions: GrantedPermissions = {};
+
+  // add default permissions
+  for (const group of allPermissionGroups) {
+    for (const permission of group.permissions) {
+      if (permission.level === args.level && permission.readOnly === true) {
+        permissions[permission.id] = 'allow';
+      }
+    }
+  }
+
+  return {
+    ...args,
+    selectedPermissions: permissions,
+    mode: PermissionsSelectionGroupAccessMode.granular,
+    resourceIds: args.resourceIds ?? [],
+  };
+}
+
+export type Resource = {
+  id: string;
+  level: ResourceLevel;
+  /** List of resource IDs that inherit permissions from this resource. */
+  childResourceIds?: Array<string>;
+};
+
+export type ResolvedResourcePermissions = {
+  resourceId: string;
+  /** The permissions resolved for this Resource */
+  permissions: GrantedPermissions;
+};
+
+export function resolvePermissionsFromPermissionSelectionGroup(
+  groups: Array<PermissionSelectionGroup>,
+  resources: Array<Resource>,
+): Array<ResolvedResourcePermissions> {
+  type ResourceByIdRecord = {
+    resource: Resource;
+    permissions: GrantedPermissions;
+  };
+
+  const resourceById = new Map<string, ResourceByIdRecord>(
+    resources.map(resource => [
+      resource.id,
+      {
+        resource,
+        permissions: {},
+      },
+    ]),
+  );
+
+  function maybeAssignPermissionValue(
+    record: ResourceByIdRecord,
+    permissionId: string,
+    value: GrantedPermissions[string],
+  ) {
+    if (record.permissions[permissionId] === undefined) {
+      record.permissions[permissionId] = value;
+    } else if (record.permissions[permissionId] === 'allow' && value === 'deny') {
+      record.permissions[permissionId] = 'deny';
+    }
+  }
+
+  for (const group of groups) {
+    const affectedResources = group.resourceIds.map(resourceId => {
+      const resource = resourceById.get(resourceId);
+      if (!resource) {
+        throw new Error(`Could not find resource with id "${resourceId}".`);
+      }
+      return resource;
+    });
+
+    if (
+      group.mode === PermissionsSelectionGroupAccessMode.allowAll ||
+      group.mode === PermissionsSelectionGroupAccessMode.denyAll
+    ) {
+      let currentLevel: ResourceLevel | null = group.level;
+
+      do {
+        for (const permissionId of resourceLevelToPermissions.get(currentLevel) ?? []) {
+          const permission = permissionsById.get(permissionId);
+          if (!permission) {
+            throw new Error(`Could not find permission with id "${permissionId}".`);
+          }
+
+          const permissionValue =
+            permission.readOnly === true ||
+            group.mode === PermissionsSelectionGroupAccessMode.allowAll
+              ? 'allow'
+              : 'deny';
+
+          for (const resourceRecord of affectedResources) {
+            if (Array.isArray(resourceRecord.resource.childResourceIds)) {
+              for (const childResourceId of resourceRecord.resource.childResourceIds) {
+                const childResource = resourceById.get(childResourceId);
+                if (!childResource) {
+                  throw new Error(`Could not find resource with id "${childResourceId}".`);
+                }
+
+                if (childResource.resource.level !== currentLevel) {
+                  continue;
+                }
+
+                maybeAssignPermissionValue(childResource, permissionId, permissionValue);
+              }
+            }
+
+            if (resourceRecord.resource.level !== currentLevel) {
+              continue;
+            }
+
+            maybeAssignPermissionValue(resourceRecord, permissionId, permissionValue);
+          }
+        }
+
+        if (currentLevel === ResourceLevel.organization) {
+          currentLevel = ResourceLevel.project;
+        } else if (currentLevel === ResourceLevel.project) {
+          currentLevel = ResourceLevel.target;
+        } else if (currentLevel === ResourceLevel.target) {
+          currentLevel = ResourceLevel.service;
+        } else {
+          currentLevel = null;
+        }
+      } while (currentLevel !== null);
+
+      continue;
+    }
+
+    for (const [permissionId, permissionValue] of Object.entries(group.selectedPermissions)) {
+      if (permissionValue === undefined) {
+        continue;
+      }
+
+      const permission = permissionsById.get(permissionId);
+      if (permission === undefined) {
+        throw new Error(`Could not find permission with id "${permissionId}".`);
+      }
+
+      for (const resourceRecord of affectedResources) {
+        if (Array.isArray(resourceRecord.resource.childResourceIds)) {
+          for (const childResourceId of resourceRecord.resource.childResourceIds) {
+            const childResource = resourceById.get(childResourceId);
+            if (!childResource) {
+              throw new Error(`Could not find resource with id "${childResourceId}".`);
+            }
+
+            if (childResource.resource.level !== permission.level) {
+              continue;
+            }
+
+            maybeAssignPermissionValue(childResource, permissionId, permissionValue);
+          }
+        }
+
+        if (resourceRecord.resource.level !== permission.level) {
+          continue;
+        }
+
+        maybeAssignPermissionValue(resourceRecord, permissionId, permissionValue);
+      }
+    }
+  }
+
+  return Array.from(resourceById.values()).map(record => ({
+    resourceId: record.resource.id,
+    permissions: record.permissions,
+  }));
+}
+
+export function resourceLevelToScore(level: ResourceLevel) {
+  switch (level) {
+    case ResourceLevel.organization:
+      return 4;
+    case ResourceLevel.project:
+      return 3;
+    case ResourceLevel.target:
+      return 2;
+    case ResourceLevel.service:
+      return 1;
+  }
+}
diff --git a/packages/web/app/src/components/shared/permission-picker/permissions.ts b/packages/web/app/src/components/shared/permission-picker/permissions.ts
new file mode 100644
index 00000000000..fb074653387
--- /dev/null
+++ b/packages/web/app/src/components/shared/permission-picker/permissions.ts
@@ -0,0 +1,277 @@
+export const enum ResourceLevel {
+  organization = 'organization',
+  project = 'project',
+  target = 'target',
+  service = 'service',
+}
+
+export type PermissionRecord = {
+  id: string;
+  title: string;
+  description: string;
+  dependsOn?: string;
+  readOnly?: true;
+  level: ResourceLevel;
+};
+
+export type PermissionGroup = {
+  id: string;
+  title: string;
+  permissions: Array<PermissionRecord>;
+};
+
+export const allPermissionGroups: Array<PermissionGroup> = [
+  {
+    id: 'organization',
+    title: 'Organization',
+    permissions: [
+      {
+        id: 'organization:describe',
+        title: 'View organization',
+        description: 'Member can see the organization. Permission can not be modified.',
+        readOnly: true,
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'organization:support',
+        title: 'Access support tickets',
+        description: 'Member can access, create and reply to support tickets.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'organization:updateSlug',
+        title: 'Update organization slug',
+        description: 'Member can modify the organization slug.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'organization:delete',
+        title: 'Delete organization',
+        description: 'Member can delete the Organization.',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'members',
+    title: 'Members',
+    permissions: [
+      {
+        id: 'members:describe',
+        title: 'View members',
+        description: 'Member can access the organization member overview.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'members:assignRole',
+        title: 'Assign member role',
+        description: 'Member can assign roles to users.',
+        dependsOn: 'members:describe',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'members:modifyRole',
+        title: 'Modify member role',
+        description: 'Member can modify, create and delete roles.',
+        dependsOn: 'members:describe',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'members:remove',
+        title: 'Remove member',
+        description: 'Member can remove users from the organization.',
+        dependsOn: 'members:describe',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'members:manageInvites',
+        title: 'Manage invites',
+        description: 'Member can invite users via email and modify or delete pending invites.',
+        dependsOn: 'members:describe',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'billing',
+    title: 'Billing',
+    permissions: [
+      {
+        id: 'billing:describe',
+        title: 'View billing',
+        description: 'Member can view the billing information.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'billing:update',
+        title: 'Update billing',
+        description: 'Member can change the organization plan.',
+        dependsOn: 'billing:describe',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'oidc',
+    title: 'OpenID Connect',
+    permissions: [
+      {
+        id: 'oidc:manage',
+        title: 'Manage OpenID Connect integration',
+        description: 'Member can connect, modify, and remove an OIDC provider to the connection.',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'github',
+    title: 'GitHub Integration',
+    permissions: [
+      {
+        id: 'github:manage',
+        title: 'Manage GitHub integration',
+        description:
+          'Member can connect, modify, and remove access for the GitHub integration and repository access.',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'slack',
+    title: 'Slack Integration',
+    permissions: [
+      {
+        id: 'slack:manage',
+        title: 'Manage Slack integration',
+        description:
+          'Member can connect, modify, and remove access for the Slack integration and repository access.',
+        level: ResourceLevel.organization,
+      },
+    ],
+  },
+  {
+    id: 'project',
+    title: 'Project',
+    permissions: [
+      {
+        id: 'project:create',
+        title: 'Create project',
+        description: 'Member can create new projects.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'project:describe',
+        title: 'View project',
+        description: 'Member can access the specified projects.',
+        level: ResourceLevel.project,
+      },
+      {
+        id: 'project:delete',
+        title: 'Delete project',
+        description: 'Member can access the specified projects.',
+        level: ResourceLevel.project,
+        dependsOn: 'project:describe',
+      },
+      {
+        id: 'project:modifySettings',
+        title: 'Modify Settings',
+        description: 'Member can access the specified projects.',
+        level: ResourceLevel.project,
+        dependsOn: 'project:describe',
+      },
+    ],
+  },
+  {
+    id: 'schema-linting',
+    title: 'Schema Linting',
+    permissions: [
+      {
+        id: 'schemaLinting:modifyOrganizationSettings',
+        title: 'Manage organization level schema linting',
+        description: 'Member can view and modify the organization schema linting rules.',
+        level: ResourceLevel.organization,
+      },
+      {
+        id: 'schemaLinting:modifyProjectSettings',
+        title: 'Manage project level schema linting',
+        description: 'Member can view and modify the projects schema linting rules.',
+        level: ResourceLevel.project,
+        dependsOn: 'project:describe',
+      },
+    ],
+  },
+  {
+    id: 'target',
+    title: 'Target',
+    permissions: [
+      {
+        id: 'target:create',
+        title: 'Create target',
+        description: 'Member can create new projects.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.project,
+      },
+      {
+        id: 'target:delete',
+        title: 'Delete target',
+        description: 'Member can access the specified projects.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.target,
+      },
+      {
+        id: 'target:modifySettings',
+        title: 'Modify settings',
+        description: 'Member can access the specified projects.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.target,
+      },
+    ],
+  },
+  {
+    id: 'laboratory',
+    title: 'Laboratory',
+    permissions: [
+      {
+        id: 'laboratory:describe',
+        title: 'View laboratory',
+        description: 'Member can access the laboratory, view and execute GraphQL documents.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.target,
+      },
+      {
+        id: 'laboratory:modify',
+        title: 'Modify laboratory',
+        description:
+          'Member can create, delete and update collections and documents in the laboratory.',
+        dependsOn: 'laboratory:describe',
+        level: ResourceLevel.target,
+      },
+    ],
+  },
+  {
+    id: 'app-deployments',
+    title: 'App Deployments',
+    permissions: [
+      {
+        id: 'appDeployments:describe',
+        title: 'View app deployments',
+        description: 'Member can view app deployments.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.target,
+      },
+    ],
+  },
+  {
+    id: 'schema-checks',
+    title: 'Schema Checks',
+    permissions: [
+      {
+        id: 'schemaChecks:approveFailedSchemaCheck',
+        title: 'Approve schema check',
+        description: 'Member can approve failed schema checks.',
+        dependsOn: 'project:describe',
+        level: ResourceLevel.service,
+      },
+    ],
+  },
+] as const;
diff --git a/packages/web/app/src/stories/new-permissions-picker.stories.tsx b/packages/web/app/src/stories/new-permissions-picker.stories.tsx
deleted file mode 100644
index a74aac96efa..00000000000
--- a/packages/web/app/src/stories/new-permissions-picker.stories.tsx
+++ /dev/null
@@ -1,1073 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Check, ChevronDown, ChevronRight, InfoIcon, XIcon } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import * as z from 'zod';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
-import { zodResolver } from '@hookform/resolvers/zod';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const enum ResourceLevel {
-  organization = 'organization',
-  project = 'project',
-  target = 'target',
-  service = 'service',
-}
-
-type PermissionGroup = {
-  title: string;
-  permissions: Array<PermissionRecord>;
-};
-
-type PermissionRecord = {
-  id: string;
-  title: string;
-  description: string;
-  dependsOn?: string;
-  readOnly?: true;
-  level: ResourceLevel | Array<ResourceLevel>;
-};
-
-const permissionGroups: Array<PermissionGroup> = [
-  {
-    title: 'Organization',
-    permissions: [
-      {
-        id: 'organization:describe',
-        title: 'View organization',
-        description: 'Member can see the organization. Permission can not be modified.',
-        readOnly: true,
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'organization:support',
-        title: 'Access support tickets',
-        description: 'Member can access, create and reply to support tickets.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'organization:updateSlug',
-        title: 'Update organization slug',
-        description: 'Member can modify the organization slug.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'organization:delete',
-        title: 'Delete organization',
-        description: 'Member can delete the Organization.',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'Members',
-    permissions: [
-      {
-        id: 'members:describe',
-        title: 'View members',
-        description: 'Member can access the organization member overview.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'members:assignRole',
-        title: 'Assign member role',
-        description: 'Member can assign roles to users.',
-        dependsOn: 'members:describe',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'members:modifyRole',
-        title: 'Modify member role',
-        description: 'Member can modify, create and delete roles.',
-        dependsOn: 'members:describe',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'members:remove',
-        title: 'Remove member',
-        description: 'Member can remove users from the organization.',
-        dependsOn: 'members:describe',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'members:manageInvites',
-        title: 'Manage invites',
-        description: 'Member can invite users via email and modify or delete pending invites.',
-        dependsOn: 'members:describe',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'Billing',
-    permissions: [
-      {
-        id: 'billing:describe',
-        title: 'View billing',
-        description: 'Member can view the billing information.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'billing:update',
-        title: 'Update billing',
-        description: 'Member can change the organization plan.',
-        dependsOn: 'billing:describe',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'OpenID Connect',
-    permissions: [
-      {
-        id: 'oidc:manage',
-        title: 'Manage OpenID Connect integration',
-        description: 'Member can connect, modify, and remove an OIDC provider to the connection.',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'GitHub Integration',
-    permissions: [
-      {
-        id: 'github:manage',
-        title: 'Manage GitHub integration',
-        description:
-          'Member can connect, modify, and remove access for the GitHub integration and repository access.',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'Slack Integration',
-    permissions: [
-      {
-        id: 'slack:manage',
-        title: 'Manage Slack integration',
-        description:
-          'Member can connect, modify, and remove access for the Slack integration and repository access.',
-        level: ResourceLevel.organization,
-      },
-    ],
-  },
-  {
-    title: 'Project',
-    permissions: [
-      {
-        id: 'project:create',
-        title: 'Create project',
-        description: 'Member can create new projects.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'project:describe',
-        title: 'View project',
-        description: 'Member can access the specified projects.',
-        level: [ResourceLevel.project, ResourceLevel.organization],
-      },
-      {
-        id: 'project:delete',
-        title: 'Delete project',
-        description: 'Member can access the specified projects.',
-        level: [ResourceLevel.project, ResourceLevel.organization],
-        dependsOn: 'project:describe',
-      },
-      {
-        id: 'project:modifySettings',
-        title: 'Modify Settings',
-        description: 'Member can access the specified projects.',
-        level: [ResourceLevel.project, ResourceLevel.organization],
-        dependsOn: 'project:describe',
-      },
-    ],
-  },
-  {
-    title: 'Schema Linting',
-    permissions: [
-      {
-        id: 'schemaLinting:modifyOrganizationSettings',
-        title: 'Manage organization level schema linting',
-        description: 'Member can view and modify the organization schema linting rules.',
-        level: ResourceLevel.organization,
-      },
-      {
-        id: 'schemaLinting:modifyProjectSettings',
-        title: 'Manage project level schema linting',
-        description: 'Member can view and modify the projects schema linting rules.',
-        level: [ResourceLevel.project, ResourceLevel.organization],
-        dependsOn: 'project:describe',
-      },
-    ],
-  },
-  {
-    title: 'Target',
-    permissions: [
-      {
-        id: 'target:create',
-        title: 'Create target',
-        description: 'Member can create new projects.',
-        dependsOn: 'project:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization],
-      },
-      {
-        id: 'target:delete',
-        title: 'Delete target',
-        description: 'Member can access the specified projects.',
-        dependsOn: 'project:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization, ResourceLevel.target],
-      },
-      {
-        id: 'target:modifySettings',
-        title: 'Modify settings',
-        description: 'Member can access the specified projects.',
-        dependsOn: 'project:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization, ResourceLevel.target],
-      },
-    ],
-  },
-  {
-    title: 'Laboratory',
-    permissions: [
-      {
-        id: 'laboratory:describe',
-        title: 'View laboratory',
-        description: 'Member can access the laboratory, view and execute GraphQL documents.',
-        dependsOn: 'project:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization, ResourceLevel.target],
-      },
-      {
-        id: 'laboratory:modify',
-        title: 'Modify laboratory',
-        description:
-          'Member can create, delete and update collections and documents in the laboratory.',
-        dependsOn: 'laboratory:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization, ResourceLevel.target],
-      },
-    ],
-  },
-  {
-    title: 'App Deployments',
-    permissions: [
-      {
-        id: 'appDeployments:describe',
-        title: 'View app deployments',
-        description: 'Member can view app deployments.',
-        dependsOn: 'project:describe',
-        level: [ResourceLevel.project, ResourceLevel.organization, ResourceLevel.target],
-      },
-    ],
-  },
-  {
-    title: 'Schema Checks',
-    permissions: [
-      {
-        id: 'appDeployments:describe',
-        title: 'Approve schema check',
-        description: 'Member can approve failed schema checks.',
-        dependsOn: 'project:describe',
-        level: [
-          ResourceLevel.project,
-          ResourceLevel.organization,
-          ResourceLevel.target,
-          ResourceLevel.service,
-        ],
-      },
-    ],
-  },
-];
-
-const roleFormSchema = z.object({
-  name: z
-    .string({
-      required_error: 'Required',
-    })
-    .trim()
-    .min(2, 'Too short')
-    .max(64, 'Max 64 characters long')
-    .refine(
-      val => typeof val === 'string' && val.length > 0 && val[0] === val[0].toUpperCase(),
-      'Must start with a capital letter',
-    )
-    .refine(val => val !== 'Viewer' && val !== 'Admin', 'Viewer and Admin are reserved'),
-  description: z
-    .string({
-      required_error: 'Please enter role description',
-    })
-    .trim()
-    .min(2, 'Too short')
-    .max(256, 'Description is too long'),
-});
-
-function PermissionSelector(props: {
-  resourceLevel: ResourceLevel;
-  grantedPermissions: GrantedPermissions;
-  updateGrantedPermissions: (group: GrantedPermissions) => void;
-}) {
-  const grantedPermissions = useMemo<GrantedPermissions>(() => {
-    return {
-      ...props.grantedPermissions,
-      // A lot of the rules depends on 'project:describe'
-      // However, if we are on resource level target or service, project:describe needs to be specified so it can be selected.
-      ...(props.resourceLevel === ResourceLevel.target ||
-      props.resourceLevel === ResourceLevel.service
-        ? {
-            'project:describe': 'allow',
-          }
-        : {}),
-    };
-  }, [props.resourceLevel, props.grantedPermissions]);
-
-  const [filteredGroups, permissionGroupMapping] = useMemo(() => {
-    const filteredGroups: Array<
-      PermissionGroup & {
-        selectedPermissionCount: number;
-      }
-    > = [];
-    const permissionGroupMapping = new Map<string, string>();
-
-    for (const group of permissionGroups) {
-      let selectedPermissionCount = 0;
-
-      const filteredGroupPermissions = group.permissions.filter(permission => {
-        const shouldInclude = Array.isArray(permission.level)
-          ? permission.level.includes(props.resourceLevel)
-          : props.resourceLevel === permission.level;
-
-        if (shouldInclude === false) {
-          return false;
-        }
-
-        if (props.grantedPermissions[permission.id] !== undefined) {
-          selectedPermissionCount++;
-        }
-
-        permissionGroupMapping.set(permission.id, group.title);
-
-        return true;
-      });
-
-      if (filteredGroupPermissions.length === 0) {
-        continue;
-      }
-
-      filteredGroups.push({
-        ...group,
-        selectedPermissionCount,
-        permissions: filteredGroupPermissions,
-      });
-    }
-
-    return [filteredGroups, permissionGroupMapping] as const;
-  }, [props.resourceLevel, props.grantedPermissions]);
-  const permissionRefs = useRef(new Map<string, HTMLElement>());
-
-  const [focusedPermission, setFocusedPermission] = useState(null as string | null);
-
-  const [openAccordions, setOpenAccordions] = useState([] as Array<string>);
-
-  return (
-    <Accordion
-      type="multiple"
-      className="w-full"
-      value={openAccordions}
-      onValueChange={values => setOpenAccordions(values)}
-    >
-      {filteredGroups.map(group => {
-        const dependencyGraph = new Map<string, Array<string>>();
-        for (const permission of group.permissions) {
-          if (!permission.dependsOn) {
-            continue;
-          }
-          let arr = dependencyGraph.get(permission.dependsOn);
-          if (!arr) {
-            arr = [];
-            dependencyGraph.set(permission.dependsOn, arr);
-          }
-          arr.push(permission.id);
-        }
-
-        return (
-          <AccordionItem value={group.title} key={group.title}>
-            <AccordionTrigger className="w-full" key={group.title}>
-              {group.title}{' '}
-              {group.selectedPermissionCount > 0 && (
-                <span className="ml-auto mr-1 inline-block text-sm">
-                  {group.selectedPermissionCount} selected
-                </span>
-              )}
-            </AccordionTrigger>
-            <AccordionContent className="pl-2" forceMount={true}>
-              {group.permissions.map(permission => {
-                const needsDependency =
-                  !!permission.dependsOn && grantedPermissions[permission.dependsOn] !== 'allow';
-
-                return (
-                  <div
-                    className={cn(
-                      'border-ring flex flex-row items-center justify-between space-x-4 border-orange-500 py-2 pt-0 text-sm',
-                      focusedPermission === permission.id && 'margin-[-1px] border',
-                    )}
-                    key={permission.id}
-                    data-permission-id={permission.id}
-                    ref={ref => {
-                      if (ref) {
-                        permissionRefs.current.set(permission.id, ref);
-                      }
-                    }}
-                  >
-                    <div className={cn(needsDependency && 'opacity-30')}>
-                      <div className="font-semibold text-white">{permission.title}</div>
-                      <div className="text-xs text-gray-400">{permission.description}</div>
-                    </div>
-                    {!!permission.dependsOn && permissionGroupMapping.has(permission.dependsOn) && (
-                      <div className="text-gray flex grow justify-end">
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger>
-                              <InfoIcon />
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p>
-                                This permission depends on another permission.{' '}
-                                <Button
-                                  variant="orangeLink"
-                                  onClick={() => {
-                                    const dependencyPermission = permission.dependsOn;
-                                    if (!dependencyPermission) {
-                                      return;
-                                    }
-                                    const element =
-                                      permissionRefs.current.get(dependencyPermission);
-
-                                    if (!element) {
-                                      return;
-                                    }
-                                    setOpenAccordions(values => {
-                                      const groupName =
-                                        permissionGroupMapping.get(dependencyPermission);
-                                      if (!groupName) {
-                                      }
-                                      if (groupName && values.includes(groupName) === false) {
-                                        return [...values, groupName];
-                                      }
-                                      return values;
-                                    });
-                                    setFocusedPermission(dependencyPermission);
-                                    element.scrollIntoView({ behavior: 'smooth' });
-                                  }}
-                                >
-                                  View permission.
-                                </Button>
-                              </p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </div>
-                    )}
-                    <Select
-                      disabled={permission.readOnly || needsDependency}
-                      value={
-                        permission.readOnly
-                          ? 'allow'
-                          : grantedPermissions[permission.id] || 'not-selected'
-                      }
-                      onValueChange={value => {
-                        const dependents = dependencyGraph.get(permission.id) ?? [];
-                        if (value === 'allow') {
-                          props.updateGrantedPermissions({
-                            [permission.id]: 'allow',
-                            ...Object.fromEntries(
-                              dependents.map(value => [value, undefined] as const),
-                            ),
-                          });
-                        } else if (value === 'deny') {
-                          props.updateGrantedPermissions({
-                            [permission.id]: 'deny',
-                            ...Object.fromEntries(
-                              dependents.map(value => [value, 'deny'] as const),
-                            ),
-                          });
-                        } else if (value === 'not-selected') {
-                          props.updateGrantedPermissions({
-                            [permission.id]: undefined,
-                            ...Object.fromEntries(
-                              dependents.map(value => [value, undefined] as const),
-                            ),
-                          });
-                        }
-                        setFocusedPermission(null);
-                      }}
-                    >
-                      <SelectTrigger className="w-[150px] shrink-0">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="not-selected">Not Selected</SelectItem>
-                        <SelectItem value="allow">Allow</SelectItem>
-                        <SelectItem value="deny">Deny</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                );
-              })}
-            </AccordionContent>
-          </AccordionItem>
-        );
-      })}
-    </Accordion>
-  );
-}
-
-type GrantedPermissions = { [key: string]: 'allow' | 'deny' | undefined };
-
-function GroupTeaser(props: {
-  title: string;
-  grantedPermissions: GrantedPermissions;
-  onClick: () => void;
-  mode: GroupAccessMode;
-  resourceLevel: ResourceLevel | null;
-  resources: Array<string>;
-}) {
-  const assignedPermissionsCount = Array.from(Object.values(props.grantedPermissions)).reduce(
-    (current, next) => {
-      if (!next) {
-        return current;
-      }
-      return current + 1;
-    },
-    0,
-  );
-
-  return (
-    <Button variant="outline" className="w-full" onClick={props.onClick}>
-      {props.resourceLevel && <Badge className="mr-2 capitalize">{props.resourceLevel}</Badge>}
-      <span className="ml-0 mr-auto">{props.title}</span>
-      {props.resourceLevel && props.resources.length === 0 ? (
-        <>
-          <span className="text-red-400">No {props.resourceLevel}s selected</span>
-        </>
-      ) : (
-        <>
-          {props.mode === GroupAccessMode.granular &&
-            (assignedPermissionsCount > 0 ? (
-              <>{assignedPermissionsCount} selected</>
-            ) : (
-              props.resourceLevel && <span className="text-red-400">No permissions selected</span>
-            ))}
-          {props.mode === GroupAccessMode.allowAll && <>All allowed</>}
-          {props.mode === GroupAccessMode.denyAll && <>All denied</>}
-        </>
-      )}
-      <ChevronRight size={16} className="ml-2" />
-    </Button>
-  );
-}
-
-function ResourceBadge(props: { name: string; onDelete: () => void }) {
-  return (
-    <Badge className="mr-1 pr-1">
-      {props.name}
-      <button className="ml-1" onClick={props.onDelete}>
-        <XIcon size="10" />
-      </button>
-    </Badge>
-  );
-}
-
-const enum GroupAccessMode {
-  granular = 'granular',
-  allowAll = 'allowAll',
-  denyAll = 'denyAll',
-}
-
-type Group = {
-  id: string;
-  level: ResourceLevel;
-  title: string;
-  permissions: GrantedPermissions;
-  mode: GroupAccessMode;
-  resources: Array<string>;
-};
-
-function createGroup(args: { id: string; level: ResourceLevel; title: string }): Group {
-  return {
-    ...args,
-    permissions: {},
-    mode: GroupAccessMode.granular,
-    resources: [],
-  };
-}
-
-function GG() {
-  const form = useForm({
-    resolver: zodResolver(roleFormSchema),
-    mode: 'onChange',
-    defaultValues: {
-      name: 'New Role',
-      description: '',
-    },
-  });
-
-  const [selectedGroupId, setSelectedGroupId] = useState<null | string>(() => {
-    try {
-      return JSON.parse(localStorage.getItem('hive:prototype:permissions')!).selectedGroupId;
-    } catch (err) {
-      return null;
-    }
-  });
-
-  const [dynamicGroups, setDynamicGroups] = useState<Array<Group>>(() => {
-    try {
-      return JSON.parse(localStorage.getItem('hive:prototype:permissions')!).dynamicGroups;
-    } catch (err) {
-      return [
-        createGroup({
-          id: 'default',
-          level: ResourceLevel.organization,
-          title: 'Global Organization Wide Permissions',
-        }),
-      ];
-    }
-  });
-
-  const selectedGroup = dynamicGroups.find(group => group.id === selectedGroupId) ?? null;
-
-  useEffect(() => {
-    localStorage.setItem(
-      'hive:prototype:permissions',
-      JSON.stringify({
-        selectedGroupId,
-        dynamicGroups,
-      }),
-    );
-  }, [selectedGroupId, dynamicGroups]);
-
-  return (
-    <Card>
-      <Form {...form}>
-        {selectedGroup === null && (
-          <>
-            <CardHeader>
-              <CardTitle>Member Role Editor</CardTitle>
-              <CardDescription>
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-row space-x-6">
-                <div className="w-72 shrink-0 space-y-4">
-                  <FormField
-                    control={form.control}
-                    name="name"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Name</FormLabel>
-                        <FormControl>
-                          <Input
-                            placeholder="Enter a name"
-                            type="text"
-                            autoComplete="off"
-                            {...field}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name="description"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Description</FormLabel>
-                        <FormControl>
-                          <Textarea
-                            placeholder="Enter a description"
-                            autoComplete="off"
-                            {...field}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="grow">
-                  <div className="space-y-2">
-                    {dynamicGroups.map(group => {
-                      return (
-                        <GroupTeaser
-                          key={group.id}
-                          title={group.title}
-                          grantedPermissions={group.permissions}
-                          onClick={() => setSelectedGroupId(group.id)}
-                          mode={group.mode}
-                          resourceLevel={group.id === 'default' ? null : group.level}
-                          resources={group.resources}
-                        />
-                      );
-                    })}
-                  </div>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button size="sm" className="ml-auto mr-0 mt-3 block">
-                        Add More <ChevronDown className="inline" size="16" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const id = window.crypto.randomUUID();
-                          setDynamicGroups(groups => [
-                            ...groups,
-                            createGroup({
-                              id,
-                              level: ResourceLevel.project,
-                              title: 'New Group' + id,
-                            }),
-                          ]);
-                          setSelectedGroupId(id);
-                        }}
-                      >
-                        Project-level
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const id = window.crypto.randomUUID();
-                          setDynamicGroups(groups => [
-                            ...groups,
-                            createGroup({
-                              id,
-                              level: ResourceLevel.target,
-                              title: 'New Group' + id,
-                            }),
-                          ]);
-                          setSelectedGroupId(id);
-                        }}
-                      >
-                        Target-level
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const id = window.crypto.randomUUID();
-                          setDynamicGroups(groups => [
-                            ...groups,
-                            createGroup({
-                              id,
-                              level: ResourceLevel.service,
-                              title: 'Service ' + id,
-                            }),
-                          ]);
-                          setSelectedGroupId(id);
-                        }}
-                      >
-                        Service-level
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              </div>
-            </CardContent>
-          </>
-        )}
-        {selectedGroup !== null && (
-          <>
-            <CardHeader>
-              <CardTitle>
-                <span className="cursor-pointer" onClick={() => setSelectedGroupId(null)}>
-                  Member Role Editor
-                </span>{' '}
-                <span>{'>'}</span> {selectedGroup.title}
-              </CardTitle>
-              {selectedGroup.id === 'default' && (
-                <CardDescription>
-                  These permissions apply to all resources within the organization.
-                  <br /> E.g. if you grant access to projects permissions, these apply to all
-                  projects.
-                </CardDescription>
-              )}
-              {selectedGroup.level === ResourceLevel.project && (
-                <CardDescription>
-                  These permissions apply to all the selected projects.
-                  <br /> E.g. if you grant access to access the laboratory, the member is able to
-                  access the laboratory on all targets within all the selected projects.
-                </CardDescription>
-              )}
-              {selectedGroup.level === ResourceLevel.target && (
-                <CardDescription>
-                  These permissions apply to all the selected targets.
-                  <br /> E.g. if you grant access to approve schema checks, the member is able to
-                  approve schema checks on all services within the target.
-                </CardDescription>
-              )}
-              {selectedGroup.level === ResourceLevel.service && (
-                <CardDescription>
-                  These permission apply to all the selected services.
-                </CardDescription>
-              )}
-            </CardHeader>
-            <CardContent>
-              <div className="flex flex-row space-x-6">
-                <div className="w-72 shrink-0 space-y-4">
-                  {selectedGroup.level !== ResourceLevel.organization && (
-                    <>
-                      <div className="grid w-full max-w-sm items-center gap-1.5">
-                        <Label>Group Title</Label>
-                        <Input
-                          value={selectedGroup.title}
-                          onChange={ev => {
-                            setDynamicGroups(groups =>
-                              groups.map(group => {
-                                if (group.id !== selectedGroup.id) {
-                                  return group;
-                                }
-
-                                return {
-                                  ...group,
-                                  title: ev.target.value,
-                                };
-                              }),
-                            );
-                          }}
-                        />
-                      </div>
-                      <div className="grid w-full max-w-sm items-center gap-1.5">
-                        <Label>Selected {selectedGroup.level}s</Label>
-                        <div className="flex w-full max-w-sm items-center space-x-2">
-                          <Input
-                            onKeyUp={ev => {
-                              if (ev.key !== 'Enter') {
-                                return;
-                              }
-                              const value: string = (ev.target as any).value;
-                              (ev.target as any).value = '';
-
-                              setDynamicGroups(groups =>
-                                groups.map(group => {
-                                  if (
-                                    group.id !== selectedGroup.id ||
-                                    group.resources.includes(value)
-                                  ) {
-                                    return group;
-                                  }
-
-                                  return {
-                                    ...group,
-                                    resources: [...group.resources, value],
-                                  };
-                                }),
-                              );
-                            }}
-                          />
-                          <Button type="submit">Add</Button>
-                        </div>
-                      </div>
-                      <div className="mt-2">
-                        {selectedGroup.resources.map(resource => (
-                          <ResourceBadge
-                            key={resource}
-                            name={resource}
-                            onDelete={() => {
-                              setDynamicGroups(groups =>
-                                groups.map(group => {
-                                  if (group.id !== selectedGroup.id) {
-                                    return group;
-                                  }
-
-                                  return {
-                                    ...group,
-                                    resources: group.resources.filter(name => name !== resource),
-                                  };
-                                }),
-                              );
-                            }}
-                          />
-                        ))}
-                      </div>
-                    </>
-                  )}
-                  <div className="grid w-full max-w-sm items-center gap-1.5">
-                    <Label>Mode</Label>
-                    <Select
-                      value={selectedGroup.mode}
-                      onValueChange={value => {
-                        setDynamicGroups(groups =>
-                          groups.map(group => {
-                            if (group.id !== selectedGroup.id) {
-                              return group;
-                            }
-
-                            return {
-                              ...group,
-                              mode: value as GroupAccessMode,
-                            };
-                          }),
-                        );
-                      }}
-                    >
-                      <SelectTrigger className="w-[150px] shrink-0">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value={GroupAccessMode.granular}>Granular</SelectItem>
-                        <SelectItem value={GroupAccessMode.allowAll}>Allow All</SelectItem>
-                        <SelectItem value={GroupAccessMode.denyAll}>Deny all</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  {selectedGroup.mode === GroupAccessMode.granular && (
-                    <p className="text-muted-foreground text-sm">
-                      Grant specific permissions for the specified resources based on your
-                      selection.
-                    </p>
-                  )}
-                  {selectedGroup.mode === GroupAccessMode.allowAll && (
-                    <p className="text-muted-foreground text-sm">
-                      All permissions are granted for the specified resources.
-                    </p>
-                  )}
-                  {selectedGroup.mode === GroupAccessMode.denyAll && (
-                    <p className="text-muted-foreground text-sm">
-                      All permissions are denied for the specified resources.
-                    </p>
-                  )}
-                </div>
-                <div
-                  className={cn(
-                    'max-h-[500px] w-full overflow-scroll pr-5',
-                    !!(
-                      selectedGroup.mode === GroupAccessMode.allowAll ||
-                      selectedGroup.mode === GroupAccessMode.denyAll
-                    ) && 'pointer-events-none opacity-25',
-                  )}
-                >
-                  <PermissionSelector
-                    resourceLevel={selectedGroup.level}
-                    grantedPermissions={
-                      selectedGroup.mode === GroupAccessMode.allowAll ||
-                      selectedGroup.mode === GroupAccessMode.denyAll
-                        ? {}
-                        : selectedGroup.permissions
-                    }
-                    updateGrantedPermissions={updates => {
-                      setDynamicGroups(groups =>
-                        groups.map(group => {
-                          if (group.id !== selectedGroup.id) {
-                            return group;
-                          }
-
-                          return {
-                            ...group,
-                            permissions: { ...group.permissions, ...updates },
-                          };
-                        }),
-                      );
-                    }}
-                  />
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter>
-              <div className="ml-auto mr-0">
-                {selectedGroup.resources.length === 0 &&
-                  selectedGroup.level !== ResourceLevel.organization && (
-                    <span className="pr-5 text-red-400">
-                      Please add at least one {selectedGroup.level}.
-                    </span>
-                  )}
-                {selectedGroup.id !== 'default' && (
-                  <Button
-                    className="mr-2"
-                    onClick={() =>
-                      setDynamicGroups(groups =>
-                        groups.filter(group => group.id !== selectedGroup.id),
-                      )
-                    }
-                  >
-                    Delete
-                  </Button>
-                )}
-                <Button
-                  onClick={() => setSelectedGroupId(null)}
-                  disabled={
-                    selectedGroup.resources.length === 0 &&
-                    selectedGroup.level !== ResourceLevel.organization
-                  }
-                >
-                  <Check size={12} /> Apply
-                </Button>
-              </div>
-            </CardFooter>
-          </>
-        )}
-      </Form>
-    </Card>
-  );
-}
-
-const meta: Meta<typeof GG> = {
-  title: 'New Member Role Picker',
-  component: GG,
-};
-export default meta;
-
-// export default meta;
-type Story = StoryObj<typeof GG>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="p-5">
-      <GG />
-      <Button
-        onClick={() => {
-          localStorage.removeItem('hive:prototype:permissions');
-        }}
-        className="mt-8"
-      >
-        Reset Local Storage state
-      </Button>
-    </div>
-  ),
-};
diff --git a/packages/web/app/src/stories/permission-picker.stories.tsx b/packages/web/app/src/stories/permission-picker.stories.tsx
new file mode 100644
index 00000000000..30a574001eb
--- /dev/null
+++ b/packages/web/app/src/stories/permission-picker.stories.tsx
@@ -0,0 +1,62 @@
+import { PermissionPicker } from '@/components/shared/permission-picker';
+import { ResourceLevel } from '@/components/shared/permission-picker/permissions';
+import { Button } from '@/components/ui/button';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof PermissionPicker> = {
+  title: 'Permission Picker',
+  component: PermissionPicker,
+};
+export default meta;
+
+// export default meta;
+type Story = StoryObj<typeof PermissionPicker>;
+
+export const Default: Story = {
+  render: props => (
+    <div className="p-5">
+      <PermissionPicker
+        {...props}
+        resources={[
+          {
+            id: 'the-guild',
+            level: ResourceLevel.organization,
+            childResourceIds: ['the-guild/graphql-hive'],
+          },
+          {
+            id: 'the-guild/graphql-hive',
+            level: ResourceLevel.project,
+            childResourceIds: [
+              'the-guild/graphql-hive/production',
+              'the-guild/graphql-hive/staging',
+              'the-guild/graphql-hive/testing',
+            ],
+          },
+          {
+            id: 'the-guild/graphql-hive/production',
+            level: ResourceLevel.target,
+            childResourceIds: [],
+          },
+          {
+            id: 'the-guild/graphql-hive/staging',
+            level: ResourceLevel.target,
+            childResourceIds: [],
+          },
+          {
+            id: 'the-guild/graphql-hive/testing',
+            level: ResourceLevel.target,
+            childResourceIds: [],
+          },
+        ]}
+      />
+      <Button
+        onClick={() => {
+          localStorage.removeItem('hive:prototype:permissions');
+        }}
+        className="mt-8"
+      >
+        Reset Local Storage state
+      </Button>
+    </div>
+  ),
+};