[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

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx

@@ -7,6 +7,8 @@ import {
   PAGE_LAYOUT_CONFIG,
   type PageLayoutBreakpoint,
 } from '@/page-layout/constants/PageLayoutBreakpoints';
+import { PAGE_LAYOUT_GRID_MARGIN } from '@/page-layout/constants/PageLayoutGridMargin';
+import { PAGE_LAYOUT_GRID_ROW_HEIGHT } from '@/page-layout/constants/PageLayoutGridRowHeight';
 import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/usePageLayoutHandleLayoutChange';
 import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
@@ -153,10 +155,10 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
           layouts={layouts}
           breakpoints={PAGE_LAYOUT_CONFIG.breakpoints}
           cols={PAGE_LAYOUT_CONFIG.columns}
-          rowHeight={55}
+          rowHeight={PAGE_LAYOUT_GRID_ROW_HEIGHT}
           maxCols={12}
           containerPadding={[0, 0]}
-          margin={[8, 8]}
+          margin={[PAGE_LAYOUT_GRID_MARGIN, PAGE_LAYOUT_GRID_MARGIN]}
           isDraggable={isPageLayoutInEditMode}
           isResizable={isPageLayoutInEditMode}
           draggableHandle=".drag-handle"

packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx

@@ -10,6 +10,7 @@ import { useReorderPageLayoutTabs } from '@/page-layout/hooks/useReorderPageLayo
 import { PageLayoutMainContent } from '@/page-layout/PageLayoutMainContent';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
+import { getScrollWrapperInstanceIdFromPageLayoutId } from '@/page-layout/utils/getScrollWrapperInstanceIdFromPageLayoutId';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
 import { getTabsWithVisibleWidgets } from '@/page-layout/utils/getTabsWithVisibleWidgets';
@@ -133,7 +134,9 @@ export const PageLayoutRendererContent = () => {
 
           <PageLayoutTabHeader />
           <StyledScrollWrapper
-            componentInstanceId={`scroll-wrapper-page-layout-${currentPageLayout.id}`}
+            componentInstanceId={getScrollWrapperInstanceIdFromPageLayoutId(
+              currentPageLayout.id,
+            )}
             defaultEnableXScroll={false}
           >
             {isDefined(activeTabId) && (

packages/twenty-front/src/modules/page-layout/constants/PageLayoutGridMargin.ts

@@ -0,0 +1 @@
+export const PAGE_LAYOUT_GRID_MARGIN = 8;

packages/twenty-front/src/modules/page-layout/constants/PageLayoutGridRowHeight.ts

@@ -0,0 +1 @@
+export const PAGE_LAYOUT_GRID_ROW_HEIGHT = 55;

packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutTab.ts

@@ -16,6 +16,8 @@ import { pageLayoutCurrentLayoutsComponentState } from '../states/pageLayoutCurr
 import { pageLayoutDraftComponentState } from '../states/pageLayoutDraftComponentState';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '../states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { type PageLayoutTab } from '../types/PageLayoutTab';
+import { generateDuplicatedTimestamps } from '../utils/generateDuplicatedTimestamps';
+import { getDuplicatedTitle } from '../utils/getDuplicatedTitle';
 
 export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
   const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
@@ -76,8 +78,7 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
             ...widget,
             id: newWidgetId,
             pageLayoutTabId: newTabId,
-            createdAt: new Date().toISOString(),
-            updatedAt: new Date().toISOString(),
+            ...generateDuplicatedTimestamps(),
           };
         });
 
@@ -93,13 +94,10 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
         const newTab: PageLayoutTab = {
           ...sourceTab,
           id: newTabId,
-          title: sourceTab.title.endsWith('(Copy)')
-            ? sourceTab.title
-            : `${sourceTab.title} (Copy)`,
+          title: getDuplicatedTitle(sourceTab.title),
           position: newTabPosition,
           widgets: clonedWidgets,
-          createdAt: new Date().toISOString(),
-          updatedAt: new Date().toISOString(),
+          ...generateDuplicatedTimestamps(),
         };
 
         const sourceLayouts = allTabLayouts[tabId] ?? {

packages/twenty-front/src/modules/page-layout/hooks/useDuplicatePageLayoutWidget.ts

@@ -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 };
+};

packages/twenty-front/src/modules/page-layout/utils/generateDuplicatedTimestamps.ts

@@ -0,0 +1,11 @@
+export const generateDuplicatedTimestamps = (): {
+  createdAt: string;
+  updatedAt: string;
+} => {
+  const now = new Date().toISOString();
+
+  return {
+    createdAt: now,
+    updatedAt: now,
+  };
+};

packages/twenty-front/src/modules/page-layout/utils/getDuplicatedTitle.ts

@@ -0,0 +1,3 @@
+export const getDuplicatedTitle = (title: string): string => {
+  return title.endsWith('(Copy)') ? title : `${title} (Copy)`;
+};

packages/twenty-front/src/modules/page-layout/utils/getScrollWrapperInstanceIdFromPageLayoutId.ts

@@ -0,0 +1,5 @@
+export const getScrollWrapperInstanceIdFromPageLayoutId = (
+  pageLayoutId: string,
+) => {
+  return `scroll-wrapper-page-layout-${pageLayoutId}`;
+};

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx

@@ -103,6 +103,7 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
       isResizing={isResizing}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      data-widget-id={widget.id}
     >
       {showHeader && (
         <WidgetCardHeader