[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,
   },