Add latest changes from gitlab-org/gitlab@master

3 files changed, 55 insertions, 7 deletions

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 0c758ee2b5c..d0a5615bb57 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
@@ -3,15 +3,21 @@
  * Renders Code quality body text
  * Fixed: [name] in [link]:[line]
  */
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 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 {
   name: 'CodequalityIssueBody',
-
   components: {
+    GlIcon,
     ReportLink,
   },
+  directives: {
+    tooltip: GlTooltipDirective,
+  },
   props: {
     status: {
       type: String,
@@ -23,20 +29,44 @@ export default {
     },
   },
   computed: {
+    issueName() {
+      return `${this.severityLabel} - ${this.issue.name}`;
+    },
     isStatusSuccess() {
       return this.status === STATUS_SUCCESS;
     },
+    severityClass() {
+      return SEVERITY_CLASSES[this.issue.severity] || SEVERITY_CLASSES.unknown;
+    },
+    severityIcon() {
+      return SEVERITY_ICONS[this.issue.severity] || SEVERITY_ICONS.unknown;
+    },
+    severityLabel() {
+      return this.$options.severityText[this.issue.severity] || this.$options.severityText.unknown;
+    },
+  },
+  severityText: {
+    info: s__('severity|Info'),
+    minor: s__('severity|Minor'),
+    major: s__('severity|Major'),
+    critical: s__('severity|Critical'),
+    blocker: s__('severity|Blocker'),
+    unknown: s__('severity|Unknown'),
   },
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
-    <div class="report-block-list-issue-description-text">
-      <template v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</template>
+  <div class="gl-display-flex gl-mt-2 gl-mb-2 gl-w-full">
+    <span :class="severityClass" class="gl-mr-5" data-testid="codequality-severity-icon">
+      <gl-icon v-tooltip="severityLabel" :name="severityIcon" :size="12" />
+    </span>
+    <div class="gl-flex-fill-1">
+      <div>
+        <strong v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</strong>
+        {{ issueName }}
+      </div>
 
-      {{ issue.name }}
+      <report-link v-if="issue.path" :issue="issue" />
     </div>
-
-    <report-link v-if="issue.path" :issue="issue" />
   </div>
 </template>
diff --git a/app/assets/javascripts/reports/codequality_report/constants.js b/app/assets/javascripts/reports/codequality_report/constants.js
new file mode 100644
index 00000000000..502977e714c
--- /dev/null
+++ b/app/assets/javascripts/reports/codequality_report/constants.js
@@ -0,0 +1,17 @@
+export const SEVERITY_CLASSES = {
+  info: 'text-primary-400',
+  minor: 'text-warning-200',
+  major: 'text-warning-400',
+  critical: 'text-danger-600',
+  blocker: 'text-danger-800',
+  unknown: 'text-secondary-400',
+};
+
+export const SEVERITY_ICONS = {
+  info: 'severity-info',
+  minor: 'severity-low',
+  major: 'severity-medium',
+  critical: 'severity-high',
+  blocker: 'severity-critical',
+  unknown: 'severity-unknown',
+};
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 f3d5b1a80f8..5c8f31d7da0 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
@@ -78,6 +78,7 @@ export default {
     :has-issues="hasCodequalityIssues"
     :component="$options.componentNames.CodequalityIssueBody"
     :popover-options="codequalityPopover"
+    :show-report-section-status-icon="false"
     class="js-codequality-widget mr-widget-border-top mr-report"
   />
 </template>