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/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(
-        `${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`,
-      );
+      navigate(SettingsPath.IntegrationDatabaseConnection, {
+        databaseKey,
+        connectionId: connection?.id,
+      });
     } catch (error) {
       enqueueSnackBar((error as Error).message, {
         variant: SnackBarVariant.Error,
@@ -116,7 +117,9 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
           <SaveAndCancelButtons
             isSaveDisabled={!canSave}
             onCancel={() =>
-              navigate(`${settingsIntegrationsPagePath}/${databaseKey}`)
+              navigate(SettingsPath.IntegrationDatabase, {
+                databaseKey,
+              })
             }
             onSave={handleSave}
           />

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,