Create ESLint rule to discourage usage of navigate() and prefer Link (#5642)

### Description
Create ESLint rule to discourage usage of navigate() and prefer Link


### Refs
#5468 

### Demo

![Capture-2024-05-29-112852](https://github.com/twentyhq/twenty/assets/140154534/28378c09-86bb-49d3-9e9a-49aa1c07ad11)

![Capture-2024-05-29-112843](https://github.com/twentyhq/twenty/assets/140154534/2c05ea92-e19b-49ae-acb9-07f6ec9182ab)

Fixes #5468

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps, ReactNode } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
@@ -12,6 +11,7 @@ import {
 } from 'twenty-ui';
 
 import { IconButton } from '@/ui/input/button/components/IconButton';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@@ -103,7 +103,6 @@ export const PageHeader = ({
   loading,
 }: PageHeaderProps) => {
   const isMobile = useIsMobile();
-  const navigate = useNavigate();
   const theme = useTheme();
   const isNavigationDrawerOpen = useRecoilValue(isNavigationDrawerOpenState);
 
@@ -116,12 +115,13 @@ export const PageHeader = ({
           </StyledTopBarButtonContainer>
         )}
         {hasBackButton && (
-          <IconButton
-            Icon={IconChevronLeft}
-            size="small"
-            onClick={() => navigate(-1)}
-            variant="tertiary"
-          />
+          <UndecoratedLink to={-1}>
+            <IconButton
+              Icon={IconChevronLeft}
+              size="small"
+              variant="tertiary"
+            />
+          </UndecoratedLink>
         )}
         {loading ? (
           <StyledSkeletonLoader />

packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+const StyledUndecoratedLink = styled(Link)`
+  text-decoration: none;
+`;
+
+type UndecoratedLinkProps = {
+  to: string | number;
+  children: React.ReactNode;
+  replace?: boolean;
+};
+
+export const UndecoratedLink = ({
+  children,
+  to,
+  replace = false,
+}: UndecoratedLinkProps) => {
+  return (
+    <StyledUndecoratedLink to={to as string} replace={replace}>
+      {children}
+    </StyledUndecoratedLink>
+  );
+};

packages/twenty-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx

@@ -0,0 +1,32 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+const meta: Meta<typeof UndecoratedLink> = {
+  title: 'UI/navigation/link/UndecoratedLink',
+  component: UndecoratedLink,
+  decorators: [ComponentWithRouterDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof UndecoratedLink>;
+
+export const Default: Story = {
+  args: {
+    children: 'Go Home',
+    to: '/home',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const link = canvas.getByText('Go Home');
+
+    await userEvent.click(link);
+
+    const href = link.getAttribute('href');
+    expect(href).toBe('/home');
+  },
+};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -1,9 +1,9 @@
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { IconChevronLeft } from 'twenty-ui';
 
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 
 type NavigationDrawerBackButtonProps = {
@@ -36,22 +36,19 @@ export const NavigationDrawerBackButton = ({
   title,
 }: NavigationDrawerBackButtonProps) => {
   const theme = useTheme();
-  const navigate = useNavigate();
   const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
 
   return (
     <StyledContainer>
-      <StyledIconAndButtonContainer
-        onClick={() => {
-          navigate(navigationMemorizedUrl, { replace: true });
-        }}
-      >
-        <IconChevronLeft
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.lg}
-        />
-        <span>{title}</span>
-      </StyledIconAndButtonContainer>
+      <UndecoratedLink to={navigationMemorizedUrl} replace>
+        <StyledIconAndButtonContainer>
+          <IconChevronLeft
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.lg}
+          />
+          <span>{title}</span>
+        </StyledIconAndButtonContainer>
+      </UndecoratedLink>
     </StyledContainer>
   );
 };