Dock tabs context menu (#1863)

* Adding context menu to dock tabs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Allowing to open menu by contextmenu event

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding DockTab tests with fine-tuning jest config

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding disable state to menu items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing empty lines

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving jest-canvas-mock to dev dependencies

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import { DockTabs } from "../dock-tabs";
+import { dockStore, IDockTab, TabKind } from "../dock.store";
+import { createResourceTab } from "../create-resource.store";
+import { createTerminalTab } from "../terminal.store";
+import { observable } from "mobx";
+
+const onChangeTab = jest.fn();
+
+const getComponent = () => (
+  <DockTabs
+    tabs={dockStore.tabs}
+    selectedTab={dockStore.selectedTab}
+    autoFocus={true}
+    onChangeTab={onChangeTab}
+  />
+);
+
+const renderTabs = () => render(getComponent());
+
+const getTabKinds = () => dockStore.tabs.map(tab => tab.kind);
+
+describe("<DockTabs />", () => {
+  beforeEach(() => {
+    createTerminalTab();
+    createResourceTab();
+    createTerminalTab();
+    createResourceTab();
+    createTerminalTab();
+  });
+
+  afterEach(() => {
+    dockStore.reset();
+  });
+
+  it("renders w/o errors", () => {
+    const { container } = renderTabs();
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("has 6 tabs (1 tab is initial terminal)", () => {
+    const { container } = renderTabs();
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(6);
+  });
+
+  it("opens a context menu", () => {
+    const { container, getByText } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    expect(getByText("Close all tabs")).toBeInTheDocument();
+  });
+
+  it("closes selected tab", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(5);
+    expect(getTabKinds()).toEqual([
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL
+    ]);
+  });
+
+  it("closes other tabs", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelectorAll(".Tab")[3];
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close other tabs");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(1);
+    expect(getTabKinds()).toEqual([TabKind.TERMINAL]);
+  });
+
+  it("closes all tabs", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close all tabs");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(0);
+  });
+
+  it("closes tabs to the right", () => {
+    const { container, getByText, rerender } = renderTabs();
+    const tab = container.querySelectorAll(".Tab")[3];
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close tabs to the right");
+
+    fireEvent.click(command);
+    rerender(getComponent());
+    const tabs = container.querySelectorAll(".Tab");
+
+    expect(tabs.length).toBe(4);
+    expect(getTabKinds()).toEqual([
+      TabKind.TERMINAL,
+      TabKind.TERMINAL,
+      TabKind.CREATE_RESOURCE,
+      TabKind.TERMINAL
+    ]);
+  });
+
+  it("disables 'Close All' & 'Close Other' items if only 1 tab available", () => {
+    dockStore.tabs = observable.array<IDockTab>([{
+      id: "terminal", kind: TabKind.TERMINAL, title: "Terminal"
+    }]);
+    const { container, getByText } = renderTabs();
+    const tab = container.querySelector(".Tab");
+
+    fireEvent.contextMenu(tab);
+    const closeAll = getByText("Close all tabs");
+    const closeOthers = getByText("Close other tabs");
+
+    expect(closeAll).toHaveClass("disabled");
+    expect(closeOthers).toHaveClass("disabled");
+  });
+
+  it("disables 'Close To The Right' item if last tab clicked", () => {
+    dockStore.tabs = observable.array<IDockTab>([
+      { id: "terminal", kind: TabKind.TERMINAL, title: "Terminal" },
+      { id: "logs", kind: TabKind.POD_LOGS, title: "Pod Logs" },
+    ]);
+    const { container, getByText } = renderTabs();
+    const tab = container.querySelectorAll(".Tab")[1];
+
+    fireEvent.contextMenu(tab);
+    const command = getByText("Close tabs to the right");
+
+    expect(command).toHaveClass("disabled");
+  });
+});

src/renderer/components/dock/dock-tab.tsx

@@ -2,11 +2,13 @@ import "./dock-tab.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { autobind, cssNames, prevDefault } from "../../utils";
 import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
+import { Menu, MenuItem } from "../menu";
+import { observable } from "mobx";
 import { _i18n } from "../../i18n";
 
 export interface DockTabProps extends TabProps<IDockTab> {
@@ -15,6 +17,8 @@ export interface DockTabProps extends TabProps<IDockTab> {
 
 @observer
 export class DockTab extends React.Component<DockTabProps> {
+  @observable menuVisible = false;
+
   get tabId() {
     return this.props.value.id;
   }
@@ -24,6 +28,38 @@ export class DockTab extends React.Component<DockTabProps> {
     dockStore.closeTab(this.tabId);
   }
 
+  renderMenu() {
+    const { closeTab, closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore;
+    const closeAllDisabled = tabs.length === 1;
+    const closeOtherDisabled = tabs.length === 1;
+    const closeRightDisabled = getTabIndex(this.tabId) === tabs.length - 1;
+
+    return (
+      <Menu
+        usePortal
+        htmlFor={`tab-${this.tabId}`}
+        className="DockTabMenu"
+        isOpen={this.menuVisible}
+        open={() => this.menuVisible = true}
+        close={() => this.menuVisible = false}
+        toggleEvent="contextmenu"
+      >
+        <MenuItem onClick={() => closeTab(this.tabId)}>
+          <Trans>Close</Trans>
+        </MenuItem>
+        <MenuItem onClick={() => closeAllTabs()} disabled={closeAllDisabled}>
+          <Trans>Close all tabs</Trans>
+        </MenuItem>
+        <MenuItem onClick={() => closeOtherTabs(this.tabId)} disabled={closeOtherDisabled}>
+          <Trans>Close other tabs</Trans>
+        </MenuItem>
+        <MenuItem onClick={() => closeTabsToTheRight(this.tabId)} disabled={closeRightDisabled}>
+          <Trans>Close tabs to the right</Trans>
+        </MenuItem>
+      </Menu>
+    );
+  }
+
   render() {
     const { className, moreActions, ...tabProps } = this.props;
     const { title, pinned } = tabProps.value;
@@ -42,11 +78,16 @@ export class DockTab extends React.Component<DockTabProps> {
     );
 
     return (
-      <Tab
-        {...tabProps}
-        className={cssNames("DockTab", className, { pinned })}
-        label={label}
-      />
+      <>
+        <Tab
+          {...tabProps}
+          id={`tab-${this.tabId}`}
+          className={cssNames("DockTab", className, { pinned })}
+          onContextMenu={() => this.menuVisible = true}
+          label={label}
+        />
+        {this.renderMenu()}
+      </>
     );
   }
 }

src/renderer/components/dock/dock-tabs.tsx

@@ -0,0 +1,51 @@
+import React, { Fragment } from "react";
+
+import { Icon } from "../icon";
+import { Tabs } from "../tabs/tabs";
+import { isCreateResourceTab } from "./create-resource.store";
+import { DockTab } from "./dock-tab";
+import { IDockTab } from "./dock.store";
+import { isEditResourceTab } from "./edit-resource.store";
+import { isInstallChartTab } from "./install-chart.store";
+import { isPodLogsTab } from "./pod-logs.store";
+import { TerminalTab } from "./terminal-tab";
+import { isTerminalTab } from "./terminal.store";
+import { isUpgradeChartTab } from "./upgrade-chart.store";
+
+interface Props {
+  tabs: IDockTab[]
+  autoFocus: boolean
+  selectedTab: IDockTab
+  onChangeTab: (tab: IDockTab) => void
+}
+
+export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) => {
+  const renderTab = (tab: IDockTab) => {
+    if (isTerminalTab(tab)) {
+      return <TerminalTab value={tab} />;
+    }
+
+    if (isCreateResourceTab(tab) || isEditResourceTab(tab)) {
+      return <DockTab value={tab} icon="edit" />;
+    }
+
+    if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) {
+      return <DockTab value={tab} icon={<Icon svg="install" />} />;
+    }
+
+    if (isPodLogsTab(tab)) {
+      return <DockTab value={tab} icon="subject" />;
+    }
+  };
+
+  return (
+    <Tabs
+      className="DockTabs"
+      autoFocus={autoFocus}
+      value={selectedTab}
+      onChange={onChangeTab}
+    >
+      {tabs.map(tab => <Fragment key={tab.id}>{renderTab(tab)}</Fragment>)}
+    </Tabs>
+  );
+};

src/renderer/components/dock/dock.store.ts

@@ -123,6 +123,10 @@ export class DockStore {
     return this.tabs.find(tab => tab.id === tabId);
   }
 
+  getTabIndex(tabId: TabId) {
+    return this.tabs.findIndex(tab => tab.id === tabId);
+  }
+
   protected getNewTabNumber(kind: TabKind) {
     const tabNumbers = this.tabs
       .filter(tab => tab.kind === kind)
@@ -182,6 +186,28 @@ export class DockStore {
     }
   }
 
+  closeTabs(tabs: IDockTab[]) {
+    tabs.forEach(tab => this.closeTab(tab.id));
+  }
+
+  closeAllTabs() {
+    this.closeTabs([...this.tabs]);
+  }
+
+  closeOtherTabs(tabId: TabId) {
+    const index = this.getTabIndex(tabId);
+    const tabs = [...this.tabs.slice(0, index), ...this.tabs.slice(index + 1)];
+
+    this.closeTabs(tabs);
+  }
+
+  closeTabsToTheRight(tabId: TabId) {
+    const index = this.getTabIndex(tabId);
+    const tabs = this.tabs.slice(index + 1);
+
+    this.closeTabs(tabs);
+  }
+
   @action
   selectTab(tabId: TabId) {
     this.selectedTabId = this.getTabById(tabId)?.id ?? null;

src/renderer/components/dock/dock.tsx

@@ -1,29 +1,28 @@
 import "./dock.scss";
 
-import React, { Fragment } from "react";
-import { observer } from "mobx-react";
+import React from "react";
 import { Trans } from "@lingui/macro";
-import { autobind, cssNames, prevDefault } from "../../utils";
-import { ResizingAnchor, ResizeDirection } from "../resizing-anchor";
+import { observer } from "mobx-react";
+
+import { cssNames, prevDefault } from "../../utils";
 import { Icon } from "../icon";
-import { Tabs } from "../tabs/tabs";
 import { MenuItem } from "../menu";
 import { MenuActions } from "../menu/menu-actions";
-import { dockStore, IDockTab } from "./dock.store";
-import { DockTab } from "./dock-tab";
-import { TerminalTab } from "./terminal-tab";
-import { TerminalWindow } from "./terminal-window";
+import { ResizeDirection, ResizingAnchor } from "../resizing-anchor";
 import { CreateResource } from "./create-resource";
-import { InstallChart } from "./install-chart";
-import { EditResource } from "./edit-resource";
-import { UpgradeChart } from "./upgrade-chart";
-import { createTerminalTab, isTerminalTab } from "./terminal.store";
 import { createResourceTab, isCreateResourceTab } from "./create-resource.store";
+import { DockTabs } from "./dock-tabs";
+import { dockStore, IDockTab } from "./dock.store";
+import { EditResource } from "./edit-resource";
 import { isEditResourceTab } from "./edit-resource.store";
+import { InstallChart } from "./install-chart";
 import { isInstallChartTab } from "./install-chart.store";
-import { isUpgradeChartTab } from "./upgrade-chart.store";
 import { PodLogs } from "./pod-logs";
 import { isPodLogsTab } from "./pod-logs.store";
+import { TerminalWindow } from "./terminal-window";
+import { createTerminalTab, isTerminalTab } from "./terminal.store";
+import { UpgradeChart } from "./upgrade-chart";
+import { isUpgradeChartTab } from "./upgrade-chart.store";
 
 interface Props {
   className?: string;
@@ -54,25 +53,6 @@ export class Dock extends React.Component<Props> {
     selectTab(tab.id);
   };
 
-  @autobind()
-  renderTab(tab: IDockTab) {
-    if (isTerminalTab(tab)) {
-      return <TerminalTab value={tab} />;
-    }
-
-    if (isCreateResourceTab(tab) || isEditResourceTab(tab)) {
-      return <DockTab value={tab} icon="edit" />;
-    }
-
-    if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) {
-      return <DockTab value={tab} icon={<Icon svg="install" />} />;
-    }
-
-    if (isPodLogsTab(tab)) {
-      return <DockTab value={tab} icon="subject" />;
-    }
-  }
-
   renderTabContent() {
     const { isOpen, height, selectedTab: tab } = dockStore;
 
@@ -112,13 +92,12 @@ export class Dock extends React.Component<Props> {
           onDrag={dockStore.setHeight}
         />
         <div className="tabs-container flex align-center" onDoubleClick={prevDefault(toggle)}>
-          <Tabs
+          <DockTabs
+            tabs={tabs}
+            selectedTab={selectedTab}
             autoFocus={isOpen}
-            className="dock-tabs"
-            value={selectedTab} onChange={this.onChangeTab}
-          >
-            {tabs.map(tab => <Fragment key={tab.id}>{this.renderTab(tab)}</Fragment>)}
-          </Tabs>
+            onChangeTab={this.onChangeTab}
+          />
           <div className="toolbar flex gaps align-center box grow">
             <div className="dock-menu box grow">
               <MenuActions usePortal triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: <Trans>New tab</Trans> }} closeOnScroll={false}>

src/renderer/components/menu/menu.tsx

@@ -31,6 +31,7 @@ export interface MenuProps {
   closeOnScroll?: boolean;          // applicable when usePortal={true}
   position?: MenuPosition;          // applicable when usePortal={false}
   children?: ReactNode;
+  toggleEvent?: "click" | "contextmenu";
 }
 
 interface State {
@@ -44,6 +45,7 @@ const defaultPropsMenu: Partial<MenuProps> = {
   closeOnClickItem: true,
   closeOnClickOutside: true,
   closeOnScroll: false,
+  toggleEvent: "click"
 };
 
 @autobind()
@@ -72,18 +74,19 @@ export class Menu extends React.Component<MenuProps, State> {
     this.opener = document.getElementById(this.props.htmlFor); // might not exist in sub-menus
 
     if (this.opener) {
-      this.opener.addEventListener("click", this.toggle);
+      this.opener.addEventListener(this.props.toggleEvent, this.toggle);
       this.opener.addEventListener("keydown", this.onKeyDown);
     }
     this.elem.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("resize", this.onWindowResize);
     window.addEventListener("click", this.onClickOutside, true);
     window.addEventListener("scroll", this.onScrollOutside, true);
+    window.addEventListener("contextmenu", this.onContextMenu, true);
   }
 
   componentWillUnmount() {
     if (this.opener) {
-      this.opener.removeEventListener("click", this.toggle);
+      this.opener.removeEventListener(this.props.toggleEvent, this.toggle);
       this.opener.removeEventListener("keydown", this.onKeyDown);
     }
     this.elem.removeEventListener("keydown", this.onKeyDown);
@@ -198,6 +201,10 @@ export class Menu extends React.Component<MenuProps, State> {
     }
   }
 
+  onContextMenu() {
+    this.close();
+  }
+
   onWindowResize() {
     if (!this.isOpen) return;
     this.refreshPosition();

src/renderer/components/tabs/tabs.tsx

@@ -51,6 +51,7 @@ export class Tabs extends React.PureComponent<TabsProps> {
 }
 
 export interface TabProps<D = any> extends DOMAttributes<HTMLElement> {
+  id?: string;
   className?: string;
   active?: boolean;
   disabled?: boolean;