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

Never display broken relations in record page layouts (#17738)

Browse Source 
We generate Field widgets for relations on-the-fly, when a record page
layout is first requested by the user. When the user changed their data
model and then returned to a record page layout, the Field widgets
weren't updated. **This PR ensures Field widgets are recomputed when
relations change.**

Future subjects:

- Now that we will fetch the configuration from the backend and start
storing updates, we will have to think about how we deal with these
generated relation Field widgets.

## Before


https://github.com/user-attachments/assets/99d53b19-b231-435f-b14f-4473ba269ad2

## After


https://github.com/user-attachments/assets/357d956d-8b3b-448c-a983-82569a7dd0a0

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Baptiste Devessier
2026-02-05 15:07:04 +01:00
committed by GitHub
parent df516a904b
commit 5b701f5ba4
6 changed files with 306 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/components/PageLayoutInitializationQueryEffect.tsx
+2 -68
View File
@@ -1,22 +1,4 @@
import { FIND_ONE_PAGE_LAYOUT } from '@/dashboards/graphql/queries/findOnePageLayout';
import { DEFAULT_COMPANY_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultCompanyRecordPageLayout';
import { DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultCompanyRecordPageLayoutId';
import { DEFAULT_NOTE_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultNoteRecordPageLayout';
import { DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultNoteRecordPageLayoutId';
import { DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultOpportunityRecordPageLayout';
import { DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultOpportunityRecordPageLayoutId';
import { DEFAULT_PERSON_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultPersonRecordPageLayout';
import { DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultPersonRecordPageLayoutId';
import { DEFAULT_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultRecordPageLayout';
import { DEFAULT_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultRecordPageLayoutId';
import { DEFAULT_TASK_RECORD_PAGE_LAYOUT } from '@/page-layout/constants/DefaultTaskRecordPageLayout';
import { DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultTaskRecordPageLayoutId';
import { DEFAULT_WORKFLOW_PAGE_LAYOUT } from '@/page-layout/constants/DefaultWorkflowPageLayout';
import { DEFAULT_WORKFLOW_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowPageLayoutId';
import { DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT } from '@/page-layout/constants/DefaultWorkflowRunPageLayout';
import { DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowRunPageLayoutId';
import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT } from '@/page-layout/constants/DefaultWorkflowVersionPageLayout';
import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowVersionPageLayoutId';
import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/usePageLayoutWithRelationWidgets';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -24,40 +6,14 @@ import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/page
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useQuery } from '@apollo/client';
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
const getDefaultLayoutById = (layoutId: string): PageLayout => {
switch (layoutId) {
case DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID:
return DEFAULT_COMPANY_RECORD_PAGE_LAYOUT;
case DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID:
return DEFAULT_PERSON_RECORD_PAGE_LAYOUT;
case DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID:
return DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT;
case DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID:
return DEFAULT_NOTE_RECORD_PAGE_LAYOUT;
case DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID:
return DEFAULT_TASK_RECORD_PAGE_LAYOUT;
case DEFAULT_WORKFLOW_PAGE_LAYOUT_ID:
return DEFAULT_WORKFLOW_PAGE_LAYOUT;
case DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID:
return DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT;
case DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID:
return DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT;
case DEFAULT_RECORD_PAGE_LAYOUT_ID:
default:
return DEFAULT_RECORD_PAGE_LAYOUT;
}
};
type PageLayoutInitializationQueryEffectProps = {
pageLayoutId: string;
onInitialized?: (pageLayout: PageLayout) => void;
@@ -71,29 +27,7 @@ export const PageLayoutInitializationQueryEffect = ({
pageLayoutIsInitializedComponentState,
);
const isDefaultLayout =
pageLayoutId === DEFAULT_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_WORKFLOW_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID ||
pageLayoutId === DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID;
const { data } = useQuery(FIND_ONE_PAGE_LAYOUT, {
variables: {
id: pageLayoutId,
},
skip: isDefaultLayout,
});
const basePageLayout: PageLayout | undefined = isDefaultLayout
? getDefaultLayoutById(pageLayoutId)
: data?.getPageLayout
? transformPageLayout(data.getPageLayout)
: undefined;
const basePageLayout = useBasePageLayout(pageLayoutId);
const pageLayout = usePageLayoutWithRelationWidgets(basePageLayout);
packages/twenty-front/src/modules/page-layout/components/PageLayoutRelationWidgetsSyncEffect.tsx
+107
View File
@@ -0,0 +1,107 @@
import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { injectRelationWidgetsIntoLayout } from '@/page-layout/utils/injectRelationWidgetsIntoLayout';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { PageLayoutType } from '~/generated/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
type PageLayoutRelationWidgetsSyncEffectProps = {
pageLayoutId: string;
};
export const PageLayoutRelationWidgetsSyncEffect = ({
pageLayoutId,
}: PageLayoutRelationWidgetsSyncEffectProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const isInitialized = useRecoilComponentValue(
pageLayoutIsInitializedComponentState,
);
const basePageLayout = useBasePageLayout(pageLayoutId);
const { boxedRelationFieldMetadataItems } = useFieldListFieldMetadataItems({
objectNameSingular: targetRecordIdentifier?.targetObjectNameSingular ?? '',
});
const pageLayoutPersistedComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutPersistedComponentState);
const pageLayoutDraftComponentCallbackState = useRecoilComponentCallbackState(
pageLayoutDraftComponentState,
);
const pageLayoutCurrentLayoutsComponentCallbackState =
useRecoilComponentCallbackState(pageLayoutCurrentLayoutsComponentState);
const syncPageLayoutWithRelationWidgets = useRecoilCallback(
({ set, snapshot }) =>
(layout: PageLayout) => {
const currentPersisted = getSnapshotValue(
snapshot,
pageLayoutPersistedComponentCallbackState,
);
if (!isDeeplyEqual(layout, currentPersisted)) {
set(pageLayoutPersistedComponentCallbackState, layout);
set(pageLayoutDraftComponentCallbackState, {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
});
const tabLayouts = convertPageLayoutToTabLayouts(layout);
set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
[
pageLayoutCurrentLayoutsComponentCallbackState,
pageLayoutDraftComponentCallbackState,
pageLayoutPersistedComponentCallbackState,
],
);
useEffect(() => {
if (!isInitialized) {
return;
}
if (!isDefined(basePageLayout)) {
return;
}
const isRecordPage = layoutType === PageLayoutType.RECORD_PAGE;
if (!isRecordPage) {
return;
}
const layoutWithRelationWidgets = injectRelationWidgetsIntoLayout(
basePageLayout,
boxedRelationFieldMetadataItems,
);
syncPageLayoutWithRelationWidgets(layoutWithRelationWidgets);
}, [
basePageLayout,
boxedRelationFieldMetadataItems,
isInitialized,
layoutType,
syncPageLayoutWithRelationWidgets,
]);
return null;
};
packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx
+2
View File
@@ -1,4 +1,5 @@
import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect';
import { PageLayoutRelationWidgetsSyncEffect } from '@/page-layout/components/PageLayoutRelationWidgetsSyncEffect';
import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRendererContent';
import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
@@ -42,6 +43,7 @@ export const PageLayoutRenderer = ({
pageLayoutId={pageLayoutId}
onInitialized={onInitialized}
/>
<PageLayoutRelationWidgetsSyncEffect pageLayoutId={pageLayoutId} />
<PageLayoutRendererContent />
</TabListComponentInstanceContext.Provider>
</PageLayoutComponentInstanceContext.Provider>