diff options
11 files changed, 25 insertions, 50 deletions
diff --git a/.eslintrc b/.eslintrc index d9161e97747..6dbe269e594 100644 --- a/.eslintrc +++ b/.eslintrc @@ -16,8 +16,7 @@ "localStorage": false }, "parserOptions": { - "parser": "babel-eslint", - "ecmaVersion": 2017 + "parser": "babel-eslint" }, "plugins": [ "filenames", diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index fb41b7c6ab4..c13bbcee863 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -1,4 +1,5 @@ <script> + /* eslint-disable vue/require-default-prop */ import { s__, sprintf } from '../../locale'; import eventHub from '../event_hub'; import loadingButton from '../../vue_shared/components/loading_button.vue'; @@ -30,7 +31,6 @@ titleLink: { type: String, required: false, - default: null, }, description: { type: String, @@ -39,22 +39,18 @@ status: { type: String, required: false, - default: null, }, statusReason: { type: String, required: false, - default: null, }, requestStatus: { type: String, required: false, - default: '', }, requestReason: { type: String, required: false, - default: null, }, }, computed: { @@ -62,7 +58,7 @@ return `js-cluster-application-row-${this.id}`; }, installButtonLoading() { - return this.status || + return !this.status || this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING || this.requestStatus === REQUEST_LOADING; @@ -180,7 +176,7 @@ {{ statusReason }} </li> <li - v-if="requestReaso" + v-if="requestReason" class="js-cluster-application-request-error-message" > {{ requestReason }} diff --git a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue index 146ef5e450b..759cdd1ded9 100644 --- a/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue +++ b/app/assets/javascripts/projects_dropdown/components/projects_list_item.vue @@ -1,4 +1,5 @@ <script> + /* eslint-disable vue/require-default-prop, vue/require-prop-types */ import identicon from '../../vue_shared/components/identicon.vue'; export default { @@ -9,7 +10,6 @@ matcher: { type: String, required: false, - default: '', }, projectId: { type: Number, @@ -28,7 +28,6 @@ required: true, }, avatarUrl: { - type: [String, Object], required: true, validator(value) { return value === null || typeof value === 'string'; @@ -40,7 +39,7 @@ return this.avatarUrl !== null; }, highlightedProjectName() { - if (this.matcher !== '') { + if (this.matcher) { const matcherRegEx = new RegExp(this.matcher, 'gi'); const matches = this.projectName.match(matcherRegEx); diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index 6a6a8cdd05d..7226076a8fc 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -1,4 +1,5 @@ <script> + /* eslint-disable vue/require-default-prop */ import { __ } from '../../../locale'; import eventHub from '../../event_hub'; import loadingButton from '../../../vue_shared/components/loading_button.vue'; @@ -16,12 +17,10 @@ subscribed: { type: Boolean, required: false, - default: false, }, id: { type: Number, required: false, - default: 0, }, }, computed: { diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 1b1eb5b5764..109a302a172 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -1,4 +1,5 @@ <script> + /* eslint-disable vue/require-default-prop */ import pipelineStage from '../../pipelines/components/stage.vue'; import ciIcon from '../../vue_shared/components/ci_icon.vue'; import icon from '../../vue_shared/components/icon.vue'; @@ -20,12 +21,10 @@ hasCi: { type: Boolean, required: false, - default: false, }, ciStatus: { type: String, required: false, - default: '', }, }, computed: { @@ -33,7 +32,7 @@ return this.pipeline && Object.keys(this.pipeline).length > 0; }, hasCIError() { - return this.hasCi && this.ciStatus !== ''; + return this.hasCi && !this.ciStatus; }, status() { return this.pipeline.details && diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 31caa25b723..ff8c0f7c1d2 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -1,4 +1,5 @@ <script> + /* eslint-disable vue/require-default-prop */ /* This is a re-usable vue component for rendering a button that will probably be sending off ajax requests and need @@ -37,7 +38,6 @@ label: { type: String, required: false, - default: '', }, containerClass: { type: String, @@ -45,11 +45,6 @@ default: 'btn btn-align-content', }, }, - computed: { - hasLabel() { - return this.label !== ''; - }, - }, methods: { onClick(e) { this.$emit('click', e); @@ -77,7 +72,7 @@ </transition> <transition name="fade"> <span - v-if="hasLabel" + v-if="label" class="js-loading-button-label" > {{ label }} diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 3c5d69e1f71..02773162801 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -364,6 +364,10 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. <component bar="bar" /> + + // bad + <component + bar="bar" /> ``` #### Quotes @@ -513,25 +517,7 @@ On those a default key should not be provided. ``` 1. Properties in a Vue Component: - 1. `name` - 1. `props` - 1. `mixins` - 1. `directives` - 1. `components` - 1. `data` - 1. `computedProps` - 1. `methods` - 1. `beforeCreate` - 1. `created` - 1. `beforeMount` - 1. `mounted` - 1. `beforeUpdate` - 1. `updated` - 1. `activated` - 1. `deactivated` - 1. `beforeDestroy` - 1. `destroyed` - + Check [order of properties in components rule][vue-order]. #### Vue and Bootstrap @@ -588,3 +574,4 @@ The goal of this accord is to make sure we are all on the same page. [eslint-new]: http://eslint.org/docs/rules/no-new [eslint-plugin-vue]: https://github.com/vuejs/eslint-plugin-vue [eslint-plugin-vue-rules]: https://github.com/vuejs/eslint-plugin-vue#bulb-rules +[vue-order]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md diff --git a/spec/javascripts/cycle_analytics/banner_spec.js b/spec/javascripts/cycle_analytics/banner_spec.js index fb6b7fee168..64a76a6ee5f 100644 --- a/spec/javascripts/cycle_analytics/banner_spec.js +++ b/spec/javascripts/cycle_analytics/banner_spec.js @@ -20,8 +20,9 @@ describe('Cycle analytics banner', () => { expect( vm.$el.querySelector('h4').textContent.trim(), ).toEqual('Introducing Cycle Analytics'); + expect( - vm.$el.querySelector('p').textContent.trim(), + vm.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), ).toContain('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.'); expect( vm.$el.querySelector('a').textContent.trim(), diff --git a/spec/javascripts/cycle_analytics/total_time_component_spec.js b/spec/javascripts/cycle_analytics/total_time_component_spec.js index 31b65fd1cde..ad0fc38a856 100644 --- a/spec/javascripts/cycle_analytics/total_time_component_spec.js +++ b/spec/javascripts/cycle_analytics/total_time_component_spec.js @@ -23,7 +23,7 @@ describe('Total time component', () => { }, }); - expect(vm.$el.textContent.trim()).toEqual('3 days 4 hrs'); + expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('3 days 4 hrs'); }); it('should render information for hours and minutes', () => { @@ -34,7 +34,7 @@ describe('Total time component', () => { }, }); - expect(vm.$el.textContent.trim()).toEqual('4 hrs 35 mins'); + expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('4 hrs 35 mins'); }); it('should render information for seconds', () => { @@ -44,7 +44,7 @@ describe('Total time component', () => { }, }); - expect(vm.$el.textContent.trim()).toEqual('45 s'); + expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('45 s'); }); }); diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js index 6611b74594f..97f04844b3a 100644 --- a/spec/javascripts/pipelines/empty_state_spec.js +++ b/spec/javascripts/pipelines/empty_state_spec.js @@ -24,11 +24,11 @@ describe('Pipelines Empty State', () => { expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence'); expect( - component.$el.querySelector('p').textContent, + component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), ).toContain('Continous Integration can help catch bugs by running your tests automatically'); expect( - component.$el.querySelector('p').textContent, + component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), ).toContain('Continuous Deployment can help you deliver code to your product environment'); }); diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js index 43e7d9e1224..87259fe0bab 100644 --- a/spec/javascripts/registry/components/app_spec.js +++ b/spec/javascripts/registry/components/app_spec.js @@ -89,7 +89,7 @@ describe('Registry List', () => { it('should render empty message', (done) => { setTimeout(() => { expect( - vm.$el.querySelector('p').textContent.trim(), + vm.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '), ).toEqual('No container images stored for this project. Add one by following the instructions above.'); done(); }, 0); |