Render severity in modal with a badge

This improves visual consistency with the vulnerability list.

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

@@ -6,6 +6,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import ExpandButton from '~/vue_shared/components/expand_button.vue';
 import SafeLink from 'ee/vue_shared/components/safe_link.vue';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
+import SeverityBadge from './severity_badge.vue';
 
 export default {
   components: {
@@ -15,6 +16,7 @@ export default {
     LoadingButton,
     ExpandButton,
     Icon,
+    SeverityBadge,
   },
   props: {
     modal: {
@@ -93,6 +95,9 @@ export default {
     hasLinks(field, key) {
       return key === 'links' && this.hasValue(field);
     },
+    hasSeverity(field, key) {
+      return key === 'severity' && this.hasValue(field);
+    },
   },
 };
 </script>
@@ -173,6 +178,9 @@ export default {
                 <span v-if="isLastValue(i, field.value)">,&nbsp;</span>
               </span>
             </template>
+            <template v-else-if="hasSeverity(field, key)">
+              <severity-badge :severity="field.value" class="d-inline" />
+            </template>
             <template v-else>
               <safe-link
                 v-if="field.isLink"
@@ -182,7 +190,9 @@ export default {
               >
                 {{ field.value }}
               </safe-link>
-              <span v-else> {{ field.value }} </span>
+              <span v-else :class="{ 'text-capitalize': key === 'confidence' }">
+                {{ field.value }}
+              </span>
             </template>
           </div>
         </div>

ee/changelogs/unreleased/9117-use-severity-badge-in-vulnerability-modal.yml

+---
+title: Improve visual consistency of values in vulnerability modal.
+merge_request: 9616
+author:
+type: other

ee/spec/javascripts/vue_shared/security_reports/components/modal_spec.js

@@ -149,6 +149,7 @@ describe('Security Reports modal', () => {
         props.modal.title = 'Arbitrary file existence disclosure in Action Pack';
         props.modal.data.file.value = 'Gemfile.lock';
         props.modal.data.file.url = `${TEST_HOST}/path/Gemfile.lock`;
+        props.modal.data.severity = { value: 'critical' };
         vm = mountComponent(Component, props);
       });
 
@@ -167,6 +168,12 @@ describe('Security Reports modal', () => {
           vm.$el.querySelector('.js-link-vulnerabilityFeedbackHelpPath').getAttribute('href'),
         ).toEqual('feedbacksHelpPath');
       });
+
+      it('renders severity with a badge', () => {
+        const badge = vm.$el.querySelector('.severity-badge');
+
+        expect(badge.textContent).toContain('critical');
+      });
     });
   });