[DASHBOARDS] Tab duplication (#15906)

Closes https://github.com/twentyhq/core-team-issues/issues/1878

- Allow tab duplication
- Add autofocus on the tiltle input upon the creation and duplication of
tabs and the creation of widgets
- Fix a bug where cancelling the edition while on a new tab, by
resetting the active tab id if it's not in the persisted tabs


https://github.com/user-attachments/assets/a4dc2f0b-1a56-406a-bde7-cca17f9cdbc1

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings.tsx

@@ -6,6 +6,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { TAB_SETTINGS_SELECTABLE_ITEM_IDS } from '@/command-menu/pages/page-layout/constants/settings/TabSettingsSelectableItemIds';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
 import { useDeletePageLayoutTab } from '@/page-layout/hooks/useDeletePageLayoutTab';
+import { useDuplicatePageLayoutTab } from '@/page-layout/hooks/useDuplicatePageLayoutTab';
 import { useMovePageLayoutTab } from '@/page-layout/hooks/useMovePageLayoutTab';
 import { useUpdatePageLayoutTab } from '@/page-layout/hooks/useUpdatePageLayoutTab';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -22,6 +23,7 @@ import {
   IconAppWindow,
   IconChevronLeft,
   IconChevronRight,
+  IconCopyPlus,
   IconTrash,
 } from 'twenty-ui/display';
 
@@ -34,6 +36,7 @@ export const CommandMenuPageLayoutTabSettings = () => {
     pageLayoutDraftComponentState,
     pageLayoutId,
   );
+
   const [openTabId, setOpenTabId] = useRecoilComponentState(
     pageLayoutTabSettingsOpenTabIdComponentState,
     pageLayoutId,
@@ -42,6 +45,7 @@ export const CommandMenuPageLayoutTabSettings = () => {
   const { moveLeft, moveRight } = useMovePageLayoutTab(pageLayoutId);
   const { deleteTab } = useDeletePageLayoutTab(pageLayoutId);
   const { updatePageLayoutTab } = useUpdatePageLayoutTab(pageLayoutId);
+  const { duplicateTab } = useDuplicatePageLayoutTab(pageLayoutId);
 
   if (!isDefined(openTabId)) {
     return null;
@@ -105,6 +109,17 @@ export const CommandMenuPageLayoutTabSettings = () => {
               disabled={disableMoveRight}
             />
           </SelectableListItem>
+          <SelectableListItem
+            itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DUPLICATE}
+            onEnter={() => duplicateTab(tab.id)}
+          >
+            <CommandMenuItem
+              id={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DUPLICATE}
+              Icon={IconCopyPlus}
+              label={t`Duplicate`}
+              onClick={() => duplicateTab(tab.id)}
+            />
+          </SelectableListItem>
           <SelectableListItem
             itemId={TAB_SETTINGS_SELECTABLE_ITEM_IDS.DELETE}
             onEnter={handleDelete}

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx

@@ -47,6 +47,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
     navigatePageLayoutCommandMenu({
       commandMenuPage: CommandMenuPages.PageLayoutGraphTypeSelect,
+      focusTitleInput: true,
     });
   };
 
@@ -59,6 +60,7 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
     navigatePageLayoutCommandMenu({
       commandMenuPage: CommandMenuPages.PageLayoutIframeSettings,
+      focusTitleInput: true,
     });
   };
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/constants/settings/TabSettingsSelectableItemIds.ts

@@ -1,5 +1,6 @@
 export const TAB_SETTINGS_SELECTABLE_ITEM_IDS = {
   MOVE_LEFT: 'tab-move-left',
   MOVE_RIGHT: 'tab-move-right',
+  DUPLICATE: 'tab-duplicate',
   DELETE: 'tab-delete',
 } as const;

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu.ts

@@ -10,6 +10,7 @@ type NavigatePageLayoutCommandMenuProps = {
   commandMenuPage: PageLayoutCommandMenuPage;
   pageTitle?: string;
   pageIcon?: IconComponent;
+  focusTitleInput?: boolean;
 };
 
 export const useNavigatePageLayoutCommandMenu = () => {
@@ -20,6 +21,7 @@ export const useNavigatePageLayoutCommandMenu = () => {
       commandMenuPage,
       pageTitle,
       pageIcon,
+      focusTitleInput = false,
     }: NavigatePageLayoutCommandMenuProps) => {
       navigateCommandMenu({
         page: commandMenuPage,
@@ -29,6 +31,7 @@ export const useNavigatePageLayoutCommandMenu = () => {
         pageIcon: isDefined(pageIcon)
           ? pageIcon
           : getPageLayoutIcon(commandMenuPage),
+        focusTitleInput,
       });
     };
   }, [navigateCommandMenu]);