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>
2025-05-30 11:49:20 +05:30
parent dc0401edb5
commit da00dee8a1
22 changed files with 57 additions and 51 deletions
--- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
+++ b/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) {
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
+++ b/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,
              })}
            />
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx
+++ b/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>
--- a/packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx
+++ b/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,
        },
      ],
    },
--- a/packages/twenty-front/src/modules/types/SettingsPath.ts
+++ b/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',
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/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
--- a/packages/twenty-front/src/pages/settings/stories/SettingsWorkspace.stories.tsx
+++ b/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,
  },
--- a/packages/twenty-front/src/pages/settings/stories/SettingsWorkspaceMembers.stories.tsx
+++ b/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,
  },
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx
+++ b/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,
--- a/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx
+++ b/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'));

--- a/packages/twenty-front/src/pages/settings/developers/stories/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
+++ b/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,
  },
--- a/packages/twenty-front/src/pages/settings/developers/stories/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx
+++ b/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: {
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx
+++ b/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>
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/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>
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/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,
      });
    }
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
+++ b/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>
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsWebhooks.tsx
+++ b/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 { H2Title, IconPlus } from 'twenty-ui/display';
+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';
-import { Button } from 'twenty-ui/input';
-import { H2Title, IconPlus } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
-import { Section } from 'twenty-ui/layout';

 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(),
                  },
--- a/packages/twenty-front/src/utils/tests/title-utils.test.ts
+++ b/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');
--- a/packages/twenty-server/src/engine/api/rest/core/query-builder/core-query-builder.factory.ts
+++ b/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()}`,
      );
--- a/packages/twenty-website/src/app/_components/playground/playground.tsx
+++ b/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 && (
--- a/packages/twenty-zapier/src/authentication.ts
+++ b/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,