Merge branch '32664-disallow-changing-of-insights-tab-whilst-page-is-loading' into 'master'

Disable tab navigation whilst current page loads

Closes #32664

See merge request gitlab-org/gitlab!17678

ee/app/assets/javascripts/insights/components/insights.vue

@@ -23,7 +23,13 @@ export default {
     },
   },
   computed: {
-    ...mapState('insights', ['configData', 'configLoading', 'activeTab', 'activePage']),
+    ...mapState('insights', [
+      'configData',
+      'configLoading',
+      'activeTab',
+      'activePage',
+      'pageLoading',
+    ]),
     pages() {
       const { configData, activeTab } = this;
 
@@ -68,6 +74,7 @@ export default {
         menu-class="w-100 mw-100"
         toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
         :text="__('Select Page')"
+        :disabled="pageLoading"
       >
         <gl-dropdown-item
           v-for="page in pages"

ee/changelogs/unreleased/32664-disallow-changing-of-insights-tab-whilst-page-is-loading.yml

+---
+title: Disable insights tab navigation whilst current page loads
+merge_request: 17678
+author:
+type: added

ee/spec/javascripts/insights/components/insights_spec.js

@@ -68,6 +68,21 @@ describe('Insights component', () => {
         done();
       });
     });
+
+    describe('when loading page', () => {
+      beforeEach(() => {
+        vm.$store.state.insights.pageLoading = true;
+      });
+
+      it('disables the tab selector', done => {
+        vm.$nextTick(() => {
+          expect(
+            vm.$el.querySelector('.js-insights-dropdown > button').getAttribute('disabled'),
+          ).toBe('disabled');
+          done();
+        });
+      });
+    });
   });
 
   describe('empty config', () => {