feat: enhance docks-tabs to support single-tabs and hide-tabs

Author: erdalkaraca

packages/core/src/commands/open-view-as-editor.ts

@@ -11,18 +11,21 @@ registerAll({
         description: "Opens a dashboard view in the editor area",
         parameters: [
             { name: "name", description: "View contribution name", required: true },
-            { name: "sourceContributionSlot", description: "source contribution slot (default: SYSTEM_VIEWS)", required: false }
+            { name: "sourceContributionSlot", description: "source contribution slot (default: SYSTEM_VIEWS)", required: false },
+            { name: "singleTab", description: "If true, close all other editor tabs first so only this view remains open", required: false }
         ]
     },
     handler: {
-        execute: async ({ params }: { params?: { name?: string, sourceContributionSlot?: string } }) => {
+        execute: async ({ params }: { params?: { name?: string, sourceContributionSlot?: string, singleTab?: boolean } }) => {
             const name = params?.name;
             if (!name) return;
             const slot = params?.sourceContributionSlot ?? SYSTEM_VIEWS
             const contributions = contributionRegistry.getContributions(slot) as TabContribution[];
             const contribution = contributions.find(c => c.name === name);
             if (!contribution?.component) return;
-            await editorRegistry.openTab(contribution as TabContribution);
+            await editorRegistry.openTab(contribution as TabContribution, {
+                singleTab: params?.singleTab === true,
+            });
         }
     }
 });

packages/core/src/core/editorregistry.ts

@@ -226,14 +226,21 @@ class EditorRegistry {
         } as TabContribution) 
     }
 
-    async openTab(tabContribution: TabContribution) {
+    async openTab(tabContribution: TabContribution, options?: { singleTab?: boolean }) {
         const editorArea = this.getEditorArea();
 
         if (!editorArea) {
             console.error("Editor area not found. The split pane system may not be initialized yet.");
             return;
         }
 
+        if (options?.singleTab) {
+            const closed = await editorArea.closeAllTabs();
+            if (!closed) return;
+            editorArea.open(tabContribution);
+            return;
+        }
+
         if (editorArea.has(tabContribution.name)) {
             editorArea.activate(tabContribution.name)
             return

packages/core/src/parts/tabs.ts

@@ -41,6 +41,9 @@ export class DocksTabs extends DocksContainer {
     @property({type: Boolean, reflect: true, attribute: 'with-toolbar'})
     withToolbar: boolean = false;
 
+    @property({ type: Boolean, reflect: true, attribute: 'hide-tabs' })
+    hideTabs: boolean = false;
+
     /** Tab contributions for this container */
     @state()
     private contributions: TabContribution[] = [];
@@ -152,17 +155,37 @@ export class DocksTabs extends DocksContainer {
 
     async closeTab(event: Event, tabName: string): Promise<void> {
         event.stopPropagation();
-        
-        if (this.isDirty(tabName) && !await confirmDialog("Unsaved changes will be lost: Do you really want to close?")) {
-            return;
+        await this.tryCloseTab(tabName, true);
+    }
+
+    /**
+     * Closes every tab in this group. Returns false if the user cancels a dirty-tab prompt.
+     */
+    async closeAllTabs(): Promise<boolean> {
+        const names = [...this.contributions.map((c) => c.name)];
+        for (const tabName of names) {
+            const ok = await this.tryCloseTab(tabName, true);
+            if (!ok) return false;
         }
-        
+        return true;
+    }
+
+    /**
+     * @returns false if the user cancelled closing a dirty tab; true if the tab was removed or was absent.
+     */
+    private async tryCloseTab(tabName: string, confirmIfDirty: boolean): Promise<boolean> {
+        if (confirmIfDirty && this.isDirty(tabName)) {
+            if (!await confirmDialog("Unsaved changes will be lost: Do you really want to close?")) {
+                return false;
+            }
+        }
+
         const tabPanel = this.getTabPanel(tabName);
-        if (!tabPanel) return;
-        
+        if (!tabPanel) return true;
+
         const contribution = this.contributions.find(c => c.name === tabName);
-        if (!contribution) return;
-        
+        if (!contribution) return true;
+
         this.cleanupTabInstance(tabPanel);
         this.clearActiveSignalsIfPartInPanel(tabPanel);
 
@@ -172,10 +195,11 @@ export class DocksTabs extends DocksContainer {
         }
 
         this.requestUpdate();
-        
+
         this.updateComplete.then(() => {
             this.activateNextAvailableTab();
         });
+        return true;
     }
 
     markDirty(name: string, dirty: boolean): void {
@@ -421,6 +445,14 @@ export class DocksTabs extends DocksContainer {
             min-height: 0;
         }
 
+        :host([hide-tabs]) wa-tab {
+            display: none !important;
+        }
+
+        :host([hide-tabs]:not([with-toolbar])) wa-tab-group::part(nav) {
+            display: none;
+        }
+
         :host(:is([placement="top"], [placement="bottom"])) wa-tab-group::part(base) {
             display: grid;
             grid-template-rows: auto minmax(0, 1fr);

packages/core/test/units/editorregistry.test.ts

@@ -102,20 +102,61 @@ describe('editorregistry', () => {
   it('openTab activates existing tab or opens new one', async () => {
     const activate = vi.fn();
     const open = vi.fn();
+    const closeAllTabs = vi.fn(async () => true);
     (globalThis as any).document = {
       querySelector: vi.fn(() => ({
         has: (name: string) => name === 'existing',
         activate,
         open,
+        closeAllTabs,
       })),
     };
 
     const { editorRegistry } = await import('../../src/core/editorregistry');
     await editorRegistry.openTab({ name: 'existing', label: 'Existing' } as any);
     expect(activate).toHaveBeenCalledWith('existing');
     expect(open).not.toHaveBeenCalled();
+    expect(closeAllTabs).not.toHaveBeenCalled();
 
     await editorRegistry.openTab({ name: 'new-one', label: 'New One' } as any);
     expect(open).toHaveBeenCalledWith(expect.objectContaining({ name: 'new-one' }));
   });
+
+  it('openTab with singleTab closes all then opens', async () => {
+    const activate = vi.fn();
+    const open = vi.fn();
+    const closeAllTabs = vi.fn(async () => true);
+    (globalThis as any).document = {
+      querySelector: vi.fn(() => ({
+        has: vi.fn(() => false),
+        activate,
+        open,
+        closeAllTabs,
+      })),
+    };
+
+    const { editorRegistry } = await import('../../src/core/editorregistry');
+    await editorRegistry.openTab({ name: 'only', label: 'Only' } as any, { singleTab: true });
+    expect(closeAllTabs).toHaveBeenCalledOnce();
+    expect(open).toHaveBeenCalledWith(expect.objectContaining({ name: 'only' }));
+    expect(activate).not.toHaveBeenCalled();
+  });
+
+  it('openTab with singleTab aborts when closeAllTabs returns false', async () => {
+    const open = vi.fn();
+    const closeAllTabs = vi.fn(async () => false);
+    (globalThis as any).document = {
+      querySelector: vi.fn(() => ({
+        has: vi.fn(() => false),
+        activate: vi.fn(),
+        open,
+        closeAllTabs,
+      })),
+    };
+
+    const { editorRegistry } = await import('../../src/core/editorregistry');
+    await editorRegistry.openTab({ name: 'x', label: 'X' } as any, { singleTab: true });
+    expect(closeAllTabs).toHaveBeenCalledOnce();
+    expect(open).not.toHaveBeenCalled();
+  });
 });