Add latest changes from gitlab-org/gitlab@master

4 files changed, 142 insertions, 11 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index 1621b6831a2..7435f578852 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -82,17 +82,8 @@ export default {
 
       return this.mr.shouldBeRebased;
     },
-    sourceBranchProtected() {
-      if (this.glFeatures.mergeRequestWidgetGraphql) {
-        return this.stateData.sourceBranchProtected;
-      }
-
-      return this.mr.sourceBranchProtected;
-    },
     showResolveButton() {
-      return (
-        this.mr.conflictResolutionPath && this.canPushToSourceBranch && !this.sourceBranchProtected
-      );
+      return this.mr.conflictResolutionPath && this.canPushToSourceBranch;
     },
   },
 };
diff --git a/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js b/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js
new file mode 100644
index 00000000000..d32db50874c
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/extensions/code_quality/index.js
@@ -0,0 +1,123 @@
+import { n__, s__, sprintf } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import { EXTENSION_ICONS } from '~/vue_merge_request_widget/constants';
+import { SEVERITY_ICONS_EXTENSION } from '~/reports/codequality_report/constants';
+import { parseCodeclimateMetrics } from '~/reports/codequality_report/store/utils/codequality_parser';
+import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+
+export default {
+  name: 'WidgetCodeQuality',
+  props: ['codeQuality', 'blobPath'],
+  i18n: {
+    label: s__('ciReport|Code Quality'),
+    loading: s__('ciReport|Code Quality test metrics results are being parsed'),
+    error: s__('ciReport|Code Quality failed loading results'),
+  },
+  expandEvent: 'i_testing_code_quality_widget_total',
+  computed: {
+    summary() {
+      const { newErrors, resolvedErrors, errorSummary } = this.collapsedData;
+      if (errorSummary.errored >= 1 && errorSummary.resolved >= 1) {
+        const improvements = sprintf(
+          n__(
+            '%{strongOpen}%{errors}%{strongClose} point',
+            '%{strongOpen}%{errors}%{strongClose} points',
+            resolvedErrors.length,
+          ),
+          {
+            errors: resolvedErrors.length,
+            strongOpen: '<strong>',
+            strongClose: '</strong>',
+          },
+          false,
+        );
+
+        const degradations = sprintf(
+          n__(
+            '%{strongOpen}%{errors}%{strongClose} point',
+            '%{strongOpen}%{errors}%{strongClose} points',
+            newErrors.length,
+          ),
+          { errors: newErrors.length, strongOpen: '<strong>', strongClose: '</strong>' },
+          false,
+        );
+        return sprintf(
+          s__(`ciReport|Code Quality improved on ${improvements} and degraded on ${degradations}.`),
+        );
+      } else if (errorSummary.resolved >= 1) {
+        const improvements = n__('%d point', '%d points', resolvedErrors.length);
+        return sprintf(s__(`ciReport|Code Quality improved on ${improvements}.`));
+      } else if (errorSummary.errored >= 1) {
+        const degradations = n__('%d point', '%d points', newErrors.length);
+        return sprintf(s__(`ciReport|Code Quality degraded on ${degradations}.`));
+      }
+      return s__(`ciReport|No changes to Code Quality.`);
+    },
+    statusIcon() {
+      if (this.collapsedData.errorSummary?.errored >= 1) {
+        return EXTENSION_ICONS.warning;
+      }
+      return EXTENSION_ICONS.success;
+    },
+  },
+  methods: {
+    fetchCollapsedData() {
+      return Promise.all([this.fetchReport(this.codeQuality)]).then((values) => {
+        return {
+          resolvedErrors: parseCodeclimateMetrics(
+            values[0].resolved_errors,
+            this.blobPath.head_path,
+          ),
+          newErrors: parseCodeclimateMetrics(values[0].new_errors, this.blobPath.head_path),
+          existingErrors: parseCodeclimateMetrics(
+            values[0].existing_errors,
+            this.blobPath.head_path,
+          ),
+          errorSummary: values[0].summary,
+        };
+      });
+    },
+    fetchFullData() {
+      const fullData = [];
+
+      this.collapsedData.newErrors.map((e) => {
+        return fullData.push({
+          text: `${capitalizeFirstCharacter(e.severity)} - ${e.description}`,
+          subtext: sprintf(
+            s__(`ciReport|in %{open_link}${e.file_path}:${e.line}%{close_link}`),
+            {
+              open_link: `<a class="gl-text-decoration-underline" href="${e.urlPath}">`,
+              close_link: '</a>',
+            },
+            false,
+          ),
+          icon: {
+            name: SEVERITY_ICONS_EXTENSION[e.severity],
+          },
+        });
+      });
+
+      this.collapsedData.resolvedErrors.map((e) => {
+        return fullData.push({
+          text: `${capitalizeFirstCharacter(e.severity)} - ${e.description}`,
+          subtext: sprintf(
+            s__(`ciReport|in %{open_link}${e.file_path}:${e.line}%{close_link}`),
+            {
+              open_link: `<a class="gl-text-decoration-underline" href="${e.urlPath}">`,
+              close_link: '</a>',
+            },
+            false,
+          ),
+          icon: {
+            name: SEVERITY_ICONS_EXTENSION[e.severity],
+          },
+        });
+      });
+
+      return Promise.resolve(fullData);
+    },
+    fetchReport(endpoint) {
+      return axios.get(endpoint).then((res) => res.data);
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index cd4d9398899..965746e79fb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -46,6 +46,7 @@ import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variab
 import getStateQuery from './queries/get_state.query.graphql';
 import terraformExtension from './extensions/terraform';
 import accessibilityExtension from './extensions/accessibility';
+import codeQualityExtension from './extensions/code_quality';
 
 export default {
   // False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/25
@@ -241,6 +242,11 @@ export default {
         this.registerTerraformPlans();
       }
     },
+    shouldRenderCodeQuality(newVal) {
+      if (newVal) {
+        this.registerCodeQualityExtension();
+      }
+    },
     shouldShowAccessibilityReport(newVal) {
       if (newVal) {
         this.registerAccessibilityExtension();
@@ -491,6 +497,11 @@ export default {
         registerExtension(accessibilityExtension);
       }
     },
+    registerCodeQualityExtension() {
+      if (this.shouldRenderCodeQuality && this.shouldShowExtension) {
+        registerExtension(codeQualityExtension);
+      }
+    },
   },
 };
 </script>
@@ -546,7 +557,7 @@ export default {
       </div>
       <extensions-container :mr="mr" />
       <grouped-codequality-reports-app
-        v-if="shouldRenderCodeQuality"
+        v-if="shouldRenderCodeQuality && !shouldShowExtension"
         :head-blob-path="mr.headBlobPath"
         :base-blob-path="mr.baseBlobPath"
         :codequality-reports-path="mr.codequalityReportsPath"
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 994e0c23b44..eb07609d5d6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -32,9 +32,15 @@ export default class MergeRequestStore {
     this.setPaths(data);
 
     this.setData(data);
+    this.initCodeQualityReport(data);
     this.setGitpodData(data);
   }
 
+  initCodeQualityReport(data) {
+    this.blobPath = data.blob_path;
+    this.codeQuality = data.codequality_reports_path;
+  }
+
   setData(data, isRebased) {
     this.initApprovals();