Add menu item to close all other tabs

Author: kraenhansen

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

@@ -194,6 +194,7 @@ export type WorkspaceTabCoreProps = {
   isDragging: boolean;
   onSelect: () => void;
   onClose: () => void;
+  onCloseAllOthers: () => void;
   tabContentId: string;
 };
 
@@ -209,6 +210,7 @@ function Tab({
   isDragging,
   onSelect,
   onClose,
+  onCloseAllOthers,
   tabContentId,
   iconGlyph,
   className: tabClassName,
@@ -235,7 +237,10 @@ function Tab({
     return css(tabTheme);
   }, [tabTheme, darkMode]);
 
-  const contextMenuRef = useContextMenuItems(() => [], []);
+  const contextMenuRef = useContextMenuItems(
+    () => [{ label: 'Close all other tabs', onAction: onCloseAllOthers }],
+    [onCloseAllOthers]
+  );
 
   const mergedRef = useMergeRefs([setNodeRef, contextMenuRef]);
 

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

@@ -151,6 +151,7 @@ type SortableItemProps = {
   activeId: UniqueIdentifier | null;
   onSelect: (tabIndex: number) => void;
   onClose: (tabIndex: number) => void;
+  onCloseAllOthers: (tabIndex: number) => void;
 };
 
 type SortableListProps = {
@@ -159,6 +160,7 @@ type SortableListProps = {
   onMove: (oldTabIndex: number, newTabIndex: number) => void;
   onSelect: (tabIndex: number) => void;
   onClose: (tabIndex: number) => void;
+  onCloseAllOthers: (tabIndex: number) => void;
 };
 
 type WorkspaceTabsProps = {
@@ -168,6 +170,7 @@ type WorkspaceTabsProps = {
   onSelectNextTab: () => void;
   onSelectPrevTab: () => void;
   onCloseTab: (tabIndex: number) => void;
+  onCloseAllOtherTabs: (tabIndex: number) => void;
   onMoveTab: (oldTabIndex: number, newTabIndex: number) => void;
   tabs: TabItem[];
   selectedTabIndex: number;
@@ -210,6 +213,7 @@ const SortableList = ({
   onSelect,
   selectedTabIndex,
   onClose,
+  onCloseAllOthers,
 }: SortableListProps) => {
   const items = tabs.map((tab) => tab.id);
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
@@ -267,6 +271,7 @@ const SortableList = ({
               activeId={activeId}
               onSelect={onSelect}
               onClose={onClose}
+              onCloseAllOthers={onCloseAllOthers}
               selectedTabIndex={selectedTabIndex}
             />
           ))}
@@ -283,6 +288,7 @@ const SortableItem = ({
   activeId,
   onSelect,
   onClose,
+  onCloseAllOthers,
 }: SortableItemProps) => {
   const onTabSelected = useCallback(() => {
     onSelect(index);
@@ -292,6 +298,10 @@ const SortableItem = ({
     onClose(index);
   }, [onClose, index]);
 
+  const onAllOthersTabsClosed = useCallback(() => {
+    onCloseAllOthers(index);
+  }, [onCloseAllOthers, index]);
+
   const isSelected = useMemo(
     () => selectedTabIndex === index,
     [selectedTabIndex, index]
@@ -305,13 +315,15 @@ const SortableItem = ({
     tabContentId: tabId,
     onSelect: onTabSelected,
     onClose: onTabClosed,
+    onCloseAllOthers: onAllOthersTabsClosed,
   });
 };
 
 function WorkspaceTabs({
   ['aria-label']: ariaLabel,
   onCreateNewTab,
   onCloseTab,
+  onCloseAllOtherTabs,
   onMoveTab,
   onSelectTab,
   onSelectNextTab,
@@ -409,6 +421,7 @@ function WorkspaceTabs({
             onMove={onMoveTab}
             onSelect={onSelectTab}
             onClose={onCloseTab}
+            onCloseAllOthers={onCloseAllOtherTabs}
             selectedTabIndex={selectedTabIndex}
           />
         </div>

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

@@ -16,6 +16,7 @@ import type {
 } from '../stores/workspaces';
 import {
   closeTab,
+  closeAllOtherTabs,
   getActiveTab,
   moveTab,
   openFallbackWorkspace,
@@ -76,6 +77,7 @@ type CompassWorkspacesProps = {
   onMoveTab(from: number, to: number): void;
   onCreateTab(defaultTab?: OpenWorkspaceOptions | null): void;
   onCloseTab(at: number): void;
+  onCloseAllOtherTabs(at: number): void;
   onNamespaceNotFound(
     tab: Extract<WorkspaceTab, { namespace: string }>,
     fallbackNamespace: string | null
@@ -94,6 +96,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
   onMoveTab,
   onCreateTab,
   onCloseTab,
+  onCloseAllOtherTabs,
   onNamespaceNotFound,
 }) => {
   const { log, mongoLogId } = useLogger('COMPASS-WORKSPACES');
@@ -203,6 +206,7 @@ const CompassWorkspaces: React.FunctionComponent<CompassWorkspacesProps> = ({
         onMoveTab={onMoveTab}
         onCreateNewTab={onCreateNewTab}
         onCloseTab={onCloseTab}
+        onCloseAllOtherTabs={onCloseAllOtherTabs}
         tabs={workspaceTabs}
         selectedTabIndex={activeTabIndex}
       ></WorkspaceTabs>
@@ -235,6 +239,7 @@ export default connect(
     onMoveTab: moveTab,
     onCreateTab: openTabFromCurrent,
     onCloseTab: closeTab,
+    onCloseAllOtherTabs: closeAllOtherTabs,
     onNamespaceNotFound: openFallbackWorkspace,
   }
 )(CompassWorkspaces);

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

@@ -56,6 +56,7 @@ export enum WorkspacesActions {
   MoveTab = 'compass-workspaces/MoveTab',
   OpenTabFromCurrentActive = 'compass-workspaces/OpenTabFromCurrentActive',
   CloseTab = 'compass-workspaces/CloseTab',
+  CloseAllOtherTabs = 'compass-workspaces/CloseAllOtherTabs',
   CollectionRenamed = 'compass-workspaces/CollectionRenamed',
   CollectionRemoved = 'compass-workspaces/CollectionRemoved',
   DatabaseRemoved = 'compass-workspaces/DatabaseRemoved',
@@ -465,6 +466,20 @@ const reducer: Reducer<WorkspacesState, Action> = (
     });
   }
 
+  if (
+    isAction<CloseAllOtherTabsAction>(
+      action,
+      WorkspacesActions.CloseAllOtherTabs
+    )
+  ) {
+    return _bulkTabsClose({
+      state,
+      isToBeClosed: (_tab, index) => {
+        return index !== action.atIndex;
+      },
+    });
+  }
+
   if (
     isAction<CollectionRemovedAction>(
       action,
@@ -868,6 +883,27 @@ export const closeTab = (
   };
 };
 
+type CloseAllOtherTabsAction = {
+  type: WorkspacesActions.CloseAllOtherTabs;
+  atIndex: number;
+};
+
+export const closeAllOtherTabs = (
+  atIndex: number
+): WorkspacesThunkAction<Promise<void>, CloseAllOtherTabsAction> => {
+  return async (dispatch, getState) => {
+    const { tabs } = getState();
+    const otherTabs = tabs.filter((_, index) => index !== atIndex);
+    for (const tab of otherTabs) {
+      if (!canCloseTab(tab) && !(await confirmClosingTabs())) {
+        return; // Abort the action
+      }
+    }
+    dispatch({ type: WorkspacesActions.CloseAllOtherTabs, atIndex });
+    cleanupLocalAppRegistryForTab(tabs[atIndex].id);
+  };
+};
+
 type CollectionRenamedAction = {
   type: WorkspacesActions.CollectionRenamed;
   from: string;