Create the Dashboard record show page (#14423)

Closes https://github.com/twentyhq/core-team-issues/issues/1438 - Reorganized PageLayout module - Created `DashboardRenderer` and `PageLayoutRenderer` - Created stories for the `PageLayoutRenderer` - Refactored the Widget components https://github.com/user-attachments/assets/27e9ac8f-b237-4c21-8494-3fab6d65af3a
2025-09-11 18:26:26 +02:00
parent 140b416b22
commit e80c552ae7
124 changed files with 1528 additions and 808 deletions
@@ -0,0 +1,89 @@
+import { SETTINGS_PAGE_LAYOUT_TABS_INSTANCE_ID } from '@/page-layout/constants/SettingsPageLayoutTabsInstanceId';
+import { pageLayoutCurrentLayoutsState } from '@/page-layout/states/pageLayoutCurrentLayoutsState';
+import { pageLayoutDraftState } from '@/page-layout/states/pageLayoutDraftState';
+import { pageLayoutDraggedAreaState } from '@/page-layout/states/pageLayoutDraggedAreaState';
+import { type PageLayoutWidgetWithData } from '@/page-layout/types/pageLayoutTypes';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { createUpdatedTabLayouts } from '@/page-layout/utils/createUpdatedTabLayouts';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilCallback } from 'recoil';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetType } from '~/generated/graphql';
+
+export const useCreatePageLayoutIframeWidget = () => {
+  const activeTabId = useRecoilComponentValue(
+    activeTabIdComponentState,
+    SETTINGS_PAGE_LAYOUT_TABS_INSTANCE_ID,
+  );
+
+  const createPageLayoutIframeWidget = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (title: string, url: string) => {
+        const allTabLayouts = snapshot
+          .getLoadable(pageLayoutCurrentLayoutsState)
+          .getValue();
+        const pageLayoutDraggedArea = snapshot
+          .getLoadable(pageLayoutDraggedAreaState)
+          .getValue();
+
+        if (!activeTabId) {
+          return;
+        }
+
+        const widgetId = `widget-${uuidv4()}`;
+        const defaultSize = { w: 6, h: 6 };
+        const position = getDefaultWidgetPosition(
+          pageLayoutDraggedArea,
+          defaultSize,
+        );
+
+        const newWidget: PageLayoutWidgetWithData = {
+          id: widgetId,
+          pageLayoutTabId: activeTabId,
+          title,
+          type: WidgetType.IFRAME,
+          gridPosition: {
+            row: position.y,
+            column: position.x,
+            rowSpan: position.h,
+            columnSpan: position.w,
+          },
+          configuration: {
+            url,
+          },
+          data: {},
+          objectMetadataId: null,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+        };
+
+        const newLayout = {
+          i: widgetId,
+          x: position.x,
+          y: position.y,
+          w: position.w,
+          h: position.h,
+        };
+
+        const updatedLayouts = createUpdatedTabLayouts(
+          allTabLayouts,
+          activeTabId,
+          newLayout,
+        );
+        set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+        set(pageLayoutDraftState, (prev) => ({
+          ...prev,
+          tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+        }));
+
+        set(pageLayoutDraggedAreaState, null);
+      },
+    [activeTabId],
+  );
+
+  return { createPageLayoutIframeWidget };
+};