Add latest changes from gitlab-org/gitlab@master

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;
+};