Add object level permission permissions to role page (ReadOnly) (#11568)

## Context
This PR adds the display of object-level permissions. A following PR
will add the ability to update those permissions.
The PR contains the SettingsRoleObjectLevel page but it's not fully
implemented yet (save won't trigger the corresponding mutation)

<img width="616" alt="Screenshot 2025-04-14 at 18 02 40"
src="https://github.com/user-attachments/assets/f8c58193-31f3-468a-a96d-f06a9f2e1423"
/>

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

@@ -7,15 +7,21 @@ 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 { Card, Section } from 'twenty-ui/layout';
 import {
   Role,
   UpdateWorkspaceMutation,
   useUpdateWorkspaceMutation,
 } from '~/generated/graphql';
-import { Card, Section } from 'twenty-ui/layout';
-import { H2Title, IconUserPin } from 'twenty-ui/display';
 
-export const SettingsRoleDefaultRole = ({ roles }: { roles: Role[] }) => {
+type SettingsRoleDefaultRoleProps = {
+  roles: Role[];
+};
+
+export const SettingsRoleDefaultRole = ({
+  roles,
+}: SettingsRoleDefaultRoleProps) => {
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(

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

@@ -4,8 +4,6 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React from 'react';
-import { Role } from '~/generated-metadata/graphql';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import {
   AppTooltip,
   Avatar,
@@ -14,6 +12,8 @@ import {
   TooltipDelay,
   useIcons,
 } from 'twenty-ui/display';
+import { Role } from '~/generated-metadata/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledAssignedText = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
@@ -52,15 +52,13 @@ const StyledTableRow = styled(TableRow)`
   }
 `;
 
-export const SettingsRolesTableRow = ({ role }: { role: Role }) => {
+type SettingsRolesTableRowProps = {
+  role: Role;
+};
+
+export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
   const theme = useTheme();
 
-  const navigateSettings = useNavigateSettings();
-
-  const handleRoleClick = (roleId: string) => {
-    navigateSettings(SettingsPath.RoleDetail, { roleId });
-  };
-
   const { getIcon } = useIcons();
   const Icon = getIcon(role.icon ?? 'IconUser');
 
@@ -68,7 +66,7 @@ export const SettingsRolesTableRow = ({ role }: { role: Role }) => {
     <StyledTableRow
       key={role.id}
       gridAutoColumns="332px 3fr 2fr 1fr"
-      onClick={() => handleRoleClick(role.id)}
+      to={getSettingsPath(SettingsPath.RoleDetail, { roleId: role.id })}
     >
       <TableCell>
         <StyledNameCell>