add stories to roles components (#10503)

## Context Adding stories for roles components. Also moving modules components to the proper "modules" folder, "pages" folder being only for entry points. ## Test Run storybook <img width="1145" alt="Screenshot 2025-02-26 at 13 40 40" src="https://github.com/user-attachments/assets/bc184ab0-c590-4362-8c5a-1bf5ef176e6c" /> <img width="1149" alt="Screenshot 2025-02-26 at 13 40 32" src="https://github.com/user-attachments/assets/699cd205-31db-45e9-b9c1-caff1832bd47" /> <img width="1153" alt="Screenshot 2025-02-26 at 13 40 11" src="https://github.com/user-attachments/assets/72e45a67-ea89-4999-8b16-6f7d027d07f6" /> <img width="471" alt="Screenshot 2025-02-26 at 13 38 16" src="https://github.com/user-attachments/assets/62676943-9935-42b5-b769-5544f7eed85f" /> <img width="472" alt="Screenshot 2025-02-26 at 13 38 12" src="https://github.com/user-attachments/assets/946baab9-1be4-439e-bf99-0ebeab0995f7" />
2025-02-26 18:16:05 +01:00
parent d40a5ed74f
commit 431da37cdf
34 changed files with 195 additions and 23 deletions
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissions.tsx
@ -0,0 +1,139 @@
+import { RolePermissionsObjectsTableHeader } from '@/settings/roles/role-permissions/components/RolePermissionsObjectsTableHeader';
+import { RolePermissionsSettingsTableHeader } from '@/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader';
+import { RolePermissionsSettingsTableRow } from '@/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow';
+import { RolePermissionsObjectPermission } from '@/settings/roles/types/RolePermissionsObjectPermission';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import {
+  H2Title,
+  IconEye,
+  IconPencil,
+  IconTrash,
+  IconTrashX,
+  Section,
+} from 'twenty-ui';
+import { Role } from '~/generated-metadata/graphql';
+import { SettingsPermissions } from '~/generated/graphql';
+import { RolePermissionsObjectsTableRow } from './RolePermissionsObjectsTableRow';
+
+const StyledRolePermissionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(8)};
+`;
+
+type RolePermissionsProps = {
+  role: Pick<
+    Role,
+    | 'id'
+    | 'canUpdateAllSettings'
+    | 'canReadAllObjectRecords'
+    | 'canUpdateAllObjectRecords'
+    | 'canSoftDeleteAllObjectRecords'
+    | 'canDestroyAllObjectRecords'
+  >;
+};
+
+export const RolePermissions = ({ role }: RolePermissionsProps) => {
+  const objectPermissionsConfig: RolePermissionsObjectPermission[] = [
+    {
+      key: 'seeRecords',
+      label: 'See Records on All Objects',
+      icon: <IconEye size={14} />,
+      value: role.canReadAllObjectRecords,
+    },
+    {
+      key: 'editRecords',
+      label: 'Edit Records on All Objects',
+      icon: <IconPencil size={14} />,
+      value: role.canUpdateAllObjectRecords,
+    },
+    {
+      key: 'deleteRecords',
+      label: 'Delete Records on All Objects',
+      icon: <IconTrash size={14} />,
+      value: role.canSoftDeleteAllObjectRecords,
+    },
+    {
+      key: 'destroyRecords',
+      label: 'Destroy Records on All Objects',
+      icon: <IconTrashX size={14} />,
+      value: role.canDestroyAllObjectRecords,
+    },
+  ];
+
+  const settingsPermissionsConfig = [
+    {
+      key: SettingsPermissions.API_KEYS_AND_WEBHOOKS,
+      label: 'API Keys and Webhooks',
+      type: 'Developer',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.ROLES,
+      label: 'Roles',
+      type: 'Members',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.WORKSPACE,
+      label: 'Workspace Settings',
+      type: 'General',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.WORKSPACE_MEMBERS,
+      label: 'Workspace Users',
+      type: 'Members',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.DATA_MODEL,
+      label: 'Data Model',
+      type: 'Data Model',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.ADMIN_PANEL,
+      label: 'Admin Panel',
+      type: 'Admin Panel',
+      value: role.canUpdateAllSettings,
+    },
+    {
+      key: SettingsPermissions.SECURITY,
+      label: 'Security Settings',
+      type: 'Security',
+      value: role.canUpdateAllSettings,
+    },
+  ];
+
+  return (
+    <StyledRolePermissionsContainer>
+      <Section>
+        <H2Title
+          title={t`Objects`}
+          description={t`Ability to interact with each object`}
+        />
+        <RolePermissionsObjectsTableHeader allPermissions={true} />
+        {objectPermissionsConfig.map((permission) => (
+          <RolePermissionsObjectsTableRow
+            key={permission.key}
+            permission={permission}
+          />
+        ))}
+      </Section>
+      <Section>
+        <H2Title title={t`Settings`} description={t`Settings permissions`} />
+        <RolePermissionsSettingsTableHeader
+          allPermissions={role.canUpdateAllSettings}
+        />
+        {settingsPermissionsConfig.map((permission) => (
+          <RolePermissionsSettingsTableRow
+            key={permission.key}
+            permission={permission}
+          />
+        ))}
+      </Section>
+    </StyledRolePermissionsContainer>
+  );
+};