Add URL Navigation to Pipeline Analytics Charts

If a query string of `?chart=XXX` is added to the URL, the appropriate
tab is selected. Currently, the only correct values are `pipelines` and
`deployments`. All other values are ignored, and `pipelines` is used as
the default.

If the application would not display tabs, nothing is affected.

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

@@ -4,6 +4,7 @@ import { s__ } from '~/locale';
 import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '../graphql/queries/get_project_pipeline_statistics.query.graphql';
 import PipelineCharts from './pipeline_charts.vue';
+import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 
 import {
   DEFAULT,
@@ -36,6 +37,8 @@ const defaultCountValues = {
   },
 };
 
+const charts = ['pipelines', 'deployments'];
+
 export default {
   components: {
     GlAlert,
@@ -56,7 +59,11 @@ export default {
     },
   },
   data() {
+    const [chart] = getParameterValues('chart') || charts;
+    const tab = charts.indexOf(chart);
     return {
+      chart,
+      selectedTab: tab >= 0 ? tab : 0,
       showFailureAlert: false,
       failureType: null,
       analytics: { ...defaultAnalyticsValues },
@@ -172,6 +179,11 @@ export default {
       this.showFailureAlert = true;
       this.failureType = type;
     },
+    onTabChange(index) {
+      this.selectedTab = index;
+      const path = mergeUrlParams({ chart: charts[index] }, window.location.pathname);
+      updateHistory({ url: path });
+    },
   },
   errorTexts: {
     [LOAD_ANALYTICS_FAILURE]: s__(
@@ -190,7 +202,7 @@ export default {
     <gl-alert v-if="showFailureAlert" :variant="failure.variant" @dismiss="hideAlert">{{
       failure.text
     }}</gl-alert>
-    <gl-tabs v-if="shouldRenderDeploymentFrequencyCharts">
+    <gl-tabs v-if="shouldRenderDeploymentFrequencyCharts" :value="selectedTab" @input="onTabChange">
       <gl-tab :title="__('Pipelines')">
         <pipeline-charts
           :counts="formattedCounts"

ee/changelogs/unreleased/add-url-navigation-pipeline-charts-tabs.yml

+---
+title: Add URL Navigation to Pipeline Analytics Charts
+merge_request: 52338
+author:
+type: added

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

@@ -3,12 +3,17 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { GlTabs, GlTab } from '@gitlab/ui';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import { mergeUrlParams, updateHistory, getParameterValues } from '~/lib/utils/url_utility';
 import Component from '~/projects/pipelines/charts/components/app.vue';
 import PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue';
 import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql';
 import getProjectPipelineStatistics from '~/projects/pipelines/charts/graphql/queries/get_project_pipeline_statistics.query.graphql';
 import { mockPipelineCount, mockPipelineStatistics } from '../mock_data';
 
+jest.mock('~/lib/utils/url_utility');
+
 const projectPath = 'gitlab-org/gitlab';
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -115,6 +120,49 @@ describe('ProjectsPipelinesChartsApp', () => {
       expect(findGlTabAt(1).attributes('title')).toBe('Deployments');
       expect(findDeploymentFrequencyCharts().exists()).toBe(true);
     });
+
+    it('sets the tab and url when a tab is clicked', async () => {
+      let chartsPath;
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts`);
+
+      mergeUrlParams.mockImplementation(({ chart }, path) => {
+        expect(chart).toBe('deployments');
+        expect(path).toBe(window.location.pathname);
+        chartsPath = `${path}?chart=${chart}`;
+        return chartsPath;
+      });
+
+      updateHistory.mockImplementation(({ url }) => {
+        expect(url).toBe(chartsPath);
+      });
+      const tabs = findGlTabs();
+
+      expect(tabs.attributes('value')).toBe('0');
+
+      tabs.vm.$emit('input', 1);
+
+      await wrapper.vm.$nextTick();
+
+      expect(tabs.attributes('value')).toBe('1');
+    });
+  });
+
+  describe('when provided with a query param', () => {
+    it.each`
+      chart            | tab
+      ${'deployments'} | ${'1'}
+      ${'pipelines'}   | ${'0'}
+      ${'fake'}        | ${'0'}
+      ${''}            | ${'0'}
+    `('shows the correct tab for URL parameter "$chart"', ({ chart, tab }) => {
+      setWindowLocation(`${TEST_HOST}/gitlab-org/gitlab-test/-/pipelines/charts?chart=${chart}`);
+      getParameterValues.mockImplementation((name) => {
+        expect(name).toBe('chart');
+        return chart ? [chart] : [];
+      });
+      createComponent({ provide: { shouldRenderDeploymentFrequencyCharts: true } });
+      expect(findGlTabs().attributes('value')).toBe(tab);
+    });
   });
 
   describe('when shouldRenderDeploymentFrequencyCharts is false', () => {