Update 'Settings Permissions' Layout (#10997)

Fixes https://github.com/twentyhq/core-team-issues/issues/566 ## Before <img width="712" alt="Screenshot 2025-03-18 at 17 17 38" src="https://github.com/user-attachments/assets/5c2dd8c6-e0cc-4610-b858-071d50de692c" /> <img width="775" alt="Screenshot 2025-03-18 at 17 17 30" src="https://github.com/user-attachments/assets/52bdde22-f26d-4698-8138-5f2af28ddd50" /> ## After <img width="949" alt="Screenshot 2025-03-18 at 16 58 31" src="https://github.com/user-attachments/assets/71b77032-0f5d-452b-b088-7af7e306d0a6" /> <img width="946" alt="Screenshot 2025-03-18 at 16 58 38" src="https://github.com/user-attachments/assets/dc2ddf95-1622-419a-a35b-3037da7bdd4d" />
2025-03-18 17:48:35 +01:00
parent 6acb70d6a9
commit c3a9c85265
6 changed files with 53 additions and 56 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
@ -11,12 +11,12 @@ import {
  IconEye,
  IconHierarchy,
  IconKey,
-  IconLock,
+  IconLockOpen,
  IconPencil,
+  IconServer,
  IconSettings,
  IconTrash,
  IconTrashX,
-  IconUserCog,
  IconUsers,
  Section,
 } from 'twenty-ui';
@ -82,50 +82,50 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => {
  const settingsPermissionsConfig: RolePermissionsSettingPermission[] = [
    {
      key: SettingsPermissions.API_KEYS_AND_WEBHOOKS,
-      label: 'Manage API Keys & Webhooks',
-      type: 'Developer',
+      name: 'API Keys & Webhooks',
+      description: 'Manage API keys and webhooks',
      value: role.canUpdateAllSettings,
      Icon: IconCode,
    },
    {
      key: SettingsPermissions.WORKSPACE,
-      label: 'Manage Workspace Settings',
-      type: 'General',
+      name: 'Workspace',
+      description: 'Set global workspace preferences',
      value: role.canUpdateAllSettings,
      Icon: IconSettings,
    },
    {
      key: SettingsPermissions.WORKSPACE_MEMBERS,
-      label: 'Manage Members',
-      type: 'Members',
+      name: 'Users',
+      description: 'Add or remove users',
      value: role.canUpdateAllSettings,
      Icon: IconUsers,
    },
    {
      key: SettingsPermissions.ROLES,
-      label: 'Manage Roles',
-      type: 'Members',
+      name: 'Roles',
+      description: 'Define user roles and access levels',
      value: role.canUpdateAllSettings,
-      Icon: IconLock,
+      Icon: IconLockOpen,
    },
    {
      key: SettingsPermissions.DATA_MODEL,
-      label: 'Manage Data Model',
-      type: 'Data Model',
+      name: 'Data Model',
+      description: 'Edit CRM data structure and fields',
      value: role.canUpdateAllSettings,
      Icon: IconHierarchy,
    },
    {
      key: SettingsPermissions.ADMIN_PANEL,
-      label: 'Manage Admin Panel',
-      type: 'Admin Panel',
+      name: 'Admin Panel',
+      description: 'Admin settings and system tools',
      value: role.canUpdateAllSettings,
-      Icon: IconUserCog,
+      Icon: IconServer,
    },
    {
      key: SettingsPermissions.SECURITY,
-      label: 'Manage Security Settings',
-      type: 'Security',
+      name: 'Security',
+      description: 'Manage security policies',
      value: role.canUpdateAllSettings,
      Icon: IconKey,
    },
@ -139,7 +139,11 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => {
          description={t`Ability to interact with each object`}
        />
        <StyledTable>
-          <RolePermissionsObjectsTableHeader allPermissions={true} />
+          <RolePermissionsObjectsTableHeader
+            allPermissions={objectPermissionsConfig.every(
+              (permission) => permission.value,
+            )}
+          />
          <StyledTableRows>
            {objectPermissionsConfig.map((permission) => (
              <RolePermissionsObjectsTableRow
--- 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
@ -4,10 +4,6 @@ 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;
 `;
@ -26,10 +22,14 @@ type RolePermissionsObjectsTableHeaderProps = {
 export const RolePermissionsObjectsTableHeader = ({
  allPermissions,
 }: RolePermissionsObjectsTableHeaderProps) => (
-  <StyledTableHeaderRow>
+  <TableRow>
    <StyledNameHeader>{t`Name`}</StyledNameHeader>
    <StyledActionsHeader aria-label={t`Actions`}>
-      <Checkbox checked={allPermissions} disabled />
+      <Checkbox
+        checked={allPermissions}
+        indeterminate={!allPermissions}
+        disabled
+      />
    </StyledActionsHeader>
-  </StyledTableHeaderRow>
+  </TableRow>
 );
--- 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
@ -4,12 +4,6 @@ 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)};
@ -33,11 +27,11 @@ type RolePermissionsSettingsTableHeaderProps = {
 export const RolePermissionsSettingsTableHeader = ({
  allPermissions,
 }: RolePermissionsSettingsTableHeaderProps) => (
-  <StyledTableHeaderRow>
+  <TableRow gridAutoColumns="3fr 4fr 24px">
    <StyledNameHeader>{t`Name`}</StyledNameHeader>
-    <StyledTypeHeader>{t`Type`}</StyledTypeHeader>
+    <StyledTypeHeader>{t`Description`}</StyledTypeHeader>
    <StyledActionsHeader aria-label={t`Actions`}>
      <Checkbox checked={allPermissions} disabled />
    </StyledActionsHeader>
-  </StyledTableHeaderRow>
+  </TableRow>
 );
--- 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
@ -1,14 +1,15 @@
 import { RolePermissionsSettingPermission } from '@/settings/roles/types/RolePermissionsSettingPermission';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Checkbox } from 'twenty-ui';

-const StyledLabel = styled.span`
+const StyledName = styled.span`
  color: ${({ theme }) => theme.font.color.primary};
 `;

-const StyledType = styled(StyledLabel)`
+const StyledDescription = styled(StyledName)`
  color: ${({ theme }) => theme.font.color.secondary};
 `;

@ -17,7 +18,6 @@ const StyledPermissionCell = styled(TableCell)`
  display: flex;
  flex: 1;
  gap: ${({ theme }) => theme.spacing(2)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
 `;

 const StyledCheckboxCell = styled(TableCell)`
@ -27,11 +27,6 @@ const StyledCheckboxCell = styled(TableCell)`
  padding-right: ${({ theme }) => theme.spacing(4)};
 `;

-const StyledTableRow = styled(TableRow)`
-  align-items: center;
-  display: flex;
-`;
-
 const StyledIconContainer = styled.div`
  display: flex;
  align-items: center;
@ -45,20 +40,26 @@ type RolePermissionsSettingsTableRowProps = {
 export const RolePermissionsSettingsTableRow = ({
  permission,
 }: RolePermissionsSettingsTableRowProps) => {
+  const theme = useTheme();
+
  return (
-    <StyledTableRow key={permission.key}>
-      <StyledPermissionCell>
-        <StyledLabel>{permission.label}</StyledLabel>
-      </StyledPermissionCell>
+    <TableRow key={permission.key} gridAutoColumns="3fr 4fr 24px">
      <StyledPermissionCell>
        <StyledIconContainer>
-          <permission.Icon size={14} />
+          <permission.Icon
+            size={16}
+            color={theme.font.color.primary}
+            stroke={theme.icon.stroke.sm}
+          />
        </StyledIconContainer>
-        <StyledType>{permission.type}</StyledType>
+        <StyledName>{permission.name}</StyledName>
+      </StyledPermissionCell>
+      <StyledPermissionCell>
+        <StyledDescription>{permission.description}</StyledDescription>
      </StyledPermissionCell>
      <StyledCheckboxCell>
        <Checkbox checked={permission.value} disabled />
      </StyledCheckboxCell>
-    </StyledTableRow>
+    </TableRow>
  );
 };
--- a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts
+++ b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts
@ -2,8 +2,8 @@ import { IconComponent } from 'twenty-ui';

 export type RolePermissionsSettingPermission = {
  key: string;
-  label: string;
-  type: string;
+  name: string;
+  description: string;
  value: boolean;
  Icon: IconComponent;
 };
--- a/packages/twenty-ui/src/input/components/Checkbox.tsx
+++ b/packages/twenty-ui/src/input/components/Checkbox.tsx
@ -104,7 +104,7 @@ const StyledInput = styled.input<InputProps>`
      disabled && isChecked
        ? theme.adaptiveColors.blue3
        : indeterminate || isChecked
-          ? theme.color.blue
+          ? theme.adaptiveColors.blue3
          : 'transparent'};
    border-color: ${({
      theme,
@ -114,12 +114,10 @@ const StyledInput = styled.input<InputProps>`
      disabled,
    }) => {
      switch (true) {
-        case isChecked:
+        case indeterminate || isChecked:
          return disabled ? theme.adaptiveColors.blue3 : theme.color.blue;
        case disabled:
          return theme.border.color.strong;
-        case indeterminate || isChecked:
-          return theme.color.blue;
        case variant === CheckboxVariant.Primary:
          return theme.border.color.inverted;
        case variant === CheckboxVariant.Tertiary: