From d61f48d7ee02e04df7b55230f8a5d99bc49c6299 Mon Sep 17 00:00:00 2001 From: Weiko Date: Wed, 5 Mar 2025 16:11:15 +0100 Subject: [PATCH] Add icons next to permission settings labels (#10673) ## Context as title Before Screenshot 2025-03-05 at 15 11 19 After Screenshot 2025-03-05 at 15 09 51 --- .../components/RolePermissions.tsx | 49 ++++++++++++------- .../RolePermissionsObjectsTableRow.tsx | 4 +- .../RolePermissionsSettingsTableRow.tsx | 9 ++++ .../types/RolePermissionsObjectPermission.ts | 4 +- .../types/RolePermissionsSettingPermission.ts | 3 ++ .../display/icon/components/TablerIcons.ts | 8 +-- 6 files changed, 55 insertions(+), 22 deletions(-) diff --git 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 index 8bacd2e49..d0f01d4bc 100644 --- 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 @@ -2,14 +2,22 @@ import { RolePermissionsObjectsTableHeader } from '@/settings/roles/role-permiss 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 { RolePermissionsSettingPermission } from '@/settings/roles/types/RolePermissionsSettingPermission'; import styled from '@emotion/styled'; import { t } from '@lingui/core/macro'; import { H2Title, + IconCode, IconEye, + IconHierarchy, + IconKey, + IconLock, IconPencil, + IconSettings, IconTrash, IconTrashX, + IconUserCog, + IconUsers, Section, } from 'twenty-ui'; import { Role } from '~/generated-metadata/graphql'; @@ -44,71 +52,78 @@ export const RolePermissions = ({ role }: RolePermissionsProps) => { { key: 'seeRecords', label: 'See Records on All Objects', - icon: , + Icon: IconEye, value: role.canReadAllObjectRecords, }, { key: 'editRecords', label: 'Edit Records on All Objects', - icon: , + Icon: IconPencil, value: role.canUpdateAllObjectRecords, }, { key: 'deleteRecords', label: 'Delete Records on All Objects', - icon: , + Icon: IconTrash, value: role.canSoftDeleteAllObjectRecords, }, { key: 'destroyRecords', label: 'Destroy Records on All Objects', - icon: , + Icon: IconTrashX, value: role.canDestroyAllObjectRecords, }, ]; - const settingsPermissionsConfig = [ + const settingsPermissionsConfig: RolePermissionsSettingPermission[] = [ { key: SettingsPermissions.API_KEYS_AND_WEBHOOKS, - label: 'API Keys and Webhooks', + label: 'Manage API Keys & Webhooks', type: 'Developer', value: role.canUpdateAllSettings, - }, - { - key: SettingsPermissions.ROLES, - label: 'Roles', - type: 'Members', - value: role.canUpdateAllSettings, + Icon: IconCode, }, { key: SettingsPermissions.WORKSPACE, - label: 'Workspace Settings', + label: 'Manage Workspace Settings', type: 'General', value: role.canUpdateAllSettings, + Icon: IconSettings, }, { key: SettingsPermissions.WORKSPACE_MEMBERS, - label: 'Workspace Users', + label: 'Manage Members', type: 'Members', value: role.canUpdateAllSettings, + Icon: IconUsers, + }, + { + key: SettingsPermissions.ROLES, + label: 'Manage Roles', + type: 'Members', + value: role.canUpdateAllSettings, + Icon: IconLock, }, { key: SettingsPermissions.DATA_MODEL, - label: 'Data Model', + label: 'Manage Data Model', type: 'Data Model', value: role.canUpdateAllSettings, + Icon: IconHierarchy, }, { key: SettingsPermissions.ADMIN_PANEL, - label: 'Admin Panel', + label: 'Manage Admin Panel', type: 'Admin Panel', value: role.canUpdateAllSettings, + Icon: IconUserCog, }, { key: SettingsPermissions.SECURITY, - label: 'Security Settings', + label: 'Manage Security Settings', type: 'Security', value: role.canUpdateAllSettings, + Icon: IconKey, }, ]; diff --git 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 index f2c04a4ea..68d604b94 100644 --- 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 @@ -57,7 +57,9 @@ export const RolePermissionsObjectsTableRow = ({ - {permission.icon} + + + {permission.label} diff --git 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 index b7cd919c1..e0dbe27a5 100644 --- 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 @@ -34,6 +34,12 @@ const StyledTableRow = styled(TableRow)` display: flex; `; +const StyledIconContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; + type RolePermissionsSettingsTableRowProps = { permission: RolePermissionsSettingPermission; }; @@ -47,6 +53,9 @@ export const RolePermissionsSettingsTableRow = ({ {permission.label} + + + {permission.type} diff --git a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsObjectPermission.ts b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsObjectPermission.ts index 1638d03e5..466cc757b 100644 --- a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsObjectPermission.ts +++ b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsObjectPermission.ts @@ -1,6 +1,8 @@ +import { IconComponent } from 'twenty-ui'; + export type RolePermissionsObjectPermission = { key: string; label: string; - icon: React.ReactNode; value: boolean; + Icon: IconComponent; }; diff --git a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts index 488fa6292..d1ad40cb8 100644 --- a/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts +++ b/packages/twenty-front/src/modules/settings/roles/types/RolePermissionsSettingPermission.ts @@ -1,6 +1,9 @@ +import { IconComponent } from 'twenty-ui'; + export type RolePermissionsSettingPermission = { key: string; label: string; type: string; value: boolean; + Icon: IconComponent; }; diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index 54971f328..5ad764929 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -12,10 +12,10 @@ export { IconArrowDown, IconArrowLeft, IconArrowRight, - IconArrowUp, - IconArrowUpRight, IconArrowsDiagonal, IconArrowsVertical, + IconArrowUp, + IconArrowUpRight, IconAt, IconBaselineDensitySmall, IconBell, @@ -44,8 +44,8 @@ export { IconChevronDown, IconChevronLeft, IconChevronRight, - IconChevronUp, IconChevronsRight, + IconChevronUp, IconCircleDot, IconCircleOff, IconCirclePlus, @@ -156,6 +156,7 @@ export { IconHeart, IconHeartOff, IconHelpCircle, + IconHierarchy, IconHierarchy2, IconHistory, IconHistoryToggle, @@ -269,6 +270,7 @@ export { IconUpload, IconUser, IconUserCircle, + IconUserCog, IconUserPin, IconUserPlus, IconUsers,