Remember selected child tab when parent tab is reopened

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 /test/feature/coverage/
 /test/e2e/reports/
 selenium-debug.log

src/components/dashboard/DashboardDetails.vue

@@ -1,7 +1,7 @@
 <template>
     <b-tabs
-        :value="activeTab"
-        @input="updateActiveTab"
+        :value="activeTab.parentTab"
+        @input="updateActiveParentTab"
         size="is-small"
         type="is-boxed"
         :animated="false"
@@ -10,6 +10,8 @@
             <keep-alive>
                 <tab-app v-if="isActiveTab(0)"
                     :tracker="tracker"
+                    :active-tab="activeTab.childTab"
+                    @updateActiveTab="updateActiveChildTab"
                 ></tab-app>
             </keep-alive>
         </b-tab-item>
@@ -18,6 +20,8 @@
             <keep-alive>
                 <tab-performance v-if="isActiveTab(1)"
                     :tracker="tracker"
+                    :active-tab="activeTab.childTab"
+                    @updateActiveTab="updateActiveChildTab"
                 ></tab-performance>
             </keep-alive>
         </b-tab-item>
@@ -26,6 +30,8 @@
             <keep-alive>
                 <tab-http-request v-if="isActiveTab(2) && tracker.request.isHttpRequest()"
                     :tracker="tracker"
+                    :active-tab="activeTab.childTab"
+                    @updateActiveTab="updateActiveChildTab"
                 ></tab-http-request>
             </keep-alive>
             <keep-alive>
@@ -39,6 +45,8 @@
             <keep-alive>
                 <tab-http-response v-if="isActiveTab(3) && tracker.response.isHttpResponse()"
                     :tracker="tracker"
+                    :active-tab="activeTab.childTab"
+                    @updateActiveTab="updateActiveChildTab"
                 ></tab-http-response>
             </keep-alive>
             <keep-alive>
@@ -93,6 +101,7 @@
 <script>
     import { mapGetters } from 'vuex';
     import Tracker from './../../models/tracker';
+    import ActiveTab from './../../services/active-tab.service';
     import TabApp from './details/TabApp';
     import TabAuth from './details/TabAuth';
     import TabViews from './details/TabViews';
@@ -124,18 +133,19 @@
             tracker: Tracker,
         },
         created() {
-            this.activeTab = this.lastActiveDetailsTabOfTracker(this.tracker.id);
-            this.updateLastActiveDetailsTabOfTracker(this.activeTab);
+            this.activeTab = this.lastActiveTabOfTracker(this.tracker.id);
+            this.updateLastActiveTabOfTracker();
         },
         computed: {
             ...mapGetters('details', [
                 'openedDetails',
-                'lastActiveDetailsTabOfTracker',
+                'lastActiveTabOfTracker',
+                'lastActiveChildTabOfTracker',
             ]),
         },
         data() {
             return {
-                activeTab: 0,
+                activeTab: new ActiveTab(),
                 requestLabel: this.$t(`tab-labels.${this.tracker.request.name}`),
                 responseLabel: this.$t(`tab-labels.${this.tracker.response.name}`),
                 viewsLabel: this.tracker.areViewsProvided()
@@ -152,22 +162,33 @@
             };
         },
         methods: {
-            updateActiveTab(activeTab) {
-                this.activeTab = activeTab;
-                this.updateLastActiveDetailsTab(activeTab);
-                this.updateLastActiveDetailsTabOfTracker(activeTab);
+            updateActiveParentTab(activeParentTab) {
+                this.activeTab = new ActiveTab(
+                    activeParentTab,
+                    this.lastActiveChildTabOfTracker(this.tracker.id, activeParentTab),
+                );
+                this.updateLastActiveTab();
+                this.updateLastActiveTabOfTracker();
             },
-            updateLastActiveDetailsTab(activeTab) {
-                this.$store.commit('details/updateLastActiveDetailsTab', activeTab);
+            updateActiveChildTab(activeChildTab) {
+                this.activeTab = new ActiveTab(
+                    this.activeTab.parentTab,
+                    activeChildTab
+                );
+                this.updateLastActiveTab();
+                this.updateLastActiveTabOfTracker();
             },
-            updateLastActiveDetailsTabOfTracker(activeTab) {
-                this.$store.commit('details/updateLastActiveDetailsTabOfTracker', {
+            updateLastActiveTab() {
+                this.$store.commit('details/updateLastActiveTab', this.activeTab);
+            },
+            updateLastActiveTabOfTracker() {
+                this.$store.commit('details/updateLastActiveTabOfTracker', {
                     trackerId: this.tracker.id,
-                    activeTab,
+                    activeTab: this.activeTab,
                 });
             },
-            isActiveTab(tab) {
-                return this.activeTab === tab;
+            isActiveTab(parentTab) {
+                return this.activeTab.parentTab === parentTab;
             },
         },
     };

src/components/dashboard/details/TabApp.vue

@@ -66,10 +66,13 @@
         },
         props: {
             tracker: Tracker,
+            activeTab: {
+                type: Number,
+                default: 0,
+            },
         },
         data() {
             return {
-                activeTab: 0,
                 configLabel: this.tracker.hasConfig()
                     ? `Config (${this.tracker.countConfig()})`
                     : 'Config',
@@ -86,7 +89,7 @@
         },
         methods: {
             updateActiveTab(activeTab) {
-                this.activeTab = activeTab;
+                this.$emit('updateActiveTab', activeTab);
             },
             isActiveTab(tab) {
                 return this.activeTab === tab;

src/components/dashboard/details/TabHttpRequest.vue

@@ -66,10 +66,13 @@
         },
         props: {
             tracker: Tracker,
+            activeTab: {
+                type: Number,
+                default: 0,
+            },
         },
         data() {
             return {
-                activeTab: 0,
                 inputLabel: `Input (${this.tracker.request.countInput()})`,
                 sessionLabel: this.tracker.isSessionProvided()
                     ? `Session (${this.tracker.countSession()})`
@@ -78,7 +81,7 @@
         },
         methods: {
             updateActiveTab(activeTab) {
-                this.activeTab = activeTab;
+                this.$emit('updateActiveTab', activeTab);
             },
             isActiveTab(tab) {
                 return this.activeTab === tab;

src/components/dashboard/details/TabHttpResponse.vue

@@ -46,15 +46,14 @@
         },
         props: {
             tracker: Tracker,
-        },
-        data() {
-            return {
-                activeTab: 0,
-            };
+            activeTab: {
+                type: Number,
+                default: 0,
+            },
         },
         methods: {
             updateActiveTab(activeTab) {
-                this.activeTab = activeTab;
+                this.$emit('updateActiveTab', activeTab);
             },
             isActiveTab(tab) {
                 return this.activeTab === tab;

src/components/dashboard/details/TabPerformance.vue

@@ -36,15 +36,14 @@
         },
         props: {
             tracker: Tracker,
-        },
-        data() {
-            return {
-                activeTab: 0,
-            };
+            activeTab: {
+                type: Number,
+                default: 0,
+            },
         },
         methods: {
             updateActiveTab(activeTab) {
-                this.activeTab = activeTab;
+                this.$emit('updateActiveTab', activeTab);
             },
             isActiveTab(tab) {
                 return this.activeTab === tab;

src/services/active-tab.service.js

@@ -0,0 +1,6 @@
+export default class ActiveTab {
+    constructor(parentTab = 0, childTab = 0) {
+        this.parentTab = parentTab;
+        this.childTab = childTab;
+    }
+}

src/store/modules/details.js

@@ -1,29 +1,39 @@
+import ActiveTab from './../../services/active-tab.service';
 import { bTableService } from './../../services/b-table.service';
 
 const getters = {
     openedDetails: state => state.openedDetails,
-    lastActiveDetailsTabOfTracker: state => trackerId => state.lastActiveDetailsTabOfTracker[trackerId] || state.lastActiveDetailsTab,
+    lastActiveTabOfTracker: state => trackerId => {
+        return (state.tabs.trackers[trackerId] && state.tabs.trackers[trackerId]['lastActive']) || state.tabs.lastActive;
+    },
+    lastActiveChildTabOfTracker: state => (trackerId, activeParentTab) => {
+        return ((state.tabs.trackers[trackerId] && state.tabs.trackers[trackerId]['allActivated'][activeParentTab]) || new ActiveTab()).childTab;
+    },
 };
 
 const mutations = {
     toggleOpenedDetails(state, id) {
         bTableService.toggleOpenedDetails(state.openedDetails, id);
     },
 
-    updateLastActiveDetailsTab(state, activeTab) {
-        state.lastActiveDetailsTab = activeTab;
+    updateLastActiveTab(state, activeTab) {
+        state.tabs.lastActive = activeTab;
     },
 
-    updateLastActiveDetailsTabOfTracker(state, { trackerId, activeTab }) {
-        state.lastActiveDetailsTabOfTracker[trackerId] = activeTab;
+    updateLastActiveTabOfTracker(state, { trackerId, activeTab }) {
+        state.tabs.trackers[trackerId] = state.tabs.trackers[trackerId] || { allActivated: {} };
+        state.tabs.trackers[trackerId]['lastActive'] = activeTab;
+        state.tabs.trackers[trackerId]['allActivated'][activeTab.parentTab] = activeTab;
     },
 };
 
 export function detailsFactory() {
     const state = {
         openedDetails: [],
-        lastActiveDetailsTab: 0,
-        lastActiveDetailsTabOfTracker: {},
+        tabs: {
+            lastActive: new ActiveTab(),
+            trackers: {},
+        },
     };
 
     return {

test/feature/specs/components/dashboard/DashboardDetails.spec.js

@@ -12,6 +12,14 @@ describe('DashboardDetails Component', () => {
         expect(wrapper.tabs(0).text()).to.equal('App');
         expect(wrapperTabApp.isVisible()).to.be.true;
         expect(wrapperTabApp.props().tracker).to.equal(wrapper.props().tracker);
+        expect(wrapperTabApp.props().activeTab).to.equal(0);
+
+        expect(wrapper.vm.activeTab.childTab).to.equal(0);
+        expect(wrapperTabApp.vm.activeTab).to.equal(0);
+
+        wrapperTabApp.vm.updateActiveTab(1);
+        expect(wrapper.vm.activeTab.childTab).to.equal(1);
+        expect(wrapperTabApp.vm.activeTab).to.equal(1);
     });
 
     it('has performance tab', async () => {
@@ -26,6 +34,14 @@ describe('DashboardDetails Component', () => {
         let wrapperTabPerformance = wrapper.find({ name: 'tab-performance' });
         expect(wrapperTabPerformance.isVisible()).to.be.true;
         expect(wrapperTabPerformance.props().tracker).to.equal(wrapper.props().tracker);
+        expect(wrapperTabPerformance.props().activeTab).to.equal(0);
+
+        expect(wrapper.vm.activeTab.childTab).to.equal(0);
+        expect(wrapperTabPerformance.vm.activeTab).to.equal(0);
+
+        wrapperTabPerformance.vm.updateActiveTab(1);
+        expect(wrapper.vm.activeTab.childTab).to.equal(1);
+        expect(wrapperTabPerformance.vm.activeTab).to.equal(1);
     });
 
     it('has http request tab enabled when type equals http', async () => {
@@ -41,6 +57,15 @@ describe('DashboardDetails Component', () => {
         expect(wrapper.tabs(2).classes()).to.not.contain('is-disabled');
         expect(wrapperTabRequest.isVisible()).to.be.true;
         expect(wrapperTabRequest.props().tracker).to.equal(wrapper.props().tracker);
+        expect(wrapperTabRequest.props().activeTab).to.equal(0);
+
+        expect(wrapper.vm.activeTab.childTab).to.equal(0);
+        expect(wrapperTabRequest.vm.activeTab).to.equal(0);
+
+        wrapperTabRequest.vm.updateActiveTab(1);
+        expect(wrapper.vm.activeTab.childTab).to.equal(1);
+        expect(wrapperTabRequest.vm.activeTab).to.equal(1);
+
         expect(wrapper.find({ name: 'tab-console-finished-request' }).exists()).to.be.false;
     });
 
@@ -95,6 +120,15 @@ describe('DashboardDetails Component', () => {
         expect(wrapper.tabs(3).classes()).to.not.contain('is-disabled');
         expect(wrapperTabResponse.isVisible()).to.be.true;
         expect(wrapperTabResponse.props().tracker).to.equal(wrapper.props().tracker);
+        expect(wrapperTabResponse.props().activeTab).to.equal(0);
+
+        expect(wrapper.vm.activeTab.childTab).to.equal(0);
+        expect(wrapperTabResponse.vm.activeTab).to.equal(0);
+
+        wrapperTabResponse.vm.updateActiveTab(1);
+        expect(wrapper.vm.activeTab.childTab).to.equal(1);
+        expect(wrapperTabResponse.vm.activeTab).to.equal(1);
+
         expect(wrapper.find({ name: 'tab-console-finished-response' }).exists()).to.be.false;
     });