Commit e112129f authored by Andrew Fontaine's avatar Andrew Fontaine Committed by Brandon Labuschagne

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.
parent f433772f
......@@ -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"
......
---
title: Add URL Navigation to Pipeline Analytics Charts
merge_request: 52338
author:
type: added
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment