Add menu item to duplicate tab

Author: kraenhansen

packages/compass-components/src/components/workspace-tabs/tab.tsx

@@ -193,6 +193,7 @@ export type WorkspaceTabCoreProps = {
   isSelected: boolean;
   isDragging: boolean;
   onSelect: () => void;
+  onDuplicate: () => void;
   onClose: () => void;
   onCloseAllOthers: () => void;
   tabContentId: string;
@@ -209,6 +210,7 @@ function Tab({
   isSelected,
   isDragging,
   onSelect,
+  onDuplicate,
   onClose,
   onCloseAllOthers,
   tabContentId,
@@ -238,8 +240,11 @@ function Tab({
   }, [tabTheme, darkMode]);
 
   const contextMenuRef = useContextMenuItems(
-    () => [{ label: 'Close all other tabs', onAction: onCloseAllOthers }],
-    [onCloseAllOthers]
+    () => [
+      { label: 'Close all other tabs', onAction: onCloseAllOthers },
+      { label: 'Duplicate', onAction: onDuplicate },
+    ],
+    [onCloseAllOthers, onDuplicate]
   );
 
   const mergedRef = useMergeRefs([setNodeRef, contextMenuRef]);

packages/compass-components/src/components/workspace-tabs/workspace-tabs.tsx

@@ -150,6 +150,7 @@ type SortableItemProps = {
   selectedTabIndex: number;
   activeId: UniqueIdentifier | null;
   onSelect: (tabIndex: number) => void;
+  onDuplicate: (tabIndex: number) => void;
   onClose: (tabIndex: number) => void;
   onCloseAllOthers: (tabIndex: number) => void;
 };
@@ -159,6 +160,7 @@ type SortableListProps = {
   selectedTabIndex: number;
   onMove: (oldTabIndex: number, newTabIndex: number) => void;
   onSelect: (tabIndex: number) => void;
+  onDuplicate: (tabIndex: number) => void;
   onClose: (tabIndex: number) => void;
   onCloseAllOthers: (tabIndex: number) => void;
 };
@@ -169,6 +171,7 @@ type WorkspaceTabsProps = {
   onSelectTab: (tabIndex: number) => void;
   onSelectNextTab: () => void;
   onSelectPrevTab: () => void;
+  onDuplicateTab: (tabIndex: number) => void;
   onCloseTab: (tabIndex: number) => void;
   onCloseAllOtherTabs: (tabIndex: number) => void;
   onMoveTab: (oldTabIndex: number, newTabIndex: number) => void;
@@ -212,6 +215,7 @@ const SortableList = ({
   onMove,
   onSelect,
   selectedTabIndex,
+  onDuplicate,
   onClose,
   onCloseAllOthers,
 }: SortableListProps) => {
@@ -270,6 +274,7 @@ const SortableList = ({
               tab={tab}
               activeId={activeId}
               onSelect={onSelect}
+              onDuplicate={onDuplicate}
               onClose={onClose}
               onCloseAllOthers={onCloseAllOthers}
               selectedTabIndex={selectedTabIndex}
@@ -287,13 +292,18 @@ const SortableItem = ({
   selectedTabIndex,
   activeId,
   onSelect,
+  onDuplicate,
   onClose,
   onCloseAllOthers,
 }: SortableItemProps) => {
   const onTabSelected = useCallback(() => {
     onSelect(index);
   }, [onSelect, index]);
 
+  const onTabDuplicated = useCallback(() => {
+    onDuplicate(index);
+  }, [onDuplicate, index]);
+
   const onTabClosed = useCallback(() => {
     onClose(index);
   }, [onClose, index]);
@@ -314,6 +324,7 @@ const SortableItem = ({
     isDragging,
     tabContentId: tabId,
     onSelect: onTabSelected,
+    onDuplicate: onTabDuplicated,
     onClose: onTabClosed,
     onCloseAllOthers: onAllOthersTabsClosed,
   });
@@ -322,6 +333,7 @@ const SortableItem = ({
 function WorkspaceTabs({
   ['aria-label']: ariaLabel,
   onCreateNewTab,
+  onDuplicateTab,
   onCloseTab,
   onCloseAllOtherTabs,
   onMoveTab,
@@ -420,6 +432,7 @@ function WorkspaceTabs({
             tabs={tabs}
             onMove={onMoveTab}
             onSelect={onSelectTab}
+            onDuplicate={onDuplicateTab}
             onClose={onCloseTab}
             onCloseAllOthers={onCloseAllOtherTabs}
             selectedTabIndex={selectedTabIndex}

packages/compass-workspaces/src/components/workspaces.tsx

@@ -21,6 +21,7 @@ import {
   moveTab,
   openFallbackWorkspace,
   openTabFromCurrent,
+  duplicateTab,
   selectNextTab,
   selectPrevTab,
   selectTab,
@@ -76,6 +77,7 @@ type CompassWorkspacesProps = {
   onSelectPrevTab(): void;
   onMoveTab(from: number, to: number): void;
   onCreateTab(defaultTab?: OpenWorkspaceOptions | null): void;
+  onDuplicateTab(at: number): void;
   onCloseTab(at: number): void;
   onCloseAllOtherTabs(at: number): void;
   onNamespaceNotFound(
@@ -95,6 +97,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
   onSelectPrevTab,
   onMoveTab,
   onCreateTab,
+  onDuplicateTab,
   onCloseTab,
   onCloseAllOtherTabs,
   onNamespaceNotFound,
@@ -205,6 +208,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
         onSelectPrevTab={onSelectPrevTab}
         onMoveTab={onMoveTab}
         onCreateNewTab={onCreateNewTab}
+        onDuplicateTab={onDuplicateTab}
         onCloseTab={onCloseTab}
         onCloseAllOtherTabs={onCloseAllOtherTabs}
         tabs={workspaceTabs}
@@ -238,6 +242,7 @@ export default connect(
     onSelectPrevTab: selectPrevTab,
     onMoveTab: moveTab,
     onCreateTab: openTabFromCurrent,
+    onDuplicateTab: duplicateTab,
     onCloseTab: closeTab,
     onCloseAllOtherTabs: closeAllOtherTabs,
     onNamespaceNotFound: openFallbackWorkspace,

packages/compass-workspaces/src/stores/workspaces.ts

@@ -55,6 +55,7 @@ export enum WorkspacesActions {
   SelectNextTab = 'compass-workspaces/SelectNextTab',
   MoveTab = 'compass-workspaces/MoveTab',
   OpenTabFromCurrentActive = 'compass-workspaces/OpenTabFromCurrentActive',
+  DuplicateTab = 'compass-workspaces/DuplicateTab',
   CloseTab = 'compass-workspaces/CloseTab',
   CloseAllOtherTabs = 'compass-workspaces/CloseAllOtherTabs',
   CollectionRenamed = 'compass-workspaces/CollectionRenamed',
@@ -401,6 +402,20 @@ const reducer: Reducer<WorkspacesState, Action> = (
     };
   }
 
+  if (isAction<DuplicateTabAction>(action, WorkspacesActions.DuplicateTab)) {
+    const tabsBefore = state.tabs.slice(0, action.atIndex);
+    const targetTab = state.tabs[action.atIndex];
+    const tabsAfter = state.tabs.slice(action.atIndex + 1);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id: _id, ...tabProps } = targetTab;
+    const newTab = getInitialTabState(tabProps);
+    return {
+      ...state,
+      tabs: [...tabsBefore, targetTab, newTab, ...tabsAfter],
+      activeTabId: newTab.id,
+    };
+  }
+
   if (isAction<SelectTabAction>(action, WorkspacesActions.SelectTab)) {
     if (state.tabs[action.atIndex]?.id === state.activeTabId) {
       return state;
@@ -858,6 +873,18 @@ export const openTabFromCurrent = (
   };
 };
 
+type DuplicateTabAction = {
+  type: WorkspacesActions.DuplicateTab;
+  atIndex: number;
+};
+
+export const duplicateTab = (atIndex: number): DuplicateTabAction => {
+  return {
+    type: WorkspacesActions.DuplicateTab,
+    atIndex,
+  };
+};
+
 async function confirmClosingTabs() {
   return await showConfirmation({
     title: 'Are you sure you want to close the tab?',