[DASHBOARDS] Widget duplication (#15979)

## Widget duplication - Created a shared component for the option menu shared by the record page, the dashboards and the workflows - Fix arrow selection in the option menu in workflows, which wasn't working - Scroll to the new widget after creation and open the new widget settings https://github.com/user-attachments/assets/47b8dade-44bd-4ba2-a81c-01b09e8718d3
2025-11-24 14:38:18 +01:00
parent 8923d2fa0a
commit 2b80d9e015
18 changed files with 526 additions and 217 deletions
@@ -0,0 +1,151 @@
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { getScrollWrapperInstanceIdFromPageLayoutId } from '@/page-layout/utils/getScrollWrapperInstanceIdFromPageLayoutId';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import { type PageLayoutWidget } from '~/generated/graphql';
+import { generateDuplicatedTimestamps } from '../utils/generateDuplicatedTimestamps';
+import { getDuplicatedTitle } from '../utils/getDuplicatedTitle';
+
+export const useDuplicatePageLayoutWidget = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const setEditingWidgetId = useSetRecoilComponentState(
+    pageLayoutEditingWidgetIdComponentState,
+    pageLayoutId,
+  );
+
+  const { getScrollWrapperElement } = useScrollWrapperHTMLElement(
+    getScrollWrapperInstanceIdFromPageLayoutId(pageLayoutId),
+  );
+
+  const duplicateWidget = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (widgetId: string): string => {
+        const pageLayoutDraft = snapshot
+          .getLoadable(pageLayoutDraftState)
+          .getValue();
+
+        const allTabLayouts = snapshot
+          .getLoadable(pageLayoutCurrentLayoutsState)
+          .getValue();
+
+        const sourceWidget = pageLayoutDraft.tabs
+          .flatMap((tab) => tab.widgets)
+          .find((widget) => widget.id === widgetId);
+
+        if (!isDefined(sourceWidget)) {
+          throw new Error(`Widget with id ${widgetId} not found`);
+        }
+
+        const sourceTab = pageLayoutDraft.tabs.find(
+          (tab) => tab.id === sourceWidget.pageLayoutTabId,
+        );
+
+        if (!isDefined(sourceTab)) {
+          throw new Error(
+            `Tab with id ${sourceWidget.pageLayoutTabId} not found`,
+          );
+        }
+
+        const newWidgetId = uuidv4();
+
+        const clonedWidget: PageLayoutWidget = {
+          ...sourceWidget,
+          id: newWidgetId,
+          title: getDuplicatedTitle(sourceWidget.title),
+          ...generateDuplicatedTimestamps(),
+        };
+
+        const currentTabLayouts = allTabLayouts[sourceTab.id] || {
+          desktop: [],
+          mobile: [],
+        };
+
+        const sourceLayout = currentTabLayouts.desktop.find(
+          (layout) => layout.i === widgetId,
+        );
+
+        if (!isDefined(sourceLayout)) {
+          throw new Error(`Layout for widget ${widgetId} not found`);
+        }
+
+        const maxY = currentTabLayouts.desktop.reduce(
+          (max, layout) => Math.max(max, layout.y + layout.h),
+          0,
+        );
+
+        const newLayout = {
+          ...sourceLayout,
+          i: newWidgetId,
+          y: maxY,
+        };
+
+        const updatedLayouts = getUpdatedTabLayouts(
+          allTabLayouts,
+          sourceTab.id,
+          newLayout,
+        );
+
+        set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+        set(pageLayoutDraftState, (prev) => ({
+          ...prev,
+          tabs: addWidgetToTab(prev.tabs, sourceTab.id, clonedWidget),
+        }));
+
+        setEditingWidgetId(newWidgetId);
+
+        const { scrollWrapperElement } = getScrollWrapperElement();
+
+        if (isDefined(scrollWrapperElement)) {
+          requestAnimationFrame(() => {
+            const widgetElement = scrollWrapperElement.querySelector(
+              `[data-widget-id="${newWidgetId}"]`,
+            );
+
+            if (isDefined(widgetElement)) {
+              widgetElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+              });
+            }
+          });
+        }
+
+        return newWidgetId;
+      },
+    [
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      setEditingWidgetId,
+      getScrollWrapperElement,
+    ],
+  );
+
+  return { duplicateWidget };
+};