feat: fix deserialization active panel issue + tests

packages/dockview/src/__tests__/groupview/groupview.spec.ts

@@ -19,12 +19,16 @@ import {
     GroupOptions,
     Groupview,
 } from '../../groupview/groupview';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
+import {
+    DockviewPanelApi,
+    DockviewPanelApiImpl,
+} from '../../api/groupPanelApi';
 import {
     DefaultGroupPanelView,
     IGroupPanelView,
 } from '../../dockview/defaultGroupPanelView';
 import { GroupPanel } from '../../groupview/groupviewPanel';
+import { DockviewApi } from '../../api/component.api';
 
 class Watermark implements IWatermarkRenderer {
     public readonly element = document.createElement('div');
@@ -522,4 +526,49 @@ describe('groupview', () => {
             hideHeader: true,
         });
     });
+
+    test("that openPanel with skipSetActive doesn't set panel to active", () => {
+        const dockviewComponent: IDockviewComponent = new DockviewComponent(
+            document.createElement('div'),
+            {
+                components: {
+                    component: TestContentPart,
+                },
+            }
+        );
+
+        const groupviewContainer = document.createElement('div');
+        const cut = new Groupview(
+            groupviewContainer,
+            dockviewComponent,
+            'id',
+            {},
+            null
+        );
+        const contentContainer = groupviewContainer
+            .getElementsByClassName('content-container')
+            .item(0).childNodes;
+
+        const panel1 = new TestPanel('id_1', null);
+
+        cut.openPanel(panel1);
+        expect(contentContainer.length).toBe(1);
+        expect(contentContainer.item(0)).toBe(panel1.view.content.element);
+
+        const panel2 = new TestPanel('id_2', null);
+
+        cut.openPanel(panel2);
+        expect(contentContainer.length).toBe(1);
+        expect(contentContainer.item(0)).toBe(panel2.view.content.element);
+
+        const panel3 = new TestPanel('id_2', null);
+
+        cut.openPanel(panel3, { skipSetActive: true });
+        expect(contentContainer.length).toBe(1);
+        expect(contentContainer.item(0)).toBe(panel2.view.content.element);
+
+        cut.openPanel(panel3);
+        expect(contentContainer.length).toBe(1);
+        expect(contentContainer.item(0)).toBe(panel3.view.content.element);
+    });
 });

packages/dockview/src/__tests__/groupview/tab.spec.ts

@@ -0,0 +1,25 @@
+import { Tab } from '../../groupview/tab';
+
+describe('tab', () => {
+    test('that empty tab has inactive-tab class', () => {
+        const accessorMock = jest.fn();
+        const groupMock = jest.fn();
+
+        const cut = new Tab('panelId', new accessorMock(), new groupMock());
+
+        expect(cut.element.className).toBe('tab inactive-tab');
+    });
+
+    test('that active tab has active-tab class', () => {
+        const accessorMock = jest.fn();
+        const groupMock = jest.fn();
+
+        const cut = new Tab('panelId', new accessorMock(), new groupMock());
+
+        cut.setActive(true);
+        expect(cut.element.className).toBe('tab active-tab');
+
+        cut.setActive(false);
+        expect(cut.element.className).toBe('tab inactive-tab');
+    });
+});

packages/dockview/src/groupview/groupview.ts

@@ -420,7 +420,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
             return;
         }
 
-        this.doAddPanel(panel, options.index);
+        this.doAddPanel(panel, options.index, skipSetActive);
 
         if (!skipSetActive) {
             this.doSetActivePanel(panel);
@@ -561,14 +561,17 @@ export class Groupview extends CompositeDisposable implements IGroupview {
 
     private doAddPanel(
         panel: IDockviewPanel,
-        index: number = this.panels.length
+        index: number = this.panels.length,
+        skipSetActive = false
     ) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
 
         this.tabsContainer.openPanel(panel, index);
 
+        if (!skipSetActive) {
             this.contentContainer.openPanel(panel);
+        }
 
         this.tabsContainer.show();
         this.contentContainer.show();

packages/dockview/src/groupview/tab.ts

@@ -64,6 +64,8 @@ export class Tab extends CompositeDisposable implements ITab {
         this._element.tabIndex = 0;
         this._element.draggable = true;
 
+        toggleClass(this.element, 'inactive-tab', true);
+
         this.addDisposables(
             new (class Handler extends DragHandler {
                 private readonly panelTransfer =

packages/dockview/src/groupview/titlebar/tabsContainer.ts

@@ -51,8 +51,6 @@ export class TabsContainer
 
     private tabs: IValueDisposable<ITab>[] = [];
     private selectedIndex = -1;
-    private active = false;
-    private activePanel: IDockviewPanel | undefined;
     private actions: HTMLElement | undefined;
 
     private _height: number | undefined;
@@ -205,8 +203,8 @@ export class TabsContainer
         );
     }
 
-    public setActive(isGroupActive: boolean) {
-        this.active = isGroupActive;
+    public setActive(_isGroupActive: boolean) {
+        // noop
     }
 
     private addTab(
@@ -291,7 +289,6 @@ export class TabsContainer
         const value: IValueDisposable<ITab> = { value: tabToAdd, disposable };
 
         this.addTab(value, index);
-        this.activePanel = panel;
     }
 
     public closePanel(panel: IDockviewPanel) {