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 <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: Matheus <[email protected]> Co-authored-by: Félix Malfait <[email protected]>
twentyhq · Jun 4, 2024 · bb7d94a · bb7d94a
1 parent 234e062
commit bb7d94a
Show file tree

Hide file tree

Showing 18 changed files with 317 additions and 132 deletions.
diff --git a/.eslintrc.react.cjs b/.eslintrc.react.cjs
@@ -47,6 +47,7 @@ module.exports = {
         '@nx/workspace-explicit-boolean-predicates-in-if': 'error',
         '@nx/workspace-use-getLoadable-and-getValue-to-get-atoms': 'error',
         '@nx/workspace-useRecoilCallback-has-dependency-array': 'error',
+        '@nx/workspace-no-navigate-prefer-link': 'error',
         'react/no-unescaped-entities': 'off',
         'react/prop-types': 'off',
         'react/jsx-key': 'off',

diff --git a/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/...dules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Key } from 'ts-key-enum';
 import {
   IconBaselineDensitySmall,
@@ -27,6 +26,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
 import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
@@ -50,8 +50,6 @@ export const RecordIndexOptionsDropdownContent = ({
 }: RecordIndexOptionsDropdownContentProps) => {
   const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
 
-  const navigate = useNavigate();
-
   const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID);
 
   const [currentMenu, setCurrentMenu] = useState<
@@ -68,13 +66,9 @@ export const RecordIndexOptionsDropdownContent = ({
     objectNameSingular: objectNameSingular,
   });
 
-  const handleEditClick = () => {
-    navigate(
-      getSettingsPagePath(SettingsPath.ObjectDetail, {
-        objectSlug: objectNamePlural,
-      }),
-    );
-  };
+  const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
+    objectSlug: objectNamePlural,
+  });
 
   useScopedHotkeys(
     [Key.Escape],
@@ -194,13 +188,12 @@ export const RecordIndexOptionsDropdownContent = ({
             </>
           )}
           <DropdownMenuSeparator />
-          <DropdownMenuItemsContainer>
-            <MenuItem
-              onClick={handleEditClick}
-              LeftIcon={IconSettings}
-              text="Edit Fields"
-            />
-          </DropdownMenuItemsContainer>
+
+          <UndecoratedLink to={settingsUrl}>
+            <DropdownMenuItemsContainer>
+              <MenuItem LeftIcon={IconSettings} text="Edit Fields" />
+            </DropdownMenuItemsContainer>
+          </UndecoratedLink>
         </>
       )}
 

diff --git a/...twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx b/...twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
@@ -1,11 +1,12 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';
 
 import { SettingsNavigationCard } from '@/settings/components/SettingsNavigationCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Section } from '@/ui/layout/section/components/Section';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 
 const StyledCardsContainer = styled.div`
   display: flex;
@@ -14,33 +15,23 @@ const StyledCardsContainer = styled.div`
 `;
 
 export const SettingsAccountsSettingsSection = () => {
-  const navigate = useNavigate();
-
   return (
     <Section>
       <H2Title
         title="Settings"
         description="Configure your emails and calendar settings."
       />
       <StyledCardsContainer>
-        <SettingsNavigationCard
-          Icon={IconMailCog}
-          title="Emails"
-          onClick={() =>
-            navigate(getSettingsPagePath(SettingsPath.AccountsEmails))
-          }
-        >
-          Set email visibility, manage your blocklist and more.
-        </SettingsNavigationCard>
-        <SettingsNavigationCard
-          Icon={IconCalendarEvent}
-          title="Calendar"
-          onClick={() =>
-            navigate(getSettingsPagePath(SettingsPath.AccountsCalendars))
-          }
-        >
-          Configure and customize your calendar preferences.
-        </SettingsNavigationCard>
+        <UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
+          <SettingsNavigationCard Icon={IconMailCog} title="Emails">
+            Set email visibility, manage your blocklist and more.
+          </SettingsNavigationCard>
+        </UndecoratedLink>
+        <Link to={getSettingsPagePath(SettingsPath.AccountsCalendars)}>
+          <SettingsNavigationCard Icon={IconCalendarEvent} title="Calendar">
+            Configure and customize your calendar preferences.
+          </SettingsNavigationCard>
+        </Link>
       </StyledCardsContainer>
     </Section>
   );

diff --git a/...ons/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx b/...ons/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
@@ -27,10 +27,6 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
     navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
   };
 
-  const onEdit = () => {
-    navigate('./edit');
-  };
-
   const settingsIntegrationsPagePath = getSettingsPagePath(
     SettingsPath.Integrations,
   );
@@ -57,7 +53,6 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
           connectionId={connection.id}
           connectionLabel={connection.label}
           onRemove={deleteConnection}
-          onEdit={onEdit}
         />
       </Section>
       <Section>

diff --git a/...tions/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx b/...tions/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
@@ -7,14 +7,14 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;
   connectionId: string;
   connectionLabel: string;
   onRemove: () => void;
-  onEdit: () => void;
 };
 
 const StyledDatabaseLogoContainer = styled.div`
@@ -34,7 +34,6 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
   connectionId,
   connectionLabel,
   onRemove,
-  onEdit,
 }: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
   const dropdownId =
     'settings-integration-database-connection-summary-card-dropdown';
@@ -69,11 +68,9 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
                     text="Remove"
                     onClick={onRemove}
                   />
-                  <MenuItem
-                    LeftIcon={IconPencil}
-                    text="Edit"
-                    onClick={onEdit}
-                  />
+                  <UndecoratedLink to="./edit">
+                    <MenuItem LeftIcon={IconPencil} text="Edit" />
+                  </UndecoratedLink>
                 </DropdownMenuItemsContainer>
               </DropdownMenu>
             }

diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/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 />

diff --git a/packages/twenty-front/src/modules/ui/navigation/link/components/UndecoratedLink.tsx b/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>
+  );
+};
diff --git a/...y-front/src/modules/ui/navigation/link/components/__stories__/UndecoratedLink.stories.tsx b/...y-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');
+  },
+};
diff --git a/...ont/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/...ont/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>
   );
 };
diff --git a/packages/twenty-front/src/pages/auth/Authorize.tsx b/packages/twenty-front/src/pages/auth/Authorize.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useAuthorizeAppMutation } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
 
@@ -115,12 +116,9 @@ export const Authorize = () => {
         </StyledAppsContainer>
         <StyledText>{app?.name} wants to access your account</StyledText>
         <StyledButtonContainer>
-          <MainButton
-            title="Cancel"
-            variant="secondary"
-            onClick={() => navigate(AppPath.Index)}
-            fullWidth
-          />
+          <UndecoratedLink to={AppPath.Index}>
+            <MainButton title="Cancel" variant="secondary" fullWidth />
+          </UndecoratedLink>
           <MainButton title="Authorize" onClick={handleAuthorize} fullWidth />
         </StyledButtonContainer>
       </StyledCardWrapper>

diff --git a/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx b/packages/twenty-front/src/pages/auth/PaymentSuccess.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconCheck, RGBA } from 'twenty-ui';
@@ -8,6 +7,7 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { AppPath } from '@/types/AppPath';
 import { MainButton } from '@/ui/input/button/components/MainButton';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 
 const StyledCheckContainer = styled.div`
@@ -28,11 +28,7 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const PaymentSuccess = () => {
-  const navigate = useNavigate();
   const theme = useTheme();
-  const handleButtonClick = () => {
-    navigate(AppPath.CreateWorkspace);
-  };
   const color =
     theme.name === 'light' ? theme.grayScale.gray90 : theme.grayScale.gray10;
   return (
@@ -45,7 +41,9 @@ export const PaymentSuccess = () => {
       <Title>All set!</Title>
       <SubTitle>Your account has been activated.</SubTitle>
       <StyledButtonContainer>
-        <MainButton title="Start" onClick={handleButtonClick} width={200} />
+        <UndecoratedLink to={AppPath.CreateWorkspace}>
+          <MainButton title="Start" width={200} />
+        </UndecoratedLink>
       </StyledButtonContainer>
     </>
   );