Code quality badges

Adding badges to the code quality for severity

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>

app/assets/javascripts/reports/codequality_report/constants.js

+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',
+};

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>

changelogs/unreleased/2529-code-quality-severity-rating.yml

+---
+title: Show code quality severity rating in the merge request details page
+merge_request: 46829
+author:
+type: changed

ee/spec/frontend/vue_mr_widget/mock_data.js

@@ -123,6 +123,7 @@ export const codequalityParsedIssues = [
     path: 'Gemfile.lock',
     line: 12,
     urlPath: 'foo/Gemfile.lock',
+    severity: 'minor',
   },
 ];
 

ee/spec/frontend/vue_shared/components/reports/report_issues_spec.js

@@ -37,7 +37,7 @@ describe('Report issues', () => {
       it('should render "Fixed" keyword', () => {
         expect(vm.$el.textContent).toContain('Fixed');
         expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
-          'Fixed: Insecure Dependency in Gemfile.lock:12',
+          'Fixed: Minor - Insecure Dependency in Gemfile.lock:12',
         );
       });
     });

ee/spec/frontend/vue_shared/components/reports/report_item_spec.js

@@ -37,7 +37,7 @@ describe('Report issue', () => {
       it('should render "Fixed" keyword', () => {
         expect(vm.$el.textContent).toContain('Fixed');
         expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual(
-          'Fixed: Insecure Dependency in Gemfile.lock:12',
+          'Fixed: Minor - Insecure Dependency in Gemfile.lock:12',
         );
       });
     });

locale/gitlab.pot

@@ -32636,6 +32636,9 @@ msgstr ""
 msgid "security Reports|There was an error creating the merge request"
 msgstr ""
 
+msgid "severity|Blocker"
+msgstr ""
+
 msgid "severity|Critical"
 msgstr ""
 
@@ -32648,9 +32651,15 @@ msgstr ""
 msgid "severity|Low"
 msgstr ""
 
+msgid "severity|Major"
+msgstr ""
+
 msgid "severity|Medium"
 msgstr ""
 
+msgid "severity|Minor"
+msgstr ""
+
 msgid "severity|None"
 msgstr ""
 

spec/frontend/reports/codequality_report/components/codequality_issue_body_spec.js

+import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import component from '~/reports/codequality_report/components/codequality_issue_body.vue';
 import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants';
 
 describe('code quality issue body issue body', () => {
   let wrapper;
 
+  const findSeverityIcon = () => wrapper.findByTestId('codequality-severity-icon');
+  const findGlIcon = () => wrapper.find(GlIcon);
+
   const codequalityIssue = {
     name:
       'rubygem-rest-client: session fixation vulnerability via Set-Cookie headers in 30x redirection responses',
@@ -14,13 +19,15 @@ describe('code quality issue body issue body', () => {
     urlPath: '/Gemfile.lock#L22',
   };
 
-  const mountWithStatus = initialStatus => {
-    wrapper = shallowMount(component, {
-      propsData: {
-        issue: codequalityIssue,
-        status: initialStatus,
-      },
-    });
+  const createComponent = (initialStatus, issue = codequalityIssue) => {
+    wrapper = extendedWrapper(
+      shallowMount(component, {
+        propsData: {
+          issue,
+          status: initialStatus,
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -28,17 +35,43 @@ describe('code quality issue body issue body', () => {
     wrapper = null;
   });
 
+  describe('severity rating', () => {
+    it.each`
+      severity      | iconClass               | iconName
+      ${'info'}     | ${'text-primary-400'}   | ${'severity-info'}
+      ${'minor'}    | ${'text-warning-200'}   | ${'severity-low'}
+      ${'major'}    | ${'text-warning-400'}   | ${'severity-medium'}
+      ${'critical'} | ${'text-danger-600'}    | ${'severity-high'}
+      ${'blocker'}  | ${'text-danger-800'}    | ${'severity-critical'}
+      ${'unknown'}  | ${'text-secondary-400'} | ${'severity-unknown'}
+      ${'invalid'}  | ${'text-secondary-400'} | ${'severity-unknown'}
+    `(
+      'renders correct icon for "$severity" severity rating',
+      ({ severity, iconClass, iconName }) => {
+        createComponent(STATUS_FAILED, {
+          ...codequalityIssue,
+          severity,
+        });
+        const icon = findGlIcon();
+
+        expect(findSeverityIcon().classes()).toContain(iconClass);
+        expect(icon.exists()).toBe(true);
+        expect(icon.props('name')).toBe(iconName);
+      },
+    );
+  });
+
   describe('with success', () => {
     it('renders fixed label', () => {
-      mountWithStatus(STATUS_SUCCESS);
+      createComponent(STATUS_SUCCESS);
 
       expect(wrapper.text()).toContain('Fixed');
     });
   });
 
   describe('without success', () => {
-    it('renders fixed label', () => {
-      mountWithStatus(STATUS_FAILED);
+    it('does not render fixed label', () => {
+      createComponent(STATUS_FAILED);
 
       expect(wrapper.text()).not.toContain('Fixed');
     });
@@ -46,7 +79,7 @@ describe('code quality issue body issue body', () => {
 
   describe('name', () => {
     it('renders name', () => {
-      mountWithStatus(STATUS_NEUTRAL);
+      createComponent(STATUS_NEUTRAL);
 
       expect(wrapper.text()).toContain(codequalityIssue.name);
     });
@@ -54,7 +87,7 @@ describe('code quality issue body issue body', () => {
 
   describe('path', () => {
     it('renders the report-link path using the correct code quality issue', () => {
-      mountWithStatus(STATUS_NEUTRAL);
+      createComponent(STATUS_NEUTRAL);
 
       expect(wrapper.find('report-link-stub').props('issue')).toBe(codequalityIssue);
     });