New useNavigateApp (#9729)

Todo : - replace all instances of useNavigate( - remove getSettingsPagePath - add eslint rule to enfore usage of useNavigateApp instead of useNavigate
2025-01-18 13:58:12 +01:00
parent 8572471973
commit 152902d1be
115 changed files with 975 additions and 679 deletions
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@ -1,16 +1,15 @@
-import { useNavigate } from 'react-router-dom';
 import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';

-import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
-import { SettingsListCard } from '../../components/SettingsListCard';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
 import { useRecoilValue } from 'recoil';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
+import { SettingsListCard } from '../../components/SettingsListCard';

 const ProviderIcons: { [k: string]: IconComponent } = {
  google: IconGoogle,
@ -24,7 +23,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
  accounts: ConnectedAccount[];
  loading?: boolean;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const currentWorkspace = useRecoilValue(currentWorkspaceState);

  if (!accounts.length) {
@ -47,9 +46,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
      )}
      hasFooter={atLeastOneProviderAvailable}
      footerButtonLabel="Add account"
-      onFooterButtonClick={() =>
-        navigate(getSettingsPagePath(SettingsPath.NewAccount))
-      }
+      onFooterButtonClick={() => navigate(SettingsPath.NewAccount)}
    />
  );
 };
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import {
  IconCalendarEvent,
  IconDotsVertical,
@ -13,9 +12,11 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 type SettingsAccountsRowDropdownMenuProps = {
  account: ConnectedAccount;
@ -26,7 +27,7 @@ export const SettingsAccountsRowDropdownMenu = ({
 }: SettingsAccountsRowDropdownMenuProps) => {
  const dropdownId = `settings-account-row-${account.id}`;

-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const { closeDropdown } = useDropdown(dropdownId);

  const { destroyOneRecord } = useDestroyOneRecord({
@ -49,7 +50,7 @@ export const SettingsAccountsRowDropdownMenu = ({
            LeftIcon={IconMail}
            text="Emails settings"
            onClick={() => {
-              navigate(`/settings/accounts/emails`);
+              navigate(SettingsPath.AccountsEmails);
              closeDropdown();
            }}
          />
@ -57,7 +58,7 @@ export const SettingsAccountsRowDropdownMenu = ({
            LeftIcon={IconCalendarEvent}
            text="Calendar settings"
            onClick={() => {
-              navigate(`/settings/accounts/calendars`);
+              navigate(SettingsPath.AccountsCalendars);
              closeDropdown();
            }}
          />
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
@ -9,9 +9,9 @@ import {
 } from 'twenty-ui';

 import { SettingsCard } from '@/settings/components/SettingsCard';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useTheme } from '@emotion/react';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 const StyledCardsContainer = styled.div`
  display: flex;
@ -32,7 +32,7 @@ export const SettingsAccountsSettingsSection = () => {
        description="Configure your emails and calendar settings."
      />
      <StyledCardsContainer>
-        <UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
+        <UndecoratedLink to={getSettingsPath(SettingsPath.AccountsEmails)}>
          <SettingsCard
            Icon={
              <IconMailCog
@ -44,9 +44,7 @@ export const SettingsAccountsSettingsSection = () => {
            description="Set email visibility, manage your blocklist and more."
          />
        </UndecoratedLink>
-        <UndecoratedLink
-          to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
-        >
+        <UndecoratedLink to={getSettingsPath(SettingsPath.AccountsCalendars)}>
          <SettingsCard
            Icon={
              <IconCalendarEvent
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
@ -1,12 +1,12 @@
 import { useMatch, useResolvedPath } from 'react-router-dom';

-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import {
  NavigationDrawerItem,
  NavigationDrawerItemProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 type SettingsNavigationDrawerItemProps = Pick<
  NavigationDrawerItemProps,
@ -26,7 +26,7 @@ export const SettingsNavigationDrawerItem = ({
  soon,
  subItemState,
 }: SettingsNavigationDrawerItemProps) => {
-  const href = getSettingsPagePath(path);
+  const href = getSettingsPath(path);
  const pathName = useResolvedPath(href).pathname;

  const isActive = !!useMatch({
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@ -24,7 +24,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import {
  NavigationDrawerItem,
@ -37,6 +36,7 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 type SettingsNavigationItem = {
  label: string;
@ -56,9 +56,6 @@ export const SettingsNavigationDrawerItems = () => {
  const isFreeAccessEnabled = useIsFeatureEnabled(
    FeatureFlagKey.IsFreeAccessEnabled,
  );
-  const isCRMMigrationEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCrmMigrationEnabled,
-  );
  const isBillingPageEnabled =
    billing?.isBillingEnabled && !isFreeAccessEnabled;

@ -83,7 +80,7 @@ export const SettingsNavigationDrawerItems = () => {
  ];

  const selectedIndex = accountSubSettings.findIndex((accountSubSetting) => {
-    const href = getSettingsPagePath(accountSubSetting.path);
+    const href = getSettingsPath(accountSubSetting.path);
    const pathName = resolvePath(href).pathname;

    return matchPath(
@ -161,13 +158,6 @@ export const SettingsNavigationDrawerItems = () => {
          path={SettingsPath.Integrations}
          Icon={IconApps}
        />
-        {isCRMMigrationEnabled && (
-          <SettingsNavigationDrawerItem
-            label="CRM Migration"
-            path={SettingsPath.CRMMigration}
-            Icon={IconCode}
-          />
-        )}
        <AdvancedSettingsWrapper navigationDrawerItem={true}>
          <SettingsNavigationDrawerItem
            label="Security"
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@ -1,17 +1,14 @@
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  useLocation,
-  useNavigate,
-  useParams,
-  useSearchParams,
-} from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { Button, IconChevronDown, isDefined, MenuItem } from 'twenty-ui';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 const StyledContainer = styled.div`
  align-items: center;
@ -66,7 +63,7 @@ const StyledButton = styled(Button)`
 export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
  const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
  const { closeDropdown } = useDropdown(dropdownId);
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const location = useLocation();
  const { objectNamePlural = '' } = useParams();
  const [searchParams] = useSearchParams();
@ -78,11 +75,15 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
  const handleClick = (step: 'select' | 'configure') => {
    if (step === 'configure' && isDefined(fieldType)) {
      navigate(
-        `/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${fieldType}`,
+        SettingsPath.ObjectNewFieldConfigure,
+        { objectNamePlural },
+        { fieldType },
      );
    } else {
      navigate(
-        `/settings/objects/${objectNamePlural}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`,
+        SettingsPath.ObjectNewFieldSelect,
+        { objectNamePlural },
+        fieldType ? { fieldType } : undefined,
      );
    }
    closeDropdown();
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@ -8,6 +8,7 @@ import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/field
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
+import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@ -17,6 +18,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { H2Title, IconSearch, UndecoratedLink } from 'twenty-ui';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 type SettingsObjectNewFieldSelectorProps = {
  className?: string;
@ -128,7 +130,15 @@ export const SettingsObjectNewFieldSelector = ({
                    .map(([key, config]) => (
                      <StyledCardContainer key={key}>
                        <UndecoratedLink
-                          to={`/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${key}`}
+                          to={getSettingsPath(
+                            SettingsPath.ObjectNewFieldConfigure,
+                            {
+                              objectNamePlural,
+                            },
+                            {
+                              fieldType: key,
+                            },
+                          )}
                          fullWidth
                          onClick={() => {
                            setValue('type', key as SettingsFieldType);
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
@ -13,8 +13,10 @@ import { capitalize } from 'twenty-shared';
 import { FieldMetadataType } from '~/generated/graphql';

 import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
+import { SettingsPath } from '@/types/SettingsPath';
 import '@xyflow/react/dist/style.css';
 import { useState } from 'react';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
 type SettingsDataModelOverviewObjectProps =
@ -122,7 +124,9 @@ export const SettingsDataModelOverviewObject = ({
      <StyledHeader>
        <StyledObjectName onMouseEnter={() => {}} onMouseLeave={() => {}}>
          <StyledObjectLink
-            to={`/settings/objects/${objectMetadataItem.namePlural}`}
+            to={getSettingsPath(SettingsPath.Objects, {
+              objectNamePlural: objectMetadataItem.namePlural,
+            })}
          >
            {Icon && <Icon size={theme.icon.size.md} />}
            {capitalize(objectMetadataItem.namePlural)}
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@ -12,6 +12,7 @@ import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/o
 import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
 import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
+import { SettingsPath } from '@/types/SettingsPath';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
@ -19,7 +20,6 @@ import { View } from '@/views/types/View';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import {
  IconMinus,
@ -30,7 +30,9 @@ import {
  useIcons,
 } from 'twenty-ui';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { RELATION_TYPES } from '../../constants/RelationTypes';
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';

@ -72,7 +74,7 @@ export const SettingsObjectFieldItemTableRow = ({

  const variant = objectMetadataItem.isCustom ? 'identifier' : 'field-type';

-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();

  const [navigationMemorizedUrl, setNavigationMemorizedUrl] = useRecoilState(
    navigationMemorizedUrlState,
@ -108,7 +110,10 @@ export const SettingsObjectFieldItemTableRow = ({
    !isLabelIdentifier &&
    LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(fieldMetadataItem.type);

-  const linkToNavigate = `./${fieldMetadataItem.name}`;
+  const linkToNavigate = getSettingsPath(SettingsPath.ObjectFieldEdit, {
+    objectNamePlural: objectMetadataItem.namePlural,
+    fieldName: fieldMetadataItem.name,
+  });

  const {
    activateMetadataField,
@ -212,7 +217,15 @@ export const SettingsObjectFieldItemTableRow = ({

  return (
    <StyledObjectFieldTableRow
-      onClick={mode === 'view' ? () => navigate(linkToNavigate) : undefined}
+      onClick={
+        mode === 'view'
+          ? () =>
+              navigate(SettingsPath.ObjectFieldEdit, {
+                objectNamePlural: objectMetadataItem.namePlural,
+                fieldName: fieldMetadataItem.name,
+              })
+          : undefined
+      }
    >
      <UndecoratedLink to={linkToNavigate}>
        <StyledNameTableCell>
@ -244,7 +257,9 @@ export const SettingsObjectFieldItemTableRow = ({
          }
          to={
            isRelatedObjectLinkable
-              ? `/settings/objects/${relationObjectMetadataItem.namePlural}`
+              ? getSettingsPath(SettingsPath.Objects, {
+                  objectNamePlural: relationObjectMetadataItem.namePlural,
+                })
              : undefined
          }
          value={fieldType}
@ -261,7 +276,12 @@ export const SettingsObjectFieldItemTableRow = ({
            <SettingsObjectFieldActiveActionDropdown
              isCustomField={fieldMetadataItem.isCustom === true}
              scopeKey={fieldMetadataItem.id}
-              onEdit={() => navigate(linkToNavigate)}
+              onEdit={() =>
+                navigate(SettingsPath.ObjectFieldEdit, {
+                  objectNamePlural: objectMetadataItem.namePlural,
+                  fieldName: fieldMetadataItem.name,
+                })
+              }
              onSetAsLabelIdentifier={
                canBeSetAsLabelIdentifier
                  ? () => handleSetLabelIdentifierField(fieldMetadataItem)
@ -286,7 +306,12 @@ export const SettingsObjectFieldItemTableRow = ({
          <SettingsObjectFieldInactiveActionDropdown
            isCustomField={fieldMetadataItem.isCustom === true}
            scopeKey={fieldMetadataItem.id}
-            onEdit={() => navigate(linkToNavigate)}
+            onEdit={() =>
+              navigate(SettingsPath.ObjectFieldEdit, {
+                objectNamePlural: objectMetadataItem.namePlural,
+                fieldName: fieldMetadataItem.name,
+              })
+            }
            onActivate={() =>
              activateMetadataField(fieldMetadataItem.id, objectMetadataItem.id)
            }
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
@ -2,7 +2,6 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
 import { Button, H2Title, IconArchive, Section } from 'twenty-ui';
 import { z, ZodError } from 'zod';

@ -18,7 +17,7 @@ import {
 import { settingsDataModelObjectIdentifiersFormSchema } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
 import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
 import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -27,8 +26,10 @@ import styled from '@emotion/styled';
 import isEmpty from 'lodash.isempty';
 import pick from 'lodash.pick';
 import { useSetRecoilState } from 'recoil';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
+import { getAppPath } from '~/utils/navigation/getAppPath';

 const objectEditFormSchema = z
  .object({})
@ -54,7 +55,7 @@ const StyledFormSection = styled(Section)`
 `;

 export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const { enqueueSnackBar } = useSnackBar();
  const setUpdatedObjectNamePlural = useSetRecoilState(
    updatedObjectNamePluralState,
@ -65,8 +66,6 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
    useLastVisitedObjectMetadataItem();
  const { getLastVisitedViewIdFromObjectMetadataItemId } = useLastVisitedView();

-  const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
-
  const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
    mode: 'onTouched',
    resolver: zodResolver(objectEditFormSchema),
@ -147,11 +146,17 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
          objectMetadataItem.id,
        );
        setNavigationMemorizedUrl(
-          `/objects/${objectNamePluralForRedirection}?view=${lastVisitedView}`,
+          getAppPath(
+            AppPath.RecordIndexPage,
+            { objectNamePlural: objectNamePluralForRedirection },
+            { viewId: lastVisitedView },
+          ),
        );
      }

-      navigate(`${settingsObjectsPagePath}/${objectNamePluralForRedirection}`);
+      navigate(SettingsPath.ObjectDetail, {
+        objectNamePlural: objectNamePluralForRedirection,
+      });
    } catch (error) {
      if (error instanceof ZodError) {
        enqueueSnackBar(error.issues[0].message, {
@ -170,7 +175,7 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
      idToUpdate: objectMetadataItem.id,
      updatePayload: { isActive: false },
    });
-    navigate(settingsObjectsPagePath);
+    navigate(SettingsPath.Objects);
  };

  return (
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
@ -2,15 +2,15 @@ import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDa
 import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
 import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
 import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { Section } from '@react-email/components';
-import { useNavigate } from 'react-router-dom';
 import { H2Title } from 'twenty-ui';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const { connection, integration, databaseKey, tables } =
    useDatabaseConnection({ fetchPolicy: 'network-only' });

@ -23,10 +23,12 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
  const deleteConnection = async () => {
    await deleteOneDatabaseConnection({ id: connection.id });

-    navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
+    navigate(SettingsPath.IntegrationDatabase, {
+      databaseKey,
+    });
  };

-  const settingsIntegrationsPagePath = getSettingsPagePath(
+  const settingsIntegrationsPagePath = getSettingsPath(
    SettingsPath.Integrations,
  );

--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
-import { useNavigate } from 'react-router-dom';
 import { IconChevronRight, LightIconButton } from 'twenty-ui';

 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
+import { SettingsPath } from '@/types/SettingsPath';
 import { RemoteServer } from '~/generated-metadata/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 type SettingsIntegrationDatabaseConnectionsListCardProps = {
  integration: SettingsIntegration;
@ -34,7 +35,7 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
  integration,
  connections,
 }: SettingsIntegrationDatabaseConnectionsListCardProps) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();

  return (
    <SettingsListCard
@ -52,11 +53,20 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
        </StyledRowRightContainer>
      )}
-      onRowClick={(connection) => navigate(`./${connection.id}`)}
+      onRowClick={(connection) =>
+        navigate(SettingsPath.IntegrationDatabaseConnection, {
+          databaseKey: integration.from.key,
+          connectionId: connection.id,
+        })
+      }
      getItemLabel={(connection) => connection.label}
      hasFooter
      footerButtonLabel="Add connection"
-      onFooterButtonClick={() => navigate('./new')}
+      onFooterButtonClick={() =>
+        navigate(SettingsPath.IntegrationNewDatabaseConnection, {
+          databaseKey: integration.from.key,
+        })
+      }
    />
  );
 };
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx
@ -8,7 +8,6 @@ import {
  getFormDefaultValuesFromConnection,
 } from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -17,7 +16,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
 import { H2Title, Info } from 'twenty-ui';
 import { z } from 'zod';
 import {
@ -25,6 +23,8 @@ import {
  RemoteTable,
  RemoteTableStatus,
 } from '~/generated-metadata/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 export const SettingsIntegrationEditDatabaseConnectionContent = ({
  connection,
@ -38,7 +38,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
  tables: RemoteTable[];
 }) => {
  const { enqueueSnackBar } = useSnackBar();
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();

  const editConnectionSchema = getEditionSchemaForForm(databaseKey);
  type SettingsIntegrationEditConnectionFormValues = z.infer<
@ -56,7 +56,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({

  const { updateOneDatabaseConnection } = useUpdateOneDatabaseConnection();

-  const settingsIntegrationsPagePath = getSettingsPagePath(
+  const settingsIntegrationsPagePath = getSettingsPath(
    SettingsPath.Integrations,
  );

@ -82,9 +82,10 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
        id: connection?.id ?? '',
      });

-      navigate(
-        `${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`,
-      );
+      navigate(SettingsPath.IntegrationDatabaseConnection, {
+        databaseKey,
+        connectionId: connection?.id,
+      });
    } catch (error) {
      enqueueSnackBar((error as Error).message, {
        variant: SnackBarVariant.Error,
@ -116,7 +117,9 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
          <SaveAndCancelButtons
            isSaveDisabled={!canSave}
            onCancel={() =>
-              navigate(`${settingsIntegrationsPagePath}/${databaseKey}`)
+              navigate(SettingsPath.IntegrationDatabase, {
+                databaseKey,
+              })
            }
            onSave={handleSave}
          />
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts
@ -1,12 +1,13 @@
 import { WatchQueryFetchPolicy } from '@apollo/client';
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';

 import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
 import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
 import { AppPath } from '@/types/AppPath';
+import { useNavigateApp } from '~/hooks/useNavigateApp';

 export const useDatabaseConnection = ({
  fetchPolicy,
@ -14,7 +15,7 @@ export const useDatabaseConnection = ({
  fetchPolicy?: WatchQueryFetchPolicy;
 }) => {
  const { databaseKey = '', connectionId = '' } = useParams();
-  const navigate = useNavigate();
+  const navigateApp = useNavigateApp();

  const [integrationCategoryAll] = useSettingsIntegrationCategories();
  const integration = integrationCategoryAll.integrations.find(
@ -34,12 +35,12 @@ export const useDatabaseConnection = ({

  useEffect(() => {
    if (!isIntegrationAvailable || (!loading && !connection)) {
-      navigate(AppPath.NotFound);
+      navigateApp(AppPath.NotFound);
    }
  }, [
    integration,
    databaseKey,
-    navigate,
+    navigateApp,
    isIntegrationAvailable,
    connection,
    loading,
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
@ -2,20 +2,20 @@

 import { Link } from 'react-router-dom';

-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';

 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SettingsSSOIdentitiesProvidersListCardWrapper } from '@/settings/security/components/SettingsSSOIdentitiesProvidersListCardWrapper';
+import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { IconKey } from 'twenty-ui';
 import { useListSsoIdentityProvidersByWorkspaceIdQuery } from '~/generated/graphql';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 const StyledLink = styled(Link, {
  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'isDisabled',
@ -49,7 +49,7 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {

  return loading || !SSOIdentitiesProviders.length ? (
    <StyledLink
-      to={getSettingsPagePath(SettingsPath.NewSSOIdentityProvider)}
+      to={getSettingsPath(SettingsPath.NewSSOIdentityProvider)}
      isDisabled={currentWorkspace?.hasValidEntrepriseKey !== true}
    >
      <SettingsCard
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCardWrapper.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCardWrapper.tsx
@ -1,16 +1,15 @@
 /* @license Enterprise */

-import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
-import { SettingsSSOIdentityProviderRowRightContainer } from '@/settings/security/components/SettingsSSOIdentityProviderRowRightContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { useNavigate } from 'react-router-dom';
+import { SettingsSSOIdentityProviderRowRightContainer } from '@/settings/security/components/SettingsSSOIdentityProviderRowRightContainer';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
+import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
+import { SettingsPath } from '@/types/SettingsPath';
 import { useRecoilValue } from 'recoil';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 export const SettingsSSOIdentitiesProvidersListCardWrapper = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();

  const SSOIdentitiesProviders = useRecoilValue(SSOIdentitiesProvidersState);

@ -28,9 +27,7 @@ export const SettingsSSOIdentitiesProvidersListCardWrapper = () => {
      )}
      hasFooter
      footerButtonLabel="Add SSO Identity Provider"
-      onFooterButtonClick={() =>
-        navigate(getSettingsPagePath(SettingsPath.NewSSOIdentityProvider))
-      }
+      onFooterButtonClick={() => navigate(SettingsPath.NewSSOIdentityProvider)}
    />
  );
 };
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTable.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTable.tsx
@ -2,7 +2,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { SettingsServerlessFunctionsFieldItemTableRow } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow';
 import { SettingsServerlessFunctionsTableEmpty } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty';
 import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
@ -10,6 +9,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import { ServerlessFunction } from '~/generated-metadata/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 const StyledTableRow = styled(TableRow)`
  grid-template-columns: 312px 132px 68px;
@ -38,7 +38,7 @@ export const SettingsServerlessFunctionsTable = () => {
                  <SettingsServerlessFunctionsFieldItemTableRow
                    key={serverlessFunction.id}
                    serverlessFunction={serverlessFunction}
-                    to={getSettingsPagePath(SettingsPath.ServerlessFunctions, {
+                    to={getSettingsPath(SettingsPath.ServerlessFunctions, {
                      id: serverlessFunction.id,
                    })}
                  />
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx
@ -1,4 +1,3 @@
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import styled from '@emotion/styled';
 import {
@ -11,6 +10,7 @@ import {
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
  IconPlus,
 } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 const StyledEmptyFunctionsContainer = styled.div`
  height: 60vh;
@ -35,7 +35,7 @@ export const SettingsServerlessFunctionsTableEmpty = () => {
        <Button
          Icon={IconPlus}
          title="New function"
-          to={getSettingsPagePath(SettingsPath.NewServerlessFunction)}
+          to={getSettingsPath(SettingsPath.NewServerlessFunction)}
        />
      </AnimatedPlaceholderEmptyContainer>
    </StyledEmptyFunctionsContainer>
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
@ -4,13 +4,11 @@ import {
 } from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor';
 import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/serverless-functions/constants/SettingsServerlessFunctionTabListComponentId';
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import styled from '@emotion/styled';
-import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
 import {
  Button,
@ -22,6 +20,7 @@ import {
  Section,
 } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 const StyledTabList = styled(TabList)`
  border-bottom: none;
@ -91,7 +90,7 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
    />
  );

-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  useHotkeyScopeOnMount(
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
  );
@ -99,7 +98,7 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
  useScopedHotkeys(
    [Key.Escape],
    () => {
-      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+      navigate(SettingsPath.ServerlessFunctions);
    },
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
  );
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionMonitoringTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionMonitoringTab.tsx
@ -2,19 +2,18 @@ import { AnalyticsActivityGraph } from '@/analytics/components/AnalyticsActivity
 import { AnalyticsGraphEffect } from '@/analytics/components/AnalyticsGraphEffect';
 import { AnalyticsGraphDataInstanceContext } from '@/analytics/states/contexts/AnalyticsGraphDataInstanceContext';
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 export const SettingsServerlessFunctionMonitoringTab = ({
  serverlessFunctionId,
 }: {
  serverlessFunctionId: string;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();

  useHotkeyScopeOnMount(
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
@ -23,7 +22,7 @@ export const SettingsServerlessFunctionMonitoringTab = ({
  useScopedHotkeys(
    [Key.Escape],
    () => {
-      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+      navigate(SettingsPath.ServerlessFunctions);
    },
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
  );
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx
@ -3,15 +3,14 @@ import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/sett
 import { useDeleteOneServerlessFunction } from '@/settings/serverless-functions/hooks/useDeleteOneServerlessFunction';
 import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
 import { Button, H2Title, Section } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 export const SettingsServerlessFunctionSettingsTab = ({
  formValues,
@ -24,14 +23,14 @@ export const SettingsServerlessFunctionSettingsTab = ({
  onChange: (key: string) => (value: string) => void;
  onCodeChange: (filePath: string, value: string) => void;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  const [isDeleteFunctionModalOpen, setIsDeleteFunctionModalOpen] =
    useState(false);
  const { deleteOneServerlessFunction } = useDeleteOneServerlessFunction();

  const deleteFunction = async () => {
    await deleteOneServerlessFunction({ id: serverlessFunctionId });
-    navigate('/settings/functions');
+    navigate(SettingsPath.ServerlessFunctions);
  };

  useHotkeyScopeOnMount(
@ -49,7 +48,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
  useScopedHotkeys(
    [Key.Escape],
    () => {
-      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+      navigate(SettingsPath.ServerlessFunctions);
    },
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
  );
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
@ -7,17 +7,16 @@ import {
  Section,
 } from 'twenty-ui';

+import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
 import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
 import styled from '@emotion/styled';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
-import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
-import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 const StyledInputsContainer = styled.div`
  display: flex;
@ -47,7 +46,7 @@ export const SettingsServerlessFunctionTestTab = ({
    }));
  };

-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
  useHotkeyScopeOnMount(
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
  );
@ -55,7 +54,7 @@ export const SettingsServerlessFunctionTestTab = ({
  useScopedHotkeys(
    [Key.Escape],
    () => {
-      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+      navigate(SettingsPath.ServerlessFunctions);
    },
    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
  );
--- a/packages/twenty-front/src/modules/settings/utils/tests/getSettingsPagePath.test.ts
+++ b/packages/twenty-front/src/modules/settings/utils/tests/getSettingsPagePath.test.ts
@ -1,15 +0,0 @@
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
-
-describe('getSettingsPagePath', () => {
-  test('should compute page path', () => {
-    expect(getSettingsPagePath(SettingsPath.ServerlessFunctions)).toEqual(
-      '/settings/functions',
-    );
-  });
-  test('should compute page path with id', () => {
-    expect(
-      getSettingsPagePath(SettingsPath.ServerlessFunctions, { id: 'id' }),
-    ).toEqual('/settings/functions/id');
-  });
-});
--- a/packages/twenty-front/src/modules/settings/utils/getSettingsPagePath.ts
+++ b/packages/twenty-front/src/modules/settings/utils/getSettingsPagePath.ts
@ -1,37 +0,0 @@
-import { ExtractPathParams } from '@/types/ExtractPathParams';
-import { SettingsPath } from '@/types/SettingsPath';
-import { isDefined } from '~/utils/isDefined';
-
-type Params<V extends string> = {
-  [K in ExtractPathParams<V>]: string;
-} & {
-  id?: string;
-};
-
-export const getSettingsPagePath = <Path extends SettingsPath>(
-  path: Path,
-  params?: Params<Path>,
-  searchParams?: Record<string, string>,
-) => {
-  let resultPath = `/settings/${path}`;
-
-  if (isDefined(params)) {
-    resultPath = resultPath.replace(/:([a-zA-Z]+)/g, (_, key) => {
-      const value = params[key as keyof Params<Path>];
-
-      return value;
-    });
-  }
-
-  if (isDefined(params?.id)) {
-    resultPath = `${resultPath}/${params?.id}`;
-  }
-
-  if (isDefined(searchParams)) {
-    const searchParamsString = new URLSearchParams(searchParams).toString();
-
-    resultPath = `${resultPath}?${searchParamsString}`;
-  }
-
-  return resultPath;
-};