add settings permissions update (#11377)

Fixes https://github.com/twentyhq/core-team-issues/issues/710

packages/twenty-front/src/modules/settings/roles/role-permissions/components/SettingsRolePermissions.tsx

@@ -1,3 +1,4 @@
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { SettingsRolePermissionsObjectsTableHeader } from '@/settings/roles/role-permissions/components/SettingsRolePermissionsObjectsTableHeader';
 import { SettingsRolePermissionsObjectsTableRow } from '@/settings/roles/role-permissions/components/SettingsRolePermissionsObjectsTableRow';
 import { SettingsRolePermissionsSettingsTableHeader } from '@/settings/roles/role-permissions/components/SettingsRolePermissionsSettingsTableHeader';
@@ -5,10 +6,10 @@ import { SettingsRolePermissionsSettingsTableRow } from '@/settings/roles/role-p
 import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
 import { SettingsRolePermissionsObjectPermission } from '@/settings/roles/types/SettingsRolePermissionsObjectPermission';
 import { SettingsRolePermissionsSettingPermission } from '@/settings/roles/types/SettingsRolePermissionsSettingPermission';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useRecoilState } from 'recoil';
-import { SettingPermissionType } from '~/generated-metadata/graphql';
 import {
   H2Title,
   IconCode,
@@ -23,7 +24,11 @@ import {
   IconTrashX,
   IconUsers,
 } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
+import { Card, Section } from 'twenty-ui/layout';
+import {
+  FeatureFlagKey,
+  SettingPermissionType,
+} from '~/generated-metadata/graphql';
 
 const StyledRolePermissionsContainer = styled.div`
   display: flex;
@@ -40,6 +45,10 @@ const StyledTableRows = styled.div`
   padding-top: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledCard = styled(Card)`
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
 type SettingsRolePermissionsProps = {
   roleId: string;
   isEditable: boolean;
@@ -110,53 +119,50 @@ export const SettingsRolePermissions = ({
         key: SettingPermissionType.API_KEYS_AND_WEBHOOKS,
         name: t`API Keys & Webhooks`,
         description: t`Manage API keys and webhooks`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconCode,
       },
       {
         key: SettingPermissionType.WORKSPACE,
         name: t`Workspace`,
         description: t`Set global workspace preferences`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconSettings,
       },
       {
         key: SettingPermissionType.WORKSPACE_MEMBERS,
         name: t`Users`,
         description: t`Add or remove users`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconUsers,
       },
       {
         key: SettingPermissionType.ROLES,
         name: t`Roles`,
         description: t`Define user roles and access levels`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconLockOpen,
       },
       {
         key: SettingPermissionType.DATA_MODEL,
         name: t`Data Model`,
         description: t`Edit CRM data structure and fields`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconHierarchy,
       },
       {
         key: SettingPermissionType.ADMIN_PANEL,
         name: t`Admin Panel`,
         description: t`Admin settings and system tools`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconServer,
       },
       {
         key: SettingPermissionType.SECURITY,
         name: t`Security`,
         description: t`Manage security policies`,
-        value: settingsDraftRole.canUpdateAllSettings,
         Icon: IconKey,
       },
     ];
 
+  const isPermissionsV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsPermissionsV2Enabled,
+  );
+
   return (
     <StyledRolePermissionsContainer>
       <Section>
@@ -183,15 +189,32 @@ export const SettingsRolePermissions = ({
       </Section>
       <Section>
         <H2Title title={t`Settings`} description={t`Settings permissions`} />
+        {isPermissionsV2Enabled && (
+          <StyledCard rounded>
+            <SettingsOptionCardContentToggle
+              Icon={IconSettings}
+              title={t`Settings All Access`}
+              description={t`Ability to edit all settings`}
+              checked={settingsDraftRole.canUpdateAllSettings}
+              disabled={!isEditable}
+              onChange={() => {
+                setSettingsDraftRole({
+                  ...settingsDraftRole,
+                  canUpdateAllSettings: !settingsDraftRole.canUpdateAllSettings,
+                });
+              }}
+            />
+          </StyledCard>
+        )}
         <StyledTable>
-          <SettingsRolePermissionsSettingsTableHeader
-            allPermissions={settingsDraftRole.canUpdateAllSettings}
-          />
+          <SettingsRolePermissionsSettingsTableHeader />
           <StyledTableRows>
             {settingsPermissionsConfig.map((permission) => (
               <SettingsRolePermissionsSettingsTableRow
                 key={permission.key}
+                roleId={roleId}
                 permission={permission}
+                isEditable={isEditable}
               />
             ))}
           </StyledTableRows>

packages/twenty-front/src/modules/settings/roles/role-permissions/components/SettingsRolePermissionsSettingsTableHeader.tsx

@@ -1,42 +1,11 @@
 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/input';
 
-const StyledNameHeader = styled(TableHeader)`
-  flex: 1;
-`;
-
-const StyledTypeHeader = styled(TableHeader)`
-  flex: 1;
-`;
-
-const StyledActionsHeader = styled(TableHeader)`
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: ${({ theme }) => theme.spacing(4)};
-`;
-
-type SettingsRolePermissionsSettingsTableHeaderProps = {
-  allPermissions: boolean;
-  onToggleAll?: () => void;
-};
-
-export const SettingsRolePermissionsSettingsTableHeader = ({
-  allPermissions,
-  onToggleAll,
-}: SettingsRolePermissionsSettingsTableHeaderProps) => (
+export const SettingsRolePermissionsSettingsTableHeader = () => (
   <TableRow gridAutoColumns="3fr 4fr 24px">
-    <StyledNameHeader>{t`Name`}</StyledNameHeader>
-    <StyledTypeHeader>{t`Description`}</StyledTypeHeader>
-    <StyledActionsHeader aria-label={t`Actions`}>
-      <Checkbox
-        checked={allPermissions}
-        disabled={!onToggleAll}
-        onChange={onToggleAll}
-      />
-    </StyledActionsHeader>
+    <TableHeader>{t`Name`}</TableHeader>
+    <TableHeader>{t`Description`}</TableHeader>
+    <TableHeader></TableHeader>
   </TableRow>
 );

packages/twenty-front/src/modules/settings/roles/role-permissions/components/SettingsRolePermissionsSettingsTableRow.tsx

@@ -1,9 +1,14 @@
+import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
 import { SettingsRolePermissionsSettingPermission } from '@/settings/roles/types/SettingsRolePermissionsSettingPermission';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 import { Checkbox } from 'twenty-ui/input';
+import { v4 } from 'uuid';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 const StyledName = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
@@ -34,13 +39,54 @@ const StyledIconContainer = styled.div`
 `;
 
 type SettingsRolePermissionsSettingsTableRowProps = {
+  roleId: string;
   permission: SettingsRolePermissionsSettingPermission;
+  isEditable: boolean;
 };
 
 export const SettingsRolePermissionsSettingsTableRow = ({
+  roleId,
   permission,
+  isEditable,
 }: SettingsRolePermissionsSettingsTableRowProps) => {
   const theme = useTheme();
+  const [settingsDraftRole, setSettingsDraftRole] = useRecoilState(
+    settingsDraftRoleFamilyState(roleId),
+  );
+  const isPermissionsV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsPermissionsV2Enabled,
+  );
+  const canUpdateAllSettings = settingsDraftRole.canUpdateAllSettings;
+
+  const isSettingPermissionEnabled =
+    settingsDraftRole.settingPermissions?.some(
+      (settingPermission) => settingPermission.setting === permission.key,
+    ) ?? false;
+
+  const handleChange = (value: boolean) => {
+    const currentPermissions = settingsDraftRole.settingPermissions ?? [];
+
+    if (value === true) {
+      setSettingsDraftRole({
+        ...settingsDraftRole,
+        settingPermissions: [
+          ...currentPermissions,
+          {
+            id: v4(),
+            setting: permission.key,
+            roleId,
+          },
+        ],
+      });
+    } else {
+      setSettingsDraftRole({
+        ...settingsDraftRole,
+        settingPermissions: currentPermissions.filter(
+          (p) => p.setting !== permission.key,
+        ),
+      });
+    }
+  };
 
   return (
     <TableRow key={permission.key} gridAutoColumns="3fr 4fr 24px">
@@ -58,7 +104,13 @@ export const SettingsRolePermissionsSettingsTableRow = ({
         <StyledDescription>{permission.description}</StyledDescription>
       </StyledPermissionCell>
       <StyledCheckboxCell>
-        <Checkbox checked={permission.value} disabled />
+        <Checkbox
+          checked={isSettingPermissionEnabled || canUpdateAllSettings}
+          disabled={
+            !isEditable || canUpdateAllSettings || !isPermissionsV2Enabled
+          }
+          onChange={(event) => handleChange(event.target.checked)}
+        />
       </StyledCheckboxCell>
     </TableRow>
   );