mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

New useNavigateApp (#9729)

Browse Source 
Todo : 
- replace all instances of useNavigate(
- remove getSettingsPagePath
- add eslint rule to enfore usage of useNavigateApp instead of
useNavigate
This commit is contained in:
Félix Malfait
2025-01-18 13:58:12 +01:00
committed by GitHub
parent 8572471973
commit 152902d1be
115 changed files with 975 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -2,13 +2,13 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { Trans, useLingui } from '@lingui/react/macro';
import { Button, H2Title, IconPlus, MOBILE_VIEWPORT, Section } from 'twenty-ui';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledButtonContainer = styled.div`
display: flex;
@ -37,7 +37,7 @@ export const SettingsDevelopers = () => {
links={[
{
children: <Trans>Workspace</Trans>,
href: getSettingsPagePath(SettingsPath.Workspace),
href: getSettingsPath(SettingsPath.Workspace),
},
{ children: <Trans>Developers</Trans> },
]}
@ -56,7 +56,7 @@ export const SettingsDevelopers = () => {
title={t`Create API key`}
size="small"
variant="secondary"
to={'/settings/developers/api-keys/new'}
to={getSettingsPath(SettingsPath.DevelopersNewApiKey)}
/>
</StyledButtonContainer>
</Section>
@ -72,7 +72,7 @@ export const SettingsDevelopers = () => {
title={t`Create Webhook`}
size="small"
variant="secondary"
to={'/settings/developers/webhooks/new'}
to={getSettingsPath(SettingsPath.DevelopersNewWebhook)}
/>
</StyledButtonContainer>
</Section>

4
packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
View File

@ -1,3 +1,4 @@
import { SettingsPath } from '@/types/SettingsPath';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
@ -7,12 +8,13 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
component: SettingsDevelopersApiKeysNew,
decorators: [PageDecorator],
args: { routePath: '/settings/developers/api-keys/new' },
args: { routePath: getSettingsPath(SettingsPath.DevelopersNewApiKey) },
parameters: {
msw: graphqlMocks,
},

22
packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { DateTime } from 'luxon';
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { Button, H2Title, IconRepeat, IconTrash, Section } from 'twenty-ui';
@ -17,7 +17,6 @@ import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTo
import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
import { computeNewExpirationDate } from '@/settings/developers/utils/computeNewExpirationDate';
import { formatExpiration } from '@/settings/developers/utils/formatExpiration';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -25,6 +24,8 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledInfo = styled.span`
color: ${({ theme }) => theme.font.color.light};
@ -47,7 +48,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
const [isDeleteApiKeyModalOpen, setIsDeleteApiKeyModalOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const navigate = useNavigateSettings();
const { apiKeyId = '' } = useParams();
const [apiKeyToken, setApiKeyToken] = useRecoilState(apiKeyTokenState);
@ -68,7 +69,6 @@ export const SettingsDevelopersApiKeyDetail = () => {
setApiKeyName(record.name);
},
});
const developerPath = getSettingsPagePath(SettingsPath.Developers);
const deleteIntegration = async (redirect = true) => {
setIsLoading(true);
@ -79,7 +79,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
updateOneRecordInput: { revokedAt: DateTime.now().toString() },
});
if (redirect) {
navigate(developerPath);
navigate(SettingsPath.Developers);
}
} catch (err) {
enqueueSnackBar(`Error deleting api key: ${err}`, {
@ -114,6 +114,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
token: tokenData.data?.generateApiKeyToken.token,
};
};
const regenerateApiKey = async () => {
setIsLoading(true);
try {
@ -127,7 +128,9 @@ export const SettingsDevelopersApiKeyDetail = () => {
if (isNonEmptyString(apiKey?.token)) {
setApiKeyToken(apiKey.token);
navigate(`/settings/developers/api-keys/${apiKey.id}`);
navigate(SettingsPath.DevelopersApiKeyDetail, {
apiKeyId: apiKey.id,
});
}
}
} catch (err) {
@ -147,9 +150,12 @@ export const SettingsDevelopersApiKeyDetail = () => {
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
href: getSettingsPath(SettingsPath.Workspace),
},
{
children: 'Developers',
href: getSettingsPath(SettingsPath.Developers),
},
{ children: 'Developers', href: developerPath },
{ children: `${apiKeyName} API Key` },
]}
>

16
packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
View File

@ -1,6 +1,5 @@
import { DateTime } from 'luxon';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { H2Title, Section } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -10,7 +9,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { EXPIRATION_DATES } from '@/settings/developers/constants/ExpirationDates';
import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
@ -18,11 +16,13 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
import { useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { isDefined } from '~/utils/isDefined';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const SettingsDevelopersApiKeysNew = () => {
const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
const navigate = useNavigate();
const navigateSettings = useNavigateSettings();
const setApiKeyToken = useSetRecoilState(apiKeyTokenState);
const [formValues, setFormValues] = useState<{
name: string;
@ -58,7 +58,9 @@ export const SettingsDevelopersApiKeysNew = () => {
});
if (isDefined(tokenData.data?.generateApiKeyToken)) {
setApiKeyToken(tokenData.data.generateApiKeyToken.token);
navigate(`/settings/developers/api-keys/${newApiKey.id}`);
navigateSettings(SettingsPath.DevelopersApiKeyDetail, {
apiKeyId: newApiKey.id,
});
}
};
const canSave = !!formValues.name && createOneApiKey;
@ -68,11 +70,11 @@ export const SettingsDevelopersApiKeysNew = () => {
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
href: getSettingsPath(SettingsPath.Workspace),
},
{
children: 'Developers',
href: getSettingsPagePath(SettingsPath.Developers),
href: getSettingsPath(SettingsPath.Developers),
},
{ children: 'New Key' },
]}
@ -80,7 +82,7 @@ export const SettingsDevelopersApiKeysNew = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate('/settings/developers');
navigateSettings(SettingsPath.Developers);
}}
onSave={handleSave}
/>

22
packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
View File

@ -1,7 +1,7 @@
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import {
Button,
H2Title,
@ -28,7 +28,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Select, SelectOption } from '@/ui/input/components/Select';
import { TextArea } from '@/ui/input/components/TextArea';
@ -38,8 +37,10 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBa
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRecoilValue } from 'recoil';
import { FeatureFlagKey } from '~/generated/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { WEBHOOK_EMPTY_OPERATION } from '~/pages/settings/developers/webhooks/constants/WebhookEmptyOperation';
import { WebhookOperationType } from '~/pages/settings/developers/webhooks/types/WebhookOperationsType';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const OBJECT_DROPDOWN_WIDTH = 340;
const ACTION_DROPDOWN_WIDTH = 140;
@ -66,7 +67,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
const { objectMetadataItems } = useObjectMetadataItems();
const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
const isMobile = useIsMobile();
const navigate = useNavigate();
const navigate = useNavigateSettings();
const { webhookId = '' } = useParams();
const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
@ -108,11 +109,9 @@ export const SettingsDevelopersWebhooksDetail = () => {
objectNameSingular: CoreObjectNameSingular.Webhook,
});
const developerPath = getSettingsPagePath(SettingsPath.Developers);
const deleteWebhook = () => {
deleteOneWebhook(webhookId);
navigate(developerPath);
navigate(SettingsPath.Developers);
};
const isAnalyticsV2Enabled = useIsFeatureEnabled(
@ -163,7 +162,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
secret: secret,
},
});
navigate(developerPath);
navigate(SettingsPath.Developers);
};
const addEmptyOperationIfNecessary = (
@ -210,16 +209,19 @@ export const SettingsDevelopersWebhooksDetail = () => {
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
href: getSettingsPath(SettingsPath.Workspace),
},
{
children: 'Developers',
href: getSettingsPath(SettingsPath.Developers),
},
{ children: 'Developers', href: developerPath },
{ children: 'Webhook' },
]}
actionButton={
<SaveAndCancelButtons
isSaveDisabled={!isDirty}
onCancel={() => {
navigate(developerPath);
navigate(SettingsPath.Developers);
}}
onSave={handleSave}
/>

17
packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhooksNew.tsx
View File

@ -1,5 +1,4 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { H2Title, isDefined, Section } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -7,14 +6,16 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { TextInput } from '@/ui/input/components/TextInput';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { isValidUrl } from '~/utils/url/isValidUrl';
export const SettingsDevelopersWebhooksNew = () => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const [formValues, setFormValues] = useState<{
targetUrl: string;
operations: string[];
@ -40,7 +41,9 @@ export const SettingsDevelopersWebhooksNew = () => {
if (!newWebhook) {
return;
}
navigate(`/settings/developers/webhooks/${newWebhook.id}`);
navigate(SettingsPath.DevelopersNewWebhookDetail, {
webhookId: newWebhook.id,
});
};
const canSave =
@ -67,11 +70,11 @@ export const SettingsDevelopersWebhooksNew = () => {
links={[
{
children: 'Workspace',
href: getSettingsPagePath(SettingsPath.Workspace),
href: getSettingsPath(SettingsPath.Workspace),
},
{
children: 'Developers',
href: getSettingsPagePath(SettingsPath.Developers),
href: getSettingsPath(SettingsPath.Developers),
},
{ children: 'New Webhook' },
]}
@ -79,7 +82,7 @@ export const SettingsDevelopersWebhooksNew = () => {
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() => {
navigate(getSettingsPagePath(SettingsPath.Developers));
navigate(SettingsPath.Developers);
}}
onSave={handleSave}
/>