Add latest changes from gitlab-org/gitlab@master

4 files changed, 98 insertions, 7 deletions

diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index 29378aebdd2..d977ec37126 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -11,7 +11,12 @@ import Modal from './modal.vue';
 import createStore from '../store';
 import Tracking from '~/tracking';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
+import {
+  summaryTextBuilder,
+  reportTextBuilder,
+  statusIcon,
+  recentFailuresTextBuilder,
+} from '../store/utils';
 
 export default {
   name: 'GroupedTestReportsApp',
@@ -86,6 +91,12 @@ export default {
 
       return reportTextBuilder(name, summary);
     },
+    hasRecentFailures(summary) {
+      return this.glFeatures.testFailureHistory && summary?.recentlyFailed > 0;
+    },
+    recentFailuresText(summary) {
+      return recentFailuresTextBuilder(summary);
+    },
     getReportIcon(report) {
       return statusIcon(report.status);
     },
@@ -134,14 +145,22 @@ export default {
         {{ s__('ciReport|View full report') }}
       </gl-button>
     </template>
+    <template v-if="hasRecentFailures(summary)" #subHeading>
+      {{ recentFailuresText(summary) }}
+    </template>
     <template #body>
       <div class="mr-widget-grouped-section report-block">
         <template v-for="(report, i) in reports">
-          <summary-row
-            :key="`summary-row-${i}`"
-            :summary="reportText(report)"
-            :status-icon="getReportIcon(report)"
-          />
+          <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)">
+            <template #summary>
+              <div class="gl-display-inline-flex gl-flex-direction-column">
+                <div>{{ reportText(report) }}</div>
+                <div v-if="hasRecentFailures(report.summary)">
+                  {{ recentFailuresText(report.summary) }}
+                </div>
+              </div>
+            </template>
+          </summary-row>
           <issues-list
             v-if="shouldRenderIssuesList(report)"
             :key="`issues-list-${i}`"
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index 4e0631740d8..5e9a5b03543 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -1,8 +1,15 @@
 <script>
 import { mapActions } from 'vuex';
+import { GlBadge } from '@gitlab/ui';
+import { n__ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'TestIssueBody',
+  components: {
+    GlBadge,
+  },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     issue: {
       type: Object,
@@ -19,8 +26,20 @@ export default {
       default: false,
     },
   },
+  computed: {
+    showRecentFailures() {
+      return this.glFeatures.testFailureHistory && this.issue.recent_failures;
+    },
+  },
   methods: {
     ...mapActions(['openModal']),
+    recentFailuresText(count) {
+      return n__(
+        'Failed %d time in the last 14 days',
+        'Failed %d times in the last 14 days',
+        count,
+      );
+    },
   },
 };
 </script>
@@ -32,7 +51,10 @@ export default {
         class="btn-link btn-blank text-left break-link vulnerability-name-button"
         @click="openModal({ issue })"
       >
-        <div v-if="isNew" class="badge badge-danger gl-mr-2">{{ s__('New') }}</div>
+        <gl-badge v-if="isNew" variant="danger" class="gl-mr-2">{{ s__('New') }}</gl-badge>
+        <gl-badge v-if="showRecentFailures" variant="warning" class="gl-mr-2">
+          {{ recentFailuresText(issue.recent_failures) }}
+        </gl-badge>
         {{ issue.name }}
       </button>
     </div>
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
index 35ab72bf694..acaa98754b0 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -1,4 +1,5 @@
 import * as types from './mutation_types';
+import { countRecentlyFailedTests } from './utils';
 
 export default {
   [types.SET_ENDPOINT](state, endpoint) {
@@ -16,9 +17,15 @@ export default {
     state.summary.resolved = response.summary.resolved;
     state.summary.failed = response.summary.failed;
     state.summary.errored = response.summary.errored;
+    state.summary.recentlyFailed = countRecentlyFailedTests(response.suites);
 
     state.status = response.status;
     state.reports = response.suites;
+
+    state.reports.forEach((report, i) => {
+      if (!state.reports[i].summary) return;
+      state.reports[i].summary.recentlyFailed = countRecentlyFailedTests(report);
+    });
   },
   [types.RECEIVE_REPORTS_ERROR](state) {
     state.isLoading = false;
@@ -30,6 +37,7 @@ export default {
       resolved: 0,
       failed: 0,
       errored: 0,
+      recentlyFailed: 0,
     };
     state.status = null;
   },
diff --git a/app/assets/javascripts/reports/store/utils.js b/app/assets/javascripts/reports/store/utils.js
index 5d3d9ddda3b..fd6f4933cfa 100644
--- a/app/assets/javascripts/reports/store/utils.js
+++ b/app/assets/javascripts/reports/store/utils.js
@@ -48,6 +48,48 @@ export const reportTextBuilder = (name = '', results = {}) => {
   return sprintf(__('%{name} found %{resultsString}'), { name, resultsString });
 };
 
+export const recentFailuresTextBuilder = (summary = {}) => {
+  const { failed, recentlyFailed } = summary;
+  if (!failed || !recentlyFailed) return '';
+
+  if (failed < 2) {
+    return sprintf(
+      s__(
+        'Reports|%{recentlyFailed} out of %{failed} failed test has failed more than once in the last 14 days',
+      ),
+      { recentlyFailed, failed },
+    );
+  }
+  return sprintf(
+    n__(
+      s__(
+        'Reports|%{recentlyFailed} out of %{failed} failed tests has failed more than once in the last 14 days',
+      ),
+      s__(
+        'Reports|%{recentlyFailed} out of %{failed} failed tests have failed more than once in the last 14 days',
+      ),
+      recentlyFailed,
+    ),
+    { recentlyFailed, failed },
+  );
+};
+
+export const countRecentlyFailedTests = subject => {
+  // handle either a single report or an array of reports
+  const reports = !subject.length ? [subject] : subject;
+
+  return reports
+    .map(report => {
+      return (
+        [report.new_failures, report.existing_failures, report.resolved_failures]
+          // only count tests which have failed more than once
+          .map(failureArray => failureArray.filter(failure => failure.recent_failures > 1).length)
+          .reduce((total, count) => total + count, 0)
+      );
+    })
+    .reduce((total, count) => total + count, 0);
+};
+
 export const statusIcon = status => {
   if (status === STATUS_FAILED) {
     return ICON_WARNING;