Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

15 files changed, 99 insertions, 56 deletions

diff --git a/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue b/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
index c272e3b1dc4..99cdeae545e 100644
--- a/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
+++ b/app/assets/javascripts/reports/accessibility_report/grouped_accessibility_reports_app.vue
@@ -46,6 +46,7 @@ export default {
     :loading-text="groupedSummaryText"
     :error-text="groupedSummaryText"
     :has-issues="shouldRenderIssuesList"
+    track-action="users_expanding_testing_accessibility_report"
     class="mr-widget-section grouped-security-reports mr-report"
   >
     <template #body>
diff --git a/app/assets/javascripts/reports/codequality_report/grouped_codequality_reports_app.vue b/app/assets/javascripts/reports/codequality_report/grouped_codequality_reports_app.vue
index 654508f0736..d293165ef2f 100644
--- a/app/assets/javascripts/reports/codequality_report/grouped_codequality_reports_app.vue
+++ b/app/assets/javascripts/reports/codequality_report/grouped_codequality_reports_app.vue
@@ -62,7 +62,7 @@ export default {
       helpPath: this.codequalityHelpPath,
     });
 
-    this.fetchReports(this.glFeatures.codequalityBackendComparison);
+    this.fetchReports();
   },
   methods: {
     ...mapActions(['fetchReports', 'setPaths']),
@@ -87,6 +87,7 @@ export default {
     :component="$options.componentNames.CodequalityIssueBody"
     :popover-options="codequalityPopover"
     :show-report-section-status-icon="false"
+    track-action="users_expanding_testing_code_quality_report"
     class="js-codequality-widget mr-widget-border-top mr-report"
   >
     <template v-if="hasError" #sub-heading>{{ statusReason }}</template>
diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue
index 585127f901e..ca369022938 100644
--- a/app/assets/javascripts/reports/components/grouped_issues_list.vue
+++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue
@@ -66,8 +66,8 @@ export default {
     },
     listClasses() {
       return {
-        'gl-pl-7': this.nestedLevel === 1,
-        'gl-pl-9': this.nestedLevel === 2,
+        'gl-pl-9': this.nestedLevel === 1,
+        'gl-pl-11-5': this.nestedLevel === 2,
       };
     },
   },
diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index ea3f0d78d8c..9df0a1953b6 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -88,8 +88,8 @@ export default {
     },
     listClasses() {
       return {
-        'gl-pl-7': this.nestedLevel === 1,
-        'gl-pl-8': this.nestedLevel === 2,
+        'gl-pl-9': this.nestedLevel === 1,
+        'gl-pl-11-5': this.nestedLevel === 2,
       };
     },
   },
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index ff58cd20ca1..12b5cb9f207 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -1,17 +1,22 @@
 <script>
+import { GlButton } from '@gitlab/ui';
+import api from '~/api';
 import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { status, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '../constants';
 import IssuesList from './issues_list.vue';
 
 export default {
   name: 'ReportSection',
   components: {
+    GlButton,
     IssuesList,
-    StatusIcon,
     Popover,
+    StatusIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     alwaysOpen: {
       type: Boolean,
@@ -96,6 +101,11 @@ export default {
       required: false,
       default: false,
     },
+    trackAction: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
 
   data() {
@@ -162,6 +172,10 @@ export default {
   },
   methods: {
     toggleCollapsed() {
+      if (this.trackAction && this.glFeatures.usersExpandingWidgetsUsageData) {
+        api.trackRedisHllUserEvent(this.trackAction);
+      }
+
       if (this.shouldEmitToggleEvent) {
         this.$emit('toggleEvent');
       }
@@ -186,16 +200,15 @@ export default {
 
         <slot name="action-buttons" :is-collapsible="isCollapsible"></slot>
 
-        <button
+        <gl-button
           v-if="isCollapsible"
-          type="button"
+          class="js-collapse-btn"
           data-testid="report-section-expand-button"
-          class="js-collapse-btn btn float-right btn-sm align-self-center"
           data-qa-selector="expand_report_button"
           @click="toggleCollapsed"
         >
           {{ collapseText }}
-        </button>
+        </gl-button>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index 8eb43bcf1ba..6b7d81c4878 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -51,7 +51,7 @@ export default {
       if (!this.nestedSummary) {
         return ['gl-px-5'];
       }
-      return ['gl-pl-7', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
+      return ['gl-pl-9', 'gl-pr-5', { 'gl-bg-gray-10': this.statusIcon === ICON_WARNING }];
     },
     statusIconSize() {
       if (!this.nestedSummary) {
diff --git a/app/assets/javascripts/reports/constants.js b/app/assets/javascripts/reports/constants.js
index 9250bfd7678..acd90ebf1b1 100644
--- a/app/assets/javascripts/reports/constants.js
+++ b/app/assets/javascripts/reports/constants.js
@@ -1,5 +1,5 @@
 export const fieldTypes = {
-  codeBock: 'codeBlock',
+  codeBlock: 'codeBlock',
   link: 'link',
   seconds: 'seconds',
   text: 'text',
diff --git a/app/assets/javascripts/reports/grouped_test_report/components/modal.vue b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue
index b0310fd003e..af93e5bc639 100644
--- a/app/assets/javascripts/reports/grouped_test_report/components/modal.vue
+++ b/app/assets/javascripts/reports/grouped_test_report/components/modal.vue
@@ -25,6 +25,14 @@ export default {
       required: true,
     },
   },
+  computed: {
+    filteredModalData() {
+      // Filter out the properties that don't have a value
+      return Object.fromEntries(
+        Object.entries(this.modalData).filter((data) => Boolean(data[1].value)),
+      );
+    },
+  },
   fieldTypes,
 };
 </script>
@@ -36,23 +44,18 @@ export default {
     :hide-footer="true"
     @hide="$emit('hide')"
   >
-    <div
-      v-for="(field, key, index) in modalData"
-      v-if="field.value"
-      :key="index"
-      class="row gl-mt-3 gl-mb-3"
-    >
+    <div v-for="(field, key, index) in filteredModalData" :key="index" class="row gl-mt-3 gl-mb-3">
       <strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
 
       <div class="col-sm-9 text-secondary">
-        <code-block v-if="field.type === $options.fieldTypes.codeBock" :code="field.value" />
+        <code-block v-if="field.type === $options.fieldTypes.codeBlock" :code="field.value" />
 
         <gl-link
           v-else-if="field.type === $options.fieldTypes.link"
-          :href="field.value"
+          :href="field.value.path"
           target="_blank"
         >
-          {{ field.value }}
+          {{ field.value.text }}
         </gl-link>
 
         <gl-sprintf
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
index 522245a442d..8913046d62f 100644
--- 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
@@ -24,7 +24,7 @@ export default {
         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?.count,
         ),
         this.issue.recent_failures,
       );
@@ -44,20 +44,20 @@ export default {
 <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 })"
     >
+      <gl-badge
+        v-if="showRecentFailures"
+        variant="warning"
+        class="gl-mr-2"
+        data-testid="test-issue-body-recent-failures"
+      >
+        {{ recentFailureMessage }}
+      </gl-badge>
       {{ issue.name }}
     </gl-button>
   </div>
diff --git a/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue
index b863e55ae94..82806793401 100644
--- a/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/grouped_test_report/grouped_test_reports_app.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
-import { once } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
+import api from '~/api';
 import { sprintf, s__ } from '~/locale';
-import Tracking from '~/tracking';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import GroupedIssuesList from '../components/grouped_issues_list.vue';
 import { componentNames } from '../components/issue_body';
 import ReportSection from '../components/report_section.vue';
@@ -28,7 +28,7 @@ export default {
     GlButton,
     GlIcon,
   },
-  mixins: [Tracking.mixin()],
+  mixins: [glFeatureFlagsMixin()],
   props: {
     endpoint: {
       type: String,
@@ -39,6 +39,10 @@ export default {
       required: false,
       default: '',
     },
+    headBlobPath: {
+      type: String,
+      required: true,
+    },
   },
   componentNames,
   computed: {
@@ -66,19 +70,22 @@ export default {
     showViewFullReport() {
       return this.pipelinePath.length;
     },
-    handleToggleEvent() {
-      return once(() => {
-        this.track(this.$options.expandEvent);
-      });
-    },
   },
   created() {
-    this.setEndpoint(this.endpoint);
+    this.setPaths({
+      endpoint: this.endpoint,
+      headBlobPath: this.headBlobPath,
+    });
 
     this.fetchReports();
   },
   methods: {
-    ...mapActions(['setEndpoint', 'fetchReports', 'closeModal']),
+    ...mapActions(['setPaths', 'fetchReports', 'closeModal']),
+    handleToggleEvent() {
+      if (this.glFeatures.usageDataITestingSummaryWidgetTotal) {
+        api.trackRedisHllUserEvent(this.$options.expandEvent);
+      }
+    },
     reportText(report) {
       const { name, summary } = report || {};
 
@@ -123,7 +130,7 @@ export default {
       return report.resolved_failures.concat(report.resolved_errors);
     },
   },
-  expandEvent: 'expand_test_report_widget',
+  expandEvent: 'i_testing_summary_widget_total',
 };
 </script>
 <template>
@@ -135,7 +142,7 @@ export default {
     :has-issues="reports.length > 0"
     :should-emit-toggle-event="true"
     class="mr-widget-section grouped-security-reports mr-report"
-    @toggleEvent="handleToggleEvent"
+    @toggleEvent.once="handleToggleEvent"
   >
     <template v-if="showViewFullReport" #action-buttons>
       <gl-button
diff --git a/app/assets/javascripts/reports/grouped_test_report/store/actions.js b/app/assets/javascripts/reports/grouped_test_report/store/actions.js
index ebc8c735b03..e3db57ad846 100644
--- a/app/assets/javascripts/reports/grouped_test_report/store/actions.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/actions.js
@@ -4,7 +4,7 @@ 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);
+export const setPaths = ({ commit }, paths) => commit(types.SET_PATHS, paths);
 
 export const requestReports = ({ commit }) => commit(types.REQUEST_REPORTS);
 
diff --git a/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js
index 337085f9bf0..ff839c564b6 100644
--- a/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/mutation_types.js
@@ -1,4 +1,4 @@
-export const SET_ENDPOINT = 'SET_ENDPOINT';
+export const SET_PATHS = 'SET_PATHS';
 
 export const REQUEST_REPORTS = 'REQUEST_REPORTS';
 export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
diff --git a/app/assets/javascripts/reports/grouped_test_report/store/mutations.js b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js
index 3bb31d71d8f..2b88776815b 100644
--- a/app/assets/javascripts/reports/grouped_test_report/store/mutations.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/mutations.js
@@ -1,9 +1,10 @@
 import * as types from './mutation_types';
-import { countRecentlyFailedTests } from './utils';
+import { countRecentlyFailedTests, formatFilePath } from './utils';
 
 export default {
-  [types.SET_ENDPOINT](state, endpoint) {
+  [types.SET_PATHS](state, { endpoint, headBlobPath }) {
     state.endpoint = endpoint;
+    state.headBlobPath = headBlobPath;
   },
   [types.REQUEST_REPORTS](state) {
     state.isLoading = true;
@@ -42,17 +43,25 @@ export default {
     state.status = null;
   },
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
-    state.modal.title = payload.issue.name;
+    const { issue } = payload;
+    state.modal.title = issue.name;
 
-    Object.keys(payload.issue).forEach((key) => {
+    Object.keys(issue).forEach((key) => {
       if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
         state.modal.data[key] = {
           ...state.modal.data[key],
-          value: payload.issue[key],
+          value: issue[key],
         };
       }
     });
 
+    if (issue.file) {
+      state.modal.data.filename.value = {
+        text: issue.file,
+        path: `${state.headBlobPath}/${formatFilePath(issue.file)}`,
+      };
+    }
+
     state.modal.open = true;
   },
   [types.RESET_ISSUE_MODAL_DATA](state) {
diff --git a/app/assets/javascripts/reports/grouped_test_report/store/state.js b/app/assets/javascripts/reports/grouped_test_report/store/state.js
index dd55c7abab4..46909bde337 100644
--- a/app/assets/javascripts/reports/grouped_test_report/store/state.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/state.js
@@ -41,16 +41,16 @@ export default () => ({
     open: false,
 
     data: {
-      class: {
-        value: null,
-        text: s__('Reports|Class'),
-        type: fieldTypes.link,
-      },
       classname: {
         value: null,
         text: s__('Reports|Classname'),
         type: fieldTypes.text,
       },
+      filename: {
+        value: null,
+        text: s__('Reports|Filename'),
+        type: fieldTypes.link,
+      },
       execution_time: {
         value: null,
         text: s__('Reports|Execution time'),
@@ -59,12 +59,12 @@ export default () => ({
       failure: {
         value: null,
         text: s__('Reports|Failure'),
-        type: fieldTypes.codeBock,
+        type: fieldTypes.codeBlock,
       },
       system_output: {
         value: null,
         text: s__('Reports|System output'),
-        type: fieldTypes.codeBock,
+        type: fieldTypes.codeBlock,
       },
     },
   },
diff --git a/app/assets/javascripts/reports/grouped_test_report/store/utils.js b/app/assets/javascripts/reports/grouped_test_report/store/utils.js
index 189b87bfa8d..df5dd73b66c 100644
--- a/app/assets/javascripts/reports/grouped_test_report/store/utils.js
+++ b/app/assets/javascripts/reports/grouped_test_report/store/utils.js
@@ -100,3 +100,12 @@ export const statusIcon = (status) => {
 
   return ICON_NOTFOUND;
 };
+
+/**
+ * Removes `./` from the beginning of a file path so it can be appended onto a blob path
+ * @param {String} file
+ * @returns {String}  - formatted value
+ */
+export const formatFilePath = (file) => {
+  return file.replace(/^\.?\/*/, '');
+};