diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-27 21:10:15 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-27 21:10:15 +0300 |
commit | 6093748e9e59122c7dab8855b1113a71e6182822 (patch) | |
tree | 2a8d26cabc1f7fc091544d8a9510ccec41ca6dcf /app/assets/javascripts/pipelines | |
parent | 6d82b3a0c58f427e90bb8665cd13931128753a23 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipelines')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_tabs.vue | 40 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/constants.js | 22 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/pipeline_tabs.js | 14 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/utils.js | 19 |
4 files changed, 87 insertions, 8 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue index 62c785d7ad2..66d30c10362 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue @@ -1,6 +1,7 @@ <script> import { GlTabs, GlTab } from '@gitlab/ui'; import { __ } from '~/locale'; +import { failedJobsTabName, jobsTabName, needsTabName, testReportTabName } from '../constants'; import PipelineGraphWrapper from './graph/graph_component_wrapper.vue'; import Dag from './dag/dag.vue'; import JobsApp from './jobs/jobs_app.vue'; @@ -16,6 +17,12 @@ export default { testsTitle: __('Tests'), }, }, + tabNames: { + needs: needsTabName, + jobs: jobsTabName, + failures: failedJobsTabName, + tests: testReportTabName, + }, components: { Dag, GlTab, @@ -25,24 +32,47 @@ export default { PipelineGraphWrapper, TestReports, }, + inject: ['defaultTabValue'], + methods: { + isActive(tabName) { + return tabName === this.defaultTabValue; + }, + }, }; </script> <template> <gl-tabs> - <gl-tab :title="$options.i18n.tabs.pipelineTitle" data-testid="pipeline-tab"> + <gl-tab ref="pipelineTab" :title="$options.i18n.tabs.pipelineTitle" data-testid="pipeline-tab"> <pipeline-graph-wrapper /> </gl-tab> - <gl-tab :title="$options.i18n.tabs.needsTitle" data-testid="dag-tab"> + <gl-tab + ref="dagTab" + :title="$options.i18n.tabs.needsTitle" + :active="isActive($options.tabNames.needs)" + data-testid="dag-tab" + > <dag /> </gl-tab> - <gl-tab :title="$options.i18n.tabs.jobsTitle" data-testid="jobs-tab"> + <gl-tab + :title="$options.i18n.tabs.jobsTitle" + :active="isActive($options.tabNames.jobs)" + data-testid="jobs-tab" + > <jobs-app /> </gl-tab> - <gl-tab :title="$options.i18n.tabs.failedJobsTitle" data-testid="failed-jobs-tab"> + <gl-tab + :title="$options.i18n.tabs.failedJobsTitle" + :active="isActive($options.tabNames.failures)" + data-testid="failed-jobs-tab" + > <failed-jobs-app /> </gl-tab> - <gl-tab :title="$options.i18n.tabs.testsTitle" data-testid="tests-tab"> + <gl-tab + :title="$options.i18n.tabs.testsTitle" + :active="isActive($options.tabNames.tests)" + data-testid="tests-tab" + > <test-reports /> </gl-tab> <slot></slot> diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js index 9325911d749..8da6bf6d4c4 100644 --- a/app/assets/javascripts/pipelines/constants.js +++ b/app/assets/javascripts/pipelines/constants.js @@ -45,6 +45,28 @@ export const UNSUPPORTED_DATA = 'unsupported_data'; export const CHILD_VIEW = 'child'; +// Pipeline tabs + +export const TAB_QUERY_PARAM = 'tab'; + +export const needsTabName = 'dag'; +export const jobsTabName = 'builds'; +export const failedJobsTabName = 'failures'; +export const testReportTabName = 'test_report'; +export const securityTabName = 'security'; +export const licensesTabName = 'licenses'; +export const codeQualityTabName = 'codequality_report'; + +export const validPipelineTabNames = [ + needsTabName, + jobsTabName, + failedJobsTabName, + testReportTabName, + securityTabName, + licensesTabName, + codeQualityTabName, +]; + // Constants for the ID and IID selection dropdown export const PipelineKeyOptions = [ { diff --git a/app/assets/javascripts/pipelines/pipeline_tabs.js b/app/assets/javascripts/pipelines/pipeline_tabs.js index ff88c6215e5..a56ac9d86ab 100644 --- a/app/assets/javascripts/pipelines/pipeline_tabs.js +++ b/app/assets/javascripts/pipelines/pipeline_tabs.js @@ -1,7 +1,9 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import PipelineTabs from 'ee_else_ce/pipelines/components/pipeline_tabs.vue'; -import { reportToSentry } from './utils'; +import { removeParams, updateHistory } from '~/lib/utils/url_utility'; +import { TAB_QUERY_PARAM } from '~/pipelines/constants'; +import { getPipelineDefaultTab, reportToSentry } from './utils'; Vue.use(VueApollo); @@ -18,6 +20,15 @@ const createPipelineTabs = (selector, apolloProvider) => { exposeSecurityDashboard, exposeLicenseScanningData, } = dataset; + + const defaultTabValue = getPipelineDefaultTab(window.location.href); + + updateHistory({ + url: removeParams([TAB_QUERY_PARAM]), + title: document.title, + replace: true, + }); + // eslint-disable-next-line no-new new Vue({ el: selector, @@ -28,6 +39,7 @@ const createPipelineTabs = (selector, apolloProvider) => { provide: { canGenerateCodequalityReports: JSON.parse(canGenerateCodequalityReports), codequalityReportDownloadPath, + defaultTabValue, downloadablePathForReportType, exposeSecurityDashboard: JSON.parse(exposeSecurityDashboard), exposeLicenseScanningData: JSON.parse(exposeLicenseScanningData), diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js index f6e1c8b7412..588d15495ab 100644 --- a/app/assets/javascripts/pipelines/utils.js +++ b/app/assets/javascripts/pipelines/utils.js @@ -1,7 +1,12 @@ import * as Sentry from '@sentry/browser'; import { pickBy } from 'lodash'; -import { SUPPORTED_FILTER_PARAMETERS, NEEDS_PROPERTY } from './constants'; - +import { getParameterValues } from '~/lib/utils/url_utility'; +import { + NEEDS_PROPERTY, + SUPPORTED_FILTER_PARAMETERS, + TAB_QUERY_PARAM, + validPipelineTabNames, +} from './constants'; /* The following functions are the main engine in transforming the data as received from the endpoint into the format the d3 graph expects. @@ -138,3 +143,13 @@ export const reportMessageToSentry = (component, message, context) => { Sentry.captureMessage(message); }); }; + +export const getPipelineDefaultTab = (url) => { + const [tabQueryValue] = getParameterValues(TAB_QUERY_PARAM, url); + + if (tabQueryValue && validPipelineTabNames.includes(tabQueryValue)) { + return tabQueryValue; + } + + return null; +}; |