From e112129f3d21579a2d7fac3f01077504a1d9fa9e Mon Sep 17 00:00:00 2001
From: Andrew Fontaine <afontaine@gitlab.com>
Date: Tue, 26 Jan 2021 07:56:11 +0000
Subject: [PATCH] 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.
---
.../pipelines/charts/components/app.vue | 14 +++++-
...dd-url-navigation-pipeline-charts-tabs.yml | 5 ++
.../pipelines/charts/components/app_spec.js | 48 +++++++++++++++++++
3 files changed, 66 insertions(+), 1 deletion(-)
create mode 100644 ee/changelogs/unreleased/add-url-navigation-pipeline-charts-tabs.yml
diff --git a/app/assets/javascripts/projects/pipelines/charts/components/app.vue b/app/assets/javascripts/projects/pipelines/charts/components/app.vue
index 7bb62cf4a731d..61b899896bc75 100644
--- a/app/assets/javascripts/projects/pipelines/charts/components/app.vue
+++ b/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"
diff --git a/ee/changelogs/unreleased/add-url-navigation-pipeline-charts-tabs.yml b/ee/changelogs/unreleased/add-url-navigation-pipeline-charts-tabs.yml
new file mode 100644
index 0000000000000..26e4cc71a090a
--- /dev/null
+++ b/ee/changelogs/unreleased/add-url-navigation-pipeline-charts-tabs.yml
@@ -0,0 +1,5 @@
+---
+title: Add URL Navigation to Pipeline Analytics Charts
+merge_request: 52338
+author:
+type: added
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 44329944097eb..07eb8198edb21 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/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', () => {
--
GitLab