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

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>
2026-02-05 15:07:04 +01:00
parent df516a904b
commit 5b701f5ba4
6 changed files with 306 additions and 183 deletions
@@ -0,0 +1,78 @@
+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 { type PageLayout } from '@/page-layout/types/PageLayout';
+import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
+import { useQuery } from '@apollo/client';
+
+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;
+  }
+};
+
+const isDefaultLayoutId = (layoutId: string): boolean =>
+  layoutId === DEFAULT_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_WORKFLOW_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID ||
+  layoutId === DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID;
+
+export const useBasePageLayout = (
+  pageLayoutId: string,
+): PageLayout | undefined => {
+  const isDefaultLayout = isDefaultLayoutId(pageLayoutId);
+
+  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;
+
+  return basePageLayout;
+};