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/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(
-        `${AppPath.Settings}/${AppPath.Developers}/${SettingsPath.DevelopersApiKeyDetail}`,
-      ) &&
+      !isMatchingLocation(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);
+  };
+};