Make report_issues.vue easily extendable
This commit is contained in:
parent
c364c37c61
commit
58cff01d7a
|
@ -0,0 +1,3 @@
|
|||
export const STATUS_FAILED = 'failed';
|
||||
export const STATUS_SUCCESS = 'success';
|
||||
export const STATUS_NEUTRAL = 'neutral';
|
|
@ -0,0 +1,3 @@
|
|||
export const components = {};
|
||||
|
||||
export const componentNames = {};
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue