Backports changes from ee#6079ce-6079-dismissed-items-in-reports

- Renderes dismissed reports at the bottom of a file
- New styling for dismissed reports

5 files changed, 35 insertions, 6 deletions

diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index f4243522ef8..109a6f4e703 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -1,6 +1,11 @@
 <script>
 import ReportItem from '~/reports/components/report_item.vue';
-import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/reports/constants';
+import {
+  STATUS_FAILED,
+  STATUS_NEUTRAL,
+  STATUS_SUCCESS,
+  STATUS_DISMISSED,
+} from '~/reports/constants';
 import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
 
 const wrapIssueWithState = (status, isNew = false) => issue => ({
@@ -47,6 +52,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dismissedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     component: {
       type: String,
       required: false,
@@ -60,6 +70,7 @@ export default {
         ...this.unresolvedIssues.map(wrapIssueWithState(STATUS_FAILED)),
         ...this.neutralIssues.map(wrapIssueWithState(STATUS_NEUTRAL)),
         ...this.resolvedIssues.map(wrapIssueWithState(STATUS_SUCCESS)),
+        ...this.dismissedIssues.map(wrapIssueWithState(STATUS_DISMISSED)),
       ];
     },
   },
diff --git a/app/assets/javascripts/reports/components/report_item.vue b/app/assets/javascripts/reports/components/report_item.vue
index 839e86bdf17..6710a094155 100644
--- a/app/assets/javascripts/reports/components/report_item.vue
+++ b/app/assets/javascripts/reports/components/report_item.vue
@@ -34,8 +34,8 @@ export default {
 </script>
 <template>
   <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
-    <issue-status-icon :status="status" class="append-right-5" />
-
+    <span v-if="issue.isDismissed" class="prepend-top-5 mx-2">DISMISSED</span>
+    <issue-status-icon v-else :status="status" class="append-right-5" />
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />
   </li>
 </template>
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index d6483e95278..e73f7f43d13 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -59,6 +59,11 @@ export default {
       required: false,
       default: () => [],
     },
+    dismissedIssues: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     infoText: {
       type: [String, Boolean],
       required: false,
@@ -165,6 +170,7 @@ export default {
           :unresolved-issues="unresolvedIssues"
           :resolved-issues="resolvedIssues"
           :neutral-issues="neutralIssues"
+          :dismissed-issues="dismissedIssues"
           :component="component"
         />
       </slot>
diff --git a/app/assets/javascripts/reports/constants.js b/app/assets/javascripts/reports/constants.js
index c323dc543f3..e365d78dfb1 100644
--- a/app/assets/javascripts/reports/constants.js
+++ b/app/assets/javascripts/reports/constants.js
@@ -12,6 +12,7 @@ export const SUCCESS = 'SUCCESS';
 export const STATUS_FAILED = 'failed';
 export const STATUS_SUCCESS = 'success';
 export const STATUS_NEUTRAL = 'neutral';
+export const STATUS_DISMISSED = 'dismissed';
 
 export const ICON_WARNING = 'warning';
 export const ICON_SUCCESS = 'success';
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index f7619ccbd20..d46601032b1 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -112,11 +112,22 @@
   display: flex;
   align-items: flex-start;
   align-content: flex-start;
+
+  ~ .is-dismissed {
+    border-top: 1px solid $gray-dark;
+    margin-top: $gl-padding-top;
+    padding-top: $gl-padding-top;
+  }
 }
 
-.is-dismissed .report-block-list-issue-description,
-.is-dismissed .vulnerability-name-button {
-  text-decoration: line-through;
+.is-dismissed {
+  opacity: .5;
+
+  + .is-dismissed {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .report-block-list-issue-description-text::after {