Merge branch 'fix-back-button-ci-cd-analytics' into 'master'

Add Listener so Back Button Switches Tabs

See merge request gitlab-org/gitlab!53495

app/assets/javascripts/projects/pipelines/charts/components/app.vue

@@ -20,18 +20,26 @@ export default {
     },
   },
   data() {
-    const [chart] = getParameterValues('chart') || charts;
-    const tab = charts.indexOf(chart);
     return {
-      chart,
-      selectedTab: tab >= 0 ? tab : 0,
+      selectedTab: 0,
     };
   },
+  created() {
+    this.selectTab();
+    window.addEventListener('popstate', this.selectTab);
+  },
   methods: {
+    selectTab() {
+      const [chart] = getParameterValues('chart') || charts;
+      const tab = charts.indexOf(chart);
+      this.selectedTab = tab >= 0 ? tab : 0;
+    },
     onTabChange(index) {
+      if (index !== this.selectedTab) {
         this.selectedTab = index;
         const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
-      updateHistory({ url: path });
+        updateHistory({ url: path, title: window.title });
+      }
     },
   },
 };

changelogs/unreleased/fix-back-button-ci-cd-analytics.yml

+---
+title: Back Button now switches to last active analytics tab
+merge_request: 53495
+author:
+type: fixed

spec/frontend/projects/pipelines/charts/components/app_spec.js

@@ -87,6 +87,22 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       expect(tabs.attributes('value')).toBe('1');
     });
+
+    it('should not try to push history if the tab does not change', async () => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => `${path}?chart=${chart}`);
+
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 0);
+
+      await wrapper.vm.$nextTick();
+
+      expect(updateHistory).not.toHaveBeenCalled();
+    });
   });
 
   describe('when provided with a query param', () => {
@@ -105,6 +121,38 @@ describe('ProjectsPipelinesChartsApp', () => {
       createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
       expect(findGlTabs().attributes('value')).toBe(tab);
     });
+
+    it('should set the tab when the back button is clicked', async () => {
+      let popstateHandler;
+
+      window.addEventListener = jest.fn();
+
+      window.addEventListener.mockImplementation((event, handler) => {
+        if (event === 'popstate') {
+          popstateHandler = handler;
+        }
+      });
+
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return [];
+      });
+
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+
+      expect(findGlTabs().attributes('value')).toBe('0');
+
+      getParameterValues.mockImplementationOnce((name) => {
+        expect(name).toBe('chart');
+        return ['deployments'];
+      });
+
+      popstateHandler();
+
+      await wrapper.vm.$nextTick();
+
+      expect(findGlTabs().attributes('value')).toBe('1');
+    });
   });
 
   describe('when shouldRenderDeploymentFrequencyCharts is false', () => {