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/role/components/SettingsRole.tsx

@@ -10,6 +10,8 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
 import { settingsPersistedRoleFamilyState } from '@/settings/roles/states/settingsPersistedRoleFamilyState';
 import { settingsRolesIsLoadingState } from '@/settings/roles/states/settingsRolesIsLoadingState';
 import { SettingsPath } from '@/types/SettingsPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
@@ -78,6 +80,8 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
     settingsPersistedRoleFamilyState(roleId),
   );
 
+  const { enqueueSnackBar } = useSnackBar();
+
   if (!isDefined(settingsRolesIsLoading)) {
     return <></>;
   }
@@ -110,6 +114,13 @@ export const SettingsRole = ({ roleId, isCreateMode }: SettingsRoleProps) => {
       settingsPersistedRole,
     );
 
+    if (isDefined(dirtyFields.label) && dirtyFields.label === '') {
+      enqueueSnackBar(t`Role name cannot be empty`, {
+        variant: SnackBarVariant.Error,
+      });
+      return;
+    }
+
     if (isCreateMode) {
       const roleId = v4();
 

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

@@ -5,7 +5,13 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 
-export const SettingsRoleCreateEffect = ({ roleId }: { roleId: string }) => {
+type SettingsRoleCreateEffectProps = {
+  roleId: string;
+};
+
+export const SettingsRoleCreateEffect = ({
+  roleId,
+}: SettingsRoleCreateEffectProps) => {
   const setSettingsDraftRole = useSetRecoilState(
     settingsDraftRoleFamilyState(roleId),
   );

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

@@ -4,10 +4,6 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
 import { TitleInput } from '@/ui/input/components/TitleInput';
 import styled from '@emotion/styled';
 
-type SettingsRoleLabelContainerProps = {
-  roleId: string;
-};
-
 const ROLE_LABEL_EDIT_HOTKEY_SCOPE = 'role-label-edit';
 
 const StyledHeaderTitle = styled.div`
@@ -21,6 +17,10 @@ const StyledHeaderTitle = styled.div`
   }
 `;
 
+type SettingsRoleLabelContainerProps = {
+  roleId: string;
+};
+
 export const SettingsRoleLabelContainer = ({
   roleId,
 }: SettingsRoleLabelContainerProps) => {