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/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx

@@ -9,7 +9,6 @@ import { useGetOneServerlessFunctionSourceCode } from '@/settings/serverless-fun
 import { usePublishOneServerlessFunction } from '@/settings/serverless-functions/hooks/usePublishOneServerlessFunction';
 import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
-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,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const TAB_LIST_COMPONENT_ID = 'serverless-function-detail';
 
@@ -198,11 +198,11 @@ export const SettingsServerlessFunctionDetail = () => {
         links={[
           {
             children: 'Workspace',
-            href: getSettingsPagePath(SettingsPath.Workspace),
+            href: getSettingsPath(SettingsPath.Workspace),
           },
           {
             children: 'Functions',
-            href: getSettingsPagePath(SettingsPath.ServerlessFunctions),
+            href: getSettingsPath(SettingsPath.ServerlessFunctions),
           },
           { children: `${formValues.name}` },
         ]}

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx

@@ -1,8 +1,8 @@
 import { SettingsServerlessFunctionsTable } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTable';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import { Button, IconPlus, Section, UndecoratedLink } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsServerlessFunctions = () => {
   return (
@@ -10,7 +10,7 @@ export const SettingsServerlessFunctions = () => {
       title="Functions"
       actionButton={
         <UndecoratedLink
-          to={getSettingsPagePath(SettingsPath.NewServerlessFunction)}
+          to={getSettingsPath(SettingsPath.NewServerlessFunction)}
         >
           <Button
             Icon={IconPlus}
@@ -23,7 +23,7 @@ export const SettingsServerlessFunctions = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Functions',

packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx

@@ -1,22 +1,22 @@
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
-import { useNavigate } from 'react-router-dom';
 
 import { SettingsServerlessFunctionNewForm } from '@/settings/serverless-functions/components/SettingsServerlessFunctionNewForm';
 import { useCreateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useCreateOneServerlessFunction';
 import { ServerlessFunctionNewFormValues } 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 { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 export const SettingsServerlessFunctionsNew = () => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const [formValues, setFormValues] = useState<ServerlessFunctionNewFormValues>(
     {
       name: '',
@@ -34,11 +34,9 @@ export const SettingsServerlessFunctionsNew = () => {
     if (!isDefined(newServerlessFunction?.data)) {
       return;
     }
-    navigate(
-      getSettingsPagePath(SettingsPath.ServerlessFunctions, {
-        id: newServerlessFunction.data.createOneServerlessFunction.id,
-      }),
-    );
+    navigate(SettingsPath.ServerlessFunctions, {
+      id: newServerlessFunction.data.createOneServerlessFunction.id,
+    });
   };
 
   const onChange = (key: string) => {
@@ -69,7 +67,7 @@ export const SettingsServerlessFunctionsNew = () => {
   useScopedHotkeys(
     [Key.Escape],
     () => {
-      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+      navigate(SettingsPath.ServerlessFunctions);
     },
     SettingsServerlessFunctionHotkeyScope.ServerlessFunctionNew,
   );
@@ -80,11 +78,11 @@ export const SettingsServerlessFunctionsNew = () => {
       links={[
         {
           children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
+          href: getSettingsPath(SettingsPath.Workspace),
         },
         {
           children: 'Functions',
-          href: getSettingsPagePath(SettingsPath.ServerlessFunctions),
+          href: getSettingsPath(SettingsPath.ServerlessFunctions),
         },
         { children: 'New' },
       ]}
@@ -92,7 +90,7 @@ export const SettingsServerlessFunctionsNew = () => {
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
           onCancel={() => {
-            navigate('/settings/functions');
+            navigate(SettingsPath.ServerlessFunctions);
           }}
           onSave={handleSave}
         />