diff options
8 files changed, 110 insertions, 60 deletions
diff --git a/app/assets/javascripts/vue_shared/components/reports/constants.js b/app/assets/javascripts/vue_shared/components/reports/constants.js new file mode 100644 index 00000000000..dbde648bfdb --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/reports/constants.js @@ -0,0 +1,3 @@ +export const STATUS_FAILED = 'failed'; +export const STATUS_SUCCESS = 'success'; +export const STATUS_NEUTRAL = 'neutral'; diff --git a/app/assets/javascripts/vue_shared/components/reports/issue_body.js b/app/assets/javascripts/vue_shared/components/reports/issue_body.js new file mode 100644 index 00000000000..f2141e519da --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/reports/issue_body.js @@ -0,0 +1,3 @@ +export const components = {}; + +export const componentNames = {}; diff --git a/app/assets/javascripts/vue_shared/components/reports/issue_status_icon.vue b/app/assets/javascripts/vue_shared/components/reports/issue_status_icon.vue new file mode 100644 index 00000000000..f8189117ac3 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/reports/issue_status_icon.vue @@ -0,0 +1,58 @@ +<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> diff --git a/app/assets/javascripts/vue_shared/components/reports/issues_list.vue b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue index e1e03e39ee0..04b09c00be1 100644 --- a/app/assets/javascripts/vue_shared/components/reports/issues_list.vue +++ b/app/assets/javascripts/vue_shared/components/reports/issues_list.vue @@ -1,5 +1,10 @@ <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 diff --git a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue index ecffb02a3a0..2d1f3d82234 100644 --- a/app/assets/javascripts/vue_shared/components/reports/report_issues.vue +++ b/app/assets/javascripts/vue_shared/components/reports/report_issues.vue @@ -1,19 +1,23 @@ <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" - /> - </div> + <issue-status-icon + :status="issue.status || status" + class="append-right-5" + /> + <component + v-if="component" + :is="component" + :issue="issue" + :status="issue.status || status" + /> </li> </ul> </div> diff --git a/app/assets/javascripts/vue_shared/components/reports/report_section.vue b/app/assets/javascripts/vue_shared/components/reports/report_section.vue index d383ed99a0c..be09f3ebe03 100644 --- a/app/assets/javascripts/vue_shared/components/reports/report_section.vue +++ b/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> diff --git a/spec/javascripts/vue_shared/components/reports/report_issues_spec.js b/spec/javascripts/vue_shared/components/reports/report_issues_spec.js deleted file mode 100644 index e69de29bb2d..00000000000 --- a/spec/javascripts/vue_shared/components/reports/report_issues_spec.js +++ /dev/null diff --git a/spec/javascripts/vue_shared/components/reports/report_section_spec.js b/spec/javascripts/vue_shared/components/reports/report_section_spec.js index 07401181ffd..8d5401a9d89 100644 --- a/spec/javascripts/vue_shared/components/reports/report_section_spec.js +++ b/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', |