Add latest changes from gitlab-org/gitlab@master

3 files changed, 48 insertions, 15 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
index e1745969649..df59962569e 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
@@ -34,7 +34,13 @@ export default {
     PipelineGraphWrapper,
     TestReports,
   },
-  inject: ['defaultTabValue', 'failedJobsCount', 'failedJobsSummary', 'totalJobCount'],
+  inject: [
+    'defaultTabValue',
+    'failedJobsCount',
+    'failedJobsSummary',
+    'totalJobCount',
+    'testsCount',
+  ],
   computed: {
     showFailedJobsTab() {
       return this.failedJobsCount > 0;
@@ -81,11 +87,11 @@ export default {
       </template>
       <failed-jobs-app :failed-jobs-summary="failedJobsSummary" />
     </gl-tab>
-    <gl-tab
-      :title="$options.i18n.tabs.testsTitle"
-      :active="isActive($options.tabNames.tests)"
-      data-testid="tests-tab"
-    >
+    <gl-tab :active="isActive($options.tabNames.tests)" data-testid="tests-tab" lazy>
+      <template #title>
+        <span class="gl-mr-2">{{ $options.i18n.tabs.testsTitle }}</span>
+        <gl-badge size="sm" data-testid="tests-counter">{{ testsCount }}</gl-badge>
+      </template>
       <test-reports />
     </gl-tab>
     <slot></slot>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
index 13e942e55d3..e5666f7a658 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_reports.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import createTestReportsStore from '../../stores/test_reports';
 import EmptyState from './empty_state.vue';
 import TestSuiteTable from './test_suite_table.vue';
@@ -16,6 +17,7 @@ export default {
     TestSummary,
     TestSummaryTable,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: ['blobPath', 'summaryEndpoint', 'suiteEndpoint'],
   computed: {
     ...mapState('testReports', ['isLoading', 'selectedSuiteIndex', 'testReports']),
@@ -29,14 +31,16 @@ export default {
     },
   },
   created() {
-    this.$store.registerModule(
-      'testReports',
-      createTestReportsStore({
-        blobPath: this.blobPath,
-        summaryEndpoint: this.summaryEndpoint,
-        suiteEndpoint: this.suiteEndpoint,
-      }),
-    );
+    if (!this.glFeatures.pipelineTabsVue) {
+      this.$store.registerModule(
+        'testReports',
+        createTestReportsStore({
+          blobPath: this.blobPath,
+          summaryEndpoint: this.summaryEndpoint,
+          suiteEndpoint: this.suiteEndpoint,
+        }),
+      );
+    }
 
     this.fetchSummary();
   },
diff --git a/app/assets/javascripts/pipelines/pipeline_tabs.js b/app/assets/javascripts/pipelines/pipeline_tabs.js
index 8f2fc9b189e..7051d356089 100644
--- a/app/assets/javascripts/pipelines/pipeline_tabs.js
+++ b/app/assets/javascripts/pipelines/pipeline_tabs.js
@@ -5,6 +5,7 @@ import PipelineTabs from 'ee_else_ce/pipelines/components/pipeline_tabs.vue';
 import { removeParams, updateHistory } from '~/lib/utils/url_utility';
 import { TAB_QUERY_PARAM } from '~/pipelines/constants';
 import { parseBoolean } from '~/lib/utils/common_utils';
+import createTestReportsStore from './stores/test_reports';
 import { getPipelineDefaultTab, reportToSentry } from './utils';
 
 Vue.use(VueApollo);
@@ -33,6 +34,13 @@ export const createAppOptions = (selector, apolloProvider) => {
     licenseManagementSettingsPath,
     licensesApiPath,
     canManageLicenses,
+    summaryEndpoint,
+    suiteEndpoint,
+    blobPath,
+    hasTestReport,
+    emptyStateImagePath,
+    artifactsExpiredImagePath,
+    testsCount,
   } = dataset;
 
   const defaultTabValue = getPipelineDefaultTab(window.location.href);
@@ -43,7 +51,15 @@ export const createAppOptions = (selector, apolloProvider) => {
       PipelineTabs,
     },
     apolloProvider,
-    store: new Vuex.Store(),
+    store: new Vuex.Store({
+      modules: {
+        testReports: createTestReportsStore({
+          blobPath,
+          summaryEndpoint,
+          suiteEndpoint,
+        }),
+      },
+    }),
     provide: {
       canGenerateCodequalityReports: parseBoolean(canGenerateCodequalityReports),
       codequalityReportDownloadPath,
@@ -62,6 +78,13 @@ export const createAppOptions = (selector, apolloProvider) => {
       licenseManagementSettingsPath,
       licensesApiPath,
       canManageLicenses: parseBoolean(canManageLicenses),
+      summaryEndpoint,
+      suiteEndpoint,
+      blobPath,
+      hasTestReport,
+      emptyStateImagePath,
+      artifactsExpiredImagePath,
+      testsCount,
     },
     errorCaptured(err, _vm, info) {
       reportToSentry('pipeline_tabs', `error: ${err}, info: ${info}`);