Add role edit page container (#10037)

## Context

This PR adds a new SettingsRoleEdit page, the existing roles page now
redirects to the role edition page when clicking on it.
For now, we can't edit anything. Next step is to allow role assignment
in the corresponding tab.

<img width="941" alt="Screenshot 2025-02-05 at 17 16 14"
src="https://github.com/user-attachments/assets/ca46de15-6237-4de6-88e1-2384a09d4a27"
/>

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

@@ -23,6 +23,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useTheme } from '@emotion/react';
 import { FeatureFlagKey, useGetRolesQuery } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledTable = styled(Table)`
@@ -89,6 +90,7 @@ export const SettingsRoles = () => {
     FeatureFlagKey.IsPermissionsEnabled,
   );
   const theme = useTheme();
+  const navigateSettings = useNavigateSettings();
 
   const { data: rolesData, loading: isRolesLoading } = useGetRolesQuery();
 
@@ -96,6 +98,10 @@ export const SettingsRoles = () => {
     return null;
   }
 
+  const handleRoleClick = (roleId: string) => {
+    navigateSettings(SettingsPath.RoleDetail, { roleId });
+  };
+
   return (
     <SubMenuTopBarContainer
       title={t`Roles`}
@@ -127,7 +133,10 @@ export const SettingsRoles = () => {
             </StyledTableHeaderRow>
             {!isRolesLoading &&
               rolesData?.getRoles.map((role) => (
-                <StyledTableRow key={role.id}>
+                <StyledTableRow
+                  key={role.id}
+                  onClick={() => handleRoleClick(role.id)}
+                >
                   <TableCell>
                     <StyledNameCell>
                       <IconUser size={theme.icon.size.md} />