Commit 88738408 authored by Phil Hughes's avatar Phil Hughes

Merge branch '49614-dynamic-component-in-report-issue' into 'master'

Make report_issues.vue easily extendable

Closes #49614

See merge request gitlab-org/gitlab-ce!20843
parents c364c37c 58cff01d
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>
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
......
<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>
......
......@@ -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',
......
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