admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
### 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>
This commit is contained in:
gitstart-twenty
2024-06-04 11:04:57 -04:00
committed by GitHub
parent 234e062232
commit bb7d94a455
18 changed files with 317 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/pages/auth/Authorize.tsx
View File

@ -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>

10
packages/twenty-front/src/pages/auth/PaymentSuccess.tsx
View File

@ -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>
</>
);

12
packages/twenty-front/src/pages/not-found/NotFound.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
@ -11,6 +10,7 @@ import {
AnimatedPlaceholderErrorSubTitle,
AnimatedPlaceholderErrorTitle,
} from '@/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
const StyledBackDrop = styled.div`
@ -33,8 +33,6 @@ const StyledButtonContainer = styled.div`
`;
export const NotFound = () => {
const navigate = useNavigate();
return (
<>
<PageTitle title="Page Not Found | Twenty" />
@ -51,11 +49,9 @@ export const NotFound = () => {
</AnimatedPlaceholderErrorSubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<StyledButtonContainer>
<MainButton
title="Back to content"
fullWidth
onClick={() => navigate(AppPath.Index)}
/>
<UndecoratedLink to={AppPath.Index}>
<MainButton title="Back to content" fullWidth />
</UndecoratedLink>
</StyledButtonContainer>
</AnimatedPlaceholderErrorContainer>
</StyledBackDrop>

33
packages/twenty-front/src/pages/settings/SettingsBilling.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import {
@ -25,6 +24,7 @@ import { Button } from '@/ui/input/button/components/Button';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
import {
useBillingPortalSessionQuery,
useUpdateBillingSubscriptionMutation,
@ -66,7 +66,6 @@ const SWITCH_INFOS = {
};
export const SettingsBilling = () => {
const navigate = useNavigate();
const { enqueueSnackBar } = useSnackBar();
const onboardingStatus = useOnboardingStatus();
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@ -140,10 +139,6 @@ export const SettingsBilling = () => {
}
};
const redirectToSubscribePage = () => {
navigate(AppPath.PlanRequired);
};
return (
<SubMenuTopBarContainer Icon={IconCurrencyDollar} title="Billing">
<SettingsPageContainer>
@ -158,20 +153,22 @@ export const SettingsBilling = () => {
/>
)}
{displaySubscriptionCanceledInfo && (
<Info
text={'Subscription canceled. Please start a new one'}
buttonTitle={'Subscribe'}
accent={'danger'}
onClick={redirectToSubscribePage}
/>
<UndecoratedLink to={AppPath.PlanRequired}>
<Info
text={'Subscription canceled. Please start a new one'}
buttonTitle={'Subscribe'}
accent={'danger'}
/>
</UndecoratedLink>
)}
{displaySubscribeInfo ? (
<Info
text={'Your workspace does not have an active subscription'}
buttonTitle={'Subscribe'}
accent={'danger'}
onClick={redirectToSubscribePage}
/>
<UndecoratedLink to={AppPath.PlanRequired}>
<Info
text={'Your workspace does not have an active subscription'}
buttonTitle={'Subscribe'}
accent={'danger'}
/>
</UndecoratedLink>
) : (
<>
<Section>

26
packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
View File

@ -31,6 +31,7 @@ import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableSection } from '@/ui/layout/table/components/TableSection';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
const StyledDiv = styled.div`
display: flex;
@ -214,19 +215,20 @@ export const SettingsObjectDetail = () => {
</Table>
{shouldDisplayAddFieldButton && (
<StyledDiv>
<Button
Icon={IconPlus}
title="Add Field"
size="small"
variant="secondary"
onClick={() =>
navigate(
deactivatedMetadataFields.length
? './new-field/step-1'
: './new-field/step-2',
)
<UndecoratedLink
to={
deactivatedMetadataFields.length
? './new-field/step-1'
: './new-field/step-2'
}
/>
>
<Button
Icon={IconPlus}
title="Add Field"
size="small"
variant="secondary"
/>
</UndecoratedLink>
</StyledDiv>
)}
</Section>

20
packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
@ -29,6 +28,7 @@ import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableSection } from '@/ui/layout/table/components/TableSection';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
const StyledIconChevronRight = styled(IconChevronRight)`
color: ${({ theme }) => theme.font.color.tertiary};
@ -40,7 +40,6 @@ const StyledH1Title = styled(H1Title)`
export const SettingsObjects = () => {
const theme = useTheme();
const navigate = useNavigate();
const { activeObjectMetadataItems, inactiveObjectMetadataItems } =
useFilteredObjectMetadataItems();
@ -52,15 +51,14 @@ export const SettingsObjects = () => {
<SettingsPageContainer>
<SettingsHeaderContainer>
<StyledH1Title title="Objects" />
<Button
Icon={IconPlus}
title="Add object"
accent="blue"
size="small"
onClick={() =>
navigate(getSettingsPagePath(SettingsPath.NewObject))
}
/>
<UndecoratedLink to={getSettingsPagePath(SettingsPath.NewObject)}>
<Button
Icon={IconPlus}
title="Add object"
accent="blue"
size="small"
/>
</UndecoratedLink>
</SettingsHeaderContainer>
<div>
<SettingsObjectCoverImage />