Add Listener so Back Button Switches Tabs

The `popstate` event fires when a browser's back button is clicked, so
we need to listen to it if we want the back button to actually go back
now that we use query parameters for tab selection.

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) {
-      this.selectedTab = index;
-      const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
-      updateHistory({ url: path });
+      if (index !== this.selectedTab) {
+        this.selectedTab = index;
+        const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
+        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', () => {