Backport of EE Displaying Blocking MRs

This MR is a backport of an EE merge request

3 files changed, 57 insertions, 11 deletions

diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index 50f2910e02d..ee07efea3b0 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -52,11 +52,21 @@ export default {
       required: false,
       default: '',
     },
-    showReportSectionStatus: {
+    showReportSectionStatusIcon: {
       type: Boolean,
       required: false,
       default: true,
     },
+    issuesUlElementClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issueItemClass: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     issuesWithState() {
@@ -67,6 +77,9 @@ export default {
         ...this.resolvedIssues.map(wrapIssueWithState(STATUS_SUCCESS)),
       ];
     },
+    wclass() {
+      return `report-block-list ${this.issuesUlElementClass}`;
+    },
   },
 };
 </script>
@@ -77,7 +90,7 @@ export default {
     :size="$options.typicalReportItemHeight"
     class="report-block-container"
     wtag="ul"
-    wclass="report-block-list"
+    :wclass="wclass"
   >
     <report-item
       v-for="(wrapped, index) in issuesWithState"
@@ -86,7 +99,8 @@ export default {
       :status="wrapped.status"
       :component="component"
       :is-new="wrapped.isNew"
-      :show-report-section-status="showReportSectionStatus"
+      :show-report-section-status-icon="showReportSectionStatusIcon"
+      :class="issueItemClass"
     />
   </smart-virtual-list>
 </template>
diff --git a/app/assets/javascripts/reports/components/report_section.vue b/app/assets/javascripts/reports/components/report_section.vue
index 241185e3126..3d576caaf8f 100644
--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -3,10 +3,7 @@ import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
 import IssuesList from './issues_list.vue';
-
-const LOADING = 'LOADING';
-const ERROR = 'ERROR';
-const SUCCESS = 'SUCCESS';
+import { status } from '../constants';
 
 export default {
   name: 'ReportSection',
@@ -42,7 +39,8 @@ export default {
     },
     successText: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     unresolvedIssues: {
       type: Array,
@@ -78,6 +76,21 @@ export default {
       required: false,
       default: true,
     },
+    issuesUlElementClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    issuesListContainerClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    issueItemClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
 
   data() {
@@ -91,13 +104,13 @@ export default {
       return this.isCollapsed ? __('Expand') : __('Collapse');
     },
     isLoading() {
-      return this.status === LOADING;
+      return this.status === status.LOADING;
     },
     loadingFailed() {
-      return this.status === ERROR;
+      return this.status === status.ERROR;
     },
     isSuccess() {
-      return this.status === SUCCESS;
+      return this.status === status.SUCCESS;
     },
     isCollapsible() {
       return !this.alwaysOpen && this.hasIssues;
@@ -132,6 +145,15 @@ export default {
     hasPopover() {
       return Object.keys(this.popoverOptions).length > 0;
     },
+    slotName() {
+      if (this.isSuccess) {
+        return 'success';
+      } else if (this.isLoading) {
+        return 'loading';
+      }
+
+      return 'error';
+    },
   },
   methods: {
     toggleCollapsed() {
@@ -147,6 +169,7 @@ export default {
       <div class="media-body d-flex flex-align-self-center">
         <span class="js-code-text code-text">
           {{ headerText }}
+          <slot :name="slotName"></slot>
 
           <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
         </span>
@@ -172,6 +195,9 @@ export default {
           :neutral-issues="neutralIssues"
           :component="component"
           :show-report-section-status-icon="showReportSectionStatusIcon"
+          :issues-ul-element-class="issuesUlElementClass"
+          :class="issuesListContainerClass"
+          :issue-item-class="issueItemClass"
         />
       </slot>
     </div>
diff --git a/app/assets/javascripts/reports/constants.js b/app/assets/javascripts/reports/constants.js
index c323dc543f3..66ac1af062b 100644
--- a/app/assets/javascripts/reports/constants.js
+++ b/app/assets/javascripts/reports/constants.js
@@ -16,3 +16,9 @@ export const STATUS_NEUTRAL = 'neutral';
 export const ICON_WARNING = 'warning';
 export const ICON_SUCCESS = 'success';
 export const ICON_NOTFOUND = 'notfound';
+
+export const status = {
+  LOADING: 'LOADING',
+  ERROR: 'ERROR',
+  SUCCESS: 'SUCCESS',
+};