Skip to content

G
gitlab-ce
Commit d2ebf467 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

[ci skip] Move common components into a shared location 

Rename common components
Break CSS into a new file
Update tests
parent 1e2dd2ac
Hide whitespace changes
Inline Side-by-side
Showing with 97 additions and 98 deletions
app/assets/stylesheets/pages/merge_requests.scss
View file @ d2ebf467
......@@ -783,57 +783,3 @@
font-size: 22px;
margin: 0 10px 0 0;
}
.mr-widget-code-quality {
.code-quality-container {
border-top: 1px solid $gray-darker;
padding: $gl-padding-top;
background-color: $gray-light;
margin: $gl-padding -16px -16px;
.mr-widget-code-quality-info {
padding-left: 10px;
}
.mr-widget-dast-code {
margin-left: 26px;
}
.mr-widget-code-quality-list {
list-style: none;
padding: 0 1px;
margin: 0;
line-height: $code_line_height;
.btn-open-modal {
padding: 0 5px 4px;
}
.mr-widget-code-quality-list-item {
display: flex;
}
.mr-widget-code-quality-list-item-modal {
display: flex;
flex-wrap: wrap;
}
.failed .mr-widget-code-quality-icon {
color: $red-500;
}
.success .mr-widget-code-quality-icon {
color: $green-500;
}
.neutral .mr-widget-code-quality-icon {
color: $theme-gray-700;
}
.mr-widget-code-quality-icon {
margin: -5px 4px 0 0;
fill: currentColor;
}
}
}
}
ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
View file @ d2ebf467
......@@ -2,14 +2,14 @@ import { n__, s__, __, sprintf } from '~/locale';
import CEWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
import WidgetApprovals from './components/approvals/mr_widget_approvals';
import GeoSecondaryNode from './components/states/mr_widget_secondary_geo_node';
import collapsibleSection from './components/mr_widget_report_collapsible_section.vue';
import CollapsibleSection from '../vue_shared/components/security_reports/report_collapsible_section.vue';
export default {
extends: CEWidgetOptions,
components: {
'mr-widget-approvals': WidgetApprovals,
'mr-widget-geo-secondary-node': GeoSecondaryNode,
collapsibleSection,
CollapsibleSection,
},
data() {
return {
......
ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue → ee/app/assets/javascripts/vue_shared/components/security_reports/report_collapsible_section.vue
View file @ d2ebf467
<script>
import { __ } from '~/locale';
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
import loadingIcon from '~/vue_shared/components/loading_icon.vue';
import issuesBlock from './mr_widget_report_issues.vue';
import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
import IssuesBlock from './report_issues.vue';
export default {
name: 'MRWidgetCodeQualityCollapsible',
name: 'ReportCollapsibleSection',
components: {
issuesBlock,
loadingIcon,
statusIcon,
IssuesBlock,
LoadingIcon,
StatusIcon,
},
props: {
// security | codequality | performance | docker
......@@ -37,22 +37,22 @@
unresolvedIssues: {
type: Array,
required: false,
default: () => [],
default: () => ([]),
},
resolvedIssues: {
type: Array,
required: false,
default: () => [],
default: () => ([]),
},
neutralIssues: {
type: Array,
required: false,
default: () => [],
default: () => ([]),
},
allIssues: {
type: Array,
required: false,
default: () => [],
default: () => ([]),
},
infoText: {
type: [String, Boolean],
......
ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_issues.vue → ee/app/assets/javascripts/vue_shared/components/security_reports/report_issues.vue
View file @ d2ebf467
<script>
import { s__ } from '~/locale';
import icon from '~/vue_shared/components/icon.vue';
import modal from './mr_widget_dast_modal.vue';
import Icon from '~/vue_shared/components/icon.vue';
import Modal from './dast_modal.vue';
const modalDefaultData = {
modalId: 'modal-mrwidget-issue',
......@@ -12,10 +12,10 @@
};
export default {
name: 'MrWidgetReportIssues',
name: 'ReportIssues',
components: {
modal,
icon,
Modal,
Icon,
},
props: {
issues: {
......
ee/app/assets/stylesheets/pages/security_reports.scss 0 → 100644
View file @ d2ebf467
.mr-widget-code-quality {
.code-quality-container {
border-top: 1px solid $gray-darker;
padding: $gl-padding-top;
background-color: $gray-light;
margin: $gl-padding -16px -16px;
.mr-widget-code-quality-info {
padding-left: 10px;
}
.mr-widget-dast-code {
margin-left: 26px;
}
.mr-widget-code-quality-list {
list-style: none;
padding: 0 1px;
margin: 0;
line-height: $code_line_height;
.btn-open-modal {
padding: 0 5px 4px;
}
.mr-widget-code-quality-list-item {
display: flex;
}
.mr-widget-code-quality-list-item-modal {
display: flex;
flex-wrap: wrap;
}
.failed .mr-widget-code-quality-icon {
color: $red-500;
}
.success .mr-widget-code-quality-icon {
color: $green-500;
}
.neutral .mr-widget-code-quality-icon {
color: $theme-gray-700;
}
.mr-widget-code-quality-icon {
margin: -5px 4px 0 0;
fill: currentColor;
}
}
}
}
spec/javascripts/vue_mr_widget/components/mr_widget_dast_modal_spec.js → spec/javascripts/vue_shared/components/security_reports/dast_modal_spec.js
View file @ d2ebf467
import Vue from 'vue';
import modal from 'ee/vue_merge_request_widget/components/mr_widget_dast_modal.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import modal from 'ee/vue_shared/components/security_reports/dast_modal.vue';
import mountComponent from '../../../helpers/vue_mount_component_helper';
describe('mr widget modal', () => {
let vm;
......
spec/javascripts/vue_mr_widget/components/mr_widget_report_collapsible_section_spec.js → spec/javascripts/vue_shared/components/security_reports/report_collapsible_section_spec.js
View file @ d2ebf467
import Vue from 'vue';
import mrWidgetCodeQuality from 'ee/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import { codequalityParsedIssues } from '../mock_data';
import reportCollapsibleSection from 'ee/vue_shared/components/security_reports/report_collapsible_section.vue';
import mountComponent from '../../../helpers/vue_mount_component_helper';
import { codequalityParsedIssues } from '../../../vue_mr_widget/mock_data';
describe('Merge Request collapsible section', () => {
describe('Report Collapsible section', () => {
let vm;
let MRWidgetCodeQuality;
let ReportCollapsibleSection;
beforeEach(() => {
MRWidgetCodeQuality = Vue.extend(mrWidgetCodeQuality);
ReportCollapsibleSection = Vue.extend(reportCollapsibleSection);
});
afterEach(() => {
......@@ -17,7 +17,7 @@ describe('Merge Request collapsible section', () => {
describe('when it is loading', () => {
it('should render loading indicator', () => {
vm = mountComponent(MRWidgetCodeQuality, {
vm = mountComponent(ReportCollapsibleSection, {
type: 'codequality',
status: 'loading',
loadingText: 'Loading codeclimate report',
......@@ -30,7 +30,7 @@ describe('Merge Request collapsible section', () => {
describe('with success status', () => {
it('should render provided data', () => {
vm = mountComponent(MRWidgetCodeQuality, {
vm = mountComponent(ReportCollapsibleSection, {
type: 'codequality',
status: 'success',
loadingText: 'Loading codeclimate report',
......@@ -50,7 +50,7 @@ describe('Merge Request collapsible section', () => {
describe('toggleCollapsed', () => {
it('toggles issues', (done) => {
vm = mountComponent(MRWidgetCodeQuality, {
vm = mountComponent(ReportCollapsibleSection, {
type: 'codequality',
status: 'success',
loadingText: 'Loading codeclimate report',
......@@ -88,7 +88,7 @@ describe('Merge Request collapsible section', () => {
describe('with failed request', () => {
it('should render error indicator', () => {
vm = mountComponent(MRWidgetCodeQuality, {
vm = mountComponent(ReportCollapsibleSection, {
type: 'codequality',
status: 'error',
loadingText: 'Loading codeclimate report',
......@@ -101,7 +101,7 @@ describe('Merge Request collapsible section', () => {
describe('With full report', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQuality, {
vm = mountComponent(ReportCollapsibleSection, {
status: 'success',
successText: 'SAST improved on 1 security vulnerability and degraded on 1 security vulnerability',
type: 'security',
......
spec/javascripts/vue_mr_widget/components/mr_widget_report_issues_spec.js → spec/javascripts/vue_shared/components/security_reports/report_issues_spec.js
View file @ d2ebf467
import Vue from 'vue';
import mrWidgetCodeQualityIssues from 'ee/vue_merge_request_widget/components/mr_widget_report_issues.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import reportIssues from 'ee/vue_shared/components/security_reports/report_issues.vue';
import mountComponent from '../../../helpers/vue_mount_component_helper';
import {
securityParsedIssues,
codequalityParsedIssues,
dockerReportParsed,
parsedDast,
} from '../mock_data';
} from '../../../vue_mr_widget/mock_data';
describe('merge request report issues', () => {
describe('Report issues', () => {
let vm;
let MRWidgetCodeQualityIssues;
let ReportIssues;
beforeEach(() => {
MRWidgetCodeQualityIssues = Vue.extend(mrWidgetCodeQualityIssues);
ReportIssues = Vue.extend(reportIssues);
});
afterEach(() => {
......@@ -23,7 +23,7 @@ describe('merge request report issues', () => {
describe('for codequality issues', () => {
describe('resolved issues', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: codequalityParsedIssues,
type: 'codequality',
status: 'success',
......@@ -44,7 +44,7 @@ describe('merge request report issues', () => {
describe('unresolved issues', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: codequalityParsedIssues,
type: 'codequality',
status: 'failed',
......@@ -63,7 +63,7 @@ describe('merge request report issues', () => {
describe('for security issues', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: securityParsedIssues,
type: 'security',
status: 'failed',
......@@ -82,7 +82,7 @@ describe('merge request report issues', () => {
describe('with location', () => {
it('should render location', () => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: securityParsedIssues,
type: 'security',
status: 'failed',
......@@ -95,7 +95,7 @@ describe('merge request report issues', () => {
describe('without location', () => {
it('should not render location', () => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: [{
name: 'foo',
}],
......@@ -110,7 +110,7 @@ describe('merge request report issues', () => {
describe('for docker issues', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: dockerReportParsed.unapproved,
type: 'docker',
status: 'failed',
......@@ -145,7 +145,7 @@ describe('merge request report issues', () => {
describe('for dast issues', () => {
beforeEach(() => {
vm = mountComponent(MRWidgetCodeQualityIssues, {
vm = mountComponent(ReportIssues, {
issues: parsedDast,
type: 'dast',
status: 'failed',
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7