[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/components/SidePanelHeader.tsx

@@ -1,5 +1,8 @@
+import { SidePanelHeaderTitleSyncEffect } from '@/command-menu/components/SidePanelHeaderSyncEffect';
 import { useUpdateCommandMenuPageInfo } from '@/command-menu/hooks/useUpdateCommandMenuPageInfo';
+import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
 import { TitleInput } from '@/ui/input/components/TitleInput';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -73,6 +76,9 @@ export const SidePanelHeader = ({
   onTitleChange,
   iconTooltip,
 }: SidePanelHeaderProps) => {
+  const [shouldFocusTitleInput, setShouldFocusTitleInput] =
+    useRecoilComponentState(commandMenuShouldFocusTitleInputComponentState);
+
   const theme = useTheme();
 
   const [title, setTitle] = useState(initialTitle);
@@ -94,41 +100,49 @@ export const SidePanelHeader = ({
   const tooltipId = `side-panel-icon-tooltip-${headerType.replace(/\s+/g, '-')}`;
 
   return (
-    <StyledHeader data-testid="side-panel-header">
-      <StyledHeaderIconContainer id={tooltipId}>
-        <Icon
-          color={iconColor}
-          stroke={theme.icon.stroke.sm}
-          size={theme.icon.size.lg}
-        />
-      </StyledHeaderIconContainer>
-      {iconTooltip && (
-        <AppTooltip
-          anchorSelect={`#${tooltipId}`}
-          content={iconTooltip}
-          place="top"
-        />
-      )}
-      <StyledHeaderInfo>
-        <StyledHeaderTitle>
-          <TitleInput
-            instanceId="side-panel-title-input"
-            disabled={disabled}
-            sizeVariant="md"
-            value={title}
-            onChange={handleChange}
-            placeholder={headerType}
-            onEnter={saveTitle}
-            onEscape={() => {
-              setTitle(initialTitle);
-            }}
-            onClickOutside={saveTitle}
-            onTab={saveTitle}
-            onShiftTab={saveTitle}
+    <>
+      <SidePanelHeaderTitleSyncEffect
+        initialTitle={initialTitle}
+        setTitle={setTitle}
+      />
+      <StyledHeader data-testid="side-panel-header">
+        <StyledHeaderIconContainer id={tooltipId}>
+          <Icon
+            color={iconColor}
+            stroke={theme.icon.stroke.sm}
+            size={theme.icon.size.lg}
           />
-        </StyledHeaderTitle>
-        <StyledHeaderType>{headerType}</StyledHeaderType>
-      </StyledHeaderInfo>
-    </StyledHeader>
+        </StyledHeaderIconContainer>
+        {iconTooltip && (
+          <AppTooltip
+            anchorSelect={`#${tooltipId}`}
+            content={iconTooltip}
+            place="top"
+          />
+        )}
+        <StyledHeaderInfo>
+          <StyledHeaderTitle>
+            <TitleInput
+              instanceId="side-panel-title-input"
+              disabled={disabled}
+              sizeVariant="md"
+              value={title}
+              onChange={handleChange}
+              placeholder={headerType}
+              onEnter={saveTitle}
+              onEscape={() => {
+                setTitle(initialTitle);
+              }}
+              onClickOutside={saveTitle}
+              onTab={saveTitle}
+              onShiftTab={saveTitle}
+              shouldOpen={shouldFocusTitleInput}
+              onOpen={() => setShouldFocusTitleInput(false)}
+            />
+          </StyledHeaderTitle>
+          <StyledHeaderType>{headerType}</StyledHeaderType>
+        </StyledHeaderInfo>
+      </StyledHeader>
+    </>
   );
 };

packages/twenty-front/src/modules/command-menu/components/SidePanelHeaderSyncEffect.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+type SidePanelHeaderTitleSyncEffectProps = {
+  initialTitle: string;
+  setTitle: (title: string) => void;
+};
+
+export const SidePanelHeaderTitleSyncEffect = ({
+  initialTitle,
+  setTitle,
+}: SidePanelHeaderTitleSyncEffectProps) => {
+  useEffect(() => {
+    setTitle(initialTitle);
+  }, [initialTitle, setTitle]);
+
+  return null;
+};

packages/twenty-front/src/modules/command-menu/components/__stories__/SidePanelHeader.stories.tsx

@@ -3,6 +3,7 @@ import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { IconPlus } from 'twenty-ui/display';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { THEME_LIGHT } from 'twenty-ui/theme';
+import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { SidePanelHeader } from '../SidePanelHeader';
 
 const meta: Meta<typeof SidePanelHeader> = {
@@ -12,7 +13,16 @@ const meta: Meta<typeof SidePanelHeader> = {
     onTitleChange: fn(),
   },
   argTypes: {},
-  decorators: [ComponentDecorator],
+  decorators: [
+    ComponentDecorator,
+    (Story) => (
+      <CommandMenuPageComponentInstanceContext.Provider
+        value={{ instanceId: 'side-panel-header-story-instance' }}
+      >
+        <Story />
+      </CommandMenuPageComponentInstanceContext.Provider>
+    ),
+  ],
   parameters: {
     disableHotkeyInitialization: true,
   },

packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts

@@ -6,6 +6,7 @@ import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/state
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { commandMenuShouldFocusTitleInputComponentState } from '@/command-menu/states/commandMenuShouldFocusTitleInputComponentState';
 import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
@@ -88,9 +89,11 @@ export const useNavigateCommandMenu = () => {
         pageIcon,
         pageIconColor,
         pageId,
+        focusTitleInput = false,
         resetNavigationStack = false,
       }: CommandMenuNavigationStackItem & {
         resetNavigationStack?: boolean;
+        focusTitleInput?: boolean;
       }) => {
         const computedPageId = pageId || v4();
 
@@ -102,6 +105,15 @@ export const useNavigateCommandMenu = () => {
           instanceId: computedPageId,
         });
 
+        if (focusTitleInput) {
+          set(
+            commandMenuShouldFocusTitleInputComponentState.atomFamily({
+              instanceId: computedPageId,
+            }),
+            true,
+          );
+        }
+
         const isCommandMenuClosing = snapshot
           .getLoadable(isCommandMenuClosingState)
           .getValue();

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]);

packages/twenty-front/src/modules/command-menu/states/commandMenuShouldFocusTitleInputComponentState.ts

@@ -0,0 +1,10 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+
+import { CommandMenuPageComponentInstanceContext } from './contexts/CommandMenuPageComponentInstanceContext';
+
+export const commandMenuShouldFocusTitleInputComponentState =
+  createComponentState<boolean>({
+    key: 'commandMenuShouldFocusTitleInputComponentState',
+    defaultValue: false,
+    componentInstanceContext: CommandMenuPageComponentInstanceContext,
+  });