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/modules/settings/components/SettingsNavigationDrawerItem.tsx

@@ -1,48 +1,57 @@
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
-import { SettingsPath } from '@/types/SettingsPath';
-import {
-  NavigationDrawerItem,
-  NavigationDrawerItemProps,
-} from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
+import { SettingsNavigationItem } from '@/settings/hooks/useSettingsNavigationItems';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
+import { isDefined } from 'twenty-shared';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
-type SettingsNavigationDrawerItemProps = Pick<
-  NavigationDrawerItemProps,
-  'Icon' | 'label' | 'indentationLevel' | 'soon'
-> & {
-  matchSubPages?: boolean;
-  path: SettingsPath;
+type SettingsNavigationDrawerItemProps = {
+  item: SettingsNavigationItem;
   subItemState?: NavigationDrawerSubItemState;
 };
 
 export const SettingsNavigationDrawerItem = ({
-  Icon,
-  label,
-  indentationLevel,
-  matchSubPages = true,
-  path,
-  soon,
+  item,
   subItemState,
 }: SettingsNavigationDrawerItemProps) => {
-  const href = getSettingsPath(path);
+  const href = getSettingsPath(item.path);
   const pathName = useResolvedPath(href).pathname;
-
   const isActive = !!useMatch({
     path: pathName,
-    end: !matchSubPages,
+    end: !item.matchSubPages,
   });
 
+  if (isDefined(item.isHidden) && item.isHidden) {
+    return null;
+  }
+
+  if (isDefined(item.isAdvanced) && item.isAdvanced) {
+    return (
+      <AdvancedSettingsWrapper navigationDrawerItem>
+        <NavigationDrawerItem
+          indentationLevel={item.indentationLevel}
+          subItemState={subItemState}
+          label={item.label}
+          to={href}
+          Icon={item.Icon}
+          active={isActive}
+          soon={item.soon}
+        />
+      </AdvancedSettingsWrapper>
+    );
+  }
+
   return (
     <NavigationDrawerItem
-      indentationLevel={indentationLevel}
+      indentationLevel={item.indentationLevel}
       subItemState={subItemState}
-      label={label}
+      label={item.label}
       to={href}
-      Icon={Icon}
+      Icon={item.Icon}
       active={isActive}
-      soon={soon}
+      soon={item.soon}
     />
   );
 };

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

@@ -1,229 +1,121 @@
-import { useRecoilValue } from 'recoil';
-import {
-  IconApps,
-  IconAt,
-  IconCalendarEvent,
-  IconCode,
-  IconColorSwatch,
-  IconComponent,
-  IconCurrencyDollar,
-  IconDoorEnter,
-  IconFlask,
-  IconFunction,
-  IconHierarchy2,
-  IconKey,
-  IconLock,
-  IconMail,
-  IconRocket,
-  IconServer,
-  IconSettings,
-  IconUserCircle,
-  IconUsers,
-} from 'twenty-ui';
+import { IconDoorEnter } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
-import { currentUserState } from '@/auth/states/currentUserState';
-import { billingState } from '@/client-config/states/billingState';
-import { labPublicFeatureFlagsState } from '@/client-config/states/labPublicFeatureFlagsState';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
-import { SettingsPath } from '@/types/SettingsPath';
 import {
-  NavigationDrawerItem,
-  NavigationDrawerItemIndentationLevel,
-} from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+  SettingsNavigationItem,
+  SettingsNavigationSection,
+  useSettingsNavigationItems,
+} from '@/settings/hooks/useSettingsNavigationItems';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
 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 = {
-  label: string;
-  path: SettingsPath;
-  Icon: IconComponent;
-  indentationLevel?: NavigationDrawerItemIndentationLevel;
-  matchSubPages?: boolean;
-};
-
 export const SettingsNavigationDrawerItems = () => {
   const { signOut } = useAuth();
-
   const { t } = useLingui();
 
-  const billing = useRecoilValue(billingState);
-  const isPermissionsEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPermissionsEnabled,
-  );
+  const settingsNavigationItems: SettingsNavigationSection[] =
+    useSettingsNavigationItems();
 
-  // We want to disable this serverless function setting menu but keep the code
-  // for now
-  const isFunctionSettingsEnabled = false;
-
-  const isBillingPageEnabled = billing?.isBillingEnabled;
-
-  const currentUser = useRecoilValue(currentUserState);
-  const isAdminPageEnabled = currentUser?.canImpersonate;
-  const labPublicFeatureFlags = useRecoilValue(labPublicFeatureFlagsState);
-  // TODO: Refactor this part to only have arrays of navigation items
   const currentPathName = useLocation().pathname;
 
-  const accountSubSettings: SettingsNavigationItem[] = [
-    {
-      label: t`Emails`,
-      path: SettingsPath.AccountsEmails,
-      Icon: IconMail,
-      indentationLevel: 2,
-    },
-    {
-      label: t`Calendars`,
-      path: SettingsPath.AccountsCalendars,
-      Icon: IconCalendarEvent,
-      indentationLevel: 2,
-    },
-  ];
+  const getSelectedIndexForSubItems = (subItems: SettingsNavigationItem[]) => {
+    return subItems.findIndex((subItem) => {
+      const href = getSettingsPath(subItem.path);
+      const pathName = resolvePath(href).pathname;
 
-  const selectedIndex = accountSubSettings.findIndex((accountSubSetting) => {
-    const href = getSettingsPath(accountSubSetting.path);
-    const pathName = resolvePath(href).pathname;
-
-    return matchPath(
-      {
-        path: pathName,
-        end: accountSubSetting.matchSubPages === false,
-      },
-      currentPathName,
-    );
-  });
+      return matchPath(
+        {
+          path: pathName,
+          end: subItem.matchSubPages === false,
+        },
+        currentPathName,
+      );
+    });
+  };
 
   return (
     <>
-      <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label={t`User`} />
-        <SettingsNavigationDrawerItem
-          label={t`Profile`}
-          path={SettingsPath.ProfilePage}
-          Icon={IconUserCircle}
-        />
-        <SettingsNavigationDrawerItem
-          label={t`Experience`}
-          path={SettingsPath.Experience}
-          Icon={IconColorSwatch}
-        />
-        <NavigationDrawerItemGroup>
-          <SettingsNavigationDrawerItem
-            label={t`Accounts`}
-            path={SettingsPath.Accounts}
-            Icon={IconAt}
-            matchSubPages={false}
-          />
-          {accountSubSettings.map((navigationItem, index) => (
-            <SettingsNavigationDrawerItem
-              key={index}
-              label={navigationItem.label}
-              path={navigationItem.path}
-              Icon={navigationItem.Icon}
-              indentationLevel={navigationItem.indentationLevel}
-              subItemState={getNavigationSubItemLeftAdornment({
-                arrayLength: accountSubSettings.length,
-                index,
-                selectedIndex,
-              })}
-            />
-          ))}
-        </NavigationDrawerItemGroup>
-      </NavigationDrawerSection>
-      <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label={t`Workspace`} />
-        <SettingsNavigationDrawerItem
-          label={t`General`}
-          path={SettingsPath.Workspace}
-          Icon={IconSettings}
-        />
-        <SettingsNavigationDrawerItem
-          label={t`Members`}
-          path={SettingsPath.WorkspaceMembersPage}
-          Icon={IconUsers}
-        />
-        {isBillingPageEnabled && (
-          <SettingsNavigationDrawerItem
-            label={t`Billing`}
-            path={SettingsPath.Billing}
-            Icon={IconCurrencyDollar}
-          />
-        )}
-        {isPermissionsEnabled && (
-          <SettingsNavigationDrawerItem
-            label={t`Roles`}
-            path={SettingsPath.Roles}
-            Icon={IconLock}
-          />
-        )}
-        <SettingsNavigationDrawerItem
-          label={t`Data model`}
-          path={SettingsPath.Objects}
-          Icon={IconHierarchy2}
-        />
-        <SettingsNavigationDrawerItem
-          label={t`Integrations`}
-          path={SettingsPath.Integrations}
-          Icon={IconApps}
-        />
-        <AdvancedSettingsWrapper navigationDrawerItem={true}>
-          <SettingsNavigationDrawerItem
-            label={t`Security`}
-            path={SettingsPath.Security}
-            Icon={IconKey}
-          />
-        </AdvancedSettingsWrapper>
-      </NavigationDrawerSection>
+      {settingsNavigationItems.map((section) => {
+        const allItemsHidden = section.items.every((item) => item.isHidden);
+        if (allItemsHidden) {
+          return null;
+        }
 
+        return (
+          <NavigationDrawerSection key={section.label}>
+            {section.isAdvanced ? (
+              <AdvancedSettingsWrapper hideIcon>
+                <NavigationDrawerSectionTitle label={section.label} />
+              </AdvancedSettingsWrapper>
+            ) : (
+              <NavigationDrawerSectionTitle label={section.label} />
+            )}
+            {section.items.map((item, index) => {
+              const subItems = item.subItems;
+              if (Array.isArray(subItems) && subItems.length > 0) {
+                const selectedSubItemIndex =
+                  getSelectedIndexForSubItems(subItems);
+
+                return (
+                  <NavigationDrawerItemGroup key={item.path}>
+                    <SettingsNavigationDrawerItem
+                      item={item}
+                      subItemState={
+                        item.indentationLevel
+                          ? getNavigationSubItemLeftAdornment({
+                              arrayLength: section.items.length,
+                              index,
+                              selectedIndex: selectedSubItemIndex,
+                            })
+                          : undefined
+                      }
+                    />
+                    {subItems.map((subItem, subIndex) => (
+                      <SettingsNavigationDrawerItem
+                        key={subItem.path}
+                        item={subItem}
+                        subItemState={
+                          subItem.indentationLevel
+                            ? getNavigationSubItemLeftAdornment({
+                                arrayLength: subItems.length,
+                                index: subIndex,
+                                selectedIndex: selectedSubItemIndex,
+                              })
+                            : undefined
+                        }
+                      />
+                    ))}
+                  </NavigationDrawerItemGroup>
+                );
+              }
+              return (
+                <SettingsNavigationDrawerItem
+                  key={item.path}
+                  item={item}
+                  subItemState={
+                    item.indentationLevel
+                      ? getNavigationSubItemLeftAdornment({
+                          arrayLength: section.items.length,
+                          index,
+                          selectedIndex: index,
+                        })
+                      : undefined
+                  }
+                />
+              );
+            })}
+          </NavigationDrawerSection>
+        );
+      })}
       <NavigationDrawerSection>
-        <AdvancedSettingsWrapper hideIcon>
-          <NavigationDrawerSectionTitle label={t`Developers`} />
-        </AdvancedSettingsWrapper>
-        <AdvancedSettingsWrapper navigationDrawerItem={true}>
-          <SettingsNavigationDrawerItem
-            label={t`API & Webhooks`}
-            path={SettingsPath.Developers}
-            Icon={IconCode}
-          />
-        </AdvancedSettingsWrapper>
-        {isFunctionSettingsEnabled && (
-          <AdvancedSettingsWrapper navigationDrawerItem={true}>
-            <SettingsNavigationDrawerItem
-              label={t`Functions`}
-              path={SettingsPath.ServerlessFunctions}
-              Icon={IconFunction}
-            />
-          </AdvancedSettingsWrapper>
-        )}
-      </NavigationDrawerSection>
-      <NavigationDrawerSection>
-        <NavigationDrawerSectionTitle label={t`Other`} />
-        {isAdminPageEnabled && (
-          <SettingsNavigationDrawerItem
-            label={t`Server Admin`}
-            path={SettingsPath.AdminPanel}
-            Icon={IconServer}
-          />
-        )}
-        {labPublicFeatureFlags?.length > 0 && (
-          <SettingsNavigationDrawerItem
-            label={t`Lab`}
-            path={SettingsPath.Lab}
-            Icon={IconFlask}
-          />
-        )}
-        <SettingsNavigationDrawerItem
-          label={t`Releases`}
-          path={SettingsPath.Releases}
-          Icon={IconRocket}
-        />
         <NavigationDrawerItem
           label={t`Logout`}
           onClick={signOut}

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

@@ -0,0 +1,36 @@
+import { useHasSettingsPermission } from '@/settings/roles/hooks/useHasSettingsPermission';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { ReactNode } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { FeatureFlagKey, SettingsFeatures } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+
+type SettingsProtectedRouteWrapperProps = {
+  children?: ReactNode;
+  settingsPermission?: SettingsFeatures;
+  requiredFeatureFlag?: FeatureFlagKey;
+};
+
+export const SettingsProtectedRouteWrapper = ({
+  children,
+  settingsPermission,
+  requiredFeatureFlag,
+}: SettingsProtectedRouteWrapperProps) => {
+  const isPermissionsEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsPermissionsEnabled,
+  );
+  const hasPermission = useHasSettingsPermission(settingsPermission);
+  const requiredFeatureFlagEnabled = useIsFeatureEnabled(
+    requiredFeatureFlag || null,
+  );
+
+  if (
+    (requiredFeatureFlag && !requiredFeatureFlagEnabled) ||
+    (!hasPermission && isPermissionsEnabled)
+  ) {
+    return <Navigate to={getSettingsPath(SettingsPath.ProfilePage)} replace />;
+  }
+
+  return children ?? <Outlet />;
+};