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>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableHeader.tsx
@ -0,0 +1,44 @@
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { Checkbox } from 'twenty-ui';
+
+const StyledTableHeaderRow = styled(TableRow)`
+  display: flex;
+`;
+
+const StyledNameHeader = styled(TableHeader)`
+  flex: 1;
+`;
+
+const StyledActionsHeader = styled(TableHeader)`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTable = styled(Table)`
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+type RolePermissionsObjectsTableHeaderProps = {
+  className?: string;
+  allPermissions: boolean;
+};
+
+export const RolePermissionsObjectsTableHeader = ({
+  className,
+  allPermissions,
+}: RolePermissionsObjectsTableHeaderProps) => (
+  <StyledTable className={className}>
+    <StyledTableHeaderRow>
+      <StyledNameHeader>{t`Name`}</StyledNameHeader>
+      <StyledActionsHeader aria-label={t`Actions`}>
+        <Checkbox checked={allPermissions} disabled />
+      </StyledActionsHeader>
+    </StyledTableHeaderRow>
+  </StyledTable>
+);
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsObjectsTableRow.tsx
@ -0,0 +1,69 @@
+import { RolePermissionsObjectPermission } from '@/settings/roles/types/RolePermissionsObjectPermission';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
+import { Checkbox } from 'twenty-ui';
+
+const StyledIconWrapper = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.adaptiveColors.blue1};
+  border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledIcon = styled.div`
+  align-items: center;
+  display: flex;
+  color: ${({ theme }) => theme.color.blue};
+  justify-content: center;
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+const StyledPermissionCell = styled(TableCell)`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckboxCell = styled(TableCell)`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  align-items: center;
+  display: flex;
+`;
+
+type RolePermissionsObjectsTableRowProps = {
+  permission: RolePermissionsObjectPermission;
+};
+
+export const RolePermissionsObjectsTableRow = ({
+  permission,
+}: RolePermissionsObjectsTableRowProps) => {
+  return (
+    <StyledTableRow key={permission.key}>
+      <StyledPermissionCell>
+        <StyledIconWrapper>
+          <StyledIcon>{permission.icon}</StyledIcon>
+        </StyledIconWrapper>
+        <StyledLabel>{permission.label}</StyledLabel>
+      </StyledPermissionCell>
+      <StyledCheckboxCell>
+        <Checkbox checked={permission.value} disabled />
+      </StyledCheckboxCell>
+    </StyledTableRow>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableHeader.tsx
@ -0,0 +1,52 @@
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { Checkbox } from 'twenty-ui';
+
+const StyledTableHeaderRow = styled(TableRow)`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledNameHeader = styled(TableHeader)`
+  flex: 1;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledActionsHeader = styled(TableHeader)`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTable = styled(Table)`
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTypeHeader = styled(TableHeader)`
+  flex: 1;
+`;
+
+type RolePermissionsSettingsTableHeaderProps = {
+  className?: string;
+  allPermissions: boolean;
+};
+
+export const RolePermissionsSettingsTableHeader = ({
+  className,
+  allPermissions,
+}: RolePermissionsSettingsTableHeaderProps) => (
+  <StyledTable className={className}>
+    <StyledTableHeaderRow>
+      <StyledNameHeader>{t`Name`}</StyledNameHeader>
+      <StyledTypeHeader>{t`Type`}</StyledTypeHeader>
+      <StyledActionsHeader aria-label={t`Actions`}>
+        <Checkbox checked={allPermissions} disabled />
+      </StyledActionsHeader>
+    </StyledTableHeaderRow>
+  </StyledTable>
+);
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/components/RolePermissionsSettingsTableRow.tsx
@ -0,0 +1,55 @@
+import { RolePermissionsSettingPermission } from '@/settings/roles/types/RolePermissionsSettingPermission';
+import { TableCell } from '@/ui/layout/table/components/TableCell';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+import styled from '@emotion/styled';
+import { Checkbox } from 'twenty-ui';
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+`;
+
+const StyledType = styled(StyledLabel)`
+  color: ${({ theme }) => theme.font.color.secondary};
+`;
+
+const StyledPermissionCell = styled(TableCell)`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCheckboxCell = styled(TableCell)`
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  align-items: center;
+  display: flex;
+`;
+
+type RolePermissionsSettingsTableRowProps = {
+  permission: RolePermissionsSettingPermission;
+};
+
+export const RolePermissionsSettingsTableRow = ({
+  permission,
+}: RolePermissionsSettingsTableRowProps) => {
+  return (
+    <StyledTableRow key={permission.key}>
+      <StyledPermissionCell>
+        <StyledLabel>{permission.label}</StyledLabel>
+      </StyledPermissionCell>
+      <StyledPermissionCell>
+        <StyledType>{permission.type}</StyledType>
+      </StyledPermissionCell>
+      <StyledCheckboxCell>
+        <Checkbox checked={permission.value} disabled />
+      </StyledCheckboxCell>
+    </StyledTableRow>
+  );
+};