add settings permissions update (#11377)

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

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -948,7 +948,7 @@ export type Mutation = {
   uploadProfilePicture: Scalars['String']['output'];
   uploadWorkspaceLogo: Scalars['String']['output'];
   upsertOneObjectPermission: ObjectPermission;
-  upsertOneSettingPermission: SettingPermission;
+  upsertSettingPermissions: Array<SettingPermission>;
   userLookupAdminPanel: UserLookup;
   validateApprovedAccessDomain: ApprovedAccessDomain;
 };
@@ -1308,8 +1308,8 @@ export type MutationUpsertOneObjectPermissionArgs = {
 };
 
 
-export type MutationUpsertOneSettingPermissionArgs = {
-  upsertSettingPermissionInput: UpsertSettingPermissionInput;
+export type MutationUpsertSettingPermissionsArgs = {
+  upsertSettingPermissionsInput: UpsertSettingPermissionsInput;
 };
 
 
@@ -1849,6 +1849,7 @@ export type Role = {
   id: Scalars['String']['output'];
   isEditable: Scalars['Boolean']['output'];
   label: Scalars['String']['output'];
+  settingPermissions?: Maybe<Array<SettingPermission>>;
   workspaceMembers: Array<WorkspaceMember>;
 };
 
@@ -1958,7 +1959,6 @@ export enum ServerlessFunctionSyncStatus {
 
 export type SettingPermission = {
   __typename?: 'SettingPermission';
-  canUpdateSetting?: Maybe<Scalars['Boolean']['output']>;
   id: Scalars['String']['output'];
   roleId: Scalars['String']['output'];
   setting: SettingPermissionType;
@@ -2262,10 +2262,9 @@ export type UpsertObjectPermissionInput = {
   roleId: Scalars['String']['input'];
 };
 
-export type UpsertSettingPermissionInput = {
-  canUpdateSetting?: InputMaybe<Scalars['Boolean']['input']>;
+export type UpsertSettingPermissionsInput = {
   roleId: Scalars['String']['input'];
-  setting: SettingPermissionType;
+  settingPermissionKeys: Array<SettingPermissionType>;
 };
 
 export type User = {

packages/twenty-front/src/generated/graphql.tsx

@@ -864,7 +864,7 @@ export type Mutation = {
   uploadProfilePicture: Scalars['String'];
   uploadWorkspaceLogo: Scalars['String'];
   upsertOneObjectPermission: ObjectPermission;
-  upsertOneSettingPermission: SettingPermission;
+  upsertSettingPermissions: Array<SettingPermission>;
   userLookupAdminPanel: UserLookup;
   validateApprovedAccessDomain: ApprovedAccessDomain;
 };
@@ -1174,8 +1174,8 @@ export type MutationUpsertOneObjectPermissionArgs = {
 };
 
 
-export type MutationUpsertOneSettingPermissionArgs = {
-  upsertSettingPermissionInput: UpsertSettingPermissionInput;
+export type MutationUpsertSettingPermissionsArgs = {
+  upsertSettingPermissionsInput: UpsertSettingPermissionsInput;
 };
 
 
@@ -1644,6 +1644,7 @@ export type Role = {
   id: Scalars['String'];
   isEditable: Scalars['Boolean'];
   label: Scalars['String'];
+  settingPermissions?: Maybe<Array<SettingPermission>>;
   workspaceMembers: Array<WorkspaceMember>;
 };
 
@@ -1753,7 +1754,6 @@ export enum ServerlessFunctionSyncStatus {
 
 export type SettingPermission = {
   __typename?: 'SettingPermission';
-  canUpdateSetting?: Maybe<Scalars['Boolean']>;
   id: Scalars['String'];
   roleId: Scalars['String'];
   setting: SettingPermissionType;
@@ -2049,10 +2049,9 @@ export type UpsertObjectPermissionInput = {
   roleId: Scalars['String'];
 };
 
-export type UpsertSettingPermissionInput = {
-  canUpdateSetting?: InputMaybe<Scalars['Boolean']>;
+export type UpsertSettingPermissionsInput = {
   roleId: Scalars['String'];
-  setting: SettingPermissionType;
+  settingPermissionKeys: Array<SettingPermissionType>;
 };
 
 export type User = {
@@ -2601,6 +2600,8 @@ export type UpdateLabPublicFeatureFlagMutation = { __typename?: 'Mutation', upda
 
 export type RoleFragmentFragment = { __typename?: 'Role', id: string, label: string, description?: string | null, icon?: string | null, canUpdateAllSettings: boolean, isEditable: boolean, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean };
 
+export type SettingPermissionFragmentFragment = { __typename?: 'SettingPermission', id: string, setting: SettingPermissionType, roleId: string };
+
 export type CreateOneRoleMutationVariables = Exact<{
   createRoleInput: CreateRoleInput;
 }>;
@@ -2623,10 +2624,17 @@ export type UpdateWorkspaceMemberRoleMutationVariables = Exact<{
 
 export type UpdateWorkspaceMemberRoleMutation = { __typename?: 'Mutation', updateWorkspaceMemberRole: { __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale?: string | null, userEmail: string, timeZone?: string | null, dateFormat?: WorkspaceMemberDateFormatEnum | null, timeFormat?: WorkspaceMemberTimeFormatEnum | null, roles?: Array<{ __typename?: 'Role', id: string, label: string, description?: string | null, icon?: string | null, canUpdateAllSettings: boolean, isEditable: boolean, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean }> | null, name: { __typename?: 'FullName', firstName: string, lastName: string } } };
 
+export type UpsertSettingPermissionsMutationVariables = Exact<{
+  upsertSettingPermissionsInput: UpsertSettingPermissionsInput;
+}>;
+
+
+export type UpsertSettingPermissionsMutation = { __typename?: 'Mutation', upsertSettingPermissions: Array<{ __typename?: 'SettingPermission', id: string, setting: SettingPermissionType, roleId: string }> };
+
 export type GetRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetRolesQuery = { __typename?: 'Query', getRoles: Array<{ __typename?: 'Role', id: string, label: string, description?: string | null, icon?: string | null, canUpdateAllSettings: boolean, isEditable: boolean, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean, workspaceMembers: Array<{ __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale?: string | null, userEmail: string, timeZone?: string | null, dateFormat?: WorkspaceMemberDateFormatEnum | null, timeFormat?: WorkspaceMemberTimeFormatEnum | null, name: { __typename?: 'FullName', firstName: string, lastName: string } }> }> };
+export type GetRolesQuery = { __typename?: 'Query', getRoles: Array<{ __typename?: 'Role', id: string, label: string, description?: string | null, icon?: string | null, canUpdateAllSettings: boolean, isEditable: boolean, canReadAllObjectRecords: boolean, canUpdateAllObjectRecords: boolean, canSoftDeleteAllObjectRecords: boolean, canDestroyAllObjectRecords: boolean, workspaceMembers: Array<{ __typename?: 'WorkspaceMember', id: any, colorScheme: string, avatarUrl?: string | null, locale?: string | null, userEmail: string, timeZone?: string | null, dateFormat?: WorkspaceMemberDateFormatEnum | null, timeFormat?: WorkspaceMemberTimeFormatEnum | null, name: { __typename?: 'FullName', firstName: string, lastName: string } }>, settingPermissions?: Array<{ __typename?: 'SettingPermission', id: string, setting: SettingPermissionType, roleId: string }> | null }> };
 
 export type CreateApprovedAccessDomainMutationVariables = Exact<{
   input: CreateApprovedAccessDomainInput;
@@ -2941,6 +2949,13 @@ export const AvailableSsoIdentityProvidersFragmentFragmentDoc = gql`
   }
 }
     `;
+export const SettingPermissionFragmentFragmentDoc = gql`
+    fragment SettingPermissionFragment on SettingPermission {
+  id
+  setting
+  roleId
+}
+    `;
 export const WorkspaceMemberQueryFragmentFragmentDoc = gql`
     fragment WorkspaceMemberQueryFragment on WorkspaceMember {
   id
@@ -4737,6 +4752,41 @@ export function useUpdateWorkspaceMemberRoleMutation(baseOptions?: Apollo.Mutati
 export type UpdateWorkspaceMemberRoleMutationHookResult = ReturnType<typeof useUpdateWorkspaceMemberRoleMutation>;
 export type UpdateWorkspaceMemberRoleMutationResult = Apollo.MutationResult<UpdateWorkspaceMemberRoleMutation>;
 export type UpdateWorkspaceMemberRoleMutationOptions = Apollo.BaseMutationOptions<UpdateWorkspaceMemberRoleMutation, UpdateWorkspaceMemberRoleMutationVariables>;
+export const UpsertSettingPermissionsDocument = gql`
+    mutation UpsertSettingPermissions($upsertSettingPermissionsInput: UpsertSettingPermissionsInput!) {
+  upsertSettingPermissions(
+    upsertSettingPermissionsInput: $upsertSettingPermissionsInput
+  ) {
+    ...SettingPermissionFragment
+  }
+}
+    ${SettingPermissionFragmentFragmentDoc}`;
+export type UpsertSettingPermissionsMutationFn = Apollo.MutationFunction<UpsertSettingPermissionsMutation, UpsertSettingPermissionsMutationVariables>;
+
+/**
+ * __useUpsertSettingPermissionsMutation__
+ *
+ * To run a mutation, you first call `useUpsertSettingPermissionsMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpsertSettingPermissionsMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [upsertSettingPermissionsMutation, { data, loading, error }] = useUpsertSettingPermissionsMutation({
+ *   variables: {
+ *      upsertSettingPermissionsInput: // value for 'upsertSettingPermissionsInput'
+ *   },
+ * });
+ */
+export function useUpsertSettingPermissionsMutation(baseOptions?: Apollo.MutationHookOptions<UpsertSettingPermissionsMutation, UpsertSettingPermissionsMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpsertSettingPermissionsMutation, UpsertSettingPermissionsMutationVariables>(UpsertSettingPermissionsDocument, options);
+      }
+export type UpsertSettingPermissionsMutationHookResult = ReturnType<typeof useUpsertSettingPermissionsMutation>;
+export type UpsertSettingPermissionsMutationResult = Apollo.MutationResult<UpsertSettingPermissionsMutation>;
+export type UpsertSettingPermissionsMutationOptions = Apollo.BaseMutationOptions<UpsertSettingPermissionsMutation, UpsertSettingPermissionsMutationVariables>;
 export const GetRolesDocument = gql`
     query GetRoles {
   getRoles {
@@ -4744,10 +4794,14 @@ export const GetRolesDocument = gql`
     workspaceMembers {
       ...WorkspaceMemberQueryFragment
     }
+    settingPermissions {
+      ...SettingPermissionFragment
+    }
   }
 }
     ${RoleFragmentFragmentDoc}
-${WorkspaceMemberQueryFragmentFragmentDoc}`;
+${WorkspaceMemberQueryFragmentFragmentDoc}
+${SettingPermissionFragmentFragmentDoc}`;
 
 /**
  * __useGetRolesQuery__

packages/twenty-front/src/modules/settings/roles/components/SettingsRolesQueryEffect.tsx

@@ -1,3 +1,4 @@
+import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
 import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
 import { settingsRoleIdsState } from '@/settings/roles/states/settingsRoleIdsState';
 import { settingsRolesIsLoadingState } from '@/settings/roles/states/settingsRolesIsLoadingState';
@@ -21,6 +22,7 @@ export const SettingsRolesQueryEffect = () => {
         const roleIds = roles.map((role) => role.id);
         set(settingsRoleIdsState, roleIds);
         roles.forEach((role) => {
+          set(settingsDraftRoleFamilyState(role.id), role);
           set(settingsPersistedRoleFamilyState(role.id), role);
         });
       },

packages/twenty-front/src/modules/settings/roles/graphql/fragments/settingPermissionFragment.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const SETTING_PERMISSION_FRAGMENT = gql`
+  fragment SettingPermissionFragment on SettingPermission {
+    id
+    setting
+    roleId
+  }
+`;

packages/twenty-front/src/modules/settings/roles/graphql/mutations/upsertSettingPermissionsMutation.ts

@@ -0,0 +1,15 @@
+import { SETTING_PERMISSION_FRAGMENT } from '@/settings/roles/graphql/fragments/settingPermissionFragment';
+import { gql } from '@apollo/client';
+
+export const UPSERT_SETTING_PERMISSIONS = gql`
+  ${SETTING_PERMISSION_FRAGMENT}
+  mutation UpsertSettingPermissions(
+    $upsertSettingPermissionsInput: UpsertSettingPermissionsInput!
+  ) {
+    upsertSettingPermissions(
+      upsertSettingPermissionsInput: $upsertSettingPermissionsInput
+    ) {
+      ...SettingPermissionFragment
+    }
+  }
+`;

packages/twenty-front/src/modules/settings/roles/graphql/queries/getRolesQuery.ts

@@ -1,16 +1,21 @@
 import { ROLE_FRAGMENT } from '@/settings/roles/graphql/fragments/roleFragment';
+import { SETTING_PERMISSION_FRAGMENT } from '@/settings/roles/graphql/fragments/settingPermissionFragment';
 import { WORKSPACE_MEMBER_QUERY_FRAGMENT } from '@/workspace-member/graphql/fragments/workspaceMemberQueryFragment';
 import { gql } from '@apollo/client';
 
 export const GET_ROLES = gql`
   ${WORKSPACE_MEMBER_QUERY_FRAGMENT}
   ${ROLE_FRAGMENT}
+  ${SETTING_PERMISSION_FRAGMENT}
   query GetRoles {
     getRoles {
       ...RoleFragment
       workspaceMembers {
         ...WorkspaceMemberQueryFragment
       }
+      settingPermissions {
+        ...SettingPermissionFragment
+      }
     }
   }
 `;

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>
   );

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

@@ -1,4 +1,5 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery';
 import { useUpdateWorkspaceMemberRole } from '@/settings/roles/hooks/useUpdateWorkspaceMemberRole';
 import { SettingsRoleAssignment } from '@/settings/roles/role-assignment/components/SettingsRoleAssignment';
 import { SettingsRolePermissions } from '@/settings/roles/role-permissions/components/SettingsRolePermissions';
@@ -14,26 +15,41 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { getOperationName } from '@apollo/client/utilities';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
+import { IconLockOpen, IconSettings, IconUserPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { v4 } from 'uuid';
 import {
   FeatureFlagKey,
+  Role,
   useCreateOneRoleMutation,
   useUpdateOneRoleMutation,
+  useUpsertSettingPermissionsMutation,
 } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getDirtyFields } from '~/utils/getDirtyFields';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { Button } from 'twenty-ui/input';
-import { IconLockOpen, IconSettings, IconUserPlus } from 'twenty-ui/display';
 
 type SettingsRoleProps = {
   roleId: string;
   isCreateMode: boolean;
 };
 
+const ROLE_BASIC_KEYS: Array<keyof Role> = [
+  'label',
+  'description',
+  'icon',
+  'canUpdateAllSettings',
+  'canReadAllObjectRecords',
+  'canUpdateAllObjectRecords',
+  'canSoftDeleteAllObjectRecords',
+  'canDestroyAllObjectRecords',
+];
+
 export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
   const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
@@ -48,6 +64,11 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
 
   const [createRole] = useCreateOneRoleMutation();
   const [updateRole] = useUpdateOneRoleMutation();
+  const [upsertSettingPermissions] = useUpsertSettingPermissionsMutation();
+
+  const { addWorkspaceMembersToRole } = useUpdateWorkspaceMemberRole(roleId);
+
+  const settingsRolesIsLoading = useRecoilValue(settingsRolesIsLoadingState);
 
   const settingsDraftRole = useRecoilValue(
     settingsDraftRoleFamilyState(roleId),
@@ -57,10 +78,6 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
     settingsPersistedRoleFamilyState(roleId),
   );
 
-  const { addWorkspaceMembersToRole } = useUpdateWorkspaceMemberRole(roleId);
-
-  const settingsRolesIsLoading = useRecoilValue(settingsRolesIsLoadingState);
-
   if (!isDefined(settingsRolesIsLoading)) {
     return <></>;
   }
@@ -87,7 +104,12 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
 
   const isDirty = !isDeeplyEqual(settingsDraftRole, settingsPersistedRole);
 
-  const handleSave = () => {
+  const handleSave = async () => {
+    const dirtyFields = getDirtyFields(
+      settingsDraftRole,
+      settingsPersistedRole,
+    );
+
     if (isCreateMode) {
       const roleId = v4();
 
@@ -116,33 +138,63 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
             ),
           });
 
+          await upsertSettingPermissions({
+            variables: {
+              upsertSettingPermissionsInput: {
+                roleId: data.createOneRole.id,
+                settingPermissionKeys:
+                  settingsDraftRole.settingPermissions?.map(
+                    (settingPermission) => settingPermission.setting,
+                  ) ?? [],
+              },
+            },
+            refetchQueries: [getOperationName(GET_ROLES) ?? ''],
+          });
+
           navigateSettings(SettingsPath.RoleDetail, {
             roleId: data.createOneRole.id,
           });
         },
       });
     } else {
-      updateRole({
-        variables: {
-          updateRoleInput: {
-            id: roleId,
-            update: {
-              label: settingsDraftRole.label,
-              description: settingsDraftRole.description,
-              icon: settingsDraftRole.icon,
-              canUpdateAllSettings: settingsDraftRole.canUpdateAllSettings,
-              canReadAllObjectRecords:
-                settingsDraftRole.canReadAllObjectRecords,
-              canUpdateAllObjectRecords:
-                settingsDraftRole.canUpdateAllObjectRecords,
-              canSoftDeleteAllObjectRecords:
-                settingsDraftRole.canSoftDeleteAllObjectRecords,
-              canDestroyAllObjectRecords:
-                settingsDraftRole.canDestroyAllObjectRecords,
+      if (ROLE_BASIC_KEYS.some((key) => key in dirtyFields)) {
+        await updateRole({
+          variables: {
+            updateRoleInput: {
+              id: roleId,
+              update: {
+                label: settingsDraftRole.label,
+                description: settingsDraftRole.description,
+                icon: settingsDraftRole.icon,
+                canUpdateAllSettings: settingsDraftRole.canUpdateAllSettings,
+                canReadAllObjectRecords:
+                  settingsDraftRole.canReadAllObjectRecords,
+                canUpdateAllObjectRecords:
+                  settingsDraftRole.canUpdateAllObjectRecords,
+                canSoftDeleteAllObjectRecords:
+                  settingsDraftRole.canSoftDeleteAllObjectRecords,
+                canDestroyAllObjectRecords:
+                  settingsDraftRole.canDestroyAllObjectRecords,
+              },
             },
           },
-        },
-      });
+        });
+      }
+
+      if (isDefined(dirtyFields.settingPermissions)) {
+        await upsertSettingPermissions({
+          variables: {
+            upsertSettingPermissionsInput: {
+              roleId: roleId,
+              settingPermissionKeys:
+                settingsDraftRole.settingPermissions?.map(
+                  (settingPermission) => settingPermission.setting,
+                ) ?? [],
+            },
+          },
+          refetchQueries: [getOperationName(GET_ROLES) ?? ''],
+        });
+      }
     }
   };
 

packages/twenty-front/src/modules/settings/roles/states/settingsDraftRoleFamilyState.ts

@@ -15,5 +15,6 @@ export const settingsDraftRoleFamilyState = createFamilyState<Role, string>({
     canUpdateAllSettings: false,
     isEditable: false,
     workspaceMembers: [],
+    settingPermissions: [],
   },
 });

packages/twenty-front/src/modules/settings/roles/types/SettingsRolePermissionsSettingPermission.ts

@@ -1,8 +1,9 @@
 import { IconComponent } from 'twenty-ui/display';
+import { SettingPermissionType } from '~/generated-metadata/graphql';
+
 export type SettingsRolePermissionsSettingPermission = {
-  key: string;
+  key: SettingPermissionType;
   name: string;
   description: string;
-  value: boolean;
   Icon: IconComponent;
 };

packages/twenty-front/src/utils/getDirtyFields.spec.ts

@@ -0,0 +1,115 @@
+import { getDirtyFields } from './getDirtyFields';
+
+describe('getDirtyFields', () => {
+  it('should return all defined fields from draft when persisted is null', () => {
+    const draft = { a: 1, b: 'hello', c: undefined, d: null };
+    const persisted = null;
+    expect(getDirtyFields(draft, persisted)).toEqual({
+      a: 1,
+      b: 'hello',
+      d: null,
+    });
+  });
+
+  it('should return all defined fields from draft when persisted is undefined', () => {
+    const draft = { a: 1, b: 'hello', c: undefined, d: false };
+    const persisted = undefined;
+    expect(getDirtyFields(draft, persisted)).toEqual({
+      a: 1,
+      b: 'hello',
+      d: false,
+    });
+  });
+
+  it('should return an empty object when draft and persisted are identical', () => {
+    const draft = { a: 1, b: { c: 2 }, d: [1, 2] };
+    const persisted = { a: 1, b: { c: 2 }, d: [1, 2] };
+    expect(getDirtyFields(draft, persisted)).toEqual({});
+  });
+
+  it('should detect simple value changes', () => {
+    const draft = { a: 1, b: 'world', c: true };
+    const persisted = { a: 1, b: 'hello', c: false };
+    expect(getDirtyFields(draft, persisted)).toEqual({ b: 'world', c: true });
+  });
+
+  it('should detect nested object changes', () => {
+    const draft = { a: { b: { c: 3 } } };
+    const persisted = { a: { b: { c: 2 } } };
+    expect(getDirtyFields(draft, persisted)).toEqual({ a: { b: { c: 3 } } });
+  });
+
+  it('should detect array changes', () => {
+    const draft = { a: [1, 3] };
+    const persisted = { a: [1, 2] };
+    expect(getDirtyFields(draft, persisted)).toEqual({ a: [1, 3] });
+  });
+
+  it('should detect added fields', () => {
+    const draft = { a: 1, b: 2 };
+    const persisted = { a: 1 };
+    expect(getDirtyFields(draft, persisted)).toEqual({ b: 2 });
+  });
+
+  it('should detect removed fields (value becomes undefined)', () => {
+    const draft = { a: 1 };
+    const persisted = { a: 1, b: 2 };
+    // When a field is removed, its value in draft effectively becomes undefined
+    // Cast persisted to any to satisfy TS in this test scenario
+    expect(getDirtyFields(draft, persisted as any)).toEqual({ b: undefined });
+  });
+
+  it('should detect fields set to undefined', () => {
+    const draft = { a: 1, b: undefined };
+    const persisted = { a: 1, b: 2 };
+    // Cast persisted to any to satisfy TS in this test scenario
+    expect(getDirtyFields(draft, persisted as any)).toEqual({ b: undefined });
+  });
+
+  it('should detect fields set to null', () => {
+    const draft = { a: 1, b: null };
+    const persisted = { a: 1, b: 2 };
+    // Cast persisted to any to satisfy TS in this test scenario
+    expect(getDirtyFields(draft, persisted as any)).toEqual({ b: null });
+  });
+
+  it('should handle complex nested structures with mixed changes', () => {
+    const draft = {
+      id: 1,
+      name: 'new name', // changed
+      details: {
+        status: 'active', // same
+        tags: ['tag1', 'tag3'], // changed
+        metadata: { key: 'newValue' }, // changed
+      },
+      settings: { enabled: true }, // new
+    };
+    const persisted = {
+      id: 1,
+      name: 'old name',
+      details: {
+        status: 'active',
+        tags: ['tag1', 'tag2'],
+        metadata: { key: 'oldValue' },
+      },
+      archived: true, // removed
+    };
+    // Cast persisted to any to satisfy TS in this test scenario
+    expect(getDirtyFields(draft, persisted as any)).toEqual({
+      name: 'new name',
+      details: {
+        status: 'active',
+        tags: ['tag1', 'tag3'],
+        metadata: { key: 'newValue' },
+      },
+      settings: { enabled: true },
+      archived: undefined,
+    });
+  });
+
+  it('should return empty object for deeply equal but different reference objects', () => {
+    const draft = { a: { b: 1 } };
+    const persisted = JSON.parse(JSON.stringify(draft)); // Deep clone, different reference
+    expect(getDirtyFields(draft, persisted)).toEqual({});
+  });
+});

packages/twenty-front/src/utils/getDirtyFields.ts

@@ -0,0 +1,26 @@
+import { isDeeplyEqual } from './isDeeplyEqual';
+
+export const getDirtyFields = <T extends Record<string, any>>(
+  draft: T,
+  persisted: T | null | undefined,
+): Partial<T> => {
+  if (!persisted) {
+    return Object.fromEntries(
+      Object.entries(draft).filter(([, value]) => value !== undefined),
+    ) as Partial<T>;
+  }
+
+  const dirty: Partial<T> = {};
+  const allKeys = new Set([...Object.keys(draft), ...Object.keys(persisted)]);
+
+  for (const key of allKeys) {
+    const draftValue = draft[key as keyof T];
+    const persistedValue = persisted[key as keyof T];
+
+    if (!isDeeplyEqual(draftValue, persistedValue)) {
+      dirty[key as keyof T] = draftValue;
+    }
+  }
+
+  return dirty;
+};