Merge pull request #141 from fleetbase/dev-v0.3.40

Fix tab navigation active state persistence

Author: roncodes

addon/components/tab-navigation.js

@@ -139,7 +139,11 @@ export default class TabNavigationComponent extends Component {
     }
 
     @action argsDidChange() {
-        const nextActiveTabId = this.args.activeTabId || (this.args.tabs?.[0]?.id ?? null);
+        const tabs = this.args.tabs ?? [];
+        const hasControlledActiveTab = this.args.activeTabId !== undefined;
+        const currentActiveTabExists = tabs.some((tab) => tab.id === this._activeTabId);
+        const nextActiveTabId = hasControlledActiveTab ? this.args.activeTabId : currentActiveTabExists ? this._activeTabId : (tabs[0]?.id ?? null);
+
         if (nextActiveTabId !== this._activeTabId) {
             this._activeTabId = nextActiveTabId;
         }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.39",
+    "version": "0.3.40",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",

tests/integration/components/tab-navigation-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
-import { click, render } from '@ember/test-helpers';
+import { click, render, settled } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | tab-navigation', function (hooks) {
@@ -98,6 +98,59 @@ module('Integration | Component | tab-navigation', function (hooks) {
         assert.dom('[data-tab-navigation-more]').doesNotExist();
     });
 
+    test('it preserves uncontrolled active tab when tabs are refreshed with the same ids', async function (assert) {
+        this.set('tabs', [
+            { id: 'overview', label: 'Overview' },
+            { id: 'positions', label: 'Positions' },
+            { id: 'devices', label: 'Devices' },
+        ]);
+
+        await render(hbs`
+            <TabNavigation @tabs={{this.tabs}} as |activeTab|>
+                {{activeTab.label}}
+            </TabNavigation>
+        `);
+
+        await click('[role="tab"][data-tab-id="positions"]');
+        assert.dom('.tab-content').hasText('Positions');
+
+        this.set('tabs', [
+            { id: 'overview', label: 'Overview refreshed' },
+            { id: 'positions', label: 'Positions refreshed' },
+            { id: 'devices', label: 'Devices refreshed' },
+        ]);
+        await settled();
+
+        assert.dom('.tab-content').hasText('Positions refreshed');
+        assert.dom('[role="tab"][data-tab-id="positions"]').hasClass('tab-item--active');
+    });
+
+    test('it falls back to the first tab when uncontrolled active tab is removed', async function (assert) {
+        this.set('tabs', [
+            { id: 'overview', label: 'Overview' },
+            { id: 'positions', label: 'Positions' },
+            { id: 'devices', label: 'Devices' },
+        ]);
+
+        await render(hbs`
+            <TabNavigation @tabs={{this.tabs}} as |activeTab|>
+                {{activeTab.label}}
+            </TabNavigation>
+        `);
+
+        await click('[role="tab"][data-tab-id="positions"]');
+        assert.dom('.tab-content').hasText('Positions');
+
+        this.set('tabs', [
+            { id: 'overview', label: 'Overview refreshed' },
+            { id: 'devices', label: 'Devices refreshed' },
+        ]);
+        await settled();
+
+        assert.dom('.tab-content').hasText('Overview refreshed');
+        assert.dom('[role="tab"][data-tab-id="overview"]').hasClass('tab-item--active');
+    });
+
     test('it moves overflowing array tabs into a More menu', async function (assert) {
         availableWidth = 142;
         this.set('tabs', [