add role assignment page (#10115)

## Context
This PR introduces the "assignment" tab in the Role edit page, currently
allowing admin users to assign workspace members to specific roles.

Note: For now, a user can only have one role and a modal will warn you
if you try to re-assign a user to a new role.

## Test
<img width="648" alt="Screenshot 2025-02-10 at 17 59 21"
src="https://github.com/user-attachments/assets/dabd7a17-6aca-4d2b-95d8-46182f53e1e8"
/>
<img width="668" alt="Screenshot 2025-02-10 at 17 59 33"
src="https://github.com/user-attachments/assets/802aab7a-db67-4f83-9a44-35773df100f7"
/>
<img width="629" alt="Screenshot 2025-02-10 at 17 59 42"
src="https://github.com/user-attachments/assets/277db061-3f05-4ccd-8a83-7a96d6c1673e"
/>

packages/twenty-front/src/pages/settings/roles/SettingsRoleEdit.tsx

@@ -2,7 +2,13 @@ import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { H3Title, IconLockOpen, IconUser, IconUserPlus } from 'twenty-ui';
+import {
+  H3Title,
+  IconLockOpen,
+  IconSettings,
+  IconUser,
+  IconUserPlus,
+} from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -12,6 +18,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useGetRolesQuery } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { RolePermissions } from '~/pages/settings/roles/components/RolePermissions';
+import { RoleSettings } from '~/pages/settings/roles/components/RoleSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { RoleAssignment } from './components/RoleAssignment';
 
@@ -36,13 +43,16 @@ export const SETTINGS_ROLE_DETAIL_TABS = {
   TABS_IDS: {
     ASSIGNMENT: 'assignment',
     PERMISSIONS: 'permissions',
+    SETTINGS: 'settings',
   },
 } as const;
 
 export const SettingsRoleEdit = () => {
   const { roleId = '' } = useParams();
-  const { data: rolesData, loading: rolesLoading } = useGetRolesQuery();
   const navigateSettings = useNavigateSettings();
+  const { data: rolesData, loading: rolesLoading } = useGetRolesQuery({
+    fetchPolicy: 'network-only',
+  });
 
   const role = rolesData?.getRoles.find((r) => r.id === roleId);
 
@@ -71,6 +81,12 @@ export const SettingsRoleEdit = () => {
       Icon: IconLockOpen,
       hide: false,
     },
+    {
+      id: SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.SETTINGS,
+      title: t`Settings`,
+      Icon: IconSettings,
+      hide: false,
+    },
   ];
 
   const renderActiveTabContent = () => {
@@ -79,6 +95,8 @@ export const SettingsRoleEdit = () => {
         return <RoleAssignment role={role} />;
       case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.PERMISSIONS:
         return <RolePermissions role={role} />;
+      case SETTINGS_ROLE_DETAIL_TABS.TABS_IDS.SETTINGS:
+        return <RoleSettings role={role} />;
       default:
         return null;
     }