Role page various fixes (#12324)

Various fixes from fast follows

- Sort roles by alphabetical order
- Change some tooltips
- During role creation, role should have all permissions enabled by
default
- Changed Permission icons design and refactored duplicating logic in a
dedicated component
- Changed "Revoked by" design
- Display role icon in default role picker
- Workspace member avatar was missing in role list and member picker
- Set "seeded" member role as editable for new workspaces
- Various css fixes

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

@@ -7,7 +7,7 @@ import { Select } from '@/ui/input/components/Select';
 import { t } from '@lingui/core/macro';
 import { useRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title, IconUserPin } from 'twenty-ui/display';
+import { H2Title, IconUserPin, useIcons } from 'twenty-ui/display';
 import { Card, Section } from 'twenty-ui/layout';
 import {
   Role,
@@ -51,10 +51,18 @@ export const SettingsRoleDefaultRole = ({
     });
   };
 
+  const { getIcon } = useIcons();
+
   if (!currentWorkspace || !defaultRole) {
     return null;
   }
 
+  const options = roles.map((role) => ({
+    label: role.label,
+    value: role.id,
+    Icon: getIcon(role.icon),
+  }));
+
   return (
     <Section>
       <H2Title
@@ -71,10 +79,7 @@ export const SettingsRoleDefaultRole = ({
             selectSizeVariant="small"
             withSearchInput
             dropdownId="default-role-select"
-            options={roles.map((role) => ({
-              label: role.label,
-              value: role.id,
-            }))}
+            options={options}
             value={defaultRole?.id ?? ''}
             onChange={(value) =>
               updateDefaultRole(value as string, currentWorkspace)

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

@@ -9,11 +9,12 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
+import { H2Title, IconPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { Section } from 'twenty-ui/layout';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { Button } from 'twenty-ui/input';
-import { H2Title, IconPlus } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
+import { sortByAscString } from '~/utils/array/sortByAscString';
 
 const StyledCreateRoleSection = styled(Section)`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
@@ -40,6 +41,10 @@ export const SettingsRolesList = () => {
 
   const settingsAllRoles = useRecoilValue(settingsAllRolesSelector);
 
+  const sortedSettingsAllRoles = [...settingsAllRoles].sort((a, b) =>
+    sortByAscString(a.label, b.label),
+  );
+
   return (
     <Section>
       <H2Title
@@ -49,10 +54,10 @@ export const SettingsRolesList = () => {
       <Table>
         <SettingsRolesTableHeader />
         <StyledTableRows>
-          {settingsAllRoles.length === 0 ? (
+          {sortedSettingsAllRoles.length === 0 ? (
             <StyledNoRoles>{t`No roles found`}</StyledNoRoles>
           ) : (
-            settingsAllRoles.map((role) => (
+            sortedSettingsAllRoles.map((role) => (
               <SettingsRolesTableRow key={role.id} role={role} />
             ))
           )}

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

@@ -111,11 +111,8 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
       <TableCell align={'left'}>
         <StyledAssignedText>{role.workspaceMembers.length}</StyledAssignedText>
       </TableCell>
-      <TableCell align={'right'}>
-        <IconChevronRight
-          size={theme.icon.size.md}
-          color={theme.font.color.tertiary}
-        />
+      <TableCell align={'right'} color={theme.font.color.tertiary}>
+        <IconChevronRight size={theme.icon.size.md} />
       </TableCell>
     </StyledTableRow>
   );