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/modules/app/components/AppRouter.tsx

@@ -1,8 +1,10 @@
 import { useCreateAppRouter } from '@/app/hooks/useCreateAppRouter';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { RouterProvider } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const AppRouter = () => {
   const billing = useRecoilValue(billingState);
@@ -16,12 +18,17 @@ export const AppRouter = () => {
 
   const isAdminPageEnabled = currentUser?.canImpersonate;
 
+  const isPermissionsEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsPermissionsEnabled,
+  );
+
   return (
     <RouterProvider
       router={useCreateAppRouter(
         isBillingPageEnabled,
         isFunctionSettingsEnabled,
         isAdminPageEnabled,
+        isPermissionsEnabled,
       )}
     />
   );

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -267,12 +267,14 @@ type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
   isFunctionSettingsEnabled?: boolean;
   isAdminPageEnabled?: boolean;
+  isPermissionsEnabled?: boolean;
 };
 
 export const SettingsRoutes = ({
   isBillingEnabled,
   isFunctionSettingsEnabled,
   isAdminPageEnabled,
+  isPermissionsEnabled,
 }: SettingsRoutesProps) => (
   <Suspense fallback={<SettingsSkeletonLoader />}>
     <Routes>
@@ -308,8 +310,15 @@ export const SettingsRoutes = ({
         element={<SettingsObjectDetailPage />}
       />
       <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
-      <Route path={SettingsPath.Roles} element={<SettingsRoles />} />
-      <Route path={SettingsPath.RoleDetail} element={<SettingsRoleEdit />} />
+      {isPermissionsEnabled && (
+        <>
+          <Route path={SettingsPath.Roles} element={<SettingsRoles />} />
+          <Route
+            path={SettingsPath.RoleDetail}
+            element={<SettingsRoleEdit />}
+          />
+        </>
+      )}
       <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
       <Route
         path={SettingsPath.DevelopersNewApiKey}

packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx

@@ -29,6 +29,7 @@ export const useCreateAppRouter = (
   isBillingEnabled?: boolean,
   isFunctionSettingsEnabled?: boolean,
   isAdminPageEnabled?: boolean,
+  isPermissionsEnabled?: boolean,
 ) =>
   createBrowserRouter(
     createRoutesFromElements(
@@ -63,6 +64,7 @@ export const useCreateAppRouter = (
                 isBillingEnabled={isBillingEnabled}
                 isFunctionSettingsEnabled={isFunctionSettingsEnabled}
                 isAdminPageEnabled={isAdminPageEnabled}
+                isPermissionsEnabled={isPermissionsEnabled}
               />
             }
           />

packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts

@@ -209,6 +209,7 @@ export const queries = {
       colorScheme
       avatarUrl
       locale
+      userEmail
       timeZone
       dateFormat
       timeFormat

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

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+
+export const ROLE_FRAGMENT = gql`
+  fragment RoleFragment on Role {
+    id
+    label
+    description
+    canUpdateAllSettings
+    isEditable
+  }
+`;

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

@@ -0,0 +1,22 @@
+import { ROLE_FRAGMENT } from '@/settings/roles/graphql/fragments/roleFragment';
+import { WORKSPACE_MEMBER_QUERY_FRAGMENT } from '@/workspace-member/graphql/fragments/workspaceMemberQueryFragment';
+import { gql } from '@apollo/client';
+
+export const UPDATE_WORKSPACE_MEMBER_ROLE = gql`
+  ${WORKSPACE_MEMBER_QUERY_FRAGMENT}
+  ${ROLE_FRAGMENT}
+  mutation UpdateWorkspaceMemberRole(
+    $workspaceMemberId: String!
+    $roleId: String
+  ) {
+    updateWorkspaceMemberRole(
+      workspaceMemberId: $workspaceMemberId
+      roleId: $roleId
+    ) {
+      ...WorkspaceMemberQueryFragment
+      roles {
+        ...RoleFragment
+      }
+    }
+  }
+`;

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

@@ -1,15 +1,13 @@
+import { ROLE_FRAGMENT } from '@/settings/roles/graphql/fragments/roleFragment';
 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}
   query GetRoles {
     getRoles {
-      id
-      label
-      description
-      canUpdateAllSettings
-      isEditable
+      ...RoleFragment
       workspaceMembers {
         ...WorkspaceMemberQueryFragment
       }

packages/twenty-front/src/modules/workspace-member/graphql/fragments/workspaceMemberQueryFragment.ts

@@ -10,6 +10,7 @@ export const WORKSPACE_MEMBER_QUERY_FRAGMENT = gql`
     colorScheme
     avatarUrl
     locale
+    userEmail
     timeZone
     dateFormat
     timeFormat