Add settings roles page (#9940)

## Context
This PR introduces a new Roles settings page, accessible through the
settings menu when the isPermissionsEnabled feature flag is enabled. The
page provides a foundation for managing user roles within the workspace.

This is not fetching the roles from the BE for now and will be done in a
followup PR.

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -259,6 +259,12 @@ const SettingsLab = lazy(() =>
   })),
 );
 
+const SettingsRoles = lazy(() =>
+  import('~/pages/settings/roles/SettingsRoles').then((module) => ({
+    default: module.SettingsRoles,
+  })),
+);
+
 type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
   isFunctionSettingsEnabled?: boolean;
@@ -304,6 +310,7 @@ export const SettingsRoutes = ({
         element={<SettingsObjectDetailPage />}
       />
       <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
+      <Route path={SettingsPath.Roles} element={<SettingsRoles />} />
       <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
       <Route
         path={SettingsPath.DevelopersNewApiKey}

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -12,6 +12,7 @@ import {
   IconFunction,
   IconHierarchy2,
   IconKey,
+  IconLock,
   IconMail,
   IconRocket,
   IconServer,
@@ -35,8 +36,10 @@ import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/com
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
+import { FeatureFlagKey } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 type SettingsNavigationItem = {
@@ -53,6 +56,9 @@ export const SettingsNavigationDrawerItems = () => {
   const { t } = useLingui();
 
   const billing = useRecoilValue(billingState);
+  const isPermissionsEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsPermissionsEnabled,
+  );
 
   // We want to disable this serverless function setting menu but keep the code
   // for now
@@ -150,6 +156,13 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconCurrencyDollar}
           />
         )}
+        {isPermissionsEnabled && (
+          <SettingsNavigationDrawerItem
+            label={t`Roles`}
+            path={SettingsPath.Roles}
+            Icon={IconLock}
+          />
+        )}
         <SettingsNavigationDrawerItem
           label={t`Data model`}
           path={SettingsPath.Objects}

packages/twenty-front/src/modules/types/SettingsPath.ts

@@ -36,4 +36,5 @@ export enum SettingsPath {
   AdminPanel = 'admin-panel',
   FeatureFlags = 'admin-panel/feature-flags',
   Lab = 'lab',
+  Roles = 'roles',
 }