Fix settings navigation active state for sub-pages (#12318)

Changes the default behavior for settings navigation items to stay
active when navigating to sub-pages.

**Problem:**
- Navigation items like "Data Model" and "Webhooks" were not staying
highlighted when navigating to detail pages
- This was because `matchSubPages` defaulted to requiring exact path
matches

**Solution:**
- Updated logic to make sub-page matching the default behavior (`end:
item.matchSubPages === false`)
- Only "Accounts" explicitly sets `matchSubPages: false` for its custom
sub-item navigation
- Removed redundant `matchSubPages: true` declarations throughout the
codebase

**URL Changes:** -- checked with @Bonapara 
- `/settings/workspace` → `/settings/general`
- `/settings/workspace-members` → `/settings/members`
- `/settings/api-keys` → `/settings/apis`
- `/settings/developers/webhooks` → `/settings/webhooks`

before: 


https://github.com/user-attachments/assets/56b94a49-9c31-4bb5-9875-ec24f4bc4d1e

after:


https://github.com/user-attachments/assets/38742599-c045-44d1-8020-56f3eacca779

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

Author: ehconitin

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

@@ -431,15 +431,15 @@ export const SettingsRoutes = ({
           element={<SettingsRestPlayground />}
         />
         <Route
-          path={SettingsPath.DevelopersNewApiKey}
+          path={SettingsPath.NewApiKey}
           element={<SettingsDevelopersApiKeysNew />}
         />
         <Route
-          path={SettingsPath.DevelopersApiKeyDetail}
+          path={SettingsPath.ApiKeyDetail}
           element={<SettingsDevelopersApiKeyDetail />}
         />
         <Route
-          path={SettingsPath.DevelopersNewWebhookDetail}
+          path={SettingsPath.WebhookDetail}
           element={<SettingsDevelopersWebhooksDetail />}
         />
         <Route

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

@@ -4,8 +4,8 @@ import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsW
 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 { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { isDefined } from 'twenty-shared/utils';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 type SettingsNavigationDrawerItemProps = {
   item: SettingsNavigationItem;
@@ -20,7 +20,7 @@ export const SettingsNavigationDrawerItem = ({
   const pathName = useResolvedPath(href).pathname;
   const isActive = !!useMatch({
     path: pathName,
-    end: !item.matchSubPages,
+    end: item.matchSubPages === false,
   });
 
   if (isDefined(item.isHidden) && item.isHidden) {

packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx

@@ -11,8 +11,8 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledTableBody = styled(TableBody)`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -55,7 +55,7 @@ export const SettingsApiKeysTable = () => {
             <SettingsApiKeysFieldItemTableRow
               key={fieldItem.id}
               fieldItem={fieldItem as ApiFieldItem}
-              to={getSettingsPath(SettingsPath.DevelopersApiKeyDetail, {
+              to={getSettingsPath(SettingsPath.ApiKeyDetail, {
                 apiKeyId: fieldItem.id,
               })}
             />

packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx

@@ -4,10 +4,12 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
 import { Webhook } from '@/settings/developers/types/webhook/Webhook';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledTableBody = styled(TableBody)`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -36,7 +38,9 @@ export const SettingsWebhooksTable = () => {
             <SettingsDevelopersWebhookTableRow
               key={webhookFieldItem.id}
               fieldItem={webhookFieldItem}
-              to={`/settings/developers/webhooks/${webhookFieldItem.id}`}
+              to={getSettingsPath(SettingsPath.WebhookDetail, {
+                webhookId: webhookFieldItem.id,
+              })}
             />
           ))}
         </StyledTableBody>

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -8,7 +8,6 @@ import { useSettingsPermissionMap } from '@/settings/roles/hooks/useSettingsPerm
 import { NavigationDrawerItemIndentationLevel } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
-import { SettingPermissionType } from '~/generated/graphql';
 import {
   IconApi,
   IconApps,
@@ -31,6 +30,7 @@ import {
   IconUsers,
   IconWebhook,
 } from 'twenty-ui/display';
+import { SettingPermissionType } from '~/generated/graphql';
 
 export type SettingsNavigationSection = {
   label: string;
@@ -203,6 +203,7 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
           label: t`Logout`,
           onClick: signOut,
           Icon: IconDoorEnter,
+          matchSubPages: false,
         },
       ],
     },

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

@@ -16,14 +16,14 @@ export enum SettingsPath {
   ServerlessFunctions = 'functions',
   NewServerlessFunction = 'functions/new',
   ServerlessFunctionDetail = 'functions/:serverlessFunctionId',
-  WorkspaceMembersPage = 'workspace-members',
-  Workspace = 'workspace',
-  Domain = 'domain',
-  APIs = 'api-keys',
+  WorkspaceMembersPage = 'members',
+  Workspace = 'general',
+  Domain = 'general/domain',
+  APIs = 'apis',
   RestPlayground = 'playground/rest/:schema',
   GraphQLPlayground = 'playground/graphql/:schema',
-  DevelopersNewApiKey = 'api-keys/new',
-  DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
+  NewApiKey = 'apis/new',
+  ApiKeyDetail = 'apis/:apiKeyId',
   Integrations = 'integrations',
   IntegrationDatabase = 'integrations/:databaseKey',
   IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionId',
@@ -33,8 +33,7 @@ export enum SettingsPath {
   NewSSOIdentityProvider = 'security/sso/new',
   NewApprovedAccessDomain = 'security/approved-access-domain/new',
   Webhooks = 'webhooks',
-  DevelopersNewWebhook = 'developers/webhooks/new',
-  DevelopersNewWebhookDetail = 'developers/webhooks/:webhookId',
+  WebhookDetail = 'webhooks/:webhookId',
   Releases = 'releases',
   AdminPanel = 'admin-panel',
   AdminPanelHealthStatus = 'admin-panel#health-status',

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -208,7 +208,7 @@ export const SettingsWorkspaceMembers = () => {
         <Section>
           <H2Title
             title={t`Manage Members`}
-            description={t`Manage the members of your space here`}
+            description={t`Manage the members of your workspace here`}
           />
           <StyledSearchContainer>
             <StyledSearchInput

packages/twenty-front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspace',
   component: SettingsWorkspace,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/workspace' },
+  args: { routePath: '/settings/general' },
   parameters: {
     msw: graphqlMocks,
   },

packages/twenty-front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsWorkspaceMembers',
   component: SettingsWorkspaceMembers,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/workspace-members' },
+  args: { routePath: '/settings/members' },
   parameters: {
     msw: graphqlMocks,
   },

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx

@@ -69,7 +69,7 @@ export const SettingsObjectNewFieldSelect = () => {
       <SubMenuTopBarContainer
         title={t`1. Select a field type`}
         links={[
-          { children: t`Workspace`, href: '/settings/workspace' },
+          { children: t`Workspace`, href: '/settings/general' },
           { children: t`Objects`, href: '/settings/objects' },
           {
             children: activeObjectMetadataItem.labelPlural,

packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
   component: SettingsDevelopersApiKeyDetail,
   decorators: [PageDecorator],
   args: {
-    routePath: '/settings/developers/api-keys/:apiKeyId',
+    routePath: '/settings/apis/:apiKeyId',
     routeParams: {
       ':apiKeyId': 'f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
     },
@@ -50,14 +50,14 @@ export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
+    await canvas.findByText('sfsfdsf', undefined, { timeout: 3000 });
   },
 };
 
 export const RegenerateApiKey: Story = {
   play: async ({ step }) => {
     const canvas = within(document.body);
-    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
+    await canvas.findByText('sfsfdsf', undefined, { timeout: 3000 });
 
     await userEvent.click(await canvas.findByText('Regenerate Key'));
 
@@ -85,7 +85,7 @@ export const RegenerateApiKey: Story = {
 export const DeleteApiKey: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('sfsfdsf API Key', undefined, { timeout: 3000 });
+    await canvas.findByText('sfsfdsf', undefined, { timeout: 3000 });
 
     await userEvent.click(await canvas.findByText('Delete'));
 

packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/ApiKeys/SettingsDevelopersApiKeysNew',
   component: SettingsDevelopersApiKeysNew,
   decorators: [PageDecorator],
-  args: { routePath: getSettingsPath(SettingsPath.DevelopersNewApiKey) },
+  args: { routePath: getSettingsPath(SettingsPath.NewApiKey) },
   parameters: {
     msw: graphqlMocks,
   },

packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<PageDecoratorArgs> = {
   component: SettingsDevelopersWebhooksDetail,
   decorators: [PageDecorator],
   args: {
-    routePath: '/settings/developers/webhooks/:webhookId',
+    routePath: '/settings/webhooks/:webhookId',
     routeParams: { ':webhookId': '1234' },
   },
   parameters: {

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx

@@ -66,7 +66,7 @@ export const SettingsApiKeys = () => {
                 title={t`Create API key`}
                 size="small"
                 variant="secondary"
-                to={getSettingsPath(SettingsPath.DevelopersNewApiKey)}
+                to={getSettingsPath(SettingsPath.NewApiKey)}
               />
             </StyledButtonContainer>
           </Section>

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

@@ -143,7 +143,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
 
         if (isNonEmptyString(apiKey?.token)) {
           setApiKeyTokenCallback(apiKey.id, apiKey.token);
-          navigate(SettingsPath.DevelopersApiKeyDetail, {
+          navigate(SettingsPath.ApiKeyDetail, {
             apiKeyId: apiKey.id,
           });
         }
@@ -173,7 +173,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
               children: t`APIs`,
               href: getSettingsPath(SettingsPath.APIs),
             },
-            { children: t`${apiKeyName} API Key` },
+            { children: t`${apiKeyName}` },
           ]}
         >
           <SettingsPageContainer>

packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx

@@ -15,12 +15,12 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
+import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsDevelopersApiKeysNew = () => {
   const { t } = useLingui();
@@ -72,7 +72,7 @@ export const SettingsDevelopersApiKeysNew = () => {
         newApiKey.id,
         tokenData.data.generateApiKeyToken.token,
       );
-      navigateSettings(SettingsPath.DevelopersApiKeyDetail, {
+      navigateSettings(SettingsPath.ApiKeyDetail, {
         apiKeyId: newApiKey.id,
       });
     }

packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 import { useWebhookUpdateForm } from '@/settings/developers/hooks/useWebhookUpdateForm';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Select } from '@/ui/input/components/Select';
@@ -101,7 +102,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
   ];
 
   if (loading || !formData) {
-    return <></>;
+    return <SettingsSkeletonLoader />;
   }
 
   const confirmationText = t`yes`;
@@ -115,7 +116,11 @@ export const SettingsDevelopersWebhooksDetail = () => {
           children: t`Workspace`,
           href: getSettingsPath(SettingsPath.Workspace),
         },
-        { children: t`Webhook` },
+        {
+          children: t`Webhooks`,
+          href: getSettingsPath(SettingsPath.Webhooks),
+        },
+        { children: title },
       ]}
     >
       <SettingsPageContainer>

packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx

@@ -5,12 +5,12 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { v4 } from 'uuid';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { Button } from 'twenty-ui/input';
 import { H2Title, IconPlus } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { v4 } from 'uuid';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledButtonContainer = styled.div`
   display: flex;
@@ -58,7 +58,7 @@ export const SettingsWebhooks = () => {
                 size="small"
                 variant="secondary"
                 to={getSettingsPath(
-                  SettingsPath.DevelopersNewWebhookDetail,
+                  SettingsPath.WebhookDetail,
                   {
                     webhookId: v4(),
                   },

packages/twenty-front/src/utils/__tests__/title-utils.test.ts

@@ -36,10 +36,10 @@ describe('title-utils', () => {
     expect(getPageTitleFromPath('/settings/accounts/emails/:accountUuid')).toBe(
       SettingsPageTitles.Accounts,
     );
-    expect(getPageTitleFromPath('/settings/workspace-members')).toBe(
+    expect(getPageTitleFromPath('/settings/members')).toBe(
       SettingsPageTitles.Members,
     );
-    expect(getPageTitleFromPath('/settings/workspace')).toBe(
+    expect(getPageTitleFromPath('/settings/general')).toBe(
       SettingsPageTitles.General,
     );
     expect(getPageTitleFromPath('/')).toBe('Twenty');

packages/twenty-server/src/engine/api/rest/core/query-builder/core-query-builder.factory.ts

@@ -3,6 +3,7 @@ import { BadRequestException, Injectable } from '@nestjs/common';
 import { Request } from 'express';
 
 import { CreateManyQueryFactory } from 'src/engine/api/rest/core/query-builder/factories/create-many-query.factory';
+import { CreateVariablesFactory } from 'src/engine/api/rest/core/query-builder/factories/create-variables.factory';
 import { FindDuplicatesQueryFactory } from 'src/engine/api/rest/core/query-builder/factories/find-duplicates-query.factory';
 import { FindDuplicatesVariablesFactory } from 'src/engine/api/rest/core/query-builder/factories/find-duplicates-variables.factory';
 import { computeDepth } from 'src/engine/api/rest/core/query-builder/utils/compute-depth.utils';
@@ -17,7 +18,6 @@ import { getObjectMetadataMapItemByNamePlural } from 'src/engine/metadata-module
 import { getObjectMetadataMapItemByNameSingular } from 'src/engine/metadata-modules/utils/get-object-metadata-map-item-by-name-singular.util';
 import { WorkspaceMetadataCacheService } from 'src/engine/metadata-modules/workspace-metadata-cache/services/workspace-metadata-cache.service';
 import { WorkspaceCacheStorageService } from 'src/engine/workspace-cache-storage/workspace-cache-storage.service';
-import { CreateVariablesFactory } from 'src/engine/api/rest/core/query-builder/factories/create-variables.factory';
 
 @Injectable()
 export class CoreQueryBuilderFactory {
@@ -63,7 +63,7 @@ export class CoreQueryBuilderFactory {
         `No object was found for the workspace associated with this API key. You may generate a new one here ${this.domainManagerService
           .buildWorkspaceURL({
             workspace,
-            pathname: '/settings/developers',
+            pathname: '/settings/apis',
           })
           .toString()}`,
       );

packages/twenty-website/src/app/_components/playground/playground.tsx

@@ -61,11 +61,8 @@ const Playground = ({
             A token is required as APIs are dynamically generated for each
             workspace based on their unique metadata. <br /> Generate your token
             under{' '}
-            <a
-              className="link"
-              href="https://app.twenty.com/settings/developers"
-            >
-              Settings &gt; Developers
+            <a className="link" href="https://app.twenty.com/settings/apis">
+              Settings &gt; APIs
             </a>
           </div>
           {isLoading && (

packages/twenty-zapier/src/authentication.ts

@@ -21,7 +21,7 @@ export default {
       label: 'Api Key',
       type: 'string',
       helpText:
-        'Create an API key in [your twenty workspace](https://app.twenty.com/settings/developers)',
+        'Create an API key in [your twenty workspace](https://app.twenty.com/settings/apis)',
     },
     {
       computed: false,