Make report_issues.vue easily extendable

app/assets/javascripts/vue_shared/components/reports/constants.js

+export const STATUS_FAILED = 'failed';
+export const STATUS_SUCCESS = 'success';
+export const STATUS_NEUTRAL = 'neutral';

app/assets/javascripts/vue_shared/components/reports/issue_body.js

+export const components = {};
+
+export const componentNames = {};

app/assets/javascripts/vue_shared/components/reports/issue_status_icon.vue

+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+import {
+  STATUS_FAILED,
+  STATUS_NEUTRAL,
+  STATUS_SUCCESS,
+} from '~/vue_shared/components/reports/constants';
+
+export default {
+  name: 'IssueStatusIcon',
+  components: {
+    Icon,
+  },
+  props: {
+    // failed || success
+    status: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    iconName() {
+      if (this.isStatusFailed) {
+        return 'status_failed_borderless';
+      } else if (this.isStatusSuccess) {
+        return 'status_success_borderless';
+      }
+
+      return 'status_created_borderless';
+    },
+    isStatusFailed() {
+      return this.status === STATUS_FAILED;
+    },
+    isStatusSuccess() {
+      return this.status === STATUS_SUCCESS;
+    },
+    isStatusNeutral() {
+      return this.status === STATUS_NEUTRAL;
+    },
+  },
+};
+</script>
+<template>
+  <div
+    :class="{
+      failed: isStatusFailed,
+      success: isStatusSuccess,
+      neutral: isStatusNeutral,
+    }"
+    class="report-block-list-icon"
+  >
+    <icon
+      :name="iconName"
+      :size="32"
+    />
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/reports/issues_list.vue

 <script>
-import IssuesBlock from './report_issues.vue';
+import IssuesBlock from '~/vue_shared/components/reports/report_issues.vue';
+import {
+  STATUS_SUCCESS,
+  STATUS_FAILED,
+  STATUS_NEUTRAL,
+} from '~/vue_shared/components/reports/constants';
 
 /**
  * Renders block of issues
@@ -9,6 +14,9 @@ export default {
   components: {
     IssuesBlock,
   },
+  success: STATUS_SUCCESS,
+  failed: STATUS_FAILED,
+  neutral: STATUS_NEUTRAL,
   props: {
     unresolvedIssues: {
       type: Array,
@@ -30,9 +38,10 @@ export default {
       required: false,
       default: () => [],
     },
-    type: {
+    component: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
   data() {
@@ -40,11 +49,6 @@ export default {
       isFullReportVisible: false,
     };
   },
-  computed: {
-    unresolvedIssuesStatus() {
-      return this.type === 'license' ? 'neutral' : 'failed';
-    },
-  },
   methods: {
     openFullReport() {
       this.isFullReportVisible = true;
@@ -57,34 +61,34 @@ export default {
 
     <issues-block
       v-if="unresolvedIssues.length"
-      :type="type"
-      :status="unresolvedIssuesStatus"
+      :component="component"
       :issues="unresolvedIssues"
+      :status="$options.failed"
       class="js-mr-code-new-issues"
     />
 
     <issues-block
       v-if="isFullReportVisible"
-      :type="type"
+      :component="component"
       :issues="allIssues"
+      :status="$options.failed"
       class="js-mr-code-all-issues"
-      status="failed"
     />
 
     <issues-block
       v-if="neutralIssues.length"
-      :type="type"
+      :component="component"
       :issues="neutralIssues"
+      :status="$options.neutral"
       class="js-mr-code-non-issues"
-      status="neutral"
     />
 
     <issues-block
       v-if="resolvedIssues.length"
-      :type="type"
+      :component="component"
       :issues="resolvedIssues"
+      :status="$options.success"
       class="js-mr-code-resolved-issues"
-      status="success"
     />
 
     <button

app/assets/javascripts/vue_shared/components/reports/report_issues.vue

 <script>
-import Icon from '~/vue_shared/components/icon.vue';
+import IssueStatusIcon from '~/vue_shared/components/reports/issue_status_icon.vue';
+import { components, componentNames } from '~/vue_shared/components/reports/issue_body';
 
 export default {
   name: 'ReportIssues',
   components: {
-    Icon,
+    IssueStatusIcon,
+    ...components,
   },
   props: {
     issues: {
       type: Array,
       required: true,
     },
-    type: {
+    component: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
+      validator: value => value === '' || Object.values(componentNames).includes(value),
     },
     // failed || success
     status: {
@@ -21,26 +25,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    iconName() {
-      if (this.isStatusFailed) {
-        return 'status_failed_borderless';
-      } else if (this.isStatusSuccess) {
-        return 'status_success_borderless';
-      }
-
-      return 'status_created_borderless';
-    },
-    isStatusFailed() {
-      return this.status === 'failed';
-    },
-    isStatusSuccess() {
-      return this.status === 'success';
-    },
-    isStatusNeutral() {
-      return this.status === 'neutral';
-    },
-  },
 };
 </script>
 <template>
@@ -52,20 +36,17 @@ export default {
         :key="index"
         class="report-block-list-issue"
       >
-        <div
-          :class="{
-            failed: isStatusFailed,
-            success: isStatusSuccess,
-            neutral: isStatusNeutral,
-          }"
-          class="report-block-list-icon append-right-5"
-        >
-          <icon
-            :name="iconName"
-            :size="32"
+        <issue-status-icon
+          :status="issue.status || status"
+          class="append-right-5"
         />
-        </div>
 
+        <component
+          v-if="component"
+          :is="component"
+          :issue="issue"
+          :status="issue.status || status"
+        />
       </li>
     </ul>
   </div>

app/assets/javascripts/vue_shared/components/reports/report_section.vue

@@ -21,7 +21,7 @@ export default {
       required: false,
       default: false,
     },
-    type: {
+    component: {
       type: String,
       required: false,
       default: '',
@@ -149,7 +149,7 @@ export default {
         :status="statusIconName"
       />
       <div
-        class="media-body space-children d-flex"
+        class="media-body space-children d-flex flex-align-self-center"
       >
         <span
           class="js-code-text code-text"
@@ -183,8 +183,9 @@ export default {
         <issues-list
           :unresolved-issues="unresolvedIssues"
           :resolved-issues="resolvedIssues"
+          :neutral-issues="neutralIssues"
           :all-issues="allIssues"
-          :type="type"
+          :component="component"
         />
       </slot>
     </div>

spec/javascripts/vue_shared/components/reports/report_section_spec.js

@@ -23,7 +23,7 @@ describe('Report section', () => {
   describe('computed', () => {
     beforeEach(() => {
       vm = mountComponent(ReportSection, {
-        type: 'codequality',
+        component: '',
         status: 'SUCCESS',
         loadingText: 'Loading codeclimate report',
         errorText: 'foo',
@@ -89,7 +89,7 @@ describe('Report section', () => {
   describe('when it is loading', () => {
     it('should render loading indicator', () => {
       vm = mountComponent(ReportSection, {
-        type: 'codequality',
+        component: '',
         status: 'LOADING',
         loadingText: 'Loading codeclimate report',
         errorText: 'foo',
@@ -103,7 +103,7 @@ describe('Report section', () => {
   describe('with success status', () => {
     beforeEach(() => {
       vm = mountComponent(ReportSection, {
-        type: 'codequality',
+        component: '',
         status: 'SUCCESS',
         loadingText: 'Loading codeclimate report',
         errorText: 'foo',
@@ -161,7 +161,7 @@ describe('Report section', () => {
   describe('with failed request', () => {
     it('should render error indicator', () => {
       vm = mountComponent(ReportSection, {
-        type: 'codequality',
+        component: '',
         status: 'ERROR',
         loadingText: 'Loading codeclimate report',
         errorText: 'Failed to load codeclimate report',