Merge branch '218485-update-vulnerability-page-styling' into 'master'

Improve design for vulnerability details

See merge request gitlab-org/gitlab!43274

ee/app/assets/javascripts/vulnerabilities/components/detail_item.vue

@@ -16,7 +16,7 @@ export default {
 </script>
 
 <template>
-  <li :data-testid="valueName">
+  <li :data-testid="valueName" class="gl-list-style-none gl-ml-0! gl-mb-4">
     <gl-sprintf :message="sprintfMessage">
       <template #label="{ content }">
         <strong data-testid="label">{{ content }}</strong>

ee/app/assets/javascripts/vulnerabilities/components/details.vue

@@ -91,7 +91,12 @@ export default {
     },
     shouldShowLocation() {
       return (
-        this.location.crash_address || this.location.crash_type || this.location.stacktrace_snippet
+        this.location.crash_address ||
+        this.location.crash_type ||
+        this.location.stacktrace_snippet ||
+        this.location.file ||
+        this.location.image ||
+        this.location.operating_system
       );
     },
   },
@@ -123,12 +128,7 @@ export default {
       <detail-item :sprintf-message="__('%{labelStart}Severity:%{labelEnd} %{severity}')">
         <severity-badge :severity="vulnerability.severity" class="gl-display-inline ml-1" />
       </detail-item>
-      <detail-item
-        v-if="vulnerability.evidence"
-        :sprintf-message="__('%{labelStart}Evidence:%{labelEnd} %{evidence}')"
-        >{{ vulnerability.evidence }}
-      </detail-item>
-      <detail-item :sprintf-message="__('%{labelStart}Report Type:%{labelEnd} %{reportType}')"
+      <detail-item :sprintf-message="__('%{labelStart}Scan Type:%{labelEnd} %{reportType}')"
         >{{ vulnerability.report_type }}
       </detail-item>
       <detail-item
@@ -151,14 +151,20 @@ export default {
         </component>
       </detail-item>
       <detail-item
-        v-if="location.image"
-        :sprintf-message="__('%{labelStart}Image:%{labelEnd} %{image}')"
-        >{{ location.image }}
+        v-if="location.class"
+        :sprintf-message="__('%{labelStart}Class:%{labelEnd} %{class}')"
+        >{{ location.class }}
       </detail-item>
       <detail-item
-        v-if="location.operating_system"
-        :sprintf-message="__('%{labelStart}Namespace:%{labelEnd} %{namespace}')"
-        >{{ location.operating_system }}
+        v-if="location.method"
+        :sprintf-message="__('%{labelStart}Method:%{labelEnd} %{method}')"
+      >
+        <code>{{ location.method }}</code>
+      </detail-item>
+      <detail-item
+        v-if="vulnerability.evidence"
+        :sprintf-message="__('%{labelStart}Evidence:%{labelEnd} %{evidence}')"
+        >{{ vulnerability.evidence }}
       </detail-item>
     </ul>
 
@@ -166,35 +172,31 @@ export default {
       <h3>{{ __('Location') }}</h3>
       <ul>
         <detail-item
-          v-if="location.crash_address"
-          :sprintf-message="__('%{labelStart}Crash Address:%{labelEnd} %{crash_address}')"
-          >{{ location.crash_address }}
+          v-if="location.image"
+          :sprintf-message="__('%{labelStart}Image:%{labelEnd} %{image}')"
+          >{{ location.image }}
         </detail-item>
         <detail-item
-          v-if="location.stacktrace_snippet"
-          :sprintf-message="__('%{labelStart}Crash State:%{labelEnd} %{stacktrace_snippet}')"
-        >
-          <code-block :code="location.stacktrace_snippet" max-height="225px" />
+          v-if="location.operating_system"
+          :sprintf-message="__('%{labelStart}Namespace:%{labelEnd} %{namespace}')"
+          >{{ location.operating_system }}
         </detail-item>
-      </ul>
-    </template>
-
-    <template v-if="location.file">
-      <h3>{{ __('Location') }}</h3>
-      <ul>
-        <detail-item :sprintf-message="__('%{labelStart}File:%{labelEnd} %{file}')">
+        <detail-item
+          v-if="location.file"
+          :sprintf-message="__('%{labelStart}File:%{labelEnd} %{file}')"
+        >
           <gl-link :href="fileUrl" target="_blank">{{ fileText }}</gl-link>
         </detail-item>
         <detail-item
-          v-if="location.class"
-          :sprintf-message="__('%{labelStart}Class:%{labelEnd} %{class}')"
-          >{{ location.class }}
+          v-if="location.crash_address"
+          :sprintf-message="__('%{labelStart}Crash Address:%{labelEnd} %{crash_address}')"
+          >{{ location.crash_address }}
         </detail-item>
         <detail-item
-          v-if="location.method"
-          :sprintf-message="__('%{labelStart}Method:%{labelEnd} %{method}')"
+          v-if="location.stacktrace_snippet"
+          :sprintf-message="__('%{labelStart}Crash State:%{labelEnd} %{stacktrace_snippet}')"
         >
-          <code>{{ location.method }}</code>
+          <code-block :code="location.stacktrace_snippet" max-height="225px" />
         </detail-item>
       </ul>
     </template>
@@ -202,7 +204,11 @@ export default {
     <template v-if="vulnerability.links && vulnerability.links.length">
       <h3>{{ __('Links') }}</h3>
       <ul>
-        <li v-for="(link, index) in vulnerability.links" :key="`${index}:${link.url}`">
+        <li
+          v-for="(link, index) in vulnerability.links"
+          :key="`${index}:${link.url}`"
+          class="gl-ml-0! gl-list-style-position-inside"
+        >
           <gl-link
             :href="link.url"
             data-testid="link"
@@ -222,6 +228,7 @@ export default {
         <li
           v-for="(identifier, index) in vulnerability.identifiers"
           :key="`${index}:${identifier.url}`"
+          class="gl-ml-0! gl-list-style-position-inside"
         >
           <gl-link :href="identifier.url" data-testid="identifier" target="_blank">
             {{ identifier.name }}

ee/changelogs/unreleased/218485-update-vulnerability-page-styling.yml

+---
+title: Improve design for vulnerability details
+merge_request: 43274
+author:
+type: changed

ee/spec/frontend/vulnerabilities/details_spec.js

@@ -36,7 +36,7 @@ describe('Vulnerability Details', () => {
     expect(getText('title')).toBe(vulnerability.title);
     expect(getText('description')).toBe(vulnerability.description);
     expect(wrapper.find(SeverityBadge).props('severity')).toBe(vulnerability.severity);
-    expect(getText('reportType')).toBe(`Report Type: ${vulnerability.report_type}`);
+    expect(getText('reportType')).toBe(`Scan Type: ${vulnerability.report_type}`);
 
     expect(getById('image').exists()).toBe(false);
     expect(getById('os').exists()).toBe(false);

locale/gitlab.pot

@@ -537,7 +537,7 @@ msgstr ""
 msgid "%{labelStart}Namespace:%{labelEnd} %{namespace}"
 msgstr ""
 
-msgid "%{labelStart}Report Type:%{labelEnd} %{reportType}"
+msgid "%{labelStart}Scan Type:%{labelEnd} %{reportType}"
 msgstr ""
 
 msgid "%{labelStart}Scanner:%{labelEnd} %{scanner}"