Add record table widget to dashboards (#18747)

## Demo https://github.com/user-attachments/assets/584de452-544a-41f8-ae9f-4be9e9d0cd9f ## Problem - Dashboards only supported chart widgets — tabular record data had no inline widget type - `RecordTable` was tightly coupled to the record index: HTML IDs, CSS variables, and hover portals were global strings with no per-instance scoping, so multiple tables on the same page would collide - `updateRecordTableCSSVariable`, `RECORD_TABLE_HTML_ID`, and cell portal IDs were hardcoded — placing two tables caused hover portals and CSS column widths to bleed across instances - Grid drag-select captured record UUIDs as cell IDs, producing `NaN` layout coordinates and a full-page freeze on second widget creation ## Fix - `RECORD_TABLE` is now a valid widget type across the full stack — server DTOs, DB enum migration, universal config mapping, GraphQL codegen, shared types (`RecordTableConfigurationDto`, `WidgetType`, `addRecordTableWidgetType` migration) - A record table widget can be placed on a dashboard and boots from a View ID with no record index dependency — `StandaloneRecordTableProvider` + `StandaloneRecordTableViewLoadEffect` (wraps existing `RecordTableWithWrappers` unchanged) - Selecting a data source auto-creates a dedicated View with up to 6 initial fields; switching source or deleting the widget cleans up the View — `useCreateViewForRecordTableWidget` + `useDeleteViewForRecordTableWidget` - The settings panel exposes source, field visibility/reorder, filter conditions, sort rules, and editable widget title — `SidePanelPageLayoutRecordTableSettings` + sub-pages, matching chart widget pattern - Filters, sorts, and aggregate operations update the table in real time but only persist to the View on explicit dashboard save — `useSaveRecordTableWidgetsViewDataOnDashboardSave` (diff + flush on save) - Headers are always non-interactive (no dropdown, no cursor pointer); columns are resizable only in edit mode; cells are non-editable in both modes — `isRecordTableColumnHeadersReadOnlyComponentState`, `isRecordTableColumnResizableComponentState`, `isRecordTableCellsNonEditableComponentState` (Jotai component states) - Hover portals and CSS column widths no longer bleed between multiple table widgets — `getRecordTableHtmlId(tableId)`, `getRecordTableCellId(tableId, …)`, `updateRecordTableCSSVariable(tableId, …)` scope all DOM IDs and CSS variables per instance - Clicking inside a widget's content area no longer opens the settings panel — `WidgetCardContent` stops click propagation when editable, limiting settings-open to the card header and chrome - Second widget creation no longer freezes the page — `PageLayoutGridLayout` drag-select filters by `cell-` prefix to exclude record UUIDs from grid cell detection ## Follow-up fixes **Widget save flow** - Saving a dashboard silently dropped record table widget changes (column visibility, order, filters, sorts, aggregates) because widget data save was bundled inside the layout save and only ran when layout structure changed - Widget data now persists independently via `useSavePageLayoutWidgetsData`, called in all save paths (dashboard save, record page save, layout customization save); saves are also skipped when nothing has changed **Drag-and-drop / checkbox columns in widget** - Record table widgets showed the drag handle column and checkbox selection column even though row reordering and multi-select are meaningless in a read-only widget - Two new component states (`isRecordTableDragColumnHiddenComponentState`, `isRecordTableCheckboxColumnHiddenComponentState`) hide each column independently; widget tables now display only data columns **Sticky column layout** - Sticky positioning of the first three columns used `:nth-of-type` CSS selectors — when drag or checkbox columns were hidden, the selector targeted the wrong column and the first data column didn't stick - Sticky CSS now targets semantic class names (`RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME`, etc.) so sticky behavior is correct regardless of which columns are hidden **Save/Cancel buttons during edit mode** - Save and Cancel command-menu buttons were unpinned during dashboard edit mode because the pin logic excluded all items while `isPageInEditMode` was true - Items whose availability expression contains `isPageInEditMode` are now exempted from the unpin rule; Save/Cancel stay pinned during editing **Title input auto-focus** - Selecting "Record Table" as widget type auto-focused the title input, interrupting the configuration flow - `focusTitleInput` is now `false` when navigating to record table settings **Morph relation field error** - A field with missing `morphRelations` metadata crashed the page with a "refresh" error from `mapObjectMetadataToGraphQLQuery` - Now returns an empty array and silently omits the field from the query instead of crashing **`updateRecordMutation` prop removal** - `RecordTableWithWrappers` required callers to pass an `updateRecordMutation` callback, duplicating `useUpdateOneRecord` at every usage site - The mutation is now owned inside `RecordTableContextProvider` via `RecordTableUpdateContext`; the prop is gone **Standalone → Widget module rename** - `record-table-standalone` module renamed to `record-table-widget` — `StandaloneRecordTable` → `RecordTableWidget`, `StandaloneRecordTableViewLoadEffect` → `RecordTableWidgetViewLoadEffect`, etc. **RecordTableRow cell extraction** - Row rendering logic (`RecordTableCellDragAndDrop`, `RecordTableCellCheckbox`, `RecordTableFieldsCells`, hotkey/arrow-key effects) was duplicated between `RecordTableRow` and `RecordTableRowVirtualizedFullData` - Extracted `RecordTableRowCells` (shared cell content) and `RecordTableStaticTr` (non-draggable `<tr>` wrapper); when drag column is hidden, rows render inside a static `<tr>` instead of the draggable wrapper **View load effect metadata tracking** - `RecordTableWidgetViewLoadEffect` now tracks `objectMetadataItem.updatedAt` alongside `viewId` to re-load states when metadata changes (e.g. field additions), preventing stale column data **Data source dropdown deduplication** - Extracted `filterReadableActiveObjectMetadataItems` util, shared by both chart and record table data source dropdowns — removes duplicated permission-filtering logic **RECORD_TABLE view identifier mapping (server)** - Added `RECORD_TABLE` case to `fromPageLayoutWidgetConfigurationToUniversalConfiguration` and `fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration` so widget views are properly mapped during workspace import/export **GraphQL error handler typing (server)** - `formatError` parameter changed from `any` to `unknown`; `workspaceQueryRunnerGraphqlApiExceptionHandler` broadened from `QueryFailedErrorWithCode` to `Error | QueryFailedError` — removes unsafe type casts **Save hook signature** - `useSaveRecordTableWidgetsViewDataOnDashboardSave` no longer takes `pageLayoutId` in constructor; receives it as a callback parameter, eliminating the need for `useAtomComponentStateCallbackState` **Customize Dashboard hidden during edit mode** - The "Customize Dashboard" command was still visible while already editing — its `conditionalAvailabilityExpression` now includes `not isPageInEditMode` **Fields dropdown split** - `RecordTableFieldsDropdownContent` (300+ lines) split into `RecordTableFieldsDropdownVisibleFieldsContent` and `RecordTableFieldsDropdownHiddenFieldsContent` **Checkbox placeholder cleanup** - Removed unnecessary `StyledRecordTableTdContainer` wrapper from `RecordTableCellCheckboxPlaceholder`
2026-03-24 18:28:56 +01:00
parent c94aa7316a
commit 96f3ff0e90
152 changed files with 5369 additions and 1048 deletions
@@ -8,6 +8,24 @@ import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pa
 import { createStore } from 'jotai';
 import { type ReactNode } from 'react';

+jest.mock(
+  '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget',
+  () => ({
+    useDeleteViewForRecordTableWidget: () => ({
+      deleteViewForRecordTableWidget: jest.fn(),
+    }),
+  }),
+);
+
+jest.mock('@/side-panel/hooks/useSidePanelMenu', () => ({
+  useSidePanelMenu: () => ({
+    closeSidePanelMenu: jest.fn(),
+    openSidePanelMenu: jest.fn(),
+    navigateSidePanelMenu: jest.fn(),
+    toggleSidePanelMenu: jest.fn(),
+  }),
+}));
+
 describe('useDeletePageLayoutWidget', () => {
  const getWrapper =
    (store = createStore()) =>
@@ -22,6 +22,10 @@ export const useChangePageLayoutDragSelection = (

  const changePageLayoutDragSelection = useCallback(
    (cellId: string, selected: boolean) => {
+      if (!cellId.startsWith('cell-')) {
+        return;
+      }
+
      store.set(pageLayoutSelectedCellsState, (prev) => {
        const newSet = new Set(prev);
        if (selected) {
@@ -0,0 +1,120 @@
+import { WIDGET_SIZES } from '@/page-layout/constants/WidgetSizes';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { createDefaultRecordTableWidget } from '@/page-layout/utils/createDefaultRecordTableWidget';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetType } from '~/generated-metadata/graphql';
+
+export const useCreatePageLayoutRecordTableWidget = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const activeTabId = useAtomComponentStateValue(
+    activeTabIdComponentState,
+    getTabListInstanceIdFromPageLayoutId(pageLayoutId),
+  );
+
+  const pageLayoutCurrentLayoutsState = useAtomComponentStateCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const store = useStore();
+
+  const createPageLayoutRecordTableWidget =
+    useCallback((): PageLayoutWidget => {
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+      const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
+
+      if (!isDefined(activeTabId)) {
+        throw new Error(
+          'A tab must be selected to create a new record table widget',
+        );
+      }
+
+      const widgetId = uuidv4();
+      const recordTableSize = WIDGET_SIZES[WidgetType.RECORD_TABLE]!;
+      const defaultSize = recordTableSize.default;
+      const minimumSize = recordTableSize.minimum;
+      const position = getDefaultWidgetPosition(
+        pageLayoutDraggedArea,
+        defaultSize,
+        minimumSize,
+      );
+
+      const newWidget = createDefaultRecordTableWidget(
+        widgetId,
+        activeTabId,
+        'Record Table',
+        {
+          row: position.y,
+          column: position.x,
+          rowSpan: position.h,
+          columnSpan: position.w,
+        },
+      );
+
+      const newLayout = {
+        i: widgetId,
+        x: position.x,
+        y: position.y,
+        w: position.w,
+        h: position.h,
+        minW: minimumSize.w,
+        minH: minimumSize.h,
+      };
+
+      const updatedLayouts = getUpdatedTabLayouts(
+        allTabLayouts,
+        activeTabId,
+        newLayout,
+      );
+
+      store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+      store.set(pageLayoutDraftState, (prev) => ({
+        ...prev,
+        tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+      }));
+
+      store.set(pageLayoutDraggedAreaState, null);
+
+      return newWidget;
+    }, [
+      activeTabId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+      store,
+    ]);
+
+  return { createPageLayoutRecordTableWidget };
+};
@@ -4,12 +4,14 @@ import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDr
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { removeWidgetFromTab } from '@/page-layout/utils/removeWidgetFromTab';
 import { removeWidgetLayoutFromTab } from '@/page-layout/utils/removeWidgetLayoutFromTab';
+import { useDeleteViewForRecordTableWidget } from '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { WidgetType } from '~/generated-metadata/graphql';

 export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
@@ -34,6 +36,9 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {

  const { closeSidePanelMenu } = useSidePanelMenu();

+  const { deleteViewForRecordTableWidget } =
+    useDeleteViewForRecordTableWidget();
+
  const store = useStore();

  const deletePageLayoutWidget = useCallback(
@@ -44,8 +49,24 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);

      const tabWithWidget = pageLayoutDraft.tabs.find((tab) =>
-        tab.widgets.some((w) => w.id === widgetId),
+        tab.widgets.some((widget) => widget.id === widgetId),
      );
+
+      const widgetToDelete = tabWithWidget?.widgets.find(
+        (widget) => widget.id === widgetId,
+      );
+
+      if (
+        isDefined(widgetToDelete) &&
+        widgetToDelete.type === WidgetType.RECORD_TABLE &&
+        'viewId' in widgetToDelete.configuration &&
+        isDefined(widgetToDelete.configuration.viewId)
+      ) {
+        deleteViewForRecordTableWidget(
+          widgetToDelete.configuration.viewId as string,
+        );
+      }
+
      const tabId = tabWithWidget?.id;

      if (isDefined(tabId)) {
@@ -72,6 +93,7 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
    },
    [
      closeSidePanelMenu,
+      deleteViewForRecordTableWidget,
      pageLayoutCurrentLayoutsState,
      pageLayoutDraftState,
      pageLayoutEditingWidgetIdState,
@@ -66,7 +66,16 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => {
        return;
      }

-      setPageLayoutEditingWidgetId(widgetId);
+      if (widgetType === WidgetType.RECORD_TABLE) {
+        navigatePageLayoutSidePanel({
+          sidePanelPage: SidePanelPages.PageLayoutRecordTableSettings,
+          pageTitle: t`Edit Record Table`,
+          resetNavigationStack: true,
+        });
+        setPageLayoutEditingWidgetId(widgetId);
+        return;
+      }
+
      setSidePanelPage(SidePanelPages.Root);
      closeSidePanelMenu();
    },
@@ -0,0 +1,63 @@
+import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
+import { fieldsWidgetEditorModePersistedComponentState } from '@/page-layout/states/fieldsWidgetEditorModePersistedComponentState';
+import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
+import { fieldsWidgetGroupsPersistedComponentState } from '@/page-layout/states/fieldsWidgetGroupsPersistedComponentState';
+import { fieldsWidgetUngroupedFieldsDraftComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsDraftComponentState';
+import { fieldsWidgetUngroupedFieldsPersistedComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsPersistedComponentState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+export const useHasFieldsWidgetChanges = () => {
+  const store = useStore();
+
+  const hasFieldsWidgetChanges = useCallback(
+    (pageLayoutId: string): boolean => {
+      const fieldsWidgetGroupsDraft = store.get(
+        fieldsWidgetGroupsDraftComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+      const fieldsWidgetGroupsPersisted = store.get(
+        fieldsWidgetGroupsPersistedComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+      const fieldsWidgetUngroupedFieldsDraft = store.get(
+        fieldsWidgetUngroupedFieldsDraftComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+      const fieldsWidgetUngroupedFieldsPersisted = store.get(
+        fieldsWidgetUngroupedFieldsPersistedComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+      const fieldsWidgetEditorModeDraft = store.get(
+        fieldsWidgetEditorModeDraftComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+      const fieldsWidgetEditorModePersisted = store.get(
+        fieldsWidgetEditorModePersistedComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+
+      return (
+        !isDeeplyEqual(fieldsWidgetGroupsDraft, fieldsWidgetGroupsPersisted) ||
+        !isDeeplyEqual(
+          fieldsWidgetUngroupedFieldsDraft,
+          fieldsWidgetUngroupedFieldsPersisted,
+        ) ||
+        !isDeeplyEqual(
+          fieldsWidgetEditorModeDraft,
+          fieldsWidgetEditorModePersisted,
+        )
+      );
+    },
+    [store],
+  );
+
+  return { hasFieldsWidgetChanges };
+};
@@ -0,0 +1,29 @@
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { WidgetConfigurationType } from '~/generated-metadata/graphql';
+
+export const useHasRecordTableWidgets = () => {
+  const store = useStore();
+
+  const hasRecordTableWidgets = useCallback(
+    (pageLayoutId: string): boolean => {
+      const pageLayoutDraft = store.get(
+        pageLayoutDraftComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
+
+      return pageLayoutDraft.tabs.some((tab) =>
+        tab.widgets.some(
+          (widget) =>
+            widget.configuration.configurationType ===
+            WidgetConfigurationType.RECORD_TABLE,
+        ),
+      );
+    },
+    [store],
+  );
+
+  return { hasRecordTableWidgets };
+};
@@ -5,11 +5,13 @@ import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLa
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { removeWidgetFromTab } from '@/page-layout/utils/removeWidgetFromTab';
 import { removeWidgetLayoutFromTab } from '@/page-layout/utils/removeWidgetLayoutFromTab';
+import { useDeleteViewForRecordTableWidget } from '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { WidgetType } from '~/generated-metadata/graphql';

 export const useRemovePageLayoutWidgetAndPreservePosition = (
  pageLayoutIdFromProps?: string,
@@ -39,6 +41,9 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
    pageLayoutId,
  );

+  const { deleteViewForRecordTableWidget } =
+    useDeleteViewForRecordTableWidget();
+
  const store = useStore();

  const removePageLayoutWidgetAndPreservePosition = useCallback(
@@ -47,8 +52,24 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);

      const tabWithWidget = pageLayoutDraft.tabs.find((tab) =>
-        tab.widgets.some((w) => w.id === widgetId),
+        tab.widgets.some((widget) => widget.id === widgetId),
      );
+
+      const widgetToRemove = tabWithWidget?.widgets.find(
+        (widget) => widget.id === widgetId,
+      );
+
+      if (
+        isDefined(widgetToRemove) &&
+        widgetToRemove.type === WidgetType.RECORD_TABLE &&
+        'viewId' in widgetToRemove.configuration &&
+        isDefined(widgetToRemove.configuration.viewId)
+      ) {
+        deleteViewForRecordTableWidget(
+          widgetToRemove.configuration.viewId as string,
+        );
+      }
+
      const tabId = tabWithWidget?.id;

      if (!isDefined(tabId)) {
@@ -86,6 +107,7 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
      store.set(pageLayoutEditingWidgetIdState, null);
    },
    [
+      deleteViewForRecordTableWidget,
      pageLayoutCurrentLayoutsState,
      pageLayoutDraftState,
      pageLayoutDraggedAreaState,
@@ -1,4 +1,5 @@
 import { UPSERT_FIELDS_WIDGET } from '@/page-layout/graphql/mutations/upsertFieldsWidget';
+import { useHasFieldsWidgetChanges } from '@/page-layout/hooks/useHasFieldsWidgetChanges';
 import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
 import { fieldsWidgetEditorModePersistedComponentState } from '@/page-layout/states/fieldsWidgetEditorModePersistedComponentState';
 import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
@@ -20,10 +21,16 @@ export const useSaveFieldsWidgetGroups = () => {
    { input: UpsertFieldsWidgetInput }
  >(UPSERT_FIELDS_WIDGET);

+  const { hasFieldsWidgetChanges } = useHasFieldsWidgetChanges();
+
  const store = useStore();

  const saveFieldsWidgetGroups = useCallback(
    async (pageLayoutId: string) => {
+      if (!hasFieldsWidgetChanges(pageLayoutId)) {
+        return;
+      }
+
      const allDraftGroups = store.get(
        fieldsWidgetGroupsDraftComponentState.atomFamily({
          instanceId: pageLayoutId,
@@ -128,7 +135,7 @@ export const useSaveFieldsWidgetGroups = () => {
        allEditorModes,
      );
    },
-    [store, upsertFieldsWidgetMutation],
+    [hasFieldsWidgetChanges, store, upsertFieldsWidgetMutation],
  );

  return { saveFieldsWidgetGroups };
@@ -44,7 +44,6 @@ export const useSavePageLayout = (pageLayoutIdFromProps: string) => {
  const featureFlags = useFeatureFlagsMap();
  const isRecordPageLayoutEditingEnabled =
    featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
-
  const store = useStore();

  const savePageLayout = useCallback(async () => {
@@ -0,0 +1,36 @@
+import { useHasFieldsWidgetChanges } from '@/page-layout/hooks/useHasFieldsWidgetChanges';
+import { useHasRecordTableWidgets } from '@/page-layout/hooks/useHasRecordTableWidgets';
+import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
+import { useSaveRecordTableWidgetsViewDataOnDashboardSave } from '@/page-layout/widgets/record-table/hooks/useSaveRecordTableWidgetsViewDataOnDashboardSave';
+import { useCallback } from 'react';
+
+export const useSavePageLayoutWidgetsData = () => {
+  const { hasFieldsWidgetChanges } = useHasFieldsWidgetChanges();
+
+  const { hasRecordTableWidgets } = useHasRecordTableWidgets();
+
+  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
+
+  const { saveRecordTableWidgetsViewDataOnDashboardSave } =
+    useSaveRecordTableWidgetsViewDataOnDashboardSave();
+
+  const savePageLayoutWidgetsData = useCallback(
+    async (pageLayoutId: string) => {
+      if (hasFieldsWidgetChanges(pageLayoutId)) {
+        await saveFieldsWidgetGroups(pageLayoutId);
+      }
+
+      if (hasRecordTableWidgets(pageLayoutId)) {
+        await saveRecordTableWidgetsViewDataOnDashboardSave(pageLayoutId);
+      }
+    },
+    [
+      hasFieldsWidgetChanges,
+      saveFieldsWidgetGroups,
+      saveRecordTableWidgetsViewDataOnDashboardSave,
+      hasRecordTableWidgets,
+    ],
+  );
+
+  return { savePageLayoutWidgetsData };
+};