Commit 58cff01d authored by Lukas Eipert's avatar Lukas Eipert Committed by Phil Hughes

Make report_issues.vue easily extendable

parent c364c37c
export const STATUS_FAILED = 'failed';
export const STATUS_SUCCESS = 'success';
export const STATUS_NEUTRAL = 'neutral';
export const components = {};
export const componentNames = {};
<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>
<script> <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 * Renders block of issues
...@@ -9,6 +14,9 @@ export default { ...@@ -9,6 +14,9 @@ export default {
components: { components: {
IssuesBlock, IssuesBlock,
}, },
success: STATUS_SUCCESS,
failed: STATUS_FAILED,
neutral: STATUS_NEUTRAL,
props: { props: {
unresolvedIssues: { unresolvedIssues: {
type: Array, type: Array,
...@@ -30,9 +38,10 @@ export default { ...@@ -30,9 +38,10 @@ export default {
required: false, required: false,
default: () => [], default: () => [],
}, },
type: { component: {
type: String, type: String,
required: true, required: false,
default: '',
}, },
}, },
data() { data() {
...@@ -40,11 +49,6 @@ export default { ...@@ -40,11 +49,6 @@ export default {
isFullReportVisible: false, isFullReportVisible: false,
}; };
}, },
computed: {
unresolvedIssuesStatus() {
return this.type === 'license' ? 'neutral' : 'failed';
},
},
methods: { methods: {
openFullReport() { openFullReport() {
this.isFullReportVisible = true; this.isFullReportVisible = true;
...@@ -57,34 +61,34 @@ export default { ...@@ -57,34 +61,34 @@ export default {
<issues-block <issues-block
v-if="unresolvedIssues.length" v-if="unresolvedIssues.length"
:type="type" :component="component"
:status="unresolvedIssuesStatus"
:issues="unresolvedIssues" :issues="unresolvedIssues"
:status="$options.failed"
class="js-mr-code-new-issues" class="js-mr-code-new-issues"
/> />
<issues-block <issues-block
v-if="isFullReportVisible" v-if="isFullReportVisible"
:type="type" :component="component"
:issues="allIssues" :issues="allIssues"
:status="$options.failed"
class="js-mr-code-all-issues" class="js-mr-code-all-issues"
status="failed"
/> />
<issues-block <issues-block
v-if="neutralIssues.length" v-if="neutralIssues.length"
:type="type" :component="component"
:issues="neutralIssues" :issues="neutralIssues"
:status="$options.neutral"
class="js-mr-code-non-issues" class="js-mr-code-non-issues"
status="neutral"
/> />
<issues-block <issues-block
v-if="resolvedIssues.length" v-if="resolvedIssues.length"
:type="type" :component="component"
:issues="resolvedIssues" :issues="resolvedIssues"
:status="$options.success"
class="js-mr-code-resolved-issues" class="js-mr-code-resolved-issues"
status="success"
/> />
<button <button
......
<script> <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 { export default {
name: 'ReportIssues', name: 'ReportIssues',
components: { components: {
Icon, IssueStatusIcon,
...components,
}, },
props: { props: {
issues: { issues: {
type: Array, type: Array,
required: true, required: true,
}, },
type: { component: {
type: String, type: String,
required: true, required: false,
default: '',
validator: value => value === '' || Object.values(componentNames).includes(value),
}, },
// failed || success // failed || success
status: { status: {
...@@ -21,26 +25,6 @@ export default { ...@@ -21,26 +25,6 @@ export default {
required: true, 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> </script>
<template> <template>
...@@ -52,20 +36,17 @@ export default { ...@@ -52,20 +36,17 @@ export default {
:key="index" :key="index"
class="report-block-list-issue" class="report-block-list-issue"
> >
<div <issue-status-icon
:class="{ :status="issue.status || status"
failed: isStatusFailed, class="append-right-5"
success: isStatusSuccess, />
neutral: isStatusNeutral,
}"
class="report-block-list-icon append-right-5"
>
<icon
:name="iconName"
:size="32"
/>
</div>
<component
v-if="component"
:is="component"
:issue="issue"
:status="issue.status || status"
/>
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
type: { component: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
...@@ -149,7 +149,7 @@ export default { ...@@ -149,7 +149,7 @@ export default {
:status="statusIconName" :status="statusIconName"
/> />
<div <div
class="media-body space-children d-flex" class="media-body space-children d-flex flex-align-self-center"
> >
<span <span
class="js-code-text code-text" class="js-code-text code-text"
...@@ -183,8 +183,9 @@ export default { ...@@ -183,8 +183,9 @@ export default {
<issues-list <issues-list
:unresolved-issues="unresolvedIssues" :unresolved-issues="unresolvedIssues"
:resolved-issues="resolvedIssues" :resolved-issues="resolvedIssues"
:neutral-issues="neutralIssues"
:all-issues="allIssues" :all-issues="allIssues"
:type="type" :component="component"
/> />
</slot> </slot>
</div> </div>
......
...@@ -23,7 +23,7 @@ describe('Report section', () => { ...@@ -23,7 +23,7 @@ describe('Report section', () => {
describe('computed', () => { describe('computed', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(ReportSection, { vm = mountComponent(ReportSection, {
type: 'codequality', component: '',
status: 'SUCCESS', status: 'SUCCESS',
loadingText: 'Loading codeclimate report', loadingText: 'Loading codeclimate report',
errorText: 'foo', errorText: 'foo',
...@@ -89,7 +89,7 @@ describe('Report section', () => { ...@@ -89,7 +89,7 @@ describe('Report section', () => {
describe('when it is loading', () => { describe('when it is loading', () => {
it('should render loading indicator', () => { it('should render loading indicator', () => {
vm = mountComponent(ReportSection, { vm = mountComponent(ReportSection, {
type: 'codequality', component: '',
status: 'LOADING', status: 'LOADING',
loadingText: 'Loading codeclimate report', loadingText: 'Loading codeclimate report',
errorText: 'foo', errorText: 'foo',
...@@ -103,7 +103,7 @@ describe('Report section', () => { ...@@ -103,7 +103,7 @@ describe('Report section', () => {
describe('with success status', () => { describe('with success status', () => {
beforeEach(() => { beforeEach(() => {
vm = mountComponent(ReportSection, { vm = mountComponent(ReportSection, {
type: 'codequality', component: '',
status: 'SUCCESS', status: 'SUCCESS',
loadingText: 'Loading codeclimate report', loadingText: 'Loading codeclimate report',
errorText: 'foo', errorText: 'foo',
...@@ -161,7 +161,7 @@ describe('Report section', () => { ...@@ -161,7 +161,7 @@ describe('Report section', () => {
describe('with failed request', () => { describe('with failed request', () => {
it('should render error indicator', () => { it('should render error indicator', () => {
vm = mountComponent(ReportSection, { vm = mountComponent(ReportSection, {
type: 'codequality', component: '',
status: 'ERROR', status: 'ERROR',
loadingText: 'Loading codeclimate report', loadingText: 'Loading codeclimate report',
errorText: 'Failed to load codeclimate report', errorText: 'Failed to load codeclimate report',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment