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/SettingsRoles.tsx

@@ -55,8 +55,7 @@ const StyledAvatarGroup = styled.div`
   margin-right: ${({ theme }) => theme.spacing(1)};
 
   > * {
-    border: 2px solid ${({ theme }) => theme.background.primary};
-    margin-left: -8px;
+    margin-left: -5px;
 
     &:first-of-type {
       margin-left: 0;
@@ -84,6 +83,11 @@ const StyledAvatarContainer = styled.div`
   border: 0px;
 `;
 
+const StyledAssignedText = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
 export const SettingsRoles = () => {
   const { t } = useLingui();
   const isPermissionsEnabled = useIsFeatureEnabled(
@@ -91,8 +95,9 @@ export const SettingsRoles = () => {
   );
   const theme = useTheme();
   const navigateSettings = useNavigateSettings();
-
-  const { data: rolesData, loading: isRolesLoading } = useGetRolesQuery();
+  const { data: rolesData, loading: rolesLoading } = useGetRolesQuery({
+    fetchPolicy: 'network-only',
+  });
 
   if (!isPermissionsEnabled) {
     return null;
@@ -131,7 +136,7 @@ export const SettingsRoles = () => {
                 <TableHeader align={'right'}></TableHeader>
               </TableRow>
             </StyledTableHeaderRow>
-            {!isRolesLoading &&
+            {!rolesLoading &&
               rolesData?.getRoles.map((role) => (
                 <StyledTableRow
                   key={role.id}
@@ -164,7 +169,7 @@ export const SettingsRoles = () => {
                                     workspaceMember.name.firstName ?? ''
                                   }
                                   type="rounded"
-                                  size="sm"
+                                  size="md"
                                 />
                               </StyledAvatarContainer>
                               <AppTooltip
@@ -178,7 +183,9 @@ export const SettingsRoles = () => {
                             </>
                           ))}
                       </StyledAvatarGroup>
-                      {role.workspaceMembers.length}
+                      <StyledAssignedText>
+                        {role.workspaceMembers.length}
+                      </StyledAssignedText>
                     </StyledAssignedCell>
                   </TableCell>
                   <TableCell align={'right'}>