New useNavigateApp (#9729)

Todo : 
- replace all instances of useNavigate(
- remove getSettingsPagePath
- add eslint rule to enfore usage of useNavigateApp instead of
useNavigate

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -388,7 +388,6 @@ export enum FeatureFlagKey {
   IsAnalyticsV2Enabled = 'IsAnalyticsV2Enabled',
   IsCommandMenuV2Enabled = 'IsCommandMenuV2Enabled',
   IsCopilotEnabled = 'IsCopilotEnabled',
-  IsCrmMigrationEnabled = 'IsCrmMigrationEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
   IsFreeAccessEnabled = 'IsFreeAccessEnabled',
   IsFunctionSettingsEnabled = 'IsFunctionSettingsEnabled',

packages/twenty-front/src/generated/graphql.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+import { gql } from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@@ -321,7 +321,6 @@ export enum FeatureFlagKey {
   IsAnalyticsV2Enabled = 'IsAnalyticsV2Enabled',
   IsCommandMenuV2Enabled = 'IsCommandMenuV2Enabled',
   IsCopilotEnabled = 'IsCopilotEnabled',
-  IsCrmMigrationEnabled = 'IsCrmMigrationEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
   IsFreeAccessEnabled = 'IsFreeAccessEnabled',
   IsFunctionSettingsEnabled = 'IsFunctionSettingsEnabled',

packages/twenty-front/src/hooks/__tests__/useNavigateApp.test.tsx

@@ -0,0 +1,72 @@
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { AppPath } from '@/types/AppPath';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <MemoryRouter>{children}</MemoryRouter>
+);
+
+describe('useNavigateApp', () => {
+  const mockNavigate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  it('should navigate to the correct path without params', () => {
+    const { result } = renderHook(() => useNavigateApp(), {
+      wrapper: Wrapper,
+    });
+
+    result.current(AppPath.Index);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/', undefined);
+  });
+
+  it('should navigate to the correct path with params', () => {
+    const { result } = renderHook(() => useNavigateApp(), {
+      wrapper: Wrapper,
+    });
+
+    result.current(AppPath.RecordShowPage, {
+      objectNameSingular: CoreObjectNameSingular.Company,
+      objectRecordId: '123',
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith('/object/company/123', undefined);
+  });
+
+  it('should navigate with query params', () => {
+    const { result } = renderHook(() => useNavigateApp(), {
+      wrapper: Wrapper,
+    });
+
+    const queryParams = { viewId: '123', filter: 'test' };
+    result.current(AppPath.Index, undefined, queryParams);
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      '/?viewId=123&filter=test',
+      undefined,
+    );
+  });
+
+  it('should navigate with options', () => {
+    const { result } = renderHook(() => useNavigateApp(), {
+      wrapper: Wrapper,
+    });
+
+    const options = { replace: true, state: { test: true } };
+    result.current(AppPath.Index, undefined, undefined, options);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/', options);
+  });
+});

packages/twenty-front/src/hooks/__tests__/useNavigateSettings.test.tsx

@@ -0,0 +1,74 @@
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter, useNavigate } from 'react-router-dom';
+
+import { SettingsPath } from '@/types/SettingsPath';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <MemoryRouter>{children}</MemoryRouter>
+);
+
+describe('useNavigateSettings', () => {
+  const mockNavigate = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
+  });
+
+  it('should navigate to the correct settings path without params', () => {
+    const { result } = renderHook(() => useNavigateSettings(), {
+      wrapper: Wrapper,
+    });
+
+    result.current(SettingsPath.Accounts);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts', undefined);
+  });
+
+  it('should navigate to the correct settings path with params', () => {
+    const { result } = renderHook(() => useNavigateSettings(), {
+      wrapper: Wrapper,
+    });
+
+    result.current(SettingsPath.ObjectFieldEdit, {
+      objectNamePlural: 'companies',
+      fieldName: 'name',
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      '/settings/objects/companies/name',
+      undefined,
+    );
+  });
+
+  it('should navigate with query params', () => {
+    const { result } = renderHook(() => useNavigateSettings(), {
+      wrapper: Wrapper,
+    });
+
+    const queryParams = { viewId: '123', filter: 'test' };
+    result.current(SettingsPath.Accounts, undefined, queryParams);
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      '/settings/accounts?viewId=123&filter=test',
+      undefined,
+    );
+  });
+
+  it('should navigate with options', () => {
+    const { result } = renderHook(() => useNavigateSettings(), {
+      wrapper: Wrapper,
+    });
+
+    const options = { replace: true, state: { test: true } };
+    result.current(SettingsPath.Accounts, undefined, undefined, options);
+
+    expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts', options);
+  });
+});

packages/twenty-front/src/hooks/useCleanRecoilState.ts

@@ -1,20 +1,16 @@
 import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
-import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
-import { isDefined } from '~/utils/isDefined';
-
 export const useCleanRecoilState = () => {
   const isMatchingLocation = useIsMatchingLocation();
   const resetApiKeyToken = useResetRecoilState(apiKeyTokenState);
   const apiKeyToken = useRecoilValue(apiKeyTokenState);
   const cleanRecoilState = () => {
     if (
-      !isMatchingLocation(
+      !isMatchingLocation(SettingsPath.DevelopersApiKeyDetail) &&
-        `${AppPath.Settings}/${AppPath.Developers}/${SettingsPath.DevelopersApiKeyDetail}`,
-      ) &&
       isDefined(apiKeyToken)
     ) {
       resetApiKeyToken();

packages/twenty-front/src/hooks/useNavigateApp.ts

@@ -0,0 +1,20 @@
+import { AppPath } from '@/types/AppPath';
+import { useNavigate } from 'react-router-dom';
+import { getAppPath } from '~/utils/navigation/getAppPath';
+
+export const useNavigateApp = () => {
+  const navigate = useNavigate();
+
+  return <T extends AppPath>(
+    to: T,
+    params?: Parameters<typeof getAppPath<T>>[1],
+    queryParams?: Record<string, any>,
+    options?: {
+      replace?: boolean;
+      state?: any;
+    },
+  ) => {
+    const path = getAppPath(to, params, queryParams);
+    return navigate(path, options);
+  };
+};

packages/twenty-front/src/hooks/useNavigateSettings.ts

@@ -0,0 +1,20 @@
+import { SettingsPath } from '@/types/SettingsPath';
+import { useNavigate } from 'react-router-dom';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+
+export const useNavigateSettings = () => {
+  const navigate = useNavigate();
+
+  return <T extends SettingsPath>(
+    to: T,
+    params?: Parameters<typeof getSettingsPath<T>>[1],
+    queryParams?: Record<string, any>,
+    options?: {
+      replace?: boolean;
+      state?: any;
+    },
+  ) => {
+    const path = getSettingsPath(to, params, queryParams);
+    return navigate(path, options);
+  };
+};

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeActiveVersionWorkflowSingleRecordAction.ts

@@ -1,10 +1,11 @@
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { AppPath } from '@/types/AppPath';
 import { useActiveWorkflowVersion } from '@/workflow/hooks/useActiveWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import { useNavigate } from 'react-router-dom';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -16,7 +17,7 @@ export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObj
 
     const workflowActiveVersion = useActiveWorkflowVersion(recordId);
 
-    const navigate = useNavigate();
+    const navigateApp = useNavigateApp();
 
     const shouldBeRegistered = isDefined(workflowActiveVersion) && isDraft;
 
@@ -25,9 +26,10 @@ export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObj
         return;
       }
 
-      navigate(
+      navigateApp(AppPath.RecordShowPage, {
-        `/object/${CoreObjectNameSingular.WorkflowVersion}/${workflowActiveVersion.id}`,
+        objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
-      );
+        objectRecordId: workflowActiveVersion.id,
+      });
     };
 
     return {

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeRunsWorkflowSingleRecordAction.ts

@@ -1,11 +1,11 @@
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { AppPath } from '@/types/AppPath';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import qs from 'qs';
-import { useNavigate } from 'react-router-dom';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -13,7 +13,7 @@ export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetada
 
     const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
 
-    const navigate = useNavigate();
+    const navigateApp = useNavigateApp();
 
     const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
 
@@ -22,20 +22,21 @@ export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetada
         return;
       }
 
-      const filterQueryParams = {
+      navigateApp(
-        filter: {
+        AppPath.RecordIndexPage,
-          workflow: {
+        {
-            [ViewFilterOperand.Is]: {
+          objectNamePlural: CoreObjectNamePlural.WorkflowRun,
-              selectedRecordIds: [workflowWithCurrentVersion.id],
+        },
+        {
+          filter: {
+            workflow: {
+              [ViewFilterOperand.Is]: {
+                selectedRecordIds: [workflowWithCurrentVersion.id],
+              },
             },
           },
         },
-      };
+      );
-      const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowRun}?${qs.stringify(
-        filterQueryParams,
-      )}`;
-
-      navigate(filterLinkHref);
     };
 
     return {

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeVersionsWorkflowSingleRecordAction.ts

@@ -1,11 +1,11 @@
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { AppPath } from '@/types/AppPath';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import qs from 'qs';
-import { useNavigate } from 'react-router-dom';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useSeeVersionsWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -13,29 +13,28 @@ export const useSeeVersionsWorkflowSingleRecordAction: ActionHookWithoutObjectMe
 
     const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
 
-    const navigate = useNavigate();
+    const navigateApp = useNavigateApp();
 
     const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
 
     const onClick = () => {
-      if (!shouldBeRegistered) {
+      if (!shouldBeRegistered) return;
-        return;
-      }
 
-      const filterQueryParams = {
+      navigateApp(
-        filter: {
+        AppPath.RecordIndexPage,
-          workflow: {
+        {
-            [ViewFilterOperand.Is]: {
+          objectNamePlural: CoreObjectNamePlural.WorkflowVersion,
-              selectedRecordIds: [workflowWithCurrentVersion.id],
+        },
+        {
+          filter: {
+            workflow: {
+              [ViewFilterOperand.Is]: {
+                selectedRecordIds: [workflowWithCurrentVersion.id],
+              },
             },
           },
         },
-      };
+      );
-      const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowVersion}?${qs.stringify(
-        filterQueryParams,
-      )}`;
-
-      navigate(filterLinkHref);
     };
 
     return {

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useSeeRunsWorkflowVersionSingleRecordAction.ts

@@ -2,12 +2,12 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { AppPath } from '@/types/AppPath';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import qs from 'qs';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useSeeRunsWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -19,32 +19,33 @@ export const useSeeRunsWorkflowVersionSingleRecordAction: ActionHookWithoutObjec
       workflowVersion?.workflow.id,
     );
 
-    const navigate = useNavigate();
+    const navigateApp = useNavigateApp();
 
     const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
 
     const onClick = () => {
       if (!shouldBeRegistered) return;
 
-      const filterQueryParams = {
+      navigateApp(
-        filter: {
+        AppPath.RecordIndexPage,
-          workflow: {
+        {
-            [ViewFilterOperand.Is]: {
+          objectNamePlural: CoreObjectNamePlural.WorkflowRun,
-              selectedRecordIds: [workflowWithCurrentVersion.id],
+        },
+        {
+          filter: {
+            workflow: {
+              [ViewFilterOperand.Is]: {
+                selectedRecordIds: [workflowWithCurrentVersion.id],
+              },
             },
-          },
+            workflowVersion: {
-          workflowVersion: {
+              [ViewFilterOperand.Is]: {
-            [ViewFilterOperand.Is]: {
+                selectedRecordIds: [recordId],
-              selectedRecordIds: [recordId],
+              },
             },
           },
         },
-      };
+      );
-      const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowRun}?${qs.stringify(
-        filterQueryParams,
-      )}`;
-
-      navigate(filterLinkHref);
     };
 
     return {

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useSeeVersionsWorkflowVersionSingleRecordAction.ts

@@ -2,12 +2,12 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { AppPath } from '@/types/AppPath';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
-import qs from 'qs';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useSeeVersionsWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -19,29 +19,28 @@ export const useSeeVersionsWorkflowVersionSingleRecordAction: ActionHookWithoutO
       workflowVersion?.workflowId,
     );
 
-    const navigate = useNavigate();
+    const navigateApp = useNavigateApp();
 
     const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
 
     const onClick = () => {
-      if (!shouldBeRegistered) {
+      if (!shouldBeRegistered) return;
-        return;
-      }
 
-      const filterQueryParams = {
+      navigateApp(
-        filter: {
+        AppPath.RecordIndexPage,
-          workflow: {
+        {
-            [ViewFilterOperand.Is]: {
+          objectNamePlural: CoreObjectNamePlural.WorkflowVersion,
-              selectedRecordIds: [workflowWithCurrentVersion.id],
+        },
+        {
+          filter: {
+            workflow: {
+              [ViewFilterOperand.Is]: {
+                selectedRecordIds: [workflowWithCurrentVersion.id],
+              },
             },
           },
         },
-      };
+      );
-      const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowVersion}?${qs.stringify(
-        filterQueryParams,
-      )}`;
-
-      navigate(filterLinkHref);
     };
 
     return {

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useUseAsDraftWorkflowVersionSingleRecordAction.tsx

@@ -1,15 +1,15 @@
 import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { AppPath } from '@/types/AppPath';
 import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
-import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
   () => {
@@ -28,7 +28,7 @@ export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutOb
       openOverrideWorkflowDraftConfirmationModalState,
     );
 
-    const navigate = useNavigate();
+    const navigate = useNavigateApp();
 
     const hasAlreadyDraftVersion =
       workflow?.versions.some((version) => version.status === 'DRAFT') || false;
@@ -48,13 +48,10 @@ export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutOb
           workflowId: workflowVersion.workflow.id,
           workflowVersionIdToCopy: workflowVersion.id,
         });
-
+        navigate(AppPath.RecordShowPage, {
-        navigate(
+          objectNameSingular: CoreObjectNameSingular.Workflow,
-          buildShowPageURL(
+          objectRecordId: workflowVersion.workflow.id,
-            CoreObjectNameSingular.Workflow,
+        });
-            workflowVersion.workflow.id,
-          ),
-        );
       }
     };
 

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

@@ -11,9 +11,6 @@ export const AppRouter = () => {
   const isFreeAccessEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsFreeAccessEnabled,
   );
-  const isCRMMigrationEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCrmMigrationEnabled,
-  );
   const isServerlessFunctionSettingsEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsFunctionSettingsEnabled,
   );
@@ -29,7 +26,6 @@ export const AppRouter = () => {
     <RouterProvider
       router={useCreateAppRouter(
         isBillingPageEnabled,
-        isCRMMigrationEnabled,
         isServerlessFunctionSettingsEnabled,
         isAdminPageEnabled,
       )}

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

@@ -2,7 +2,6 @@ import { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
-import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 
 const SettingsAccountsCalendars = lazy(() =>
@@ -226,14 +225,6 @@ const SettingsObjectFieldEdit = lazy(() =>
   ),
 );
 
-const SettingsCRMMigration = lazy(() =>
-  import('~/pages/settings/crm-migration/SettingsCRMMigration').then(
-    (module) => ({
-      default: module.SettingsCRMMigration,
-    }),
-  ),
-);
-
 const SettingsSecurity = lazy(() =>
   import('~/pages/settings/security/SettingsSecurity').then((module) => ({
     default: module.SettingsSecurity,
@@ -264,14 +255,12 @@ const SettingsAdminContent = lazy(() =>
 
 type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
-  isCRMMigrationEnabled?: boolean;
   isServerlessFunctionSettingsEnabled?: boolean;
   isAdminPageEnabled?: boolean;
 };
 
 export const SettingsRoutes = ({
   isBillingEnabled,
-  isCRMMigrationEnabled,
   isServerlessFunctionSettingsEnabled,
   isAdminPageEnabled,
 }: SettingsRoutesProps) => (
@@ -310,34 +299,22 @@ export const SettingsRoutes = ({
       />
       <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
       <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
-      {isCRMMigrationEnabled && (
+
-        <Route
-          path={SettingsPath.CRMMigration}
-          element={<SettingsCRMMigration />}
-        />
-      )}
       <Route
-        path={AppPath.DevelopersCatchAll}
+        path={SettingsPath.DevelopersNewApiKey}
-        element={
+        element={<SettingsDevelopersApiKeysNew />}
-          <Routes>
+      />
-            <Route
+      <Route
-              path={SettingsPath.DevelopersNewApiKey}
+        path={SettingsPath.DevelopersApiKeyDetail}
-              element={<SettingsDevelopersApiKeysNew />}
+        element={<SettingsDevelopersApiKeyDetail />}
-            />
+      />
-            <Route
+      <Route
-              path={SettingsPath.DevelopersApiKeyDetail}
+        path={SettingsPath.DevelopersNewWebhook}
-              element={<SettingsDevelopersApiKeyDetail />}
+        element={<SettingsDevelopersWebhooksNew />}
-            />
+      />
-            <Route
+      <Route
-              path={SettingsPath.DevelopersNewWebhook}
+        path={SettingsPath.DevelopersNewWebhookDetail}
-              element={<SettingsDevelopersWebhooksNew />}
+        element={<SettingsDevelopersWebhooksDetail />}
-            />
-            <Route
-              path={SettingsPath.DevelopersNewWebhookDetail}
-              element={<SettingsDevelopersWebhooksDetail />}
-            />
-          </Routes>
-        }
       />
       {isServerlessFunctionSettingsEnabled && (
         <>

packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx

@@ -28,7 +28,6 @@ import { SyncEmails } from '~/pages/onboarding/SyncEmails';
 
 export const useCreateAppRouter = (
   isBillingEnabled?: boolean,
-  isCRMMigrationEnabled?: boolean,
   isServerlessFunctionSettingsEnabled?: boolean,
   isAdminPageEnabled?: boolean,
 ) =>
@@ -63,7 +62,6 @@ export const useCreateAppRouter = (
             element={
               <SettingsRoutes
                 isBillingEnabled={isBillingEnabled}
-                isCRMMigrationEnabled={isCRMMigrationEnabled}
                 isServerlessFunctionSettingsEnabled={
                   isServerlessFunctionSettingsEnabled
                 }

packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
@@ -9,6 +9,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const VerifyEffect = () => {
   const [searchParams] = useSearchParams();
@@ -18,7 +19,7 @@ export const VerifyEffect = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const isLogged = useIsLogged();
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
 
   const { verify } = useAuth();
 

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -5,7 +5,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
 
 export const VerifyEmailEffect = () => {
@@ -18,7 +19,7 @@ export const VerifyEmailEffect = () => {
   const email = searchParams.get('email');
   const emailVerificationToken = searchParams.get('emailVerificationToken');
 
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const { readCaptchaToken } = useReadCaptchaToken();
 
   useEffect(() => {
@@ -44,7 +45,7 @@ export const VerifyEmailEffect = () => {
           variant: SnackBarVariant.Success,
         });
 
-        navigate(`${AppPath.Verify}?loginToken=${loginToken.token}`);
+        navigate(AppPath.Verify, undefined, { loginToken: loginToken.token });
       } catch (error) {
         enqueueSnackBar('Email verification failed.', {
           dedupeKey: 'email-verification-dedupe-key',

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -10,11 +10,12 @@ import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefau
 
 import { AppPath } from '@/types/AppPath';
 import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { isDefined } from '~/utils/isDefined';
 
 export const useWorkspaceFromInviteHash = () => {
   const { enqueueSnackBar } = useSnackBar();
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const workspaceInviteHash = useParams().workspaceInviteHash;
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const [initiallyLoggedIn] = useState(isDefined(currentWorkspace));

packages/twenty-front/src/modules/billing/hooks/useHandleCheckoutSession.ts

@@ -1,4 +1,3 @@
-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';
@@ -8,6 +7,7 @@ import {
   SubscriptionInterval,
 } from '~/generated-metadata/graphql';
 import { useCheckoutSessionMutation } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const useHandleCheckoutSession = ({
   recurringInterval,
@@ -29,7 +29,7 @@ export const useHandleCheckoutSession = ({
     const { data } = await checkoutSession({
       variables: {
         recurringInterval,
-        successUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
+        successUrlPath: getSettingsPath(SettingsPath.Billing),
         plan,
         requirePaymentMethod,
       },

packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts

@@ -6,12 +6,19 @@ import {
   IconUser,
 } from 'twenty-ui';
 
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { getAppPath } from '~/utils/navigation/getAppPath';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { Command, CommandType } from '../types/Command';
 
 export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   people: {
     id: 'go-to-people',
-    to: '/objects/people',
+    to: getAppPath(AppPath.RecordIndexPage, {
+      objectNamePlural: CoreObjectNamePlural.Person,
+    }),
     label: 'Go to People',
     type: CommandType.Navigate,
     firstHotKey: 'G',
@@ -21,7 +28,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   },
   companies: {
     id: 'go-to-companies',
-    to: '/objects/companies',
+    to: getAppPath(AppPath.RecordIndexPage, {
+      objectNamePlural: CoreObjectNamePlural.Company,
+    }),
     label: 'Go to Companies',
     type: CommandType.Navigate,
     firstHotKey: 'G',
@@ -31,7 +40,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   },
   opportunities: {
     id: 'go-to-activities',
-    to: '/objects/opportunities',
+    to: getAppPath(AppPath.RecordIndexPage, {
+      objectNamePlural: CoreObjectNamePlural.Opportunity,
+    }),
     label: 'Go to Opportunities',
     type: CommandType.Navigate,
     firstHotKey: 'G',
@@ -41,7 +52,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   },
   settings: {
     id: 'go-to-settings',
-    to: '/settings/profile',
+    to: getSettingsPath(SettingsPath.ProfilePage),
     label: 'Go to Settings',
     type: CommandType.Navigate,
     firstHotKey: 'G',
@@ -51,7 +62,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
   },
   tasks: {
     id: 'go-to-tasks',
-    to: '/objects/tasks',
+    to: getAppPath(AppPath.RecordIndexPage, {
+      objectNamePlural: CoreObjectNamePlural.Task,
+    }),
     label: 'Go to Tasks',
     type: CommandType.Navigate,
     firstHotKey: 'G',

packages/twenty-front/src/modules/favorites/utils/__tests__/isLocationMatchingFavorite.test.ts

@@ -3,7 +3,7 @@ import { isLocationMatchingFavorite } from '../isLocationMatchingFavorite';
 describe('isLocationMatchingFavorite', () => {
   it('should return true if favorite link matches current path', () => {
     const currentPath = '/app/objects/people';
-    const currentViewPath = '/app/objects/people?view=123';
+    const currentViewPath = '/app/objects/people?viewId=123';
     const favorite = {
       objectNameSingular: 'object',
       link: '/app/objects/people',
@@ -16,7 +16,7 @@ describe('isLocationMatchingFavorite', () => {
 
   it('should return true if favorite link matches current view path', () => {
     const currentPath = '/app/object/company/12';
-    const currentViewPath = '/app/object/company/12?view=123';
+    const currentViewPath = '/app/object/company/12?viewId=123';
     const favorite = {
       objectNameSingular: 'company',
       link: '/app/object/company/12',
@@ -29,7 +29,7 @@ describe('isLocationMatchingFavorite', () => {
 
   it('should return false if favorite link does not match current path', () => {
     const currentPath = '/app/objects/people';
-    const currentViewPath = '/app/objects/people?view=123';
+    const currentViewPath = '/app/objects/people?viewId=123';
     const favorite = {
       objectNameSingular: 'object',
       link: '/app/objects/company',
@@ -42,10 +42,10 @@ describe('isLocationMatchingFavorite', () => {
 
   it('should return false if favorite link does not match current view path', () => {
     const currentPath = '/app/objects/companies';
-    const currentViewPath = '/app/objects/companies?view=123';
+    const currentViewPath = '/app/objects/companies?viewId=123';
     const favorite = {
       objectNameSingular: 'view',
-      link: '/app/objects/companies/view=246',
+      link: '/app/objects/companies?viewId=246',
     };
 
     expect(

packages/twenty-front/src/modules/favorites/utils/sortFavorites.ts

@@ -3,8 +3,10 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
+import { AppPath } from '@/types/AppPath';
 import { View } from '@/views/types/View';
 import { isDefined } from 'twenty-ui';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 import { getObjectMetadataLabelPluralFromViewId } from './getObjectMetadataLabelPluralFromViewId';
 
 export type ProcessedFavorite = Favorite & {
@@ -40,7 +42,11 @@ export const sortFavorites = (
           avatarType: 'icon',
           avatarUrl: '',
           labelIdentifier: view?.name,
-          link: `/objects/${labelPlural.toLocaleLowerCase()}${favorite.viewId ? `?view=${favorite.viewId}` : ''}`,
+          link: getAppPath(
+            AppPath.RecordIndexPage,
+            { objectNamePlural: labelPlural.toLowerCase() },
+            favorite.viewId ? { viewId: favorite.viewId } : undefined,
+          ),
           workspaceMemberId: favorite.workspaceMemberId,
           favoriteFolderId: favorite.favoriteFolderId,
           objectNameSingular: 'view',

packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerBillingSubscriptionPaused.tsx

@@ -1,13 +1,13 @@
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
-import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { isDefined } from 'twenty-ui';
 import { useBillingPortalSessionQuery } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const InformationBannerBillingSubscriptionPaused = () => {
   const { data, loading } = useBillingPortalSessionQuery({
     variables: {
-      returnUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
+      returnUrlPath: getSettingsPath(SettingsPath.Billing),
     },
   });
 

packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerFailPaymentInfo.tsx

@@ -1,13 +1,13 @@
 import { InformationBanner } from '@/information-banner/components/InformationBanner';
-import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { isDefined } from 'twenty-ui';
 import { useBillingPortalSessionQuery } from '~/generated/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const InformationBannerFailPaymentInfo = () => {
   const { data, loading } = useBillingPortalSessionQuery({
     variables: {
-      returnUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
+      returnUrlPath: getSettingsPath(SettingsPath.Billing),
     },
   });
 

packages/twenty-front/src/modules/navigation/hooks/__tests__/useDefaultHomePagePath.test.ts

@@ -70,7 +70,7 @@ describe('useDefaultHomePagePath', () => {
     setupMockPrefetchedData('viewId');
     const { result } = renderHooks(true);
     expect(result.current.defaultHomePagePath).toEqual(
-      '/objects/companies?view=viewId',
+      '/objects/companies?viewId=viewId',
     );
   });
 });

packages/twenty-front/src/modules/navigation/hooks/useDefaultHomePagePath.ts

@@ -9,6 +9,7 @@ import { View } from '@/views/types/View';
 import { useCallback, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from '~/utils/isDefined';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 
 export const useDefaultHomePagePath = () => {
   const currentUser = useRecoilValue(currentUserState);
@@ -79,11 +80,13 @@ export const useDefaultHomePagePath = () => {
     }
 
     const namePlural = defaultObjectPathInfo.objectMetadataItem?.namePlural;
-    const viewParam = defaultObjectPathInfo.view
+    const viewId = defaultObjectPathInfo.view?.id;
-      ? `?view=${defaultObjectPathInfo.view.id}`
-      : '';
 
-    return `/objects/${namePlural}${viewParam}`;
+    return getAppPath(
+      AppPath.RecordIndexPage,
+      { objectNamePlural: namePlural },
+      viewId ? { viewId } : undefined,
+    );
   }, [currentUser, defaultObjectPathInfo]);
 
   return { defaultHomePagePath };

packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts

@@ -1,11 +1,13 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { lastVisitedObjectMetadataItemIdStateSelector } from '@/navigation/states/selectors/lastVisitedObjectMetadataItemIdStateSelector';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { AppPath } from '@/types/AppPath';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-ui';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 
 export const useLastVisitedObjectMetadataItem = () => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
@@ -44,7 +46,9 @@ export const useLastVisitedObjectMetadataItem = () => {
     if (isDeactivateDefault) {
       setLastVisitedObjectMetadataItemId(newFallbackObjectMetadataItem.id);
       setNavigationMemorizedUrl(
-        `/objects/${newFallbackObjectMetadataItem.namePlural}`,
+        getAppPath(AppPath.RecordIndexPage, {
+          objectNamePlural: newFallbackObjectMetadataItem.namePlural,
+        }),
       );
     }
   };

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx

@@ -2,6 +2,7 @@ import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { AppPath } from '@/types/AppPath';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
@@ -10,6 +11,7 @@ import { View } from '@/views/types/View';
 import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
 import { useLocation } from 'react-router-dom';
 import { AnimatedExpandableContainer, useIcons } from 'twenty-ui';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 
 export type NavigationDrawerItemForObjectMetadataItemProps = {
   objectMetadataItem: ObjectMetadataItem;
@@ -35,13 +37,23 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
 
   const viewId = lastVisitedViewId ?? objectMetadataViews[0]?.id;
 
-  const navigationPath = `/objects/${objectMetadataItem.namePlural}${
+  const navigationPath = getAppPath(
-    viewId ? `?view=${viewId}` : ''
+    AppPath.RecordIndexPage,
-  }`;
+    { objectNamePlural: objectMetadataItem.namePlural },
+    viewId ? { viewId } : undefined,
+  );
 
   const isActive =
-    currentPath === `/objects/${objectMetadataItem.namePlural}` ||
+    currentPath ===
-    currentPath.includes(`object/${objectMetadataItem.nameSingular}/`);
+      getAppPath(AppPath.RecordIndexPage, {
+        objectNamePlural: objectMetadataItem.namePlural,
+      }) ||
+    currentPath.includes(
+      getAppPath(AppPath.RecordShowPage, {
+        objectNameSingular: objectMetadataItem.nameSingular,
+        objectRecordId: '',
+      }).slice(0, -1),
+    );
 
   const shouldSubItemsBeDisplayed = isActive && objectMetadataViews.length > 1;
 
@@ -76,7 +88,11 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
         {sortedObjectMetadataViews.map((view, index) => (
           <NavigationDrawerSubItem
             label={view.name}
-            to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
+            to={getAppPath(
+              AppPath.RecordIndexPage,
+              { objectNamePlural: objectMetadataItem.namePlural },
+              { viewId: view.id },
+            )}
             active={viewId === view.id}
             subItemState={getNavigationSubItemLeftAdornment({
               index,

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx

@@ -12,7 +12,6 @@ import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObje
 import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
 import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
 import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -20,6 +19,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { ViewType } from '@/views/types/ViewType';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const ObjectOptionsDropdownHiddenFieldsContent = () => {
   const {
@@ -34,7 +34,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
     objectNameSingular: objectMetadataItem.nameSingular,
   });
 
-  const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
+  const settingsUrl = getSettingsPath(SettingsPath.ObjectDetail, {
     objectNamePlural,
   });
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx

@@ -13,7 +13,6 @@ import { RecordGroupsVisibilityDropdownSection } from '@/object-record/record-gr
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -22,6 +21,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
   const {
@@ -51,13 +51,10 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
       viewType,
     });
 
-  const viewGroupSettingsUrl = getSettingsPagePath(
+  const viewGroupSettingsUrl = getSettingsPath(SettingsPath.ObjectFieldEdit, {
-    SettingsPath.ObjectFieldEdit,
+    objectNamePlural,
-    {
+    fieldName: recordGroupFieldMetadata?.name ?? '',
-      objectNamePlural,
+  });
-      fieldName: recordGroupFieldMetadata?.name ?? '',
-    },
-  );
 
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx

@@ -17,7 +17,6 @@ import { useSearchRecordGroupField } from '@/object-record/object-options-dropdo
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
 import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -29,6 +28,7 @@ import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
   const { getIcon } = useIcons();
@@ -68,7 +68,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
     viewBarComponentId: recordIndexId,
   });
 
-  const newSelectFieldSettingsUrl = getSettingsPagePath(
+  const newSelectFieldSettingsUrl = getSettingsPath(
     SettingsPath.ObjectNewFieldConfigure,
     {
       objectNamePlural,

packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts

@@ -4,13 +4,15 @@ import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/use
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { SettingsPath } from '@/types/SettingsPath';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useCallback, useContext, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { IconEyeOff, IconSettings, isDefined } from 'twenty-ui';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 type UseRecordGroupActionsParams = {
   viewType: ViewType;
@@ -19,7 +21,7 @@ type UseRecordGroupActionsParams = {
 export const useRecordGroupActions = ({
   viewType,
 }: UseRecordGroupActionsParams) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const location = useLocation();
 
   const { objectNameSingular, recordIndexId } = useRecordIndexContextOrThrow();
@@ -53,9 +55,10 @@ export const useRecordGroupActions = ({
       throw new Error('recordGroupFieldMetadata is not a non-empty string');
     }
 
-    const settingsPath = `/settings/objects/${objectMetadataItem.namePlural}/${recordGroupFieldMetadata.name}`;
+    navigate(SettingsPath.ObjectFieldEdit, {
-
+      objectNamePlural: objectMetadataItem.namePlural,
-    navigate(settingsPath);
+      fieldName: recordGroupFieldMetadata.name,
+    });
   }, [
     setNavigationMemorizedUrl,
     location.pathname,

packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleIndexIdentifierClick.ts

@@ -1,7 +1,8 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { AppPath } from '@/types/AppPath';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 
 export const useHandleIndexIdentifierClick = ({
   objectMetadataItem,
@@ -16,12 +17,16 @@ export const useHandleIndexIdentifierClick = ({
   );
 
   const indexIdentifierUrl = (recordId: string) => {
-    const showPageURL = buildShowPageURL(
+    return getAppPath(
-      objectMetadataItem.nameSingular,
+      AppPath.RecordShowPage,
-      recordId,
+      {
-      currentViewId,
+        objectNameSingular: objectMetadataItem.nameSingular,
+        objectRecordId: recordId,
+      },
+      {
+        viewId: currentViewId,
+      },
     );
-    return showPageURL;
   };
 
   return { indexIdentifierUrl };

packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts

@@ -1,17 +1,17 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
 import { useRecordIdsFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useRecordIdsFromFindManyCacheRootQuery';
-import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { AppPath } from '@/types/AppPath';
-import { buildIndexTablePageURL } from '@/object-record/record-table/utils/buildIndexTableURL';
 import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
 import { capitalize } from 'twenty-shared';
 import { isDefined } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const useRecordShowPagePagination = (
   propsObjectNameSingular: string,
@@ -22,9 +22,9 @@ export const useRecordShowPagePagination = (
     objectRecordId: paramObjectRecordId,
   } = useParams();
 
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const [searchParams] = useSearchParams();
-  const viewIdQueryParam = searchParams.get('view');
+  const viewIdQueryParam = searchParams.get('viewId');
 
   const setLastShowPageRecordId = useSetRecoilState(lastShowPageRecordIdState);
 
@@ -130,22 +130,32 @@ export const useRecordShowPagePagination = (
     !isFirstRecord || (isFirstRecord && cacheIsAvailableForNavigation);
 
   const navigateToPreviousRecord = () => {
-    if (isFirstRecord) {
+    if (isFirstRecord || !recordBefore) {
       if (cacheIsAvailableForNavigation) {
         const lastRecordIdFromCache =
           recordIdsInCache[recordIdsInCache.length - 1];
 
         navigate(
-          buildShowPageURL(
+          AppPath.RecordShowPage,
+          {
             objectNameSingular,
-            lastRecordIdFromCache,
+            objectRecordId: lastRecordIdFromCache,
-            viewIdQueryParam,
+          },
-          ),
+          {
+            viewId: viewIdQueryParam,
+          },
         );
       }
     } else {
       navigate(
-        buildShowPageURL(objectNameSingular, recordBefore.id, viewIdQueryParam),
+        AppPath.RecordShowPage,
+        {
+          objectNameSingular,
+          objectRecordId: recordBefore.id,
+        },
+        {
+          viewId: viewIdQueryParam,
+        },
       );
     }
   };
@@ -154,34 +164,47 @@ export const useRecordShowPagePagination = (
     !isLastRecord || (isLastRecord && cacheIsAvailableForNavigation);
 
   const navigateToNextRecord = () => {
-    if (isLastRecord) {
+    if (isLastRecord || !recordAfter) {
       if (cacheIsAvailableForNavigation) {
         const firstRecordIdFromCache = recordIdsInCache[0];
 
         navigate(
-          buildShowPageURL(
+          AppPath.RecordShowPage,
+          {
             objectNameSingular,
-            firstRecordIdFromCache,
+            objectRecordId: firstRecordIdFromCache,
-            viewIdQueryParam,
+          },
-          ),
+          {
+            viewId: viewIdQueryParam,
+          },
         );
       }
     } else {
       navigate(
-        buildShowPageURL(objectNameSingular, recordAfter.id, viewIdQueryParam),
+        AppPath.RecordShowPage,
+        {
+          objectNameSingular,
+          objectRecordId: recordAfter.id,
+        },
+        {
+          viewId: viewIdQueryParam,
+        },
       );
     }
   };
 
   const navigateToIndexView = () => {
-    const indexTableURL = buildIndexTablePageURL(
-      objectMetadataItem.namePlural,
-      viewIdQueryParam,
-    );
-
     setLastShowPageRecordId(objectRecordId);
 
-    navigate(indexTableURL);
+    navigate(
+      AppPath.RecordIndexPage,
+      {
+        objectNamePlural: objectMetadataItem.namePlural,
+      },
+      {
+        viewId: viewIdQueryParam,
+      },
+    );
   };
 
   const rankInView = recordIdsInCache.findIndex((id) => id === objectRecordId);

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import qs from 'qs';
 import { useCallback, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { IconForbid, IconPencil, IconPlus, LightIconButton } from 'twenty-ui';
@@ -26,6 +25,7 @@ import { RecordForSelect } from '@/object-record/relation-picker/types/RecordFor
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { AppPath } from '@/types/AppPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@@ -33,6 +33,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { View } from '@/views/types/View';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 type RecordDetailRelationSectionProps = {
   loading: boolean;
 };
@@ -139,9 +140,13 @@ export const RecordDetailRelationSection = ({
     view: indexView?.id,
   };
 
-  const filterLinkHref = `/objects/${
+  const filterLinkHref = getAppPath(
-    relationObjectMetadataItem.namePlural
+    AppPath.RecordIndexPage,
-  }?${qs.stringify(filterQueryParams)}`;
+    {
+      objectNamePlural: relationObjectMetadataItem.namePlural,
+    },
+    filterQueryParams,
+  );
 
   const showContent = () => {
     return (

packages/twenty-front/src/modules/object-record/record-show/utils/buildShowPageURL.ts

@@ -1,9 +0,0 @@
-export const buildShowPageURL = (
-  objectNameSingular: string,
-  recordId: string,
-  viewId?: string | null | undefined,
-) => {
-  return `/object/${objectNameSingular}/${recordId}${
-    viewId ? `?view=${viewId}` : ''
-  }`;
-};

packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx

@@ -2,13 +2,14 @@
 import { IconSettings } from 'twenty-ui';
 
 import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
-import { useNavigate } from 'react-router-dom';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 export const RecordTableEmptyStateRemote = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
 
   const handleButtonClick = () => {
-    navigate('/settings/integrations');
+    navigate(SettingsPath.Integrations);
   };
 
   return (

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx

@@ -8,11 +8,13 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
 import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
+import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const RecordTableHeaderPlusButtonContent = () => {
   const { objectMetadataItem } = useRecordTableContextOrThrow();
@@ -55,7 +57,9 @@ export const RecordTableHeaderPlusButtonContent = () => {
       <DropdownMenuItemsContainer scrollable={false}>
         <UndecoratedLink
           fullWidth
-          to={`/settings/objects/${objectMetadataItem.namePlural}`}
+          to={getSettingsPath(SettingsPath.Objects, {
+            objectNamePlural: objectMetadataItem.namePlural,
+          })}
           onClick={() => {
             setNavigationMemorizedUrl(location.pathname + location.search);
           }}

packages/twenty-front/src/modules/object-record/record-table/utils/buildIndexTableURL.ts

@@ -1,6 +0,0 @@
-export const buildIndexTablePageURL = (
-  objectNamePlural: string,
-  viewId?: string | null | undefined,
-) => {
-  return `/objects/${objectNamePlural}${viewId ? `?view=${viewId}` : ''}`;
-};

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={() =>
+      onFooterButtonClick={() => navigate(SettingsPath.NewAccount)}
-        navigate(getSettingsPagePath(SettingsPath.NewAccount))
-      }
     />
   );
 };

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();
             }}
           />

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
+        <UndecoratedLink to={getSettingsPath(SettingsPath.AccountsCalendars)}>
-          to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
-        >
           <SettingsCard
             Icon={
               <IconCalendarEvent

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({

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"

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 {
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
-  useLocation,
-  useNavigate,
-  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();

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);

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)}

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)
             }

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 (

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,
   );
 

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,
+        })
+      }
     />
   );
 };

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(
+      navigate(SettingsPath.IntegrationDatabaseConnection, {
-        `${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`,
+        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}
           />

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,

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 { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 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

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={() =>
+      onFooterButtonClick={() => navigate(SettingsPath.NewSSOIdentityProvider)}
-        navigate(getSettingsPagePath(SettingsPath.NewSSOIdentityProvider))
-      }
     />
   );
 };

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,
                     })}
                   />

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>

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,
   );

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,
   );

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,
   );

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 { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
 
 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,
   );

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');
-  });
-});

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;
-};

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

@@ -4,9 +4,7 @@ export enum SettingsPath {
   Accounts = 'accounts',
   NewAccount = 'accounts/new',
   AccountsCalendars = 'accounts/calendars',
-  AccountsCalendarsSettings = 'accounts/calendars/:accountUuid',
   AccountsEmails = 'accounts/emails',
-  AccountsEmailsInboxSettings = 'accounts/emails/:accountUuid',
   Billing = 'billing',
   Objects = 'objects',
   ObjectOverview = 'objects/overview',
@@ -15,16 +13,15 @@ export enum SettingsPath {
   ObjectNewFieldConfigure = 'objects/:objectNamePlural/new-field/configure',
   ObjectFieldEdit = 'objects/:objectNamePlural/:fieldName',
   NewObject = 'objects/new',
+  ServerlessFunctions = 'functions',
   NewServerlessFunction = 'functions/new',
   ServerlessFunctionDetail = 'functions/:serverlessFunctionId',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',
   Domain = 'domain',
-  CRMMigration = 'crm-migration',
   Developers = 'developers',
-  ServerlessFunctions = 'functions',
+  DevelopersNewApiKey = 'developers/api-keys/new',
-  DevelopersNewApiKey = 'api-keys/new',
+  DevelopersApiKeyDetail = 'developers/api-keys/:apiKeyId',
-  DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
   Integrations = 'integrations',
   IntegrationDatabase = 'integrations/:databaseKey',
   IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionId',
@@ -33,8 +30,8 @@ export enum SettingsPath {
   Security = 'security',
   NewSSOIdentityProvider = 'security/sso/new',
   EditSSOIdentityProvider = 'security/sso/:identityProviderId',
-  DevelopersNewWebhook = 'webhooks/new',
+  DevelopersNewWebhook = 'developers/webhooks/new',
-  DevelopersNewWebhookDetail = 'webhooks/:webhookId',
+  DevelopersNewWebhookDetail = 'developers/webhooks/:webhookId',
   Releases = 'releases',
   AdminPanel = 'admin-panel',
   FeatureFlags = 'admin-panel/feature-flags',

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -24,7 +24,6 @@ import {
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -36,6 +35,7 @@ import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import jsonPage from '../../../../../../../package.json';
 import { NavigationDrawer } from '../NavigationDrawer';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
@@ -136,30 +136,30 @@ export const Settings: Story = {
           <NavigationDrawerSectionTitle label="User" />
           <NavigationDrawerItem
             label="Profile"
-            to={getSettingsPagePath(SettingsPath.ProfilePage)}
+            to={getSettingsPath(SettingsPath.ProfilePage)}
             Icon={IconUserCircle}
             active
           />
           <NavigationDrawerItem
             label="Appearance"
-            to={getSettingsPagePath(SettingsPath.Experience)}
+            to={getSettingsPath(SettingsPath.Experience)}
             Icon={IconColorSwatch}
           />
           <NavigationDrawerItemGroup>
             <NavigationDrawerItem
               label="Accounts"
-              to={getSettingsPagePath(SettingsPath.Accounts)}
+              to={getSettingsPath(SettingsPath.Accounts)}
               Icon={IconAt}
             />
             <NavigationDrawerSubItem
               label="Emails"
-              to={getSettingsPagePath(SettingsPath.AccountsEmails)}
+              to={getSettingsPath(SettingsPath.AccountsEmails)}
               Icon={IconMail}
               subItemState="intermediate-before-selected"
             />
             <NavigationDrawerSubItem
               label="Calendar"
-              to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
+              to={getSettingsPath(SettingsPath.AccountsCalendars)}
               Icon={IconCalendarEvent}
               subItemState="last-selected"
             />
@@ -170,12 +170,12 @@ export const Settings: Story = {
           <NavigationDrawerSectionTitle label="Workspace" />
           <NavigationDrawerItem
             label="General"
-            to={getSettingsPagePath(SettingsPath.Workspace)}
+            to={getSettingsPath(SettingsPath.Workspace)}
             Icon={IconSettings}
           />
           <NavigationDrawerItem
             label="Members"
-            to={getSettingsPagePath(SettingsPath.WorkspaceMembersPage)}
+            to={getSettingsPath(SettingsPath.WorkspaceMembersPage)}
             Icon={IconUsers}
           />
         </NavigationDrawerSection>

packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts

@@ -1,12 +1,14 @@
 import { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { SettingsPath } from '@/types/SettingsPath';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
 
 export const useGetAvailableFieldsForKanban = () => {
@@ -28,19 +30,23 @@ export const useGetAvailableFieldsForKanban = () => {
       (field) => field.type === FieldMetadataType.Select,
     ) ?? [];
 
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
 
   const navigateToSelectSettings = useCallback(() => {
     setNavigationMemorizedUrl(location.pathname + location.search);
 
     if (isDefined(objectMetadataItem?.namePlural)) {
       navigate(
-        `/settings/objects/${
+        SettingsPath.ObjectNewFieldConfigure,
-          objectMetadataItem.namePlural
+        {
-        }/new-field/configure?fieldType=${FieldMetadataType.Select}`,
+          objectNamePlural: objectMetadataItem.namePlural,
+        },
+        {
+          fieldType: FieldMetadataType.Select,
+        },
       );
     } else {
-      navigate(`/settings/objects`);
+      navigate(SettingsPath.Objects);
     }
   }, [
     setNavigationMemorizedUrl,

packages/twenty-front/src/modules/workflow/components/OverrideWorkflowDraftConfirmationModal.tsx

@@ -1,13 +1,14 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { AppPath } from '@/types/AppPath';
 import {
   ConfirmationModal,
   StyledCenteredButton,
 } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
 import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { getAppPath } from '~/utils/navigation/getAppPath';
 
 export const OverrideWorkflowDraftConfirmationModal = ({
   workflowId,
@@ -24,7 +25,7 @@ export const OverrideWorkflowDraftConfirmationModal = ({
   const { createDraftFromWorkflowVersion } =
     useCreateDraftFromWorkflowVersion();
 
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
 
   const handleOverrideDraft = async () => {
     await createDraftFromWorkflowVersion({
@@ -32,7 +33,10 @@ export const OverrideWorkflowDraftConfirmationModal = ({
       workflowVersionIdToCopy,
     });
 
-    navigate(buildShowPageURL(CoreObjectNameSingular.Workflow, workflowId));
+    navigate(AppPath.RecordShowPage, {
+      objectNameSingular: CoreObjectNameSingular.Workflow,
+      objectRecordId: workflowId,
+    });
   };
 
   return (
@@ -46,7 +50,10 @@ export const OverrideWorkflowDraftConfirmationModal = ({
         deleteButtonText={'Override Draft'}
         AdditionalButtons={
           <StyledCenteredButton
-            to={buildShowPageURL(CoreObjectNameSingular.Workflow, workflowId)}
+            to={getAppPath(AppPath.RecordShowPage, {
+              objectNameSingular: CoreObjectNameSingular.Workflow,
+              objectRecordId: workflowId,
+            })}
             onClick={() => {
               setOpenOverrideWorkflowDraftConfirmationModal(false);
             }}

packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx

@@ -1,7 +1,7 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
-import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
+import { AppPath } from '@/types/AppPath';
 import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
 import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion';
 import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
@@ -9,7 +9,6 @@ import { useDeactivateWorkflowVersion } from '@/workflow/hooks/useDeactivateWork
 import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
 import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
 import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow';
-import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import {
   Button,
@@ -18,6 +17,7 @@ import {
   IconPower,
   isDefined,
 } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 
 export const RecordShowPageWorkflowVersionHeader = ({
   workflowVersionId,
@@ -81,7 +81,7 @@ export const RecordShowPageWorkflowVersionHeader = ({
     openOverrideWorkflowDraftConfirmationModalState,
   );
 
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
 
   return (
     <>
@@ -100,12 +100,10 @@ export const RecordShowPageWorkflowVersionHeader = ({
                 workflowVersionIdToCopy: workflowVersion.id,
               });
 
-              navigate(
+              navigate(AppPath.RecordShowPage, {
-                buildShowPageURL(
+                objectNameSingular: CoreObjectNameSingular.Workflow,
-                  CoreObjectNameSingular.Workflow,
+                objectRecordId: workflowVersion.workflow.id,
-                  workflowVersion.workflow.id,
+              });
-                ),
-              );
             }
           }}
         />

packages/twenty-front/src/pages/auth/Authorize.tsx

@@ -1,12 +1,13 @@
 import { AppPath } from '@/types/AppPath';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 
+import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { MainButton, UndecoratedLink } from 'twenty-ui';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { isDefined } from '~/utils/isDefined';
-import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 
 type App = { id: string; name: string; logo: string };
 
@@ -54,7 +55,7 @@ const StyledButtonContainer = styled.div`
   width: 100%;
 `;
 export const Authorize = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const [searchParam] = useSearchParams();
   const { redirect } = useRedirect();
   //TODO: Replace with db call for registered third party apps

packages/twenty-front/src/pages/auth/PasswordReset.tsx

@@ -3,6 +3,7 @@ import { Logo } from '@/auth/components/Logo';
 import { Title } from '@/auth/components/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
+import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { AppPath } from '@/types/AppPath';
@@ -18,16 +19,16 @@ import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
-import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { AnimatedEaseIn, MainButton } from 'twenty-ui';
 import { z } from 'zod';
 import {
   useUpdatePasswordViaResetTokenMutation,
   useValidatePasswordResetTokenQuery,
 } from '~/generated/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { logError } from '~/utils/logError';
-import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 
 const validationSchema = z
   .object({
@@ -74,7 +75,7 @@ export const PasswordReset = () => {
 
   const workspacePublicData = useRecoilValue(workspacePublicDataState);
 
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
 
   const [email, setEmail] = useState('');
   const [isTokenValid, setIsTokenValid] = useState(false);

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -12,15 +12,14 @@ import {
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { currentUserState } from '@/auth/states/currentUserState';
+import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
+import { AppPath } from '@/types/AppPath';
+import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import {
   OnboardingStatus,
   useGetCurrentUserLazyQuery,
 } from '~/generated/graphql';
-import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
-import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
-import { AppPath } from '@/types/AppPath';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
 const StyledCheckContainer = styled.div`
   align-items: center;
@@ -41,7 +40,7 @@ const StyledButtonContainer = styled.div`
 
 export const PaymentSuccess = () => {
   const theme = useTheme();
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const subscriptionStatus = useSubscriptionStatus();
   const onboardingStatus = useOnboardingStatus();
   const [getCurrentUser] = useGetCurrentUserLazyQuery();

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

@@ -8,10 +8,10 @@ import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 type ReleaseNote = {
   slug: string;
@@ -112,7 +112,7 @@ export const Releases = () => {
       links={[
         {
           children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: <Trans>Releases</Trans> },
       ]}

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

@@ -14,7 +14,6 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-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';
@@ -28,6 +27,7 @@ import {
   useUpdateBillingSubscriptionMutation,
 } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 type SwitchInfo = {
   newInterval: SubscriptionInterval;
@@ -130,7 +130,7 @@ export const SettingsBilling = () => {
       links={[
         {
           children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: <Trans>Billing</Trans> },
       ]}

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

@@ -7,9 +7,9 @@ import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsProfile = () => {
   const { t } = useLingui();
@@ -20,7 +20,7 @@ export const SettingsProfile = () => {
       links={[
         {
           children: <Trans>User</Trans>,
-          href: getSettingsPagePath(SettingsPath.ProfilePage),
+          href: getSettingsPath(SettingsPath.ProfilePage),
         },
         { children: <Trans>Profile</Trans> },
       ]}

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

@@ -12,12 +12,12 @@ import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWork
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { NameField } from '@/settings/workspace/components/NameField';
 import { ToggleImpersonate } from '@/settings/workspace/components/ToggleImpersonate';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import packageJson from '../../../package.json';
 
 export const SettingsWorkspace = () => {
@@ -30,7 +30,7 @@ export const SettingsWorkspace = () => {
       links={[
         {
           children: t`Workspace`,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: t`General` },
       ]}
@@ -51,7 +51,7 @@ export const SettingsWorkspace = () => {
                 title={t`Domain`}
                 description={t`Edit your subdomain name or set a custom domain.`}
               />
-              <UndecoratedLink to={getSettingsPagePath(SettingsPath.Domain)}>
+              <UndecoratedLink to={getSettingsPath(SettingsPath.Domain)}>
                 <SettingsCard
                   title={t`Customize Domain`}
                   Icon={<IconWorld />}

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

@@ -23,7 +23,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-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';
@@ -37,6 +36,7 @@ import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam'
 import { formatDistanceToNow } from 'date-fns';
 import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
 import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
 import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';
@@ -144,7 +144,7 @@ export const SettingsWorkspaceMembers = () => {
       links={[
         {
           children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: <Trans>Members</Trans> },
       ]}

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

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import {
   PageDecorator,
@@ -10,13 +9,14 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/utils/sleep';
 
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { SettingsBilling } from '../SettingsBilling';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsBilling',
   component: SettingsBilling,
   decorators: [PageDecorator],
-  args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
+  args: { routePath: getSettingsPath(SettingsPath.Billing) },
   parameters: {
     msw: graphqlMocks,
   },

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -12,9 +12,9 @@ import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components
 import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsAccounts = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -39,7 +39,7 @@ export const SettingsAccounts = () => {
       links={[
         {
           children: 'User',
-          href: getSettingsPagePath(SettingsPath.ProfilePage),
+          href: getSettingsPath(SettingsPath.ProfilePage),
         },
         { children: 'Account' },
       ]}

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -1,10 +1,10 @@
 import { SettingsAccountsCalendarChannelsContainer } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Section } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsAccountsCalendars = () => {
   const { t } = useLingui();
@@ -15,11 +15,11 @@ export const SettingsAccountsCalendars = () => {
       links={[
         {
           children: <Trans>User</Trans>,
-          href: getSettingsPagePath(SettingsPath.ProfilePage),
+          href: getSettingsPath(SettingsPath.ProfilePage),
         },
         {
           children: <Trans>Accounts</Trans>,
-          href: getSettingsPagePath(SettingsPath.Accounts),
+          href: getSettingsPath(SettingsPath.Accounts),
         },
         { children: <Trans>Calendars</Trans> },
       ]}

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx

@@ -1,9 +1,9 @@
 import { SettingsAccountsMessageChannelsContainer } from '@/settings/accounts/components/SettingsAccountsMessageChannelsContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Section } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsAccountsEmails = () => (
   <SubMenuTopBarContainer
@@ -11,11 +11,11 @@ export const SettingsAccountsEmails = () => (
     links={[
       {
         children: 'User',
-        href: getSettingsPagePath(SettingsPath.ProfilePage),
+        href: getSettingsPath(SettingsPath.ProfilePage),
       },
       {
         children: 'Accounts',
-        href: getSettingsPagePath(SettingsPath.Accounts),
+        href: getSettingsPath(SettingsPath.Accounts),
       },
       { children: 'Emails' },
     ]}

packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx

@@ -1,8 +1,8 @@
 import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsNewAccount = () => {
   return (
@@ -11,11 +11,11 @@ export const SettingsNewAccount = () => {
       links={[
         {
           children: 'User',
-          href: getSettingsPagePath(SettingsPath.ProfilePage),
+          href: getSettingsPath(SettingsPath.ProfilePage),
         },
         {
           children: 'Accounts',
-          href: getSettingsPagePath(SettingsPath.Accounts),
+          href: getSettingsPath(SettingsPath.Accounts),
         },
         { children: `New` },
       ]}

packages/twenty-front/src/pages/settings/admin-panel/SettingsAdmin.tsx

@@ -1,8 +1,8 @@
+import { SettingsAdminContent } from '@/settings/admin-panel/components/SettingsAdminContent';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
-import { SettingsAdminContent } from '@/settings/admin-panel/components/SettingsAdminContent';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsAdmin = () => {
   return (
@@ -11,7 +11,7 @@ export const SettingsAdmin = () => {
       links={[
         {
           children: 'Other',
-          href: getSettingsPagePath(SettingsPath.AdminPanel),
+          href: getSettingsPath(SettingsPath.AdminPanel),
         },
         { children: 'Server Admin Panel' },
       ]}

packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx

@@ -1,45 +0,0 @@
-// @ts-expect-error external library has a typing issue
-import { RevertConnect } from '@revertdotdev/revert-react';
-
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
-import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { useRecoilValue } from 'recoil';
-import { Section } from 'twenty-ui';
-
-const REVERT_PUBLIC_KEY = 'pk_live_a87fee8c-28c7-494f-99a3-996ff89f9918';
-
-export const SettingsCRMMigration = () => {
-  const { t } = useLingui();
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  return (
-    <SubMenuTopBarContainer
-      title={t`Migrate`}
-      links={[
-        {
-          children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
-        },
-        { children: <Trans>Migrate</Trans> },
-      ]}
-      actionButton={<SettingsReadDocumentationButton />}
-    >
-      <SettingsPageContainer>
-        <SettingsHeaderContainer></SettingsHeaderContainer>
-        <Section>
-          <RevertConnect
-            config={{
-              revertToken: REVERT_PUBLIC_KEY,
-              tenantId: currentWorkspace?.id,
-            }}
-          />
-        </Section>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
-  );
-};

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

@@ -1,7 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
 import { H2Title, Section } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -13,18 +12,19 @@ import {
   settingsDataModelObjectAboutFormSchema,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm';
 import { settingsCreateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsCreateObjectInputSchema';
-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';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const newObjectFormSchema = settingsDataModelObjectAboutFormSchema;
 
 type SettingsDataModelNewObjectFormValues = z.infer<typeof newObjectFormSchema>;
 
 export const SettingsNewObject = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const { t } = useLingui();
   const { enqueueSnackBar } = useSnackBar();
 
@@ -47,7 +47,7 @@ export const SettingsNewObject = () => {
         variant: SnackBarVariant.Success,
       });
 
-      navigate(getSettingsPagePath(SettingsPath.Objects));
+      navigate(SettingsPath.Objects);
     } catch (error) {
       if (error instanceof z.ZodError) {
         enqueueSnackBar(t`Invalid object data`, {
@@ -68,11 +68,11 @@ export const SettingsNewObject = () => {
         links={[
           {
             children: <Trans>Workspace</Trans>,
-            href: getSettingsPagePath(SettingsPath.Workspace),
+            href: getSettingsPath(SettingsPath.Workspace),
           },
           {
             children: <Trans>Objects</Trans>,
-            href: getSettingsPagePath(SettingsPath.Objects),
+            href: getSettingsPath(SettingsPath.Objects),
           },
           { children: <Trans>New</Trans> },
         ]}
@@ -89,9 +89,7 @@ export const SettingsNewObject = () => {
                 <SettingsDataModelObjectAboutForm />
               </Section>
               <SaveAndCancelButtons
-                onCancel={() =>
+                onCancel={() => navigate(SettingsPath.Objects)}
-                  navigate(getSettingsPagePath(SettingsPath.Objects))
-                }
               />
             </form>
           </FormProvider>

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@@ -8,7 +8,6 @@ import { ObjectIndexes } from '@/settings/data-model/object-details/components/t
 import { ObjectSettings } from '@/settings/data-model/object-details/components/tabs/ObjectSettings';
 import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
@@ -31,8 +30,10 @@ import {
   isDefined,
 } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
 import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledContentContainer = styled.div`
   flex: 1;
@@ -51,7 +52,7 @@ const StyledTitleContainer = styled.div`
 `;
 
 export const SettingsObjectDetailPage = () => {
-  const navigate = useNavigate();
+  const navigateApp = useNavigateApp();
 
   const { objectNamePlural = '' } = useParams();
   const { findActiveObjectMetadataItemByNamePlural } =
@@ -76,10 +77,10 @@ export const SettingsObjectDetailPage = () => {
   useEffect(() => {
     if (objectNamePlural === updatedObjectNamePlural)
       setUpdatedObjectNamePlural('');
-    if (!isDefined(objectMetadataItem)) navigate(AppPath.NotFound);
+    if (!isDefined(objectMetadataItem)) navigateApp(AppPath.NotFound);
   }, [
     objectMetadataItem,
-    navigate,
+    navigateApp,
     objectNamePlural,
     updatedObjectNamePlural,
     setUpdatedObjectNamePlural,
@@ -142,9 +143,9 @@ export const SettingsObjectDetailPage = () => {
         links={[
           {
             children: 'Workspace',
-            href: getSettingsPagePath(SettingsPath.Workspace),
+            href: getSettingsPath(SettingsPath.Workspace),
           },
-          { children: 'Objects', href: '/settings/objects' },
+          { children: 'Objects', href: getSettingsPath(SettingsPath.Objects) },
           {
             children: objectMetadataItem.labelPlural,
           },

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

@@ -3,7 +3,7 @@ import omit from 'lodash.omit';
 import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import {
   Button,
   H2Title,
@@ -28,14 +28,16 @@ import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/field
 import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
-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';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 //TODO: fix this type
 type SettingsDataModelFieldEditFormValues = z.infer<
@@ -44,7 +46,9 @@ type SettingsDataModelFieldEditFormValues = z.infer<
   any;
 
 export const SettingsObjectFieldEdit = () => {
-  const navigate = useNavigate();
+  const navigateSettings = useNavigateSettings();
+  const navigateApp = useNavigateApp();
+
   const { enqueueSnackBar } = useSnackBar();
 
   const { objectNamePlural = '', fieldName = '' } = useParams();
@@ -78,9 +82,9 @@ export const SettingsObjectFieldEdit = () => {
 
   useEffect(() => {
     if (!objectMetadataItem || !fieldMetadataItem) {
-      navigate(AppPath.NotFound);
+      navigateApp(AppPath.NotFound);
     }
-  }, [navigate, objectMetadataItem, fieldMetadataItem]);
+  }, [navigateApp, objectMetadataItem, fieldMetadataItem]);
 
   const { isDirty, isValid, isSubmitting } = formConfig.formState;
   const canSave = isDirty && isValid && !isSubmitting;
@@ -127,7 +131,9 @@ export const SettingsObjectFieldEdit = () => {
           Object.keys(otherDirtyFields),
         );
 
-        navigate(`/settings/objects/${objectNamePlural}`);
+        navigateSettings(SettingsPath.ObjectDetail, {
+          objectNamePlural,
+        });
 
         await updateOneFieldMetadataItem({
           objectMetadataId: objectMetadataItem.id,
@@ -144,12 +150,16 @@ export const SettingsObjectFieldEdit = () => {
 
   const handleDeactivate = async () => {
     await deactivateMetadataField(fieldMetadataItem.id, objectMetadataItem.id);
-    navigate(`/settings/objects/${objectNamePlural}`);
+    navigateSettings(SettingsPath.ObjectDetail, {
+      objectNamePlural,
+    });
   };
 
   const handleActivate = async () => {
     await activateMetadataField(fieldMetadataItem.id, objectMetadataItem.id);
-    navigate(`/settings/objects/${objectNamePlural}`);
+    navigateSettings(SettingsPath.ObjectDetail, {
+      objectNamePlural,
+    });
   };
 
   return (
@@ -161,15 +171,17 @@ export const SettingsObjectFieldEdit = () => {
           links={[
             {
               children: 'Workspace',
-              href: getSettingsPagePath(SettingsPath.Workspace),
+              href: getSettingsPath(SettingsPath.Workspace),
             },
             {
               children: 'Objects',
-              href: '/settings/objects',
+              href: getSettingsPath(SettingsPath.Objects),
             },
             {
               children: objectMetadataItem.labelPlural,
-              href: `/settings/objects/${objectNamePlural}`,
+              href: getSettingsPath(SettingsPath.ObjectDetail, {
+                objectNamePlural,
+              }),
             },
             {
               children: fieldMetadataItem.label,
@@ -179,7 +191,11 @@ export const SettingsObjectFieldEdit = () => {
             <SaveAndCancelButtons
               isSaveDisabled={!canSave}
               isCancelDisabled={isSubmitting}
-              onCancel={() => navigate(`/settings/objects/${objectNamePlural}`)}
+              onCancel={() =>
+                navigateSettings(SettingsPath.ObjectDetail, {
+                  objectNamePlural,
+                })
+              }
               onSave={formConfig.handleSubmit(handleSave)}
             />
           }

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

@@ -14,6 +14,7 @@ import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fi
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 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';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
@@ -24,13 +25,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import pick from 'lodash.pick';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { H2Title, Section } from 'twenty-ui';
 import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { DEFAULT_ICONS_BY_FIELD_TYPE } from '~/pages/settings/data-model/constants/DefaultIconsByFieldType';
 import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 type SettingsDataModelNewFieldFormValues = z.infer<
   ReturnType<typeof settingsFieldFormSchema>
@@ -40,7 +44,9 @@ type SettingsDataModelNewFieldFormValues = z.infer<
 const DEFAULT_ICON_FOR_NEW_FIELD = 'IconUsers';
 
 export const SettingsObjectNewFieldConfigure = () => {
-  const navigate = useNavigate();
+  const navigateApp = useNavigateApp();
+  const navigate = useNavigateSettings();
+
   const { objectNamePlural = '' } = useParams();
   const [searchParams] = useSearchParams();
   const fieldType =
@@ -115,9 +121,9 @@ export const SettingsObjectNewFieldConfigure = () => {
 
   useEffect(() => {
     if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
+      navigateApp(AppPath.NotFound);
     }
-  }, [activeObjectMetadataItem, navigate]);
+  }, [activeObjectMetadataItem, navigateApp]);
 
   if (!activeObjectMetadataItem) return null;
 
@@ -163,7 +169,9 @@ export const SettingsObjectNewFieldConfigure = () => {
         });
       }
 
-      navigate(`/settings/objects/${objectNamePlural}`);
+      navigate(SettingsPath.ObjectDetail, {
+        objectNamePlural,
+      });
 
       // TODO: fix optimistic update logic
       // Forcing a refetch for now but it's not ideal
@@ -190,7 +198,9 @@ export const SettingsObjectNewFieldConfigure = () => {
             { children: 'Objects', href: '/settings/objects' },
             {
               children: activeObjectMetadataItem.labelPlural,
-              href: `/settings/objects/${objectNamePlural}`,
+              href: getSettingsPath(SettingsPath.ObjectDetail, {
+                objectNamePlural,
+              }),
             },
 
             { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
@@ -201,7 +211,13 @@ export const SettingsObjectNewFieldConfigure = () => {
               isCancelDisabled={isSubmitting}
               onCancel={() =>
                 navigate(
-                  `/settings/objects/${objectNamePlural}/new-field/select?fieldType=${fieldType}`,
+                  SettingsPath.ObjectNewFieldSelect,
+                  {
+                    objectNamePlural,
+                  },
+                  {
+                    fieldType,
+                  },
                 )
               }
               onSave={formConfig.handleSubmit(handleSave)}

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

@@ -6,14 +6,17 @@ import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/Set
 import { SettingsObjectNewFieldSelector } from '@/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { isDefined } from 'twenty-ui';
 import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const settingsDataModelFieldTypeFormSchema = z.object({
   type: z.enum(
@@ -29,7 +32,7 @@ export type SettingsDataModelFieldTypeFormValues = z.infer<
 >;
 
 export const SettingsObjectNewFieldSelect = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateApp();
   const { objectNamePlural = '' } = useParams();
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
@@ -69,7 +72,9 @@ export const SettingsObjectNewFieldSelect = () => {
             { children: 'Objects', href: '/settings/objects' },
             {
               children: activeObjectMetadataItem.labelPlural,
-              href: `/settings/objects/${objectNamePlural}`,
+              href: getSettingsPath(SettingsPath.ObjectDetail, {
+                objectNamePlural,
+              }),
             },
             { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
           ]}

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

@@ -1,9 +1,9 @@
 import { ReactFlowProvider } from '@xyflow/react';
 
 import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverview';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsObjectOverview = () => {
   return (
@@ -11,7 +11,7 @@ export const SettingsObjectOverview = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: 'Objects', href: '/settings/objects' },
         {

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

@@ -10,7 +10,6 @@ import {
 import { SettingsObjectCoverImage } from '@/settings/data-model/objects/components/SettingsObjectCoverImage';
 import { SettingsObjectInactiveMenuDropDown } from '@/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown';
 import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
@@ -35,6 +34,7 @@ import {
 } from 'twenty-ui';
 import { GET_SETTINGS_OBJECT_TABLE_METADATA } from '~/pages/settings/data-model/constants/SettingsObjectTableMetadata';
 import { SettingsObjectTableItem } from '~/pages/settings/data-model/types/SettingsObjectTableItem';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledIconChevronRight = styled(IconChevronRight)`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -143,7 +143,7 @@ export const SettingsObjects = () => {
     <SubMenuTopBarContainer
       title={t`Data model`}
       actionButton={
-        <UndecoratedLink to={getSettingsPagePath(SettingsPath.NewObject)}>
+        <UndecoratedLink to={getSettingsPath(SettingsPath.NewObject)}>
           <Button
             Icon={IconPlus}
             title={t`Add object`}
@@ -155,7 +155,7 @@ export const SettingsObjects = () => {
       links={[
         {
           children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: <Trans>Objects</Trans> },
       ]}
@@ -205,9 +205,10 @@ export const SettingsObjects = () => {
                             stroke={theme.icon.stroke.sm}
                           />
                         }
-                        link={`/settings/objects/${
+                        link={getSettingsPath(SettingsPath.ObjectDetail, {
-                          objectSettingsItem.objectMetadataItem.namePlural
+                          objectNamePlural:
-                        }`}
+                            objectSettingsItem.objectMetadataItem.namePlural,
+                        })}
                       />
                     ),
                   )}

packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx

@@ -2,13 +2,13 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
 import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
 import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Button, H2Title, IconPlus, MOBILE_VIEWPORT, Section } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledButtonContainer = styled.div`
   display: flex;
@@ -37,7 +37,7 @@ export const SettingsDevelopers = () => {
       links={[
         {
           children: <Trans>Workspace</Trans>,
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         { children: <Trans>Developers</Trans> },
       ]}
@@ -56,7 +56,7 @@ export const SettingsDevelopers = () => {
                 title={t`Create API key`}
                 size="small"
                 variant="secondary"
-                to={'/settings/developers/api-keys/new'}
+                to={getSettingsPath(SettingsPath.DevelopersNewApiKey)}
               />
             </StyledButtonContainer>
           </Section>
@@ -72,7 +72,7 @@ export const SettingsDevelopers = () => {
                 title={t`Create Webhook`}
                 size="small"
                 variant="secondary"
-                to={'/settings/developers/webhooks/new'}
+                to={getSettingsPath(SettingsPath.DevelopersNewWebhook)}
               />
             </StyledButtonContainer>
           </Section>

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

@@ -1,3 +1,4 @@
+import { SettingsPath } from '@/types/SettingsPath';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
@@ -7,12 +8,13 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
   component: SettingsDevelopersApiKeysNew,
   decorators: [PageDecorator],
-  args: { routePath: '/settings/developers/api-keys/new' },
+  args: { routePath: getSettingsPath(SettingsPath.DevelopersNewApiKey) },
   parameters: {
     msw: graphqlMocks,
   },

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { DateTime } from 'luxon';
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import { Button, H2Title, IconRepeat, IconTrash, Section } from 'twenty-ui';
 
@@ -17,7 +17,6 @@ import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTo
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { computeNewExpirationDate } from '@/settings/developers/utils/computeNewExpirationDate';
 import { formatExpiration } from '@/settings/developers/utils/formatExpiration';
-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';
@@ -25,6 +24,8 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledInfo = styled.span`
   color: ${({ theme }) => theme.font.color.light};
@@ -47,7 +48,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
   const [isDeleteApiKeyModalOpen, setIsDeleteApiKeyModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const { apiKeyId = '' } = useParams();
 
   const [apiKeyToken, setApiKeyToken] = useRecoilState(apiKeyTokenState);
@@ -68,7 +69,6 @@ export const SettingsDevelopersApiKeyDetail = () => {
       setApiKeyName(record.name);
     },
   });
-  const developerPath = getSettingsPagePath(SettingsPath.Developers);
 
   const deleteIntegration = async (redirect = true) => {
     setIsLoading(true);
@@ -79,7 +79,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
         updateOneRecordInput: { revokedAt: DateTime.now().toString() },
       });
       if (redirect) {
-        navigate(developerPath);
+        navigate(SettingsPath.Developers);
       }
     } catch (err) {
       enqueueSnackBar(`Error deleting api key: ${err}`, {
@@ -114,6 +114,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
       token: tokenData.data?.generateApiKeyToken.token,
     };
   };
+
   const regenerateApiKey = async () => {
     setIsLoading(true);
     try {
@@ -127,7 +128,9 @@ export const SettingsDevelopersApiKeyDetail = () => {
 
         if (isNonEmptyString(apiKey?.token)) {
           setApiKeyToken(apiKey.token);
-          navigate(`/settings/developers/api-keys/${apiKey.id}`);
+          navigate(SettingsPath.DevelopersApiKeyDetail, {
+            apiKeyId: apiKey.id,
+          });
         }
       }
     } catch (err) {
@@ -147,9 +150,12 @@ export const SettingsDevelopersApiKeyDetail = () => {
           links={[
             {
               children: 'Workspace',
-              href: getSettingsPagePath(SettingsPath.Workspace),
+              href: getSettingsPath(SettingsPath.Workspace),
+            },
+            {
+              children: 'Developers',
+              href: getSettingsPath(SettingsPath.Developers),
             },
-            { children: 'Developers', href: developerPath },
             { children: `${apiKeyName} API Key` },
           ]}
         >

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

@@ -1,6 +1,5 @@
 import { DateTime } from 'luxon';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { H2Title, Section } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -10,7 +9,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { EXPIRATION_DATES } from '@/settings/developers/constants/ExpirationDates';
 import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -18,11 +16,13 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsDevelopersApiKeysNew = () => {
   const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
-  const navigate = useNavigate();
+  const navigateSettings = useNavigateSettings();
   const setApiKeyToken = useSetRecoilState(apiKeyTokenState);
   const [formValues, setFormValues] = useState<{
     name: string;
@@ -58,7 +58,9 @@ export const SettingsDevelopersApiKeysNew = () => {
     });
     if (isDefined(tokenData.data?.generateApiKeyToken)) {
       setApiKeyToken(tokenData.data.generateApiKeyToken.token);
-      navigate(`/settings/developers/api-keys/${newApiKey.id}`);
+      navigateSettings(SettingsPath.DevelopersApiKeyDetail, {
+        apiKeyId: newApiKey.id,
+      });
     }
   };
   const canSave = !!formValues.name && createOneApiKey;
@@ -68,11 +70,11 @@ export const SettingsDevelopersApiKeysNew = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Developers',
-          href: getSettingsPagePath(SettingsPath.Developers),
+          href: getSettingsPath(SettingsPath.Developers),
         },
         { children: 'New Key' },
       ]}
@@ -80,7 +82,7 @@ export const SettingsDevelopersApiKeysNew = () => {
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
           onCancel={() => {
-            navigate('/settings/developers');
+            navigateSettings(SettingsPath.Developers);
           }}
           onSave={handleSave}
         />

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

@@ -1,7 +1,7 @@
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import {
   Button,
   H2Title,
@@ -28,7 +28,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { Webhook } from '@/settings/developers/types/webhook/Webhook';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Select, SelectOption } from '@/ui/input/components/Select';
 import { TextArea } from '@/ui/input/components/TextArea';
@@ -38,8 +37,10 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
 import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const OBJECT_DROPDOWN_WIDTH = 340;
 const ACTION_DROPDOWN_WIDTH = 140;
@@ -66,7 +67,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
   const { objectMetadataItems } = useObjectMetadataItems();
   const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
   const isMobile = useIsMobile();
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const { webhookId = '' } = useParams();
 
   const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
@@ -108,11 +109,9 @@ export const SettingsDevelopersWebhooksDetail = () => {
     objectNameSingular: CoreObjectNameSingular.Webhook,
   });
 
-  const developerPath = getSettingsPagePath(SettingsPath.Developers);
-
   const deleteWebhook = () => {
     deleteOneWebhook(webhookId);
-    navigate(developerPath);
+    navigate(SettingsPath.Developers);
   };
 
   const isAnalyticsV2Enabled = useIsFeatureEnabled(
@@ -163,7 +162,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
         secret: secret,
       },
     });
-    navigate(developerPath);
+    navigate(SettingsPath.Developers);
   };
 
   const addEmptyOperationIfNecessary = (
@@ -210,16 +209,19 @@ export const SettingsDevelopersWebhooksDetail = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Developers',
+          href: getSettingsPath(SettingsPath.Developers),
         },
-        { children: 'Developers', href: developerPath },
         { children: 'Webhook' },
       ]}
       actionButton={
         <SaveAndCancelButtons
           isSaveDisabled={!isDirty}
           onCancel={() => {
-            navigate(developerPath);
+            navigate(SettingsPath.Developers);
           }}
           onSave={handleSave}
         />

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

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { H2Title, isDefined, Section } from 'twenty-ui';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -7,14 +6,16 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { Webhook } from '@/settings/developers/types/webhook/Webhook';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { isValidUrl } from '~/utils/url/isValidUrl';
 
 export const SettingsDevelopersWebhooksNew = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
+
   const [formValues, setFormValues] = useState<{
     targetUrl: string;
     operations: string[];
@@ -40,7 +41,9 @@ export const SettingsDevelopersWebhooksNew = () => {
     if (!newWebhook) {
       return;
     }
-    navigate(`/settings/developers/webhooks/${newWebhook.id}`);
+    navigate(SettingsPath.DevelopersNewWebhookDetail, {
+      webhookId: newWebhook.id,
+    });
   };
 
   const canSave =
@@ -67,11 +70,11 @@ export const SettingsDevelopersWebhooksNew = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Developers',
-          href: getSettingsPagePath(SettingsPath.Developers),
+          href: getSettingsPath(SettingsPath.Developers),
         },
         { children: 'New Webhook' },
       ]}
@@ -79,7 +82,7 @@ export const SettingsDevelopersWebhooksNew = () => {
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
           onCancel={() => {
-            navigate(getSettingsPagePath(SettingsPath.Developers));
+            navigate(SettingsPath.Developers);
           }}
           onSave={handleSave}
         />

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { H2Title, Section } from 'twenty-ui';
 
 import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
@@ -8,14 +8,15 @@ import { SettingsIntegrationPreview } from '@/settings/integrations/components/S
 import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard';
 import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsIntegrationDatabase = () => {
   const { databaseKey = '' } = useParams();
-  const navigate = useNavigate();
+  const navigateApp = useNavigateApp();
 
   const [integrationCategoryAll] = useSettingsIntegrationCategories();
   const integration = integrationCategoryAll.integrations.find(
@@ -28,9 +29,9 @@ export const SettingsIntegrationDatabase = () => {
 
   useEffect(() => {
     if (!isIntegrationAvailable) {
-      navigate(AppPath.NotFound);
+      navigateApp(AppPath.NotFound);
     }
-  }, [integration, databaseKey, navigate, isIntegrationAvailable]);
+  }, [integration, databaseKey, navigateApp, isIntegrationAvailable]);
 
   const { connections } = useGetDatabaseConnections({
     databaseKey,
@@ -45,11 +46,11 @@ export const SettingsIntegrationDatabase = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Integrations',
-          href: getSettingsPagePath(SettingsPath.Integrations),
+          href: getSettingsPath(SettingsPath.Integrations),
         },
         { children: integration.text },
       ]}

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx

@@ -1,8 +1,8 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsIntegrationEditDatabaseConnection = () => {
   return (
@@ -11,11 +11,11 @@ export const SettingsIntegrationEditDatabaseConnection = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Integrations',
-          href: getSettingsPagePath(SettingsPath.Integrations),
+          href: getSettingsPath(SettingsPath.Integrations),
         },
         { children: 'Edit connection' },
       ]}

packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx

@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { z } from 'zod';
 
 import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@@ -15,7 +15,6 @@ import {
 } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
 import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
-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';
@@ -23,6 +22,9 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { H2Title, Section } from 'twenty-ui';
 import { CreateRemoteServerInput } from '~/generated-metadata/graphql';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const createRemoteServerInputPostgresSchema =
   settingsIntegrationPostgreSQLConnectionFormSchema.transform<CreateRemoteServerInput>(
@@ -67,7 +69,8 @@ type SettingsIntegrationNewConnectionFormValues =
 
 export const SettingsIntegrationNewDatabaseConnection = () => {
   const { databaseKey = '' } = useParams();
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
+  const navigateApp = useNavigateApp();
 
   const [integrationCategoryAll] = useSettingsIntegrationCategories();
   const integration = integrationCategoryAll.integrations.find(
@@ -83,9 +86,9 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
 
   useEffect(() => {
     if (!isIntegrationAvailable) {
-      navigate(AppPath.NotFound);
+      navigateApp(AppPath.NotFound);
     }
-  }, [integration, databaseKey, navigate, isIntegrationAvailable]);
+  }, [integration, databaseKey, navigateApp, isIntegrationAvailable]);
 
   const newConnectionSchema =
     databaseKey === 'postgresql'
@@ -99,7 +102,7 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
 
   if (!isIntegrationAvailable) return null;
 
-  const settingsIntegrationsPagePath = getSettingsPagePath(
+  const settingsIntegrationsPagePath = getSettingsPath(
     SettingsPath.Integrations,
   );
 
@@ -118,9 +121,14 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
 
       const connectionId = createdConnection.data?.createOneRemoteServer.id;
 
-      navigate(
+      if (!connectionId) {
-        `${settingsIntegrationsPagePath}/${databaseKey}/${connectionId}`,
+        throw new Error('Failed to create connection');
-      );
+      }
+
+      navigate(SettingsPath.IntegrationDatabaseConnection, {
+        databaseKey,
+        connectionId,
+      });
     } catch (error) {
       enqueueSnackBar((error as Error).message, {
         variant: SnackBarVariant.Error,
@@ -134,7 +142,7 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Integrations',
@@ -150,7 +158,9 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
           onCancel={() =>
-            navigate(`${settingsIntegrationsPagePath}/${databaseKey}`)
+            navigate(SettingsPath.IntegrationDatabase, {
+              databaseKey,
+            })
           }
           onSave={handleSave}
         />