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/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx

@@ -1,16 +1,15 @@
-import { useNavigate } from 'react-router-dom';
 import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 
-import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
-import { SettingsListCard } from '../../components/SettingsListCard';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
 import { useRecoilValue } from 'recoil';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { isDefined } from '~/utils/isDefined';
+import { SettingsListCard } from '../../components/SettingsListCard';
 
 const ProviderIcons: { [k: string]: IconComponent } = {
   google: IconGoogle,
@@ -24,7 +23,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
   accounts: ConnectedAccount[];
   loading?: boolean;
 }) => {
-  const navigate = useNavigate();
+  const navigate = useNavigateSettings();
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   if (!accounts.length) {
@@ -47,9 +46,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
       )}
       hasFooter={atLeastOneProviderAvailable}
       footerButtonLabel="Add account"
-      onFooterButtonClick={() =>
-        navigate(getSettingsPagePath(SettingsPath.NewAccount))
-      }
+      onFooterButtonClick={() => navigate(SettingsPath.NewAccount)}
     />
   );
 };

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