From 9426b35779d178ab2c86770f43f4cb70badf5341 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 20 Feb 2019 14:45:13 +0800
Subject: [PATCH 1/5] Render severity in modal with a badge

This improves visual consistency with the vulnerability list.
---
 .../vue_shared/security_reports/components/modal.vue      | 8 ++++++++
 .../vue_shared/security_reports/components/modal_spec.js  | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
index 11aa3d728eaf44..b1ac182d337581 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
+++ b/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"
diff --git a/ee/spec/javascripts/vue_shared/security_reports/components/modal_spec.js b/ee/spec/javascripts/vue_shared/security_reports/components/modal_spec.js
index 68819aa4669d2e..e6719a9f1b07a0 100644
--- a/ee/spec/javascripts/vue_shared/security_reports/components/modal_spec.js
+++ b/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');
+      });
     });
   });
 
-- 
GitLab


From b648fa6d7431bd5be32a990cbcd3093767043569 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 20 Feb 2019 15:06:30 +0800
Subject: [PATCH 2/5] Capitalise confidence value

This improves visual consistency with the vulnerability list.
---
 .../vue_shared/security_reports/components/modal.vue      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
index b1ac182d337581..eaeb8dd78fe9e6 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
@@ -190,7 +190,7 @@ export default {
               >
                 {{ field.value }}
               </safe-link>
-              <span v-else> {{ field.value }} </span>
+              <span v-else :class="`vulnerability-modal-value-${key}`"> {{ field.value }} </span>
             </template>
           </div>
         </div>
@@ -259,3 +259,9 @@ export default {
     </div>
   </modal>
 </template>
+
+<style scoped>
+.vulnerability-modal-value-confidence {
+  text-transform: capitalize;
+}
+</style>
-- 
GitLab


From b5c7693e677bb74590ef5307fffd24098be4d8a7 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 20 Feb 2019 16:17:48 +0800
Subject: [PATCH 3/5] Add changelog entry

---
 .../9117-use-severity-badge-in-vulnerability-modal.yml       | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 ee/changelogs/unreleased/9117-use-severity-badge-in-vulnerability-modal.yml

diff --git a/ee/changelogs/unreleased/9117-use-severity-badge-in-vulnerability-modal.yml b/ee/changelogs/unreleased/9117-use-severity-badge-in-vulnerability-modal.yml
new file mode 100644
index 00000000000000..1292280a66051f
--- /dev/null
+++ b/ee/changelogs/unreleased/9117-use-severity-badge-in-vulnerability-modal.yml
@@ -0,0 +1,5 @@
+---
+title: Improve visual consistency of values in vulnerability modal.
+merge_request: 9616
+author:
+type: other
-- 
GitLab


From 9c6b7f0930ec9917bb03f951394a1bdb0e6f8c86 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Thu, 21 Feb 2019 10:42:03 +0800
Subject: [PATCH 4/5] Use existing styles to capitalise confidence

While the original solution is extensible, should other keys need
styling, none do right now. YAGNI. Also, Vue styles are not the
preferred approach at the moment.
---
 .../vue_shared/security_reports/components/modal.vue      | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
index eaeb8dd78fe9e6..50077a18b69cec 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
@@ -190,7 +190,7 @@ export default {
               >
                 {{ field.value }}
               </safe-link>
-              <span v-else :class="`vulnerability-modal-value-${key}`"> {{ field.value }} </span>
+              <span v-else :class="{ 'text-capitalize': key === 'confidence' }"> {{ field.value }} </span>
             </template>
           </div>
         </div>
@@ -259,9 +259,3 @@ export default {
     </div>
   </modal>
 </template>
-
-<style scoped>
-.vulnerability-modal-value-confidence {
-  text-transform: capitalize;
-}
-</style>
-- 
GitLab


From fa074027f5fb941638f36416bdc33c619c7428ec Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Thu, 21 Feb 2019 15:32:57 +0800
Subject: [PATCH 5/5] Reformat to satisfy `prettier`

---
 .../vue_shared/security_reports/components/modal.vue          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
index 50077a18b69cec..137538384ce704 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
@@ -190,7 +190,9 @@ export default {
               >
                 {{ field.value }}
               </safe-link>
-              <span v-else :class="{ 'text-capitalize': key === 'confidence' }"> {{ field.value }} </span>
+              <span v-else :class="{ 'text-capitalize': key === 'confidence' }">
+                {{ field.value }}
+              </span>
             </template>
           </div>
         </div>
-- 
GitLab