Add latest changes from gitlab-org/gitlab@13-10-stable-eev13.10.0-rc40

16 files changed, 162 insertions, 99 deletions

diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue
index 4d3c5f48e94..585127f901e 100644
--- a/app/assets/javascripts/reports/components/grouped_issues_list.vue
+++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue
@@ -14,6 +14,12 @@ export default {
       required: false,
       default: '',
     },
+    nestedLevel: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: (value) => [0, 1, 2].includes(value),
+    },
     resolvedIssues: {
       type: Array,
       required: false,
@@ -58,6 +64,12 @@ export default {
 
       return groupsCount + issuesCount;
     },
+    listClasses() {
+      return {
+        'gl-pl-7': this.nestedLevel === 1,
+        'gl-pl-9': this.nestedLevel === 2,
+      };
+    },
   },
 };
 </script>
@@ -67,6 +79,7 @@ export default {
     :length="listLength"
     :remain="$options.maxShownReportItems"
     :size="$options.typicalReportItemHeight"
+    :class="listClasses"
     class="report-block-container"
     wtag="ul"
     wclass="report-block-list"
diff --git a/app/assets/javascripts/reports/components/issue_body.js b/app/assets/javascripts/reports/components/issue_body.js
index a0349506b69..56f46a3938e 100644
--- a/app/assets/javascripts/reports/components/issue_body.js
+++ b/app/assets/javascripts/reports/components/issue_body.js
@@ -1,6 +1,6 @@
 import AccessibilityIssueBody from '../accessibility_report/components/accessibility_issue_body.vue';
 import CodequalityIssueBody from '../codequality_report/components/codequality_issue_body.vue';
-import TestIssueBody from './test_issue_body.vue';
+import TestIssueBody from '../grouped_test_report/components/test_issue_body.vue';
 
 export const components = {
   AccessibilityIssueBody,
diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index 16d5b14d3e9..ea3f0d78d8c 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -67,6 +67,12 @@ export default {
       required: false,
       default: null,
     },
+    nestedLevel: {
+      type: Number,
+      required: false,
+      default: 0,
+      validator: (value) => [0, 1, 2].includes(value),
+    },
   },
   computed: {
     issuesWithState() {
@@ -80,6 +86,12 @@ export default {
     wclass() {
       return `report-block-list ${this.issuesUlElementClass}`;
     },
+    listClasses() {
+      return {
+        'gl-pl-7': this.nestedLevel === 1,
+        'gl-pl-8': this.nestedLevel === 2,
+      };
+    },
   },
 };
 </script>
@@ -89,6 +101,7 @@ export default {
     :remain="$options.maxShownReportItems"
     :size="$options.typicalReportItemHeight"
     class="report-block-container"
+    :class="listClasses"
     wtag="ul"
     :wclass="wclass"
   >
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 9d0631fbc01..ff58cd20ca1 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -184,13 +184,14 @@ export default {
           <slot name="sub-heading"></slot>
         </div>
 
-        <slot name="action-buttons"></slot>
+        <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
         <button
           v-if="isCollapsible"
           type="button"
           data-testid="report-section-expand-button"
-          class="js-collapse-btn btn float-right btn-sm align-self-center qa-expand-report-button"
+          class="js-collapse-btn btn float-right btn-sm align-self-center"
+          data-qa-selector="expand_report_button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 3232c0edf96..8eb43bcf1ba 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -2,6 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import { ICON_WARNING } from '../constants';
 
 /**
  * Renders the summary row for each report
@@ -19,6 +20,11 @@ export default {
     GlLoadingIcon,
   },
   props: {
+    nestedSummary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     summary: {
       type: String,
       required: false,
@@ -41,24 +47,36 @@ export default {
         icon: `status_${this.statusIcon}`,
       };
     },
+    rowClasses() {
+      if (!this.nestedSummary) {
+        return ['gl-px-5'];
+      }
+      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
+    },
+    statusIconSize() {
+      if (!this.nestedSummary) {
+        return 24;
+      }
+      return 16;
+    },
   },
 };
 </script>
 <template>
-  <div class="report-block-list-issue report-block-list-issue-parent align-items-center">
-    <div class="report-block-list-icon gl-mr-3">
+  <div
+    class="gl-border-t-solid gl-border-t-gray-100 gl-border-t-1 gl-py-3 gl-display-flex gl-align-items-center"
+    :class="rowClasses"
+  >
+    <div class="gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"
         size="md"
       />
-      <ci-icon v-else :status="iconStatus" :size="24" />
+      <ci-icon v-else :status="iconStatus" :size="statusIconSize" data-testid="summary-row-icon" />
     </div>
     <div class="report-block-list-issue-description">
-      <div
-        class="report-block-list-issue-description-text"
-        data-testid="test-summary-row-description"
-      >
+      <div class="report-block-list-issue-description-text" data-testid="summary-row-description">
         <slot name="summary">{{ summary }}</slot
         ><span v-if="popoverOptions" class="text-nowrap"
           >&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
deleted file mode 100644
index 7508e1d1f0d..00000000000
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-import { GlBadge, GlSprintf } from '@gitlab/ui';
-import { mapActions } from 'vuex';
-
-export default {
-  name: 'TestIssueBody',
-  components: {
-    GlBadge,
-    GlSprintf,
-  },
-  props: {
-    issue: {
-      type: Object,
-      required: true,
-    },
-    // failed || success
-    status: {
-      type: String,
-      required: true,
-    },
-    isNew: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    showRecentFailures() {
-      return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch;
-    },
-  },
-  methods: {
-    ...mapActions(['openModal']),
-  },
-};
-</script>
-<template>
-  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
-    <div class="report-block-list-issue-description-text" data-testid="test-issue-body-description">
-      <button
-        type="button"
-        class="btn-link btn-blank text-left break-link vulnerability-name-button"
-        @click="openModal({ issue })"
-      >
-        <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">
-          <gl-sprintf
-            :message="
-              n__(
-                'Reports|Failed %{count} time in %{base_branch} in the last 14 days',
-                'Reports|Failed %{count} times in %{base_branch} in the last 14 days',
-                issue.recent_failures.count,
-              )
-            "
-          >
-            <template #count>{{ issue.recent_failures.count }}</template>
-            <template #base_branch>{{ issue.recent_failures.base_branch }}</template>
-          </gl-sprintf>
-        </gl-badge>
-        {{ issue.name }}
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue
index 6243bddf941..b0310fd003e 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue
@@ -2,7 +2,7 @@
 import { GlModal, GlLink, GlSprintf } from '@gitlab/ui';
 
 import CodeBlock from '~/vue_shared/components/code_block.vue';
-import { fieldTypes } from '../constants';
+import { fieldTypes } from '../../constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue b/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue
new file mode 100644
index 00000000000..522245a442d
--- /dev/null
+++ b/app/assets/javascripts/reports/grouped_test_report/components/test_issue_body.vue
@@ -0,0 +1,64 @@
+<script>
+import { GlBadge, GlButton } from '@gitlab/ui';
+import { mapActions } from 'vuex';
+import { sprintf, n__ } from '~/locale';
+import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
+import { STATUS_NEUTRAL } from '../../constants';
+
+export default {
+  name: 'TestIssueBody',
+  components: {
+    GlBadge,
+    GlButton,
+    IssueStatusIcon,
+  },
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    recentFailureMessage() {
+      return sprintf(
+        n__(
+          'Reports|Failed %{count} time in %{base_branch} in the last 14 days',
+          'Reports|Failed %{count} times in %{base_branch} in the last 14 days',
+          this.issue.recent_failures.count,
+        ),
+        this.issue.recent_failures,
+      );
+    },
+    showRecentFailures() {
+      return this.issue.recent_failures?.count && this.issue.recent_failures?.base_branch;
+    },
+    status() {
+      return this.issue.status || STATUS_NEUTRAL;
+    },
+  },
+  methods: {
+    ...mapActions(['openModal']),
+  },
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-mt-2 gl-mb-2">
+    <issue-status-icon :status="status" :status-icon-size="24" class="gl-mr-3" />
+    <gl-badge
+      v-if="showRecentFailures"
+      variant="warning"
+      class="gl-mr-2"
+      data-testid="test-issue-body-recent-failures"
+    >
+      {{ recentFailureMessage }}
+    </gl-badge>
+    <gl-button
+      button-text-classes="gl-white-space-normal! gl-word-break-all gl-text-left"
+      variant="link"
+      data-testid="test-issue-body-description"
+      @click="openModal({ issue })"
+    >
+      {{ issue.name }}
+    </gl-button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue
index 033b8798473..b863e55ae94 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue
@@ -1,21 +1,21 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { once } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import Tracking from '~/tracking';
-import createStore from '../store';
+import GroupedIssuesList from '../components/grouped_issues_list.vue';
+import { componentNames } from '../components/issue_body';
+import ReportSection from '../components/report_section.vue';
+import SummaryRow from '../components/summary_row.vue';
+import Modal from './components/modal.vue';
+import createStore from './store';
 import {
   summaryTextBuilder,
   reportTextBuilder,
   statusIcon,
   recentFailuresTextBuilder,
-} from '../store/utils';
-import { componentNames } from './issue_body';
-import IssuesList from './issues_list.vue';
-import Modal from './modal.vue';
-import ReportSection from './report_section.vue';
-import SummaryRow from './summary_row.vue';
+} from './store/utils';
 
 export default {
   name: 'GroupedTestReportsApp',
@@ -23,9 +23,10 @@ export default {
   components: {
     ReportSection,
     SummaryRow,
-    IssuesList,
+    GroupedIssuesList,
     Modal,
     GlButton,
+    GlIcon,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -86,7 +87,7 @@ export default {
       }
 
       if (!report.name) {
-        return s__('Reports|An error occured while loading report');
+        return s__('Reports|An error occurred while loading report');
       }
 
       return reportTextBuilder(name, summary);
@@ -111,10 +112,12 @@ export default {
       );
     },
     unresolvedIssues(report) {
-      return report.existing_failures.concat(report.existing_errors);
-    },
-    newIssues(report) {
-      return report.new_failures.concat(report.new_errors);
+      return [
+        ...report.new_failures,
+        ...report.new_errors,
+        ...report.existing_failures,
+        ...report.existing_errors,
+      ];
     },
     resolvedIssues(report) {
       return report.resolved_failures.concat(report.resolved_errors);
@@ -151,24 +154,39 @@ export default {
     <template #body>
       <div class="mr-widget-grouped-section report-block">
         <template v-for="(report, i) in reports">
-          <summary-row :key="`summary-row-${i}`" :status-icon="getReportIcon(report)">
+          <summary-row
+            :key="`summary-row-${i}`"
+            :status-icon="getReportIcon(report)"
+            nested-summary
+          >
             <template #summary>
               <div class="gl-display-inline-flex gl-flex-direction-column">
                 <div>{{ reportText(report) }}</div>
+                <div v-if="report.suite_errors">
+                  <div v-if="report.suite_errors.head">
+                    <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" />
+                    {{ s__('Reports|Head report parsing error:') }}
+                    {{ report.suite_errors.head }}
+                  </div>
+                  <div v-if="report.suite_errors.base">
+                    <gl-icon name="warning" class="gl-mx-2 gl-text-orange-500" />
+                    {{ s__('Reports|Base report parsing error:') }}
+                    {{ report.suite_errors.base }}
+                  </div>
+                </div>
                 <div v-if="hasRecentFailures(report.summary)">
                   {{ recentFailuresText(report.summary) }}
                 </div>
               </div>
             </template>
           </summary-row>
-          <issues-list
+          <grouped-issues-list
             v-if="shouldRenderIssuesList(report)"
             :key="`issues-list-${i}`"
             :unresolved-issues="unresolvedIssues(report)"
-            :new-issues="newIssues(report)"
             :resolved-issues="resolvedIssues(report)"
             :component="$options.componentNames.TestIssueBody"
-            class="report-block-group-list"
+            :nested-level="2"
           />
         </template>
         <modal
diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/grouped_test_report/store/actions.js
index c9b8ee64930..ebc8c735b03 100644
--- a/app/assets/javascripts/reports/store/actions.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/actions.js
@@ -1,7 +1,7 @@
 import Visibility from 'visibilityjs';
-import axios from '../../lib/utils/axios_utils';
-import httpStatusCodes from '../../lib/utils/http_status';
-import Poll from '../../lib/utils/poll';
+import axios from '../../../lib/utils/axios_utils';
+import httpStatusCodes from '../../../lib/utils/http_status';
+import Poll from '../../../lib/utils/poll';
 import * as types from './mutation_types';
 
 export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);
diff --git a/app/assets/javascripts/reports/store/getters.js b/app/assets/javascripts/reports/grouped_test_report/store/getters.js
index cc8c4cc446c..e7d1675f74a 100644
--- a/app/assets/javascripts/reports/store/getters.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/getters.js
@@ -1,4 +1,4 @@
-import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../constants';
+import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants';
 
 export const summaryStatus = (state) => {
   if (state.isLoading) {
diff --git a/app/assets/javascripts/reports/store/index.js b/app/assets/javascripts/reports/grouped_test_report/store/index.js
index a2edfa94a48..a2edfa94a48 100644
--- a/app/assets/javascripts/reports/store/index.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/index.js
diff --git a/app/assets/javascripts/reports/store/mutation_types.js b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js
index 337085f9bf0..337085f9bf0 100644
--- a/app/assets/javascripts/reports/store/mutation_types.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js
index 3bb31d71d8f..3bb31d71d8f 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js
diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/grouped_test_report/store/state.js
index e8a0db2e1a8..dd55c7abab4 100644
--- a/app/assets/javascripts/reports/store/state.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/state.js
@@ -1,5 +1,5 @@
 import { s__ } from '~/locale';
-import { fieldTypes } from '../constants';
+import { fieldTypes } from '../../constants';
 
 export default () => ({
   endpoint: null,
diff --git a/app/assets/javascripts/reports/store/utils.js b/app/assets/javascripts/reports/grouped_test_report/store/utils.js
index d89833032a0..189b87bfa8d 100644
--- a/app/assets/javascripts/reports/store/utils.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/utils.js
@@ -5,7 +5,7 @@ import {
   ICON_WARNING,
   ICON_SUCCESS,
   ICON_NOTFOUND,
-} from '../constants';
+} from '../../constants';
 
 const textBuilder = (results) => {
   const { failed, errored, resolved, total } = results;