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>
This commit is contained in:
@@ -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>
|
||||
|
||||
+2
-2
@@ -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>
|
||||
|
||||
+4
-4
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user