Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

16 files changed, 58 insertions, 30 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 6f8ddd01df8..c272e3b1dc4 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
@@ -1,8 +1,8 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import { componentNames } from '~/reports/components/issue_body';
-import ReportSection from '~/reports/components/report_section.vue';
 import IssuesList from '~/reports/components/issues_list.vue';
+import ReportSection from '~/reports/components/report_section.vue';
 import createStore from './store';
 
 export default {
diff --git a/app/assets/javascripts/reports/accessibility_report/store/actions.js b/app/assets/javascripts/reports/accessibility_report/store/actions.js
index bb502020a06..e0142a35291 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/actions.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/actions.js
@@ -1,7 +1,7 @@
 import Visibility from 'visibilityjs';
-import Poll from '~/lib/utils/poll';
-import httpStatusCodes from '~/lib/utils/http_status';
 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';
 
 let eTagPoll;
diff --git a/app/assets/javascripts/reports/accessibility_report/store/getters.js b/app/assets/javascripts/reports/accessibility_report/store/getters.js
index 8f8eec11c7f..20506b1bfd1 100644
--- a/app/assets/javascripts/reports/accessibility_report/store/getters.js
+++ b/app/assets/javascripts/reports/accessibility_report/store/getters.js
@@ -1,5 +1,5 @@
-import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants';
 import { s__, n__ } from '~/locale';
+import { LOADING, ERROR, SUCCESS, STATUS_FAILED } from '../../constants';
 
 export const groupedSummaryText = (state) => {
   if (state.isLoading) {
diff --git a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
index d0a5615bb57..e5980f1e539 100644
--- a/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
+++ b/app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue
@@ -4,9 +4,9 @@
  * Fixed: [name] in [link]:[line]
  */
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import ReportLink from '~/reports/components/report_link.vue';
 import { STATUS_SUCCESS } from '~/reports/constants';
-import { s__ } from '~/locale';
 import { SEVERITY_CLASSES, SEVERITY_ICONS } from '../constants';
 
 export default {
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 5c8f31d7da0..654508f0736 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
@@ -1,8 +1,9 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { componentNames } from '~/reports/components/issue_body';
 import { s__, sprintf } from '~/locale';
+import { componentNames } from '~/reports/components/issue_body';
 import ReportSection from '~/reports/components/report_section.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import createStore from './store';
 
 export default {
@@ -11,6 +12,7 @@ export default {
   components: {
     ReportSection,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     headPath: {
       type: String,
@@ -30,6 +32,11 @@ export default {
       required: false,
       default: null,
     },
+    codequalityReportsPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     codequalityHelpPath: {
       type: String,
       required: true,
@@ -37,7 +44,7 @@ export default {
   },
   componentNames,
   computed: {
-    ...mapState(['newIssues', 'resolvedIssues']),
+    ...mapState(['newIssues', 'resolvedIssues', 'hasError', 'statusReason']),
     ...mapGetters([
       'hasCodequalityIssues',
       'codequalityStatus',
@@ -51,10 +58,11 @@ export default {
       headPath: this.headPath,
       baseBlobPath: this.baseBlobPath,
       headBlobPath: this.headBlobPath,
+      reportsPath: this.codequalityReportsPath,
       helpPath: this.codequalityHelpPath,
     });
 
-    this.fetchReports();
+    this.fetchReports(this.glFeatures.codequalityBackendComparison);
   },
   methods: {
     ...mapActions(['fetchReports', 'setPaths']),
@@ -80,5 +88,7 @@ export default {
     :popover-options="codequalityPopover"
     :show-report-section-status-icon="false"
     class="js-codequality-widget mr-widget-border-top mr-report"
-  />
+  >
+    <template v-if="hasError" #sub-heading>{{ statusReason }}</template>
+  </report-section>
 </template>
diff --git a/app/assets/javascripts/reports/codequality_report/store/actions.js b/app/assets/javascripts/reports/codequality_report/store/actions.js
index e5fb5caca2e..ddd1747899f 100644
--- a/app/assets/javascripts/reports/codequality_report/store/actions.js
+++ b/app/assets/javascripts/reports/codequality_report/store/actions.js
@@ -4,9 +4,20 @@ import { parseCodeclimateMetrics, doCodeClimateComparison } from './utils/codequ
 
 export const setPaths = ({ commit }, paths) => commit(types.SET_PATHS, paths);
 
-export const fetchReports = ({ state, dispatch, commit }) => {
+export const fetchReports = ({ state, dispatch, commit }, diffFeatureFlagEnabled) => {
   commit(types.REQUEST_REPORTS);
 
+  if (diffFeatureFlagEnabled) {
+    return axios
+      .get(state.reportsPath)
+      .then(({ data }) => {
+        return dispatch('receiveReportsSuccess', {
+          newIssues: parseCodeclimateMetrics(data.new_errors, state.headBlobPath),
+          resolvedIssues: parseCodeclimateMetrics(data.resolved_errors, state.baseBlobPath),
+        });
+      })
+      .catch((error) => dispatch('receiveReportsError', error));
+  }
   if (!state.basePath) {
     return dispatch('receiveReportsError');
   }
@@ -18,13 +29,13 @@ export const fetchReports = ({ state, dispatch, commit }) => {
       ),
     )
     .then((data) => dispatch('receiveReportsSuccess', data))
-    .catch(() => dispatch('receiveReportsError'));
+    .catch((error) => dispatch('receiveReportsError', error));
 };
 
 export const receiveReportsSuccess = ({ commit }, data) => {
   commit(types.RECEIVE_REPORTS_SUCCESS, data);
 };
 
-export const receiveReportsError = ({ commit }) => {
-  commit(types.RECEIVE_REPORTS_ERROR);
+export const receiveReportsError = ({ commit }, error) => {
+  commit(types.RECEIVE_REPORTS_ERROR, error);
 };
diff --git a/app/assets/javascripts/reports/codequality_report/store/getters.js b/app/assets/javascripts/reports/codequality_report/store/getters.js
index e017bab976c..c6935291af2 100644
--- a/app/assets/javascripts/reports/codequality_report/store/getters.js
+++ b/app/assets/javascripts/reports/codequality_report/store/getters.js
@@ -1,6 +1,6 @@
-import { LOADING, ERROR, SUCCESS } from '../../constants';
-import { sprintf, __, s__, n__ } from '~/locale';
 import { spriteIcon } from '~/lib/utils/common_utils';
+import { sprintf, __, s__, n__ } from '~/locale';
+import { LOADING, ERROR, SUCCESS } from '../../constants';
 
 export const hasCodequalityIssues = (state) =>
   Boolean(state.newIssues?.length || state.resolvedIssues?.length);
diff --git a/app/assets/javascripts/reports/codequality_report/store/mutations.js b/app/assets/javascripts/reports/codequality_report/store/mutations.js
index 7ef4f3ce2db..095e6637966 100644
--- a/app/assets/javascripts/reports/codequality_report/store/mutations.js
+++ b/app/assets/javascripts/reports/codequality_report/store/mutations.js
@@ -6,6 +6,7 @@ export default {
     state.headPath = paths.headPath;
     state.baseBlobPath = paths.baseBlobPath;
     state.headBlobPath = paths.headBlobPath;
+    state.reportsPath = paths.reportsPath;
     state.helpPath = paths.helpPath;
   },
   [types.REQUEST_REPORTS](state) {
@@ -13,12 +14,14 @@ export default {
   },
   [types.RECEIVE_REPORTS_SUCCESS](state, data) {
     state.hasError = false;
+    state.statusReason = '';
     state.isLoading = false;
     state.newIssues = data.newIssues;
     state.resolvedIssues = data.resolvedIssues;
   },
-  [types.RECEIVE_REPORTS_ERROR](state) {
+  [types.RECEIVE_REPORTS_ERROR](state, error) {
     state.isLoading = false;
     state.hasError = true;
+    state.statusReason = error?.response?.data?.status_reason;
   },
 };
diff --git a/app/assets/javascripts/reports/codequality_report/store/state.js b/app/assets/javascripts/reports/codequality_report/store/state.js
index 38ab53b432e..b39ff4f9d66 100644
--- a/app/assets/javascripts/reports/codequality_report/store/state.js
+++ b/app/assets/javascripts/reports/codequality_report/store/state.js
@@ -1,12 +1,14 @@
 export default () => ({
   basePath: null,
   headPath: null,
+  reportsPath: null,
 
   baseBlobPath: null,
   headBlobPath: null,
 
   isLoading: false,
   hasError: false,
+  statusReason: '',
 
   newIssues: [],
   resolvedIssues: [],
diff --git a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
index fd775f52f7d..b252c8c9817 100644
--- a/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
+++ b/app/assets/javascripts/reports/codequality_report/store/utils/codequality_comparison.js
@@ -3,8 +3,10 @@ import CodeQualityComparisonWorker from '../../workers/codequality_comparison_wo
 export const parseCodeclimateMetrics = (issues = [], path = '') => {
   return issues.map((issue) => {
     const parsedIssue = {
-      ...issue,
       name: issue.description,
+      path: issue.file_path,
+      urlPath: `${path}/${issue.file_path}#L${issue.line}`,
+      ...issue,
     };
 
     if (issue?.location?.path) {
diff --git a/app/assets/javascripts/reports/components/grouped_issues_list.vue b/app/assets/javascripts/reports/components/grouped_issues_list.vue
index 1826fbaddac..4d3c5f48e94 100644
--- a/app/assets/javascripts/reports/components/grouped_issues_list.vue
+++ b/app/assets/javascripts/reports/components/grouped_issues_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { s__ } from '~/locale';
-import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 import ReportItem from '~/reports/components/report_item.vue';
+import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 export default {
   components: {
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 bf1868d427e..033b8798473 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -1,21 +1,21 @@
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
-import { once } from 'lodash';
 import { GlButton } from '@gitlab/ui';
+import { once } from 'lodash';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import { sprintf, s__ } from '~/locale';
-import { componentNames } from './issue_body';
-import ReportSection from './report_section.vue';
-import SummaryRow from './summary_row.vue';
-import IssuesList from './issues_list.vue';
-import Modal from './modal.vue';
-import createStore from '../store';
 import Tracking from '~/tracking';
+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';
 
 export default {
   name: 'GroupedTestReportsApp',
diff --git a/app/assets/javascripts/reports/components/issue_body.js b/app/assets/javascripts/reports/components/issue_body.js
index 1e6dc4f8b78..a0349506b69 100644
--- a/app/assets/javascripts/reports/components/issue_body.js
+++ b/app/assets/javascripts/reports/components/issue_body.js
@@ -1,6 +1,6 @@
-import TestIssueBody from './test_issue_body.vue';
 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';
 
 export const components = {
   AccessibilityIssueBody,
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 0e9975ea81f..9d0631fbc01 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -2,8 +2,8 @@
 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 IssuesList from './issues_list.vue';
 import { status, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '../constants';
+import IssuesList from './issues_list.vue';
 
 export default {
   name: 'ReportSection',
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index ad980b334bb..7508e1d1f0d 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapActions } from 'vuex';
 import { GlBadge, GlSprintf } from '@gitlab/ui';
+import { mapActions } from 'vuex';
 
 export default {
   name: 'TestIssueBody',
diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/store/actions.js
index 301fdce7989..c9b8ee64930 100644
--- a/app/assets/javascripts/reports/store/actions.js
+++ b/app/assets/javascripts/reports/store/actions.js
@@ -1,8 +1,8 @@
 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 * as types from './mutation_types';
-import httpStatusCodes from '../../lib/utils/http_status';
 
 export const setEndpoint = ({ commit }, endpoint) => commit(types.SET_ENDPOINT, endpoint);