<script> import IssueStatusIcon from '~/reports/components/issue_status_icon.vue'; import { components, componentNames } from 'ee/vue_shared/components/reports/issue_body'; export default { name: 'ReportIssues', components: { IssueStatusIcon, ...components, }, props: { issues: { type: Array, required: true, }, component: { type: String, required: false, default: '', validator: value => value === '' || Object.values(componentNames).includes(value), }, // failed || success status: { type: String, required: true, }, isNew: { type: Boolean, required: false, default: false, }, }, }; </script> <template> <div> <ul class="report-block-list"> <li v-for="(issue, index) in issues" :key="index" :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue" > <issue-status-icon :status="issue.status || status" class="append-right-5" /> <component :is="component" v-if="component" :issue="issue" :status="issue.status || status" :is-new="isNew" /> </li> </ul> </div> </template>