Add latest changes from gitlab-org/gitlab@master

2 files changed, 13 insertions, 7 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
index 66d30c10362..7cd3d9e2304 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTabs, GlTab } from '@gitlab/ui';
+import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { failedJobsTabName, jobsTabName, needsTabName, testReportTabName } from '../constants';
 import PipelineGraphWrapper from './graph/graph_component_wrapper.vue';
@@ -25,6 +25,7 @@ export default {
   },
   components: {
     Dag,
+    GlBadge,
     GlTab,
     GlTabs,
     JobsApp,
@@ -32,7 +33,7 @@ export default {
     PipelineGraphWrapper,
     TestReports,
   },
-  inject: ['defaultTabValue'],
+  inject: ['defaultTabValue', 'totalJobCount'],
   methods: {
     isActive(tabName) {
       return tabName === this.defaultTabValue;
@@ -54,17 +55,18 @@ export default {
     >
       <dag />
     </gl-tab>
-    <gl-tab
-      :title="$options.i18n.tabs.jobsTitle"
-      :active="isActive($options.tabNames.jobs)"
-      data-testid="jobs-tab"
-    >
+    <gl-tab :active="isActive($options.tabNames.jobs)" data-testid="jobs-tab" lazy>
+      <template #title>
+        <span class="gl-mr-2">{{ $options.i18n.tabs.jobsTitle }}</span>
+        <gl-badge size="sm" data-testid="builds-counter">{{ totalJobCount }}</gl-badge>
+      </template>
       <jobs-app />
     </gl-tab>
     <gl-tab
       :title="$options.i18n.tabs.failedJobsTitle"
       :active="isActive($options.tabNames.failures)"
       data-testid="failed-jobs-tab"
+      lazy
     >
       <failed-jobs-app />
     </gl-tab>
diff --git a/app/assets/javascripts/pipelines/pipeline_tabs.js b/app/assets/javascripts/pipelines/pipeline_tabs.js
index 530917f0402..3bf23d9d001 100644
--- a/app/assets/javascripts/pipelines/pipeline_tabs.js
+++ b/app/assets/javascripts/pipelines/pipeline_tabs.js
@@ -20,9 +20,11 @@ const createPipelineTabs = (selector, apolloProvider) => {
     downloadablePathForReportType,
     exposeSecurityDashboard,
     exposeLicenseScanningData,
+    fullPath,
     graphqlResourceEtag,
     pipelineIid,
     pipelineProjectPath,
+    totalJobCount,
   } = dataset;
 
   const defaultTabValue = getPipelineDefaultTab(window.location.href);
@@ -47,9 +49,11 @@ const createPipelineTabs = (selector, apolloProvider) => {
       downloadablePathForReportType,
       exposeSecurityDashboard: parseBoolean(exposeSecurityDashboard),
       exposeLicenseScanningData: parseBoolean(exposeLicenseScanningData),
+      fullPath,
       graphqlResourceEtag,
       pipelineIid,
       pipelineProjectPath,
+      totalJobCount,
     },
     errorCaptured(err, _vm, info) {
       reportToSentry('pipeline_tabs', `error: ${err}, info: ${info}`);