Add settingsPermission gate on the frontend (#10179)

## Context
With the new permissions system, we now need to hide some items from the
settings navigation and gate some routes so they can't be accessed
directly.
To avoid having to set permission gates in all the component pages, I'm
introducing wrapper at the route level and in the Navigation. This is
not required and is mostly for pages that are strictly mapped to a
single permission, for the rest we still need to use the different hooks
manually but it should avoid a bit of boilerplate for most of the cases.

- currentUserWorkspaceState to access settingsPermissions
- SettingsProtectedRouteWrapper in the router that can take a
settingFeature or a featureFlag as a gate logic, if the currentUser does
not have access to the settingFeature or the featureFlag is not enabled
they will be redirected to the profile page.
- SettingsNavigationItemWrapper & SettingsNavigationSectionWrapper. The
former will check the same logic as SettingsProtectedRouteWrapper and
not display the item if needed. The later will check if all
SettingsNavigationItemWrapper are not visible and hide itself if that's
the case.
- useHasSettingsPermission to get a specific permission state for the
current user
- useSettingsPermissionMap to get a map of all permissions with their
values for the current user
- useFeatureFlagsMap same but for featureFlags

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

@@ -103,39 +103,37 @@ export const SettingsRoleEdit = () => {
   };
 
   return (
-    <>
-      <SubMenuTopBarContainer
-        title={
-          <StyledTitleContainer>
-            <StyledIconUser size={16} />
-            <H3Title title={role.label} />
-          </StyledTitleContainer>
-        }
-        links={[
-          {
-            children: 'Workspace',
-            href: getSettingsPath(SettingsPath.Workspace),
-          },
-          {
-            children: 'Roles',
-            href: getSettingsPath(SettingsPath.Roles),
-          },
-          {
-            children: role.label,
-          },
-        ]}
-      >
-        <SettingsPageContainer>
-          <TabList
-            tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
-            tabs={tabs}
-            className="tab-list"
-          />
-          <StyledContentContainer>
-            {renderActiveTabContent()}
-          </StyledContentContainer>
-        </SettingsPageContainer>
-      </SubMenuTopBarContainer>
-    </>
+    <SubMenuTopBarContainer
+      title={
+        <StyledTitleContainer>
+          <StyledIconUser size={16} />
+          <H3Title title={role.label} />
+        </StyledTitleContainer>
+      }
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Roles',
+          href: getSettingsPath(SettingsPath.Roles),
+        },
+        {
+          children: role.label,
+        },
+      ]}
+    >
+      <SettingsPageContainer>
+        <TabList
+          tabListInstanceId={SETTINGS_ROLE_DETAIL_TABS.COMPONENT_INSTANCE_ID}
+          tabs={tabs}
+          className="tab-list"
+        />
+        <StyledContentContainer>
+          {renderActiveTabContent()}
+        </StyledContentContainer>
+      </SettingsPageContainer>
+    </SubMenuTopBarContainer>
   );
 };

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

@@ -20,9 +20,9 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 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 React from 'react';
+import { useGetRolesQuery } from '~/generated/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
@@ -90,19 +90,13 @@ const StyledAssignedText = styled.div`
 
 export const SettingsRoles = () => {
   const { t } = useLingui();
-  const isPermissionsEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPermissionsEnabled,
-  );
+
   const theme = useTheme();
   const navigateSettings = useNavigateSettings();
   const { data: rolesData, loading: rolesLoading } = useGetRolesQuery({
     fetchPolicy: 'network-only',
   });
 
-  if (!isPermissionsEnabled) {
-    return null;
-  }
-
   const handleRoleClick = (roleId: string) => {
     navigateSettings(SettingsPath.RoleDetail, { roleId });
   };
@@ -157,9 +151,8 @@ export const SettingsRoles = () => {
                         {role.workspaceMembers
                           .slice(0, 5)
                           .map((workspaceMember) => (
-                            <>
+                            <React.Fragment key={workspaceMember.id}>
                               <StyledAvatarContainer
-                                key={workspaceMember.id}
                                 id={`avatar-${workspaceMember.id}`}
                               >
                                 <Avatar
@@ -180,7 +173,7 @@ export const SettingsRoles = () => {
                                 positionStrategy="fixed"
                                 delay={TooltipDelay.shortDelay}
                               />
-                            </>
+                            </React.Fragment>
                           ))}
                       </StyledAvatarGroup>
                       <StyledAssignedText>

packages/twenty-front/src/pages/settings/roles/components/RoleWorkspaceMemberPickerDropdownContent.tsx

@@ -19,8 +19,8 @@ export const RoleWorkspaceMemberPickerDropdownContent = ({
     return null;
   }
 
-  if (!filteredWorkspaceMembers?.length && searchFilter?.length > 0) {
-    return <MenuItem disabled text={t`No Result`} />;
+  if (!filteredWorkspaceMembers.length && searchFilter.length > 0) {
+    return <MenuItem disabled text={t`No Results`} />;
   }
 
   return (