admin/twenty
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

12
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeActiveVersionWorkflowSingleRecordAction.ts
View File

@ -1,10 +1,11 @@
import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { AppPath } from '@/types/AppPath';
import { useActiveWorkflowVersion } from '@/workflow/hooks/useActiveWorkflowVersion';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import { useNavigate } from 'react-router-dom';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -16,7 +17,7 @@ export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObj
const workflowActiveVersion = useActiveWorkflowVersion(recordId);
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const shouldBeRegistered = isDefined(workflowActiveVersion) && isDraft;
@ -25,9 +26,10 @@ export const useSeeActiveVersionWorkflowSingleRecordAction: ActionHookWithoutObj
return;
}
navigate(
`/object/${CoreObjectNameSingular.WorkflowVersion}/${workflowActiveVersion.id}`,
);
navigateApp(AppPath.RecordShowPage, {
objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
objectRecordId: workflowActiveVersion.id,
});
};
return {

29
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeRunsWorkflowSingleRecordAction.ts
View File

@ -1,11 +1,11 @@
import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { AppPath } from '@/types/AppPath';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import qs from 'qs';
import { useNavigate } from 'react-router-dom';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -13,7 +13,7 @@ export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetada
const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
@ -22,20 +22,21 @@ export const useSeeRunsWorkflowSingleRecordAction: ActionHookWithoutObjectMetada
return;
}
const filterQueryParams = {
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
navigateApp(
AppPath.RecordIndexPage,
{
objectNamePlural: CoreObjectNamePlural.WorkflowRun,
},
{
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
},
},
},
},
};
const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowRun}?${qs.stringify(
filterQueryParams,
)}`;
navigate(filterLinkHref);
);
};
return {

33
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-actions/hooks/useSeeVersionsWorkflowSingleRecordAction.ts
View File

@ -1,11 +1,11 @@
import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { AppPath } from '@/types/AppPath';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import qs from 'qs';
import { useNavigate } from 'react-router-dom';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useSeeVersionsWorkflowSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -13,29 +13,28 @@ export const useSeeVersionsWorkflowSingleRecordAction: ActionHookWithoutObjectMe
const workflowWithCurrentVersion = useWorkflowWithCurrentVersion(recordId);
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
const onClick = () => {
if (!shouldBeRegistered) {
return;
}
if (!shouldBeRegistered) return;
const filterQueryParams = {
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
navigateApp(
AppPath.RecordIndexPage,
{
objectNamePlural: CoreObjectNamePlural.WorkflowVersion,
},
{
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
},
},
},
},
};
const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowVersion}?${qs.stringify(
filterQueryParams,
)}`;
navigate(filterLinkHref);
);
};
return {

37
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useSeeRunsWorkflowVersionSingleRecordAction.ts
View File

@ -2,12 +2,12 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { AppPath } from '@/types/AppPath';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import qs from 'qs';
import { useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useSeeRunsWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -19,32 +19,33 @@ export const useSeeRunsWorkflowVersionSingleRecordAction: ActionHookWithoutObjec
workflowVersion?.workflow.id,
);
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
const onClick = () => {
if (!shouldBeRegistered) return;
const filterQueryParams = {
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
navigateApp(
AppPath.RecordIndexPage,
{
objectNamePlural: CoreObjectNamePlural.WorkflowRun,
},
{
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
},
},
},
workflowVersion: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [recordId],
workflowVersion: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [recordId],
},
},
},
},
};
const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowRun}?${qs.stringify(
filterQueryParams,
)}`;
navigate(filterLinkHref);
);
};
return {

33
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useSeeVersionsWorkflowVersionSingleRecordAction.ts
View File

@ -2,12 +2,12 @@ import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { AppPath } from '@/types/AppPath';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import qs from 'qs';
import { useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useSeeVersionsWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -19,29 +19,28 @@ export const useSeeVersionsWorkflowVersionSingleRecordAction: ActionHookWithoutO
workflowVersion?.workflowId,
);
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const shouldBeRegistered = isDefined(workflowWithCurrentVersion);
const onClick = () => {
if (!shouldBeRegistered) {
return;
}
if (!shouldBeRegistered) return;
const filterQueryParams = {
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
navigateApp(
AppPath.RecordIndexPage,
{
objectNamePlural: CoreObjectNamePlural.WorkflowVersion,
},
{
filter: {
workflow: {
[ViewFilterOperand.Is]: {
selectedRecordIds: [workflowWithCurrentVersion.id],
},
},
},
},
};
const filterLinkHref = `/objects/${CoreObjectNamePlural.WorkflowVersion}?${qs.stringify(
filterQueryParams,
)}`;
navigate(filterLinkHref);
);
};
return {

17
packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/workflow-version-actions/hooks/useUseAsDraftWorkflowVersionSingleRecordAction.tsx
View File

@ -1,15 +1,15 @@
import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
import { ActionHookWithoutObjectMetadataItem } from '@/action-menu/actions/types/ActionHook';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
import { AppPath } from '@/types/AppPath';
import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
import { useNavigate } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutObjectMetadataItem =
() => {
@ -28,7 +28,7 @@ export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutOb
openOverrideWorkflowDraftConfirmationModalState,
);
const navigate = useNavigate();
const navigate = useNavigateApp();
const hasAlreadyDraftVersion =
workflow?.versions.some((version) => version.status === 'DRAFT') || false;
@ -48,13 +48,10 @@ export const useUseAsDraftWorkflowVersionSingleRecordAction: ActionHookWithoutOb
workflowId: workflowVersion.workflow.id,
workflowVersionIdToCopy: workflowVersion.id,
});
navigate(
buildShowPageURL(
CoreObjectNameSingular.Workflow,
workflowVersion.workflow.id,
),
);
navigate(AppPath.RecordShowPage, {
objectNameSingular: CoreObjectNameSingular.Workflow,
objectRecordId: workflowVersion.workflow.id,
});
}
};

4
packages/twenty-front/src/modules/app/components/AppRouter.tsx
View File

@ -11,9 +11,6 @@ export const AppRouter = () => {
const isFreeAccessEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsFreeAccessEnabled,
);
const isCRMMigrationEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsCrmMigrationEnabled,
);
const isServerlessFunctionSettingsEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsFunctionSettingsEnabled,
);
@ -29,7 +26,6 @@ export const AppRouter = () => {
<RouterProvider
router={useCreateAppRouter(
isBillingPageEnabled,
isCRMMigrationEnabled,
isServerlessFunctionSettingsEnabled,
isAdminPageEnabled,
)}

53
packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
View File

@ -2,7 +2,6 @@ import { lazy, Suspense } from 'react';
import { Route, Routes } from 'react-router-dom';
import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
const SettingsAccountsCalendars = lazy(() =>
@ -226,14 +225,6 @@ const SettingsObjectFieldEdit = lazy(() =>
),
);
const SettingsCRMMigration = lazy(() =>
import('~/pages/settings/crm-migration/SettingsCRMMigration').then(
(module) => ({
default: module.SettingsCRMMigration,
}),
),
);
const SettingsSecurity = lazy(() =>
import('~/pages/settings/security/SettingsSecurity').then((module) => ({
default: module.SettingsSecurity,
@ -264,14 +255,12 @@ const SettingsAdminContent = lazy(() =>
type SettingsRoutesProps = {
isBillingEnabled?: boolean;
isCRMMigrationEnabled?: boolean;
isServerlessFunctionSettingsEnabled?: boolean;
isAdminPageEnabled?: boolean;
};
export const SettingsRoutes = ({
isBillingEnabled,
isCRMMigrationEnabled,
isServerlessFunctionSettingsEnabled,
isAdminPageEnabled,
}: SettingsRoutesProps) => (
@ -310,34 +299,22 @@ export const SettingsRoutes = ({
/>
<Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
<Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
{isCRMMigrationEnabled && (
<Route
path={SettingsPath.CRMMigration}
element={<SettingsCRMMigration />}
/>
)}
<Route
path={AppPath.DevelopersCatchAll}
element={
<Routes>
<Route
path={SettingsPath.DevelopersNewApiKey}
element={<SettingsDevelopersApiKeysNew />}
/>
<Route
path={SettingsPath.DevelopersApiKeyDetail}
element={<SettingsDevelopersApiKeyDetail />}
/>
<Route
path={SettingsPath.DevelopersNewWebhook}
element={<SettingsDevelopersWebhooksNew />}
/>
<Route
path={SettingsPath.DevelopersNewWebhookDetail}
element={<SettingsDevelopersWebhooksDetail />}
/>
</Routes>
}
path={SettingsPath.DevelopersNewApiKey}
element={<SettingsDevelopersApiKeysNew />}
/>
<Route
path={SettingsPath.DevelopersApiKeyDetail}
element={<SettingsDevelopersApiKeyDetail />}
/>
<Route
path={SettingsPath.DevelopersNewWebhook}
element={<SettingsDevelopersWebhooksNew />}
/>
<Route
path={SettingsPath.DevelopersNewWebhookDetail}
element={<SettingsDevelopersWebhooksDetail />}
/>
{isServerlessFunctionSettingsEnabled && (
<>

2
packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
View File

@ -28,7 +28,6 @@ import { SyncEmails } from '~/pages/onboarding/SyncEmails';
export const useCreateAppRouter = (
isBillingEnabled?: boolean,
isCRMMigrationEnabled?: boolean,
isServerlessFunctionSettingsEnabled?: boolean,
isAdminPageEnabled?: boolean,
) =>
@ -63,7 +62,6 @@ export const useCreateAppRouter = (
element={
<SettingsRoutes
isBillingEnabled={isBillingEnabled}
isCRMMigrationEnabled={isCRMMigrationEnabled}
isServerlessFunctionSettingsEnabled={
isServerlessFunctionSettingsEnabled
}

5
packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx
View File

@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';
import { useAuth } from '@/auth/hooks/useAuth';
import { useIsLogged } from '@/auth/hooks/useIsLogged';
@ -9,6 +9,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const VerifyEffect = () => {
const [searchParams] = useSearchParams();
@ -18,7 +19,7 @@ export const VerifyEffect = () => {
const { enqueueSnackBar } = useSnackBar();
const isLogged = useIsLogged();
const navigate = useNavigate();
const navigate = useNavigateApp();
const { verify } = useAuth();

7
packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx
View File

@ -5,7 +5,8 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
export const VerifyEmailEffect = () => {
@ -18,7 +19,7 @@ export const VerifyEmailEffect = () => {
const email = searchParams.get('email');
const emailVerificationToken = searchParams.get('emailVerificationToken');
const navigate = useNavigate();
const navigate = useNavigateApp();
const { readCaptchaToken } = useReadCaptchaToken();
useEffect(() => {
@ -44,7 +45,7 @@ export const VerifyEmailEffect = () => {
variant: SnackBarVariant.Success,
});
navigate(`${AppPath.Verify}?loginToken=${loginToken.token}`);
navigate(AppPath.Verify, undefined, { loginToken: loginToken.token });
} catch (error) {
enqueueSnackBar('Email verification failed.', {
dedupeKey: 'email-verification-dedupe-key',

5
packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts
View File

@ -1,5 +1,5 @@
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -10,11 +10,12 @@ import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefau
import { AppPath } from '@/types/AppPath';
import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { isDefined } from '~/utils/isDefined';
export const useWorkspaceFromInviteHash = () => {
const { enqueueSnackBar } = useSnackBar();
const navigate = useNavigate();
const navigate = useNavigateApp();
const workspaceInviteHash = useParams().workspaceInviteHash;
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const [initiallyLoggedIn] = useState(isDefined(currentWorkspace));

4
packages/twenty-front/src/modules/billing/hooks/useHandleCheckoutSession.ts
View File

@ -1,4 +1,3 @@
import { AppPath } from '@/types/AppPath';
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';
@ -8,6 +7,7 @@ import {
SubscriptionInterval,
} from '~/generated-metadata/graphql';
import { useCheckoutSessionMutation } from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const useHandleCheckoutSession = ({
recurringInterval,
@ -29,7 +29,7 @@ export const useHandleCheckoutSession = ({
const { data } = await checkoutSession({
variables: {
recurringInterval,
successUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
successUrlPath: getSettingsPath(SettingsPath.Billing),
plan,
requirePaymentMethod,
},

23
packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts
View File

@ -6,12 +6,19 @@ import {
IconUser,
} from 'twenty-ui';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { getAppPath } from '~/utils/navigation/getAppPath';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { Command, CommandType } from '../types/Command';
export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
people: {
id: 'go-to-people',
to: '/objects/people',
to: getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: CoreObjectNamePlural.Person,
}),
label: 'Go to People',
type: CommandType.Navigate,
firstHotKey: 'G',
@ -21,7 +28,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
},
companies: {
id: 'go-to-companies',
to: '/objects/companies',
to: getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: CoreObjectNamePlural.Company,
}),
label: 'Go to Companies',
type: CommandType.Navigate,
firstHotKey: 'G',
@ -31,7 +40,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
},
opportunities: {
id: 'go-to-activities',
to: '/objects/opportunities',
to: getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: CoreObjectNamePlural.Opportunity,
}),
label: 'Go to Opportunities',
type: CommandType.Navigate,
firstHotKey: 'G',
@ -41,7 +52,7 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
},
settings: {
id: 'go-to-settings',
to: '/settings/profile',
to: getSettingsPath(SettingsPath.ProfilePage),
label: 'Go to Settings',
type: CommandType.Navigate,
firstHotKey: 'G',
@ -51,7 +62,9 @@ export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
},
tasks: {
id: 'go-to-tasks',
to: '/objects/tasks',
to: getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: CoreObjectNamePlural.Task,
}),
label: 'Go to Tasks',
type: CommandType.Navigate,
firstHotKey: 'G',

10
packages/twenty-front/src/modules/favorites/utils/__tests__/isLocationMatchingFavorite.test.ts
View File

@ -3,7 +3,7 @@ import { isLocationMatchingFavorite } from '../isLocationMatchingFavorite';
describe('isLocationMatchingFavorite', () => {
it('should return true if favorite link matches current path', () => {
const currentPath = '/app/objects/people';
const currentViewPath = '/app/objects/people?view=123';
const currentViewPath = '/app/objects/people?viewId=123';
const favorite = {
objectNameSingular: 'object',
link: '/app/objects/people',
@ -16,7 +16,7 @@ describe('isLocationMatchingFavorite', () => {
it('should return true if favorite link matches current view path', () => {
const currentPath = '/app/object/company/12';
const currentViewPath = '/app/object/company/12?view=123';
const currentViewPath = '/app/object/company/12?viewId=123';
const favorite = {
objectNameSingular: 'company',
link: '/app/object/company/12',
@ -29,7 +29,7 @@ describe('isLocationMatchingFavorite', () => {
it('should return false if favorite link does not match current path', () => {
const currentPath = '/app/objects/people';
const currentViewPath = '/app/objects/people?view=123';
const currentViewPath = '/app/objects/people?viewId=123';
const favorite = {
objectNameSingular: 'object',
link: '/app/objects/company',
@ -42,10 +42,10 @@ describe('isLocationMatchingFavorite', () => {
it('should return false if favorite link does not match current view path', () => {
const currentPath = '/app/objects/companies';
const currentViewPath = '/app/objects/companies?view=123';
const currentViewPath = '/app/objects/companies?viewId=123';
const favorite = {
objectNameSingular: 'view',
link: '/app/objects/companies/view=246',
link: '/app/objects/companies?viewId=246',
};
expect(

8
packages/twenty-front/src/modules/favorites/utils/sortFavorites.ts
View File

@ -3,8 +3,10 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
import { AppPath } from '@/types/AppPath';
import { View } from '@/views/types/View';
import { isDefined } from 'twenty-ui';
import { getAppPath } from '~/utils/navigation/getAppPath';
import { getObjectMetadataLabelPluralFromViewId } from './getObjectMetadataLabelPluralFromViewId';
export type ProcessedFavorite = Favorite & {
@ -40,7 +42,11 @@ export const sortFavorites = (
avatarType: 'icon',
avatarUrl: '',
labelIdentifier: view?.name,
link: `/objects/${labelPlural.toLocaleLowerCase()}${favorite.viewId ? `?view=${favorite.viewId}` : ''}`,
link: getAppPath(
AppPath.RecordIndexPage,
{ objectNamePlural: labelPlural.toLowerCase() },
favorite.viewId ? { viewId: favorite.viewId } : undefined,
),
workspaceMemberId: favorite.workspaceMemberId,
favoriteFolderId: favorite.favoriteFolderId,
objectNameSingular: 'view',

4
packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerBillingSubscriptionPaused.tsx
View File

@ -1,13 +1,13 @@
import { InformationBanner } from '@/information-banner/components/InformationBanner';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { isDefined } from 'twenty-ui';
import { useBillingPortalSessionQuery } from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const InformationBannerBillingSubscriptionPaused = () => {
const { data, loading } = useBillingPortalSessionQuery({
variables: {
returnUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
returnUrlPath: getSettingsPath(SettingsPath.Billing),
},
});

4
packages/twenty-front/src/modules/information-banner/components/billing/InformationBannerFailPaymentInfo.tsx
View File

@ -1,13 +1,13 @@
import { InformationBanner } from '@/information-banner/components/InformationBanner';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { isDefined } from 'twenty-ui';
import { useBillingPortalSessionQuery } from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const InformationBannerFailPaymentInfo = () => {
const { data, loading } = useBillingPortalSessionQuery({
variables: {
returnUrlPath: `${AppPath.Settings}/${SettingsPath.Billing}`,
returnUrlPath: getSettingsPath(SettingsPath.Billing),
},
});

2
packages/twenty-front/src/modules/navigation/hooks/__tests__/useDefaultHomePagePath.test.ts
View File

@ -70,7 +70,7 @@ describe('useDefaultHomePagePath', () => {
setupMockPrefetchedData('viewId');
const { result } = renderHooks(true);
expect(result.current.defaultHomePagePath).toEqual(
'/objects/companies?view=viewId',
'/objects/companies?viewId=viewId',
);
});
});

11
packages/twenty-front/src/modules/navigation/hooks/useDefaultHomePagePath.ts
View File

@ -9,6 +9,7 @@ import { View } from '@/views/types/View';
import { useCallback, useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from '~/utils/isDefined';
import { getAppPath } from '~/utils/navigation/getAppPath';
export const useDefaultHomePagePath = () => {
const currentUser = useRecoilValue(currentUserState);
@ -79,11 +80,13 @@ export const useDefaultHomePagePath = () => {
}
const namePlural = defaultObjectPathInfo.objectMetadataItem?.namePlural;
const viewParam = defaultObjectPathInfo.view
? `?view=${defaultObjectPathInfo.view.id}`
: '';
const viewId = defaultObjectPathInfo.view?.id;
return `/objects/${namePlural}${viewParam}`;
return getAppPath(
AppPath.RecordIndexPage,
{ objectNamePlural: namePlural },
viewId ? { viewId } : undefined,
);
}, [currentUser, defaultObjectPathInfo]);
return { defaultHomePagePath };

6
packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts
View File

@ -1,11 +1,13 @@
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { lastVisitedObjectMetadataItemIdStateSelector } from '@/navigation/states/selectors/lastVisitedObjectMetadataItemIdStateSelector';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { AppPath } from '@/types/AppPath';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { isDefined } from 'twenty-ui';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { getAppPath } from '~/utils/navigation/getAppPath';
export const useLastVisitedObjectMetadataItem = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);
@ -44,7 +46,9 @@ export const useLastVisitedObjectMetadataItem = () => {
if (isDeactivateDefault) {
setLastVisitedObjectMetadataItemId(newFallbackObjectMetadataItem.id);
setNavigationMemorizedUrl(
`/objects/${newFallbackObjectMetadataItem.namePlural}`,
getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: newFallbackObjectMetadataItem.namePlural,
}),
);
}
};

28
packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerItemForObjectMetadataItem.tsx
View File

@ -2,6 +2,7 @@ import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { AppPath } from '@/types/AppPath';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
@ -10,6 +11,7 @@ import { View } from '@/views/types/View';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
import { useLocation } from 'react-router-dom';
import { AnimatedExpandableContainer, useIcons } from 'twenty-ui';
import { getAppPath } from '~/utils/navigation/getAppPath';
export type NavigationDrawerItemForObjectMetadataItemProps = {
objectMetadataItem: ObjectMetadataItem;
@ -35,13 +37,23 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
const viewId = lastVisitedViewId ?? objectMetadataViews[0]?.id;
const navigationPath = `/objects/${objectMetadataItem.namePlural}${
viewId ? `?view=${viewId}` : ''
}`;
const navigationPath = getAppPath(
AppPath.RecordIndexPage,
{ objectNamePlural: objectMetadataItem.namePlural },
viewId ? { viewId } : undefined,
);
const isActive =
currentPath === `/objects/${objectMetadataItem.namePlural}` ||
currentPath.includes(`object/${objectMetadataItem.nameSingular}/`);
currentPath ===
getAppPath(AppPath.RecordIndexPage, {
objectNamePlural: objectMetadataItem.namePlural,
}) ||
currentPath.includes(
getAppPath(AppPath.RecordShowPage, {
objectNameSingular: objectMetadataItem.nameSingular,
objectRecordId: '',
}).slice(0, -1),
);
const shouldSubItemsBeDisplayed = isActive && objectMetadataViews.length > 1;
@ -76,7 +88,11 @@ export const NavigationDrawerItemForObjectMetadataItem = ({
{sortedObjectMetadataViews.map((view, index) => (
<NavigationDrawerSubItem
label={view.name}
to={`/objects/${objectMetadataItem.namePlural}?view=${view.id}`}
to={getAppPath(
AppPath.RecordIndexPage,
{ objectNamePlural: objectMetadataItem.namePlural },
{ viewId: view.id },
)}
active={viewId === view.id}
subItemState={getNavigationSubItemLeftAdornment({
index,

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View File

@ -12,7 +12,6 @@ import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObje
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
import { useObjectOptionsForTable } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForTable';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -20,6 +19,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { ViewType } from '@/views/types/ViewType';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const ObjectOptionsDropdownHiddenFieldsContent = () => {
const {
@ -34,7 +34,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
objectNameSingular: objectMetadataItem.nameSingular,
});
const settingsUrl = getSettingsPagePath(SettingsPath.ObjectDetail, {
const settingsUrl = getSettingsPath(SettingsPath.ObjectDetail, {
objectNamePlural,
});

13
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent.tsx
View File

@ -13,7 +13,6 @@ import { RecordGroupsVisibilityDropdownSection } from '@/object-record/record-gr
import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -22,6 +21,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
const {
@ -51,13 +51,10 @@ export const ObjectOptionsDropdownHiddenRecordGroupsContent = () => {
viewType,
});
const viewGroupSettingsUrl = getSettingsPagePath(
SettingsPath.ObjectFieldEdit,
{
objectNamePlural,
fieldName: recordGroupFieldMetadata?.name ?? '',
},
);
const viewGroupSettingsUrl = getSettingsPath(SettingsPath.ObjectFieldEdit, {
objectNamePlural,
fieldName: recordGroupFieldMetadata?.name ?? '',
});
const location = useLocation();
const setNavigationMemorizedUrl = useSetRecoilState(

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent.tsx
View File

@ -17,7 +17,6 @@ import { useSearchRecordGroupField } from '@/object-record/object-options-dropdo
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -29,6 +28,7 @@ import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const { getIcon } = useIcons();
@ -68,7 +68,7 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
viewBarComponentId: recordIndexId,
});
const newSelectFieldSettingsUrl = getSettingsPagePath(
const newSelectFieldSettingsUrl = getSettingsPath(
SettingsPath.ObjectNewFieldConfigure,
{
objectNamePlural,

13
packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
View File

@ -4,13 +4,15 @@ import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/use
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { SettingsPath } from '@/types/SettingsPath';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { ViewType } from '@/views/types/ViewType';
import { useCallback, useContext, useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { IconEyeOff, IconSettings, isDefined } from 'twenty-ui';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
type UseRecordGroupActionsParams = {
viewType: ViewType;
@ -19,7 +21,7 @@ type UseRecordGroupActionsParams = {
export const useRecordGroupActions = ({
viewType,
}: UseRecordGroupActionsParams) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const location = useLocation();
const { objectNameSingular, recordIndexId } = useRecordIndexContextOrThrow();
@ -53,9 +55,10 @@ export const useRecordGroupActions = ({
throw new Error('recordGroupFieldMetadata is not a non-empty string');
}
const settingsPath = `/settings/objects/${objectMetadataItem.namePlural}/${recordGroupFieldMetadata.name}`;
navigate(settingsPath);
navigate(SettingsPath.ObjectFieldEdit, {
objectNamePlural: objectMetadataItem.namePlural,
fieldName: recordGroupFieldMetadata.name,
});
}, [
setNavigationMemorizedUrl,
location.pathname,

17
packages/twenty-front/src/modules/object-record/record-index/hooks/useHandleIndexIdentifierClick.ts
View File

@ -1,7 +1,8 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
import { AppPath } from '@/types/AppPath';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
import { getAppPath } from '~/utils/navigation/getAppPath';
export const useHandleIndexIdentifierClick = ({
objectMetadataItem,
@ -16,12 +17,16 @@ export const useHandleIndexIdentifierClick = ({
);
const indexIdentifierUrl = (recordId: string) => {
const showPageURL = buildShowPageURL(
objectMetadataItem.nameSingular,
recordId,
currentViewId,
return getAppPath(
AppPath.RecordShowPage,
{
objectNameSingular: objectMetadataItem.nameSingular,
objectRecordId: recordId,
},
{
viewId: currentViewId,
},
);
return showPageURL;
};
return { indexIdentifierUrl };

69
packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPagePagination.ts
View File

@ -1,17 +1,17 @@
import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { useParams, useSearchParams } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { useRecordIdsFromFindManyCacheRootQuery } from '@/object-record/record-show/hooks/useRecordIdsFromFindManyCacheRootQuery';
import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
import { buildIndexTablePageURL } from '@/object-record/record-table/utils/buildIndexTableURL';
import { AppPath } from '@/types/AppPath';
import { useQueryVariablesFromActiveFieldsOfViewOrDefaultView } from '@/views/hooks/useQueryVariablesFromActiveFieldsOfViewOrDefaultView';
import { capitalize } from 'twenty-shared';
import { isDefined } from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useRecordShowPagePagination = (
propsObjectNameSingular: string,
@ -22,9 +22,9 @@ export const useRecordShowPagePagination = (
objectRecordId: paramObjectRecordId,
} = useParams();
const navigate = useNavigate();
const navigate = useNavigateApp();
const [searchParams] = useSearchParams();
const viewIdQueryParam = searchParams.get('view');
const viewIdQueryParam = searchParams.get('viewId');
const setLastShowPageRecordId = useSetRecoilState(lastShowPageRecordIdState);
@ -130,22 +130,32 @@ export const useRecordShowPagePagination = (
!isFirstRecord || (isFirstRecord && cacheIsAvailableForNavigation);
const navigateToPreviousRecord = () => {
if (isFirstRecord) {
if (isFirstRecord || !recordBefore) {
if (cacheIsAvailableForNavigation) {
const lastRecordIdFromCache =
recordIdsInCache[recordIdsInCache.length - 1];
navigate(
buildShowPageURL(
AppPath.RecordShowPage,
{
objectNameSingular,
lastRecordIdFromCache,
viewIdQueryParam,
),
objectRecordId: lastRecordIdFromCache,
},
{
viewId: viewIdQueryParam,
},
);
}
} else {
navigate(
buildShowPageURL(objectNameSingular, recordBefore.id, viewIdQueryParam),
AppPath.RecordShowPage,
{
objectNameSingular,
objectRecordId: recordBefore.id,
},
{
viewId: viewIdQueryParam,
},
);
}
};
@ -154,34 +164,47 @@ export const useRecordShowPagePagination = (
!isLastRecord || (isLastRecord && cacheIsAvailableForNavigation);
const navigateToNextRecord = () => {
if (isLastRecord) {
if (isLastRecord || !recordAfter) {
if (cacheIsAvailableForNavigation) {
const firstRecordIdFromCache = recordIdsInCache[0];
navigate(
buildShowPageURL(
AppPath.RecordShowPage,
{
objectNameSingular,
firstRecordIdFromCache,
viewIdQueryParam,
),
objectRecordId: firstRecordIdFromCache,
},
{
viewId: viewIdQueryParam,
},
);
}
} else {
navigate(
buildShowPageURL(objectNameSingular, recordAfter.id, viewIdQueryParam),
AppPath.RecordShowPage,
{
objectNameSingular,
objectRecordId: recordAfter.id,
},
{
viewId: viewIdQueryParam,
},
);
}
};
const navigateToIndexView = () => {
const indexTableURL = buildIndexTablePageURL(
objectMetadataItem.namePlural,
viewIdQueryParam,
);
setLastShowPageRecordId(objectRecordId);
navigate(indexTableURL);
navigate(
AppPath.RecordIndexPage,
{
objectNamePlural: objectMetadataItem.namePlural,
},
{
viewId: viewIdQueryParam,
},
);
};
const rankInView = recordIdsInCache.findIndex((id) => id === objectRecordId);

13
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -1,5 +1,4 @@
import styled from '@emotion/styled';
import qs from 'qs';
import { useCallback, useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { IconForbid, IconPencil, IconPlus, LightIconButton } from 'twenty-ui';
@ -26,6 +25,7 @@ import { RecordForSelect } from '@/object-record/relation-picker/types/RecordFor
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { AppPath } from '@/types/AppPath';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
@ -33,6 +33,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { View } from '@/views/types/View';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { getAppPath } from '~/utils/navigation/getAppPath';
type RecordDetailRelationSectionProps = {
loading: boolean;
};
@ -139,9 +140,13 @@ export const RecordDetailRelationSection = ({
view: indexView?.id,
};
const filterLinkHref = `/objects/${
relationObjectMetadataItem.namePlural
}?${qs.stringify(filterQueryParams)}`;
const filterLinkHref = getAppPath(
AppPath.RecordIndexPage,
{
objectNamePlural: relationObjectMetadataItem.namePlural,
},
filterQueryParams,
);
const showContent = () => {
return (

9
packages/twenty-front/src/modules/object-record/record-show/utils/buildShowPageURL.ts
View File

@ -1,9 +0,0 @@
export const buildShowPageURL = (
objectNameSingular: string,
recordId: string,
viewId?: string | null | undefined,
) => {
return `/object/${objectNameSingular}/${recordId}${
viewId ? `?view=${viewId}` : ''
}`;
};

7
packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote.tsx
View File

@ -2,13 +2,14 @@
import { IconSettings } from 'twenty-ui';
import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
import { useNavigate } from 'react-router-dom';
import { SettingsPath } from '@/types/SettingsPath';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
export const RecordTableEmptyStateRemote = () => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const handleButtonClick = () => {
navigate('/settings/integrations');
navigate(SettingsPath.Integrations);
};
return (

6
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -8,11 +8,13 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { SettingsPath } from '@/types/SettingsPath';
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 { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const RecordTableHeaderPlusButtonContent = () => {
const { objectMetadataItem } = useRecordTableContextOrThrow();
@ -55,7 +57,9 @@ export const RecordTableHeaderPlusButtonContent = () => {
<DropdownMenuItemsContainer scrollable={false}>
<UndecoratedLink
fullWidth
to={`/settings/objects/${objectMetadataItem.namePlural}`}
to={getSettingsPath(SettingsPath.Objects, {
objectNamePlural: objectMetadataItem.namePlural,
})}
onClick={() => {
setNavigationMemorizedUrl(location.pathname + location.search);
}}

6
packages/twenty-front/src/modules/object-record/record-table/utils/buildIndexTableURL.ts
View File

@ -1,6 +0,0 @@
export const buildIndexTablePageURL = (
objectNamePlural: string,
viewId?: string | null | undefined,
) => {
return `/objects/${objectNamePlural}${viewId ? `?view=${viewId}` : ''}`;
};

13
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
View File

@ -1,16 +1,15 @@
import { useNavigate } from 'react-router-dom';
import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
import { SettingsListCard } from '../../components/SettingsListCard';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
import { useRecoilValue } from 'recoil';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { isDefined } from '~/utils/isDefined';
import { SettingsListCard } from '../../components/SettingsListCard';
const ProviderIcons: { [k: string]: IconComponent } = {
google: IconGoogle,
@ -24,7 +23,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
accounts: ConnectedAccount[];
loading?: boolean;
}) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const currentWorkspace = useRecoilValue(currentWorkspaceState);
if (!accounts.length) {
@ -47,9 +46,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
)}
hasFooter={atLeastOneProviderAvailable}
footerButtonLabel="Add account"
onFooterButtonClick={() =>
navigate(getSettingsPagePath(SettingsPath.NewAccount))
}
onFooterButtonClick={() => navigate(SettingsPath.NewAccount)}
/>
);
};

9
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from 'react-router-dom';
import {
IconCalendarEvent,
IconDotsVertical,
@ -13,9 +12,11 @@ import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
import { SettingsPath } from '@/types/SettingsPath';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
type SettingsAccountsRowDropdownMenuProps = {
account: ConnectedAccount;
@ -26,7 +27,7 @@ export const SettingsAccountsRowDropdownMenu = ({
}: SettingsAccountsRowDropdownMenuProps) => {
const dropdownId = `settings-account-row-${account.id}`;
const navigate = useNavigate();
const navigate = useNavigateSettings();
const { closeDropdown } = useDropdown(dropdownId);
const { destroyOneRecord } = useDestroyOneRecord({
@ -49,7 +50,7 @@ export const SettingsAccountsRowDropdownMenu = ({
LeftIcon={IconMail}
text="Emails settings"
onClick={() => {
navigate(`/settings/accounts/emails`);
navigate(SettingsPath.AccountsEmails);
closeDropdown();
}}
/>
@ -57,7 +58,7 @@ export const SettingsAccountsRowDropdownMenu = ({
LeftIcon={IconCalendarEvent}
text="Calendar settings"
onClick={() => {
navigate(`/settings/accounts/calendars`);
navigate(SettingsPath.AccountsCalendars);
closeDropdown();
}}
/>

8
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx
View File

@ -9,9 +9,9 @@ import {
} from 'twenty-ui';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { useTheme } from '@emotion/react';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledCardsContainer = styled.div`
display: flex;
@ -32,7 +32,7 @@ export const SettingsAccountsSettingsSection = () => {
description="Configure your emails and calendar settings."
/>
<StyledCardsContainer>
<UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
<UndecoratedLink to={getSettingsPath(SettingsPath.AccountsEmails)}>
<SettingsCard
Icon={
<IconMailCog
@ -44,9 +44,7 @@ export const SettingsAccountsSettingsSection = () => {
description="Set email visibility, manage your blocklist and more."
/>
</UndecoratedLink>
<UndecoratedLink
to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
>
<UndecoratedLink to={getSettingsPath(SettingsPath.AccountsCalendars)}>
<SettingsCard
Icon={
<IconCalendarEvent

4
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItem.tsx
View File

@ -1,12 +1,12 @@
import { useMatch, useResolvedPath } from 'react-router-dom';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import {
NavigationDrawerItem,
NavigationDrawerItemProps,
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
type SettingsNavigationDrawerItemProps = Pick<
NavigationDrawerItemProps,
@ -26,7 +26,7 @@ export const SettingsNavigationDrawerItem = ({
soon,
subItemState,
}: SettingsNavigationDrawerItemProps) => {
const href = getSettingsPagePath(path);
const href = getSettingsPath(path);
const pathName = useResolvedPath(href).pathname;
const isActive = !!useMatch({

14
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -24,7 +24,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
import { billingState } from '@/client-config/states/billingState';
import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import {
NavigationDrawerItem,
@ -37,6 +36,7 @@ import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-dr
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { matchPath, resolvePath, useLocation } from 'react-router-dom';
import { FeatureFlagKey } from '~/generated/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
type SettingsNavigationItem = {
label: string;
@ -56,9 +56,6 @@ export const SettingsNavigationDrawerItems = () => {
const isFreeAccessEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsFreeAccessEnabled,
);
const isCRMMigrationEnabled = useIsFeatureEnabled(
FeatureFlagKey.IsCrmMigrationEnabled,
);
const isBillingPageEnabled =
billing?.isBillingEnabled && !isFreeAccessEnabled;
@ -83,7 +80,7 @@ export const SettingsNavigationDrawerItems = () => {
];
const selectedIndex = accountSubSettings.findIndex((accountSubSetting) => {
const href = getSettingsPagePath(accountSubSetting.path);
const href = getSettingsPath(accountSubSetting.path);
const pathName = resolvePath(href).pathname;
return matchPath(
@ -161,13 +158,6 @@ export const SettingsNavigationDrawerItems = () => {
path={SettingsPath.Integrations}
Icon={IconApps}
/>
{isCRMMigrationEnabled && (
<SettingsNavigationDrawerItem
label="CRM Migration"
path={SettingsPath.CRMMigration}
Icon={IconCode}
/>
)}
<AdvancedSettingsWrapper navigationDrawerItem={true}>
<SettingsNavigationDrawerItem
label="Security"

19
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
View File

@ -1,17 +1,14 @@
import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { SettingsPath } from '@/types/SettingsPath';
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 { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
useLocation,
useNavigate,
useParams,
useSearchParams,
} from 'react-router-dom';
import { useLocation, useParams, useSearchParams } from 'react-router-dom';
import { Button, IconChevronDown, isDefined, MenuItem } from 'twenty-ui';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const StyledContainer = styled.div`
align-items: center;
@ -66,7 +63,7 @@ const StyledButton = styled(Button)`
export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
const { closeDropdown } = useDropdown(dropdownId);
const navigate = useNavigate();
const navigate = useNavigateSettings();
const location = useLocation();
const { objectNamePlural = '' } = useParams();
const [searchParams] = useSearchParams();
@ -78,11 +75,15 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
const handleClick = (step: 'select' | 'configure') => {
if (step === 'configure' && isDefined(fieldType)) {
navigate(
`/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${fieldType}`,
SettingsPath.ObjectNewFieldConfigure,
{ objectNamePlural },
{ fieldType },
);
} else {
navigate(
`/settings/objects/${objectNamePlural}/new-field/select${fieldType ? `?fieldType=${fieldType}` : ''}`,
SettingsPath.ObjectNewFieldSelect,
{ objectNamePlural },
fieldType ? { fieldType } : undefined,
);
}
closeDropdown();

12
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
View File

@ -8,6 +8,7 @@ import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/field
import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
import { SettingsPath } from '@/types/SettingsPath';
import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -17,6 +18,7 @@ import { Controller, useFormContext } from 'react-hook-form';
import { H2Title, IconSearch, UndecoratedLink } from 'twenty-ui';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
type SettingsObjectNewFieldSelectorProps = {
className?: string;
@ -128,7 +130,15 @@ export const SettingsObjectNewFieldSelector = ({
.map(([key, config]) => (
<StyledCardContainer key={key}>
<UndecoratedLink
to={`/settings/objects/${objectNamePlural}/new-field/configure?fieldType=${key}`}
to={getSettingsPath(
SettingsPath.ObjectNewFieldConfigure,
{
objectNamePlural,
},
{
fieldType: key,
},
)}
fullWidth
onClick={() => {
setValue('type', key as SettingsFieldType);

6
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx
View File

@ -13,8 +13,10 @@ import { capitalize } from 'twenty-shared';
import { FieldMetadataType } from '~/generated/graphql';
import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
import { SettingsPath } from '@/types/SettingsPath';
import '@xyflow/react/dist/style.css';
import { useState } from 'react';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
type SettingsDataModelOverviewObjectProps =
@ -122,7 +124,9 @@ export const SettingsDataModelOverviewObject = ({
<StyledHeader>
<StyledObjectName onMouseEnter={() => {}} onMouseLeave={() => {}}>
<StyledObjectLink
to={`/settings/objects/${objectMetadataItem.namePlural}`}
to={getSettingsPath(SettingsPath.Objects, {
objectNamePlural: objectMetadataItem.namePlural,
})}
>
{Icon && <Icon size={theme.icon.size.md} />}
{capitalize(objectMetadataItem.namePlural)}

39
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -12,6 +12,7 @@ import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/o
import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
import { SettingsPath } from '@/types/SettingsPath';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
@ -19,7 +20,6 @@ import { View } from '@/views/types/View';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import {
IconMinus,
@ -30,7 +30,9 @@ import {
useIcons,
} from 'twenty-ui';
import { RelationDefinitionType } from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import { RELATION_TYPES } from '../../constants/RelationTypes';
import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
@ -72,7 +74,7 @@ export const SettingsObjectFieldItemTableRow = ({
const variant = objectMetadataItem.isCustom ? 'identifier' : 'field-type';
const navigate = useNavigate();
const navigate = useNavigateSettings();
const [navigationMemorizedUrl, setNavigationMemorizedUrl] = useRecoilState(
navigationMemorizedUrlState,
@ -108,7 +110,10 @@ export const SettingsObjectFieldItemTableRow = ({
!isLabelIdentifier &&
LABEL_IDENTIFIER_FIELD_METADATA_TYPES.includes(fieldMetadataItem.type);
const linkToNavigate = `./${fieldMetadataItem.name}`;
const linkToNavigate = getSettingsPath(SettingsPath.ObjectFieldEdit, {
objectNamePlural: objectMetadataItem.namePlural,
fieldName: fieldMetadataItem.name,
});
const {
activateMetadataField,
@ -212,7 +217,15 @@ export const SettingsObjectFieldItemTableRow = ({
return (
<StyledObjectFieldTableRow
onClick={mode === 'view' ? () => navigate(linkToNavigate) : undefined}
onClick={
mode === 'view'
? () =>
navigate(SettingsPath.ObjectFieldEdit, {
objectNamePlural: objectMetadataItem.namePlural,
fieldName: fieldMetadataItem.name,
})
: undefined
}
>
<UndecoratedLink to={linkToNavigate}>
<StyledNameTableCell>
@ -244,7 +257,9 @@ export const SettingsObjectFieldItemTableRow = ({
}
to={
isRelatedObjectLinkable
? `/settings/objects/${relationObjectMetadataItem.namePlural}`
? getSettingsPath(SettingsPath.Objects, {
objectNamePlural: relationObjectMetadataItem.namePlural,
})
: undefined
}
value={fieldType}
@ -261,7 +276,12 @@ export const SettingsObjectFieldItemTableRow = ({
<SettingsObjectFieldActiveActionDropdown
isCustomField={fieldMetadataItem.isCustom === true}
scopeKey={fieldMetadataItem.id}
onEdit={() => navigate(linkToNavigate)}
onEdit={() =>
navigate(SettingsPath.ObjectFieldEdit, {
objectNamePlural: objectMetadataItem.namePlural,
fieldName: fieldMetadataItem.name,
})
}
onSetAsLabelIdentifier={
canBeSetAsLabelIdentifier
? () => handleSetLabelIdentifierField(fieldMetadataItem)
@ -286,7 +306,12 @@ export const SettingsObjectFieldItemTableRow = ({
<SettingsObjectFieldInactiveActionDropdown
isCustomField={fieldMetadataItem.isCustom === true}
scopeKey={fieldMetadataItem.id}
onEdit={() => navigate(linkToNavigate)}
onEdit={() =>
navigate(SettingsPath.ObjectFieldEdit, {
objectNamePlural: objectMetadataItem.namePlural,
fieldName: fieldMetadataItem.name,
})
}
onActivate={() =>
activateMetadataField(fieldMetadataItem.id, objectMetadataItem.id)
}

21
packages/twenty-front/src/modules/settings/data-model/object-details/components/tabs/ObjectSettings.tsx
View File

@ -2,7 +2,6 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { zodResolver } from '@hookform/resolvers/zod';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { Button, H2Title, IconArchive, Section } from 'twenty-ui';
import { z, ZodError } from 'zod';
@ -18,7 +17,7 @@ import {
import { settingsDataModelObjectIdentifiersFormSchema } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
import { SettingsDataModelObjectSettingsFormCard } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard';
import { settingsUpdateObjectInputSchema } from '@/settings/data-model/validation-schemas/settingsUpdateObjectInputSchema';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
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';
@ -27,8 +26,10 @@ import styled from '@emotion/styled';
import isEmpty from 'lodash.isempty';
import pick from 'lodash.pick';
import { useSetRecoilState } from 'recoil';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
import { getAppPath } from '~/utils/navigation/getAppPath';
const objectEditFormSchema = z
.object({})
@ -54,7 +55,7 @@ const StyledFormSection = styled(Section)`
`;
export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const { enqueueSnackBar } = useSnackBar();
const setUpdatedObjectNamePlural = useSetRecoilState(
updatedObjectNamePluralState,
@ -65,8 +66,6 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
useLastVisitedObjectMetadataItem();
const { getLastVisitedViewIdFromObjectMetadataItemId } = useLastVisitedView();
const settingsObjectsPagePath = getSettingsPagePath(SettingsPath.Objects);
const formConfig = useForm<SettingsDataModelObjectEditFormValues>({
mode: 'onTouched',
resolver: zodResolver(objectEditFormSchema),
@ -147,11 +146,17 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
objectMetadataItem.id,
);
setNavigationMemorizedUrl(
`/objects/${objectNamePluralForRedirection}?view=${lastVisitedView}`,
getAppPath(
AppPath.RecordIndexPage,
{ objectNamePlural: objectNamePluralForRedirection },
{ viewId: lastVisitedView },
),
);
}
navigate(`${settingsObjectsPagePath}/${objectNamePluralForRedirection}`);
navigate(SettingsPath.ObjectDetail, {
objectNamePlural: objectNamePluralForRedirection,
});
} catch (error) {
if (error instanceof ZodError) {
enqueueSnackBar(error.issues[0].message, {
@ -170,7 +175,7 @@ export const ObjectSettings = ({ objectMetadataItem }: ObjectSettingsProps) => {
idToUpdate: objectMetadataItem.id,
updatePayload: { isActive: false },
});
navigate(settingsObjectsPagePath);
navigate(SettingsPath.Objects);
};
return (

12
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx
View File

@ -2,15 +2,15 @@ import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDa
import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { Section } from '@react-email/components';
import { useNavigate } from 'react-router-dom';
import { H2Title } from 'twenty-ui';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const { connection, integration, databaseKey, tables } =
useDatabaseConnection({ fetchPolicy: 'network-only' });
@ -23,10 +23,12 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
const deleteConnection = async () => {
await deleteOneDatabaseConnection({ id: connection.id });
navigate(`${settingsIntegrationsPagePath}/${databaseKey}`);
navigate(SettingsPath.IntegrationDatabase, {
databaseKey,
});
};
const settingsIntegrationsPagePath = getSettingsPagePath(
const settingsIntegrationsPagePath = getSettingsPath(
SettingsPath.Integrations,
);

18
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx
View File

@ -1,11 +1,12 @@
import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';
import { IconChevronRight, LightIconButton } from 'twenty-ui';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
import { SettingsPath } from '@/types/SettingsPath';
import { RemoteServer } from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
type SettingsIntegrationDatabaseConnectionsListCardProps = {
integration: SettingsIntegration;
@ -34,7 +35,7 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
integration,
connections,
}: SettingsIntegrationDatabaseConnectionsListCardProps) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
return (
<SettingsListCard
@ -52,11 +53,20 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
onRowClick={(connection) => navigate(`./${connection.id}`)}
onRowClick={(connection) =>
navigate(SettingsPath.IntegrationDatabaseConnection, {
databaseKey: integration.from.key,
connectionId: connection.id,
})
}
getItemLabel={(connection) => connection.label}
hasFooter
footerButtonLabel="Add connection"
onFooterButtonClick={() => navigate('./new')}
onFooterButtonClick={() =>
navigate(SettingsPath.IntegrationNewDatabaseConnection, {
databaseKey: integration.from.key,
})
}
/>
);
};

19
packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx
View File

@ -8,7 +8,6 @@ import {
getFormDefaultValuesFromConnection,
} from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
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';
@ -17,7 +16,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
import { Section } from '@react-email/components';
import pick from 'lodash.pick';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { H2Title, Info } from 'twenty-ui';
import { z } from 'zod';
import {
@ -25,6 +23,8 @@ import {
RemoteTable,
RemoteTableStatus,
} from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
export const SettingsIntegrationEditDatabaseConnectionContent = ({
connection,
@ -38,7 +38,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
tables: RemoteTable[];
}) => {
const { enqueueSnackBar } = useSnackBar();
const navigate = useNavigate();
const navigate = useNavigateSettings();
const editConnectionSchema = getEditionSchemaForForm(databaseKey);
type SettingsIntegrationEditConnectionFormValues = z.infer<
@ -56,7 +56,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
const { updateOneDatabaseConnection } = useUpdateOneDatabaseConnection();
const settingsIntegrationsPagePath = getSettingsPagePath(
const settingsIntegrationsPagePath = getSettingsPath(
SettingsPath.Integrations,
);
@ -82,9 +82,10 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
id: connection?.id ?? '',
});
navigate(
`${settingsIntegrationsPagePath}/${databaseKey}/${connection?.id}`,
);
navigate(SettingsPath.IntegrationDatabaseConnection, {
databaseKey,
connectionId: connection?.id,
});
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: SnackBarVariant.Error,
@ -116,7 +117,9 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
<SaveAndCancelButtons
isSaveDisabled={!canSave}
onCancel={() =>
navigate(`${settingsIntegrationsPagePath}/${databaseKey}`)
navigate(SettingsPath.IntegrationDatabase, {
databaseKey,
})
}
onSave={handleSave}
/>

9
packages/twenty-front/src/modules/settings/integrations/database-connection/hooks/useDatabaseConnection.ts
View File

@ -1,12 +1,13 @@
import { WatchQueryFetchPolicy } from '@apollo/client';
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { AppPath } from '@/types/AppPath';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const useDatabaseConnection = ({
fetchPolicy,
@ -14,7 +15,7 @@ export const useDatabaseConnection = ({
fetchPolicy?: WatchQueryFetchPolicy;
}) => {
const { databaseKey = '', connectionId = '' } = useParams();
const navigate = useNavigate();
const navigateApp = useNavigateApp();
const [integrationCategoryAll] = useSettingsIntegrationCategories();
const integration = integrationCategoryAll.integrations.find(
@ -34,12 +35,12 @@ export const useDatabaseConnection = ({
useEffect(() => {
if (!isIntegrationAvailable || (!loading && !connection)) {
navigate(AppPath.NotFound);
navigateApp(AppPath.NotFound);
}
}, [
integration,
databaseKey,
navigate,
navigateApp,
isIntegrationAvailable,
connection,
loading,

12
packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
View File

@ -2,20 +2,20 @@
import { Link } from 'react-router-dom';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SettingsCard } from '@/settings/components/SettingsCard';
import { SettingsSSOIdentitiesProvidersListCardWrapper } from '@/settings/security/components/SettingsSSOIdentitiesProvidersListCardWrapper';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import isPropValid from '@emotion/is-prop-valid';
import styled from '@emotion/styled';
import { useRecoilValue, useRecoilState } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { IconKey } from 'twenty-ui';
import { useListSsoIdentityProvidersByWorkspaceIdQuery } from '~/generated/graphql';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledLink = styled(Link, {
shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'isDisabled',
@ -49,7 +49,7 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {
return loading || !SSOIdentitiesProviders.length ? (
<StyledLink
to={getSettingsPagePath(SettingsPath.NewSSOIdentityProvider)}
to={getSettingsPath(SettingsPath.NewSSOIdentityProvider)}
isDisabled={currentWorkspace?.hasValidEntrepriseKey !== true}
>
<SettingsCard

15
packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCardWrapper.tsx
View File

@ -1,16 +1,15 @@
/* @license Enterprise */
import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
import { SettingsSSOIdentityProviderRowRightContainer } from '@/settings/security/components/SettingsSSOIdentityProviderRowRightContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
import { useNavigate } from 'react-router-dom';
import { SettingsSSOIdentityProviderRowRightContainer } from '@/settings/security/components/SettingsSSOIdentityProviderRowRightContainer';
import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProvidersState';
import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
import { SettingsPath } from '@/types/SettingsPath';
import { useRecoilValue } from 'recoil';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
export const SettingsSSOIdentitiesProvidersListCardWrapper = () => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const SSOIdentitiesProviders = useRecoilValue(SSOIdentitiesProvidersState);
@ -28,9 +27,7 @@ export const SettingsSSOIdentitiesProvidersListCardWrapper = () => {
)}
hasFooter
footerButtonLabel="Add SSO Identity Provider"
onFooterButtonClick={() =>
navigate(getSettingsPagePath(SettingsPath.NewSSOIdentityProvider))
}
onFooterButtonClick={() => navigate(SettingsPath.NewSSOIdentityProvider)}
/>
);
};

4
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTable.tsx
View File

@ -2,7 +2,6 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
import { SettingsServerlessFunctionsFieldItemTableRow } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsFieldItemTableRow';
import { SettingsServerlessFunctionsTableEmpty } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty';
import { useGetManyServerlessFunctions } from '@/settings/serverless-functions/hooks/useGetManyServerlessFunctions';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
@ -10,6 +9,7 @@ import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { ServerlessFunction } from '~/generated-metadata/graphql';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px 132px 68px;
@ -38,7 +38,7 @@ export const SettingsServerlessFunctionsTable = () => {
<SettingsServerlessFunctionsFieldItemTableRow
key={serverlessFunction.id}
serverlessFunction={serverlessFunction}
to={getSettingsPagePath(SettingsPath.ServerlessFunctions, {
to={getSettingsPath(SettingsPath.ServerlessFunctions, {
id: serverlessFunction.id,
})}
/>

4
packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionsTableEmpty.tsx
View File

@ -1,4 +1,3 @@
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import styled from '@emotion/styled';
import {
@ -11,6 +10,7 @@ import {
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
IconPlus,
} from 'twenty-ui';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
const StyledEmptyFunctionsContainer = styled.div`
height: 60vh;
@ -35,7 +35,7 @@ export const SettingsServerlessFunctionsTableEmpty = () => {
<Button
Icon={IconPlus}
title="New function"
to={getSettingsPagePath(SettingsPath.NewServerlessFunction)}
to={getSettingsPath(SettingsPath.NewServerlessFunction)}
/>
</AnimatedPlaceholderEmptyContainer>
</StyledEmptyFunctionsContainer>

7
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionCodeEditorTab.tsx
View File

@ -4,13 +4,11 @@ import {
} from '@/settings/serverless-functions/components/SettingsServerlessFunctionCodeEditor';
import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/serverless-functions/constants/SettingsServerlessFunctionTabListComponentId';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';
import { Key } from 'ts-key-enum';
import {
Button,
@ -22,6 +20,7 @@ import {
Section,
} from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const StyledTabList = styled(TabList)`
border-bottom: none;
@ -91,7 +90,7 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
/>
);
const navigate = useNavigate();
const navigate = useNavigateSettings();
useHotkeyScopeOnMount(
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
);
@ -99,7 +98,7 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
useScopedHotkeys(
[Key.Escape],
() => {
navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
navigate(SettingsPath.ServerlessFunctions);
},
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
);

7
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionMonitoringTab.tsx
View File

@ -2,19 +2,18 @@ import { AnalyticsActivityGraph } from '@/analytics/components/AnalyticsActivity
import { AnalyticsGraphEffect } from '@/analytics/components/AnalyticsGraphEffect';
import { AnalyticsGraphDataInstanceContext } from '@/analytics/states/contexts/AnalyticsGraphDataInstanceContext';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useNavigate } from 'react-router-dom';
import { Key } from 'ts-key-enum';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
export const SettingsServerlessFunctionMonitoringTab = ({
serverlessFunctionId,
}: {
serverlessFunctionId: string;
}) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
useHotkeyScopeOnMount(
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
@ -23,7 +22,7 @@ export const SettingsServerlessFunctionMonitoringTab = ({
useScopedHotkeys(
[Key.Escape],
() => {
navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
navigate(SettingsPath.ServerlessFunctions);
},
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
);

9
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionSettingsTab.tsx
View File

@ -3,15 +3,14 @@ import { SettingsServerlessFunctionTabEnvironmentVariablesSection } from '@/sett
import { useDeleteOneServerlessFunction } from '@/settings/serverless-functions/hooks/useDeleteOneServerlessFunction';
import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Key } from 'ts-key-enum';
import { Button, H2Title, Section } from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
export const SettingsServerlessFunctionSettingsTab = ({
formValues,
@ -24,14 +23,14 @@ export const SettingsServerlessFunctionSettingsTab = ({
onChange: (key: string) => (value: string) => void;
onCodeChange: (filePath: string, value: string) => void;
}) => {
const navigate = useNavigate();
const navigate = useNavigateSettings();
const [isDeleteFunctionModalOpen, setIsDeleteFunctionModalOpen] =
useState(false);
const { deleteOneServerlessFunction } = useDeleteOneServerlessFunction();
const deleteFunction = async () => {
await deleteOneServerlessFunction({ id: serverlessFunctionId });
navigate('/settings/functions');
navigate(SettingsPath.ServerlessFunctions);
};
useHotkeyScopeOnMount(
@ -49,7 +48,7 @@ export const SettingsServerlessFunctionSettingsTab = ({
useScopedHotkeys(
[Key.Escape],
() => {
navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
navigate(SettingsPath.ServerlessFunctions);
},
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
);

11
packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab.tsx
View File

@ -7,17 +7,16 @@ import {
Section,
} from 'twenty-ui';
import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
const StyledInputsContainer = styled.div`
display: flex;
@ -47,7 +46,7 @@ export const SettingsServerlessFunctionTestTab = ({
}));
};
const navigate = useNavigate();
const navigate = useNavigateSettings();
useHotkeyScopeOnMount(
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
);
@ -55,7 +54,7 @@ export const SettingsServerlessFunctionTestTab = ({
useScopedHotkeys(
[Key.Escape],
() => {
navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
navigate(SettingsPath.ServerlessFunctions);
},
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
);

15
packages/twenty-front/src/modules/settings/utils/__tests__/getSettingsPagePath.test.ts
View File

@ -1,15 +0,0 @@
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
describe('getSettingsPagePath', () => {
test('should compute page path', () => {
expect(getSettingsPagePath(SettingsPath.ServerlessFunctions)).toEqual(
'/settings/functions',
);
});
test('should compute page path with id', () => {
expect(
getSettingsPagePath(SettingsPath.ServerlessFunctions, { id: 'id' }),
).toEqual('/settings/functions/id');
});
});

37
packages/twenty-front/src/modules/settings/utils/getSettingsPagePath.ts
View File

@ -1,37 +0,0 @@
import { ExtractPathParams } from '@/types/ExtractPathParams';
import { SettingsPath } from '@/types/SettingsPath';
import { isDefined } from '~/utils/isDefined';
type Params<V extends string> = {
[K in ExtractPathParams<V>]: string;
} & {
id?: string;
};
export const getSettingsPagePath = <Path extends SettingsPath>(
path: Path,
params?: Params<Path>,
searchParams?: Record<string, string>,
) => {
let resultPath = `/settings/${path}`;
if (isDefined(params)) {
resultPath = resultPath.replace(/:([a-zA-Z]+)/g, (_, key) => {
const value = params[key as keyof Params<Path>];
return value;
});
}
if (isDefined(params?.id)) {
resultPath = `${resultPath}/${params?.id}`;
}
if (isDefined(searchParams)) {
const searchParamsString = new URLSearchParams(searchParams).toString();
resultPath = `${resultPath}?${searchParamsString}`;
}
return resultPath;
};

13
packages/twenty-front/src/modules/types/SettingsPath.ts
View File

@ -4,9 +4,7 @@ export enum SettingsPath {
Accounts = 'accounts',
NewAccount = 'accounts/new',
AccountsCalendars = 'accounts/calendars',
AccountsCalendarsSettings = 'accounts/calendars/:accountUuid',
AccountsEmails = 'accounts/emails',
AccountsEmailsInboxSettings = 'accounts/emails/:accountUuid',
Billing = 'billing',
Objects = 'objects',
ObjectOverview = 'objects/overview',
@ -15,16 +13,15 @@ export enum SettingsPath {
ObjectNewFieldConfigure = 'objects/:objectNamePlural/new-field/configure',
ObjectFieldEdit = 'objects/:objectNamePlural/:fieldName',
NewObject = 'objects/new',
ServerlessFunctions = 'functions',
NewServerlessFunction = 'functions/new',
ServerlessFunctionDetail = 'functions/:serverlessFunctionId',
WorkspaceMembersPage = 'workspace-members',
Workspace = 'workspace',
Domain = 'domain',
CRMMigration = 'crm-migration',
Developers = 'developers',
ServerlessFunctions = 'functions',
DevelopersNewApiKey = 'api-keys/new',
DevelopersApiKeyDetail = 'api-keys/:apiKeyId',
DevelopersNewApiKey = 'developers/api-keys/new',
DevelopersApiKeyDetail = 'developers/api-keys/:apiKeyId',
Integrations = 'integrations',
IntegrationDatabase = 'integrations/:databaseKey',
IntegrationDatabaseConnection = 'integrations/:databaseKey/:connectionId',
@ -33,8 +30,8 @@ export enum SettingsPath {
Security = 'security',
NewSSOIdentityProvider = 'security/sso/new',
EditSSOIdentityProvider = 'security/sso/:identityProviderId',
DevelopersNewWebhook = 'webhooks/new',
DevelopersNewWebhookDetail = 'webhooks/:webhookId',
DevelopersNewWebhook = 'developers/webhooks/new',
DevelopersNewWebhookDetail = 'developers/webhooks/:webhookId',
Releases = 'releases',
AdminPanel = 'admin-panel',
FeatureFlags = 'admin-panel/feature-flags',

16
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
View File

@ -24,7 +24,6 @@ import {
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@ -36,6 +35,7 @@ import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
import jsonPage from '../../../../../../../package.json';
import { NavigationDrawer } from '../NavigationDrawer';
import { NavigationDrawerItem } from '../NavigationDrawerItem';
@ -136,30 +136,30 @@ export const Settings: Story = {
<NavigationDrawerSectionTitle label="User" />
<NavigationDrawerItem
label="Profile"
to={getSettingsPagePath(SettingsPath.ProfilePage)}
to={getSettingsPath(SettingsPath.ProfilePage)}
Icon={IconUserCircle}
active
/>
<NavigationDrawerItem
label="Appearance"
to={getSettingsPagePath(SettingsPath.Experience)}
to={getSettingsPath(SettingsPath.Experience)}
Icon={IconColorSwatch}
/>
<NavigationDrawerItemGroup>
<NavigationDrawerItem
label="Accounts"
to={getSettingsPagePath(SettingsPath.Accounts)}
to={getSettingsPath(SettingsPath.Accounts)}
Icon={IconAt}
/>
<NavigationDrawerSubItem
label="Emails"
to={getSettingsPagePath(SettingsPath.AccountsEmails)}
to={getSettingsPath(SettingsPath.AccountsEmails)}
Icon={IconMail}
subItemState="intermediate-before-selected"
/>
<NavigationDrawerSubItem
label="Calendar"
to={getSettingsPagePath(SettingsPath.AccountsCalendars)}
to={getSettingsPath(SettingsPath.AccountsCalendars)}
Icon={IconCalendarEvent}
subItemState="last-selected"
/>
@ -170,12 +170,12 @@ export const Settings: Story = {
<NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem
label="General"
to={getSettingsPagePath(SettingsPath.Workspace)}
to={getSettingsPath(SettingsPath.Workspace)}
Icon={IconSettings}
/>
<NavigationDrawerItem
label="Members"
to={getSettingsPagePath(SettingsPath.WorkspaceMembersPage)}
to={getSettingsPath(SettingsPath.WorkspaceMembersPage)}
Icon={IconUsers}
/>
</NavigationDrawerSection>

18
packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
View File

@ -1,12 +1,14 @@
import { useCallback } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { SettingsPath } from '@/types/SettingsPath';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { isDefined } from '~/utils/isDefined';
export const useGetAvailableFieldsForKanban = () => {
@ -28,19 +30,23 @@ export const useGetAvailableFieldsForKanban = () => {
(field) => field.type === FieldMetadataType.Select,
) ?? [];
const navigate = useNavigate();
const navigate = useNavigateSettings();
const navigateToSelectSettings = useCallback(() => {
setNavigationMemorizedUrl(location.pathname + location.search);
if (isDefined(objectMetadataItem?.namePlural)) {
navigate(
`/settings/objects/${
objectMetadataItem.namePlural
}/new-field/configure?fieldType=${FieldMetadataType.Select}`,
SettingsPath.ObjectNewFieldConfigure,
{
objectNamePlural: objectMetadataItem.namePlural,
},
{
fieldType: FieldMetadataType.Select,
},
);
} else {
navigate(`/settings/objects`);
navigate(SettingsPath.Objects);
}
}, [
setNavigationMemorizedUrl,

17
packages/twenty-front/src/modules/workflow/components/OverrideWorkflowDraftConfirmationModal.tsx
View File

@ -1,13 +1,14 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
import { AppPath } from '@/types/AppPath';
import {
ConfirmationModal,
StyledCenteredButton,
} from '@/ui/layout/modal/components/ConfirmationModal';
import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { getAppPath } from '~/utils/navigation/getAppPath';
export const OverrideWorkflowDraftConfirmationModal = ({
workflowId,
@ -24,7 +25,7 @@ export const OverrideWorkflowDraftConfirmationModal = ({
const { createDraftFromWorkflowVersion } =
useCreateDraftFromWorkflowVersion();
const navigate = useNavigate();
const navigate = useNavigateApp();
const handleOverrideDraft = async () => {
await createDraftFromWorkflowVersion({
@ -32,7 +33,10 @@ export const OverrideWorkflowDraftConfirmationModal = ({
workflowVersionIdToCopy,
});
navigate(buildShowPageURL(CoreObjectNameSingular.Workflow, workflowId));
navigate(AppPath.RecordShowPage, {
objectNameSingular: CoreObjectNameSingular.Workflow,
objectRecordId: workflowId,
});
};
return (
@ -46,7 +50,10 @@ export const OverrideWorkflowDraftConfirmationModal = ({
deleteButtonText={'Override Draft'}
AdditionalButtons={
<StyledCenteredButton
to={buildShowPageURL(CoreObjectNameSingular.Workflow, workflowId)}
to={getAppPath(AppPath.RecordShowPage, {
objectNameSingular: CoreObjectNameSingular.Workflow,
objectRecordId: workflowId,
})}
onClick={() => {
setOpenOverrideWorkflowDraftConfirmationModal(false);
}}

16
packages/twenty-front/src/modules/workflow/components/RecordShowPageWorkflowVersionHeader.tsx
View File

@ -1,7 +1,7 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { buildShowPageURL } from '@/object-record/record-show/utils/buildShowPageURL';
import { AppPath } from '@/types/AppPath';
import { OverrideWorkflowDraftConfirmationModal } from '@/workflow/components/OverrideWorkflowDraftConfirmationModal';
import { useActivateWorkflowVersion } from '@/workflow/hooks/useActivateWorkflowVersion';
import { useCreateDraftFromWorkflowVersion } from '@/workflow/hooks/useCreateDraftFromWorkflowVersion';
@ -9,7 +9,6 @@ import { useDeactivateWorkflowVersion } from '@/workflow/hooks/useDeactivateWork
import { useWorkflowVersion } from '@/workflow/hooks/useWorkflowVersion';
import { openOverrideWorkflowDraftConfirmationModalState } from '@/workflow/states/openOverrideWorkflowDraftConfirmationModalState';
import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow';
import { useNavigate } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import {
Button,
@ -18,6 +17,7 @@ import {
IconPower,
isDefined,
} from 'twenty-ui';
import { useNavigateApp } from '~/hooks/useNavigateApp';
export const RecordShowPageWorkflowVersionHeader = ({
workflowVersionId,
@ -81,7 +81,7 @@ export const RecordShowPageWorkflowVersionHeader = ({
openOverrideWorkflowDraftConfirmationModalState,
);
const navigate = useNavigate();
const navigate = useNavigateApp();
return (
<>
@ -100,12 +100,10 @@ export const RecordShowPageWorkflowVersionHeader = ({
workflowVersionIdToCopy: workflowVersion.id,
});
navigate(
buildShowPageURL(
CoreObjectNameSingular.Workflow,
workflowVersion.workflow.id,
),
);
navigate(AppPath.RecordShowPage, {
objectNameSingular: CoreObjectNameSingular.Workflow,
objectRecordId: workflowVersion.workflow.id,
});
}
}}
/>