Improve dock tabs UX (#4754)

* Add separators and scroll button Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add tabs controlls Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Update values on resize Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix right button Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add change tab on keydown Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix flickering and arrows position Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix pr comments. Cleanup function. Simplify reaction Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add disposer cleanup Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add separators and scroll button Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add tabs controlls Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Update values on resize Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix right button Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add change tab on keydown Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix flickering and arrows position Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Fix pr comments. Cleanup function. Simplify reaction Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add disposer cleanup Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * PR fixes and improvements Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Add reaction cleanup Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Cleanup. Remove reaction. Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com> * Active tab soft background Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Show close btn on hover Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing custom left/right arrow buttons Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove dock-tabs styles from dock.scss Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add dock-tabs.module.scss Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add useResizeObserver hook Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Set tabs scrollable on small window sizes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add custom scrollbar on hover Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Update scrollbar overflow on tabs change Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding shadow corners to scrollable area Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Update material icons font Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Change terminal and chart install icons Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add hover tooltip Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Controls scrollable within Tabs Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Move tooltips to top Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Set dock tabs theme colors Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Mock ResizeObserver Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Increase tooltip show delay Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Scroll active tab into view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Scroll horizontally with mouse wheel Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add tiny shadow to cropped tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove dock-tab.scss Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding tab role attributes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Handle dock open/closed state Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Increase shadow corner size Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Selecting next or previous tab after closing selected one Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add tiny test Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Use scrollIntoViewIfNeeded in tabs Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Small cleaning Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Small fix for useResizeObserver deps array Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix plus button padding on empty dock Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix close button position in active tab Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove min-width for tab title Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Clean up Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2022-03-21 15:55:51 +03:00
1 parent a76fc6df84
commit 9f6c3e230a
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import directoryForUserDataInjectable from "../../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import { DockStore, DockTab, TabKind } from "../dock/store";
+import dockStoreInjectable from "../dock/store.injectable";
+import fse from "fs-extra";
+
+const initialTabs: DockTab[] = [
+  { id: "terminal", kind: TabKind.TERMINAL, title: "Terminal", pinned: false },
+  { id: "create", kind: TabKind.CREATE_RESOURCE, title: "Create resource", pinned: false },
+  { id: "edit", kind: TabKind.EDIT_RESOURCE, title: "Edit resource", pinned: false },
+  { id: "install", kind: TabKind.INSTALL_CHART, title: "Install chart", pinned: false },
+  { id: "logs", kind: TabKind.POD_LOGS, title: "Logs", pinned: false },
+];
+
+describe("DockStore", () => {
+  let dockStore: DockStore;
+
+  beforeEach(async () => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    di.override(
+      directoryForUserDataInjectable,
+      () => "some-test-suite-specific-directory-for-user-data",
+    );
+    await di.runSetups();
+
+    dockStore = di.inject(dockStoreInjectable);
+
+    await dockStore.whenReady;
+  });
+
+  afterEach(() => {
+    fse.remove("some-test-suite-specific-directory-for-user-data");
+    dockStore.closeAllTabs();
+  });
+
+  it("closes tab and selects one from right", () => {
+    dockStore.tabs = initialTabs;
+    dockStore.closeTab(dockStore.tabs[0].id);
+
+    expect(dockStore.selectedTabId).toBe("create");
+
+    dockStore.selectTab("edit");
+    dockStore.closeTab("edit");
+
+    expect(dockStore.selectedTabId).toBe("install");
+  });
+
+  it("closes last tab and selects one from right", () => {
+    dockStore.tabs = initialTabs;
+    dockStore.selectTab("logs");
+    dockStore.closeTab("logs");
+
+    expect(dockStore.selectedTabId).toBe("install");
+  });
+
+  it("closes tab and selects the last one", () => {
+    dockStore.tabs = [
+      { id: "terminal", kind: TabKind.TERMINAL, title: "Terminal", pinned: false },
+      { id: "create", kind: TabKind.CREATE_RESOURCE, title: "Create resource", pinned: false },
+    ];
+    dockStore.closeTab("terminal");
+
+    expect(dockStore.selectedTabId).toBe("create");
+  });
+
+  it("closes last tab and selects none", () => {
+    dockStore.tabs = [
+      { id: "create", kind: TabKind.CREATE_RESOURCE, title: "Create resource", pinned: false },
+    ];
+    dockStore.closeTab("create");
+
+    expect(dockStore.selectedTabId).toBeUndefined();
+  });
+
+  it("doesn't change selected tab if other tab closed", () => {
+    dockStore.tabs = initialTabs;
+    dockStore.closeTab("install");
+
+    expect(dockStore.selectedTabId).toBe("terminal");
+  });
+});
@@ -39,6 +39,14 @@ jest.mock("electron", () => ({
  },
 }));

+Object.defineProperty(window, "ResizeObserver", {
+  writable: true,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+});
+
 const initialTabs: DockTab[] = [
  { id: "terminal", kind: TabKind.TERMINAL, title: "Terminal", pinned: false },
  { id: "create", kind: TabKind.CREATE_RESOURCE, title: "Create resource", pinned: false },