[ci skip] Fix more eslint rules

4 files changed, 202 insertions, 189 deletions

diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index 05e48ed297f..3595a9389e9 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -11,7 +11,7 @@
    * </expand-button>
    */
   export default {
-    name: 'expandButton',
+    name: 'ExpandButton',
     data() {
       return {
         isCollapsed: true,
diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index 00089dfef38..66dfd991377 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -1,143 +1,151 @@
 <script>
-export default {
-  name: 'modal',
+  export default {
+    name: 'Modal',
 
-  props: {
-    id: {
-      type: String,
-      required: false,
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      text: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hideFooter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      kind: {
+        type: String,
+        required: false,
+        default: 'primary',
+      },
+      modalDialogClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      closeKind: {
+        type: String,
+        required: false,
+        default: 'default',
+      },
+      closeButtonLabel: {
+        type: String,
+        required: false,
+        default: 'Cancel',
+      },
+      primaryButtonLabel: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      submitDisabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-    title: {
-      type: String,
-      required: false,
-    },
-    text: {
-      type: String,
-      required: false,
-    },
-    hideFooter: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    kind: {
-      type: String,
-      required: false,
-      default: 'primary',
-    },
-    modalDialogClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    closeKind: {
-      type: String,
-      required: false,
-      default: 'default',
-    },
-    closeButtonLabel: {
-      type: String,
-      required: false,
-      default: 'Cancel',
-    },
-    primaryButtonLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    submitDisabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
 
-  computed: {
-    btnKindClass() {
-      return {
-        [`btn-${this.kind}`]: true,
-      };
+    computed: {
+      btnKindClass() {
+        return {
+          [`btn-${this.kind}`]: true,
+        };
+      },
+      btnCancelKindClass() {
+        return {
+          [`btn-${this.closeKind}`]: true,
+        };
+      },
     },
-    btnCancelKindClass() {
-      return {
-        [`btn-${this.closeKind}`]: true,
-      };
-    },
-  },
 
-  methods: {
-    emitCancel(event) {
-      this.$emit('cancel', event);
-    },
-    emitSubmit(event) {
-      this.$emit('submit', event);
+    methods: {
+      emitCancel(event) {
+        this.$emit('cancel', event);
+      },
+      emitSubmit(event) {
+        this.$emit('submit', event);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
-<div class="modal-open">
-  <div
-    :id="id"
-    class="modal"
-    :class="id ? '' : 'show'"
-    role="dialog"
-    tabindex="-1"
-  >
+  <div class="modal-open">
     <div
-      :class="modalDialogClass"
-      class="modal-dialog"
-      role="document"
+      :id="id"
+      class="modal"
+      :class="id !== '' ? '' : 'show'"
+      role="dialog"
+      tabindex="-1"
     >
-      <div class="modal-content">
-        <div class="modal-header">
-          <slot name="header">
-            <h4 class="modal-title pull-left">
-              {{this.title}}
-            </h4>
+      <div
+        :class="modalDialogClass"
+        class="modal-dialog"
+        role="document"
+      >
+        <div class="modal-content">
+          <div class="modal-header">
+            <slot name="header">
+              <h4 class="modal-title pull-left">
+                {{ this.title }}
+              </h4>
+              <button
+                type="button"
+                class="close pull-right"
+                @click="emitCancel($event)"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </slot>
+          </div>
+          <div class="modal-body">
+            <slot name="body" :text="text">
+              <p>{{ this.text }}</p>
+            </slot>
+          </div>
+          <div
+            class="modal-footer"
+            v-if="!hideFooter"
+          >
             <button
               type="button"
-              class="close pull-right"
+              class="btn pull-left"
+              :class="btnCancelKindClass"
               @click="emitCancel($event)"
               data-dismiss="modal"
-              aria-label="Close"
             >
-              <span aria-hidden="true">&times;</span>
+              {{ closeButtonLabel }}
             </button>
-          </slot>
-        </div>
-        <div class="modal-body">
-          <slot name="body" :text="text">
-            <p>{{this.text}}</p>
-          </slot>
-        </div>
-        <div class="modal-footer" v-if="!hideFooter">
-          <button
-            type="button"
-            class="btn pull-left"
-            :class="btnCancelKindClass"
-            @click="emitCancel($event)"
-            data-dismiss="modal">
-            {{ closeButtonLabel }}
-          </button>
-          <button
-            v-if="primaryButtonLabel"
-            type="button"
-            class="btn pull-right js-primary-button"
-            :disabled="submitDisabled"
-            :class="btnKindClass"
-            @click="emitSubmit($event)"
-            data-dismiss="modal">
-            {{ primaryButtonLabel }}
-          </button>
+            <button
+              v-if="primaryButtonLabel"
+              type="button"
+              class="btn pull-right js-primary-button"
+              :disabled="submitDisabled"
+              :class="btnKindClass"
+              @click="emitSubmit($event)"
+              data-dismiss="modal"
+            >
+              {{ primaryButtonLabel }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
+    <div
+      v-if="id !== ''"
+      class="modal-backdrop fade in">
+    </div>
   </div>
-  <div
-    v-if="!id"
-    class="modal-backdrop fade in">
-  </div>
-</div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index 16d60bb2876..c35621c9ef3 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -1,85 +1,86 @@
 <script>
-import modal from './modal.vue';
+  import modal from './modal.vue';
 
-export default {
-  name: 'recaptcha-modal',
+  export default {
+    name: 'RecaptchaModal',
 
-  props: {
-    html: {
-      type: String,
-      required: false,
-      default: '',
+    components: {
+      modal,
     },
-  },
 
-  data() {
-    return {
-      script: {},
-      scriptSrc: 'https://www.google.com/recaptcha/api.js',
-    };
-  },
+    props: {
+      html: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
 
-  components: {
-    modal,
-  },
+    data() {
+      return {
+        script: {},
+        scriptSrc: 'https://www.google.com/recaptcha/api.js',
+      };
+    },
 
-  methods: {
-    appendRecaptchaScript() {
-      this.removeRecaptchaScript();
+    watch: {
+      html() {
+        this.appendRecaptchaScript();
+      },
+    },
 
-      const script = document.createElement('script');
-      script.src = this.scriptSrc;
-      script.classList.add('js-recaptcha-script');
-      script.async = true;
-      script.defer = true;
+    mounted() {
+      window.recaptchaDialogCallback = this.submit.bind(this);
+    },
 
-      this.script = script;
+    methods: {
+      appendRecaptchaScript() {
+        this.removeRecaptchaScript();
 
-      document.body.appendChild(script);
-    },
+        const script = document.createElement('script');
+        script.src = this.scriptSrc;
+        script.classList.add('js-recaptcha-script');
+        script.async = true;
+        script.defer = true;
 
-    removeRecaptchaScript() {
-      if (this.script instanceof Element) this.script.remove();
-    },
+        this.script = script;
 
-    close() {
-      this.removeRecaptchaScript();
-      this.$emit('close');
-    },
+        document.body.appendChild(script);
+      },
 
-    submit() {
-      this.$el.querySelector('form').submit();
-    },
-  },
+      removeRecaptchaScript() {
+        if (this.script instanceof Element) this.script.remove();
+      },
 
-  watch: {
-    html() {
-      this.appendRecaptchaScript();
-    },
-  },
+      close() {
+        this.removeRecaptchaScript();
+        this.$emit('close');
+      },
 
-  mounted() {
-    window.recaptchaDialogCallback = this.submit.bind(this);
-  },
-};
+      submit() {
+        this.$el.querySelector('form').submit();
+      },
+    },
+  };
 </script>
 
 <template>
-<modal
-  kind="warning"
-  class="recaptcha-modal js-recaptcha-modal"
-  :hide-footer="true"
-  :title="__('Please solve the reCAPTCHA')"
-  @cancel="close"
->
-  <div slot="body">
-    <p>
-      {{__('We want to be sure it is you, please confirm you are not a robot.')}}
-    </p>
-    <div
-      ref="recaptcha"
-      v-html="html"
-    ></div>
-  </div>
-</modal>
+  <modal
+    kind="warning"
+    class="recaptcha-modal js-recaptcha-modal"
+    :hide-footer="true"
+    :title="__('Please solve the reCAPTCHA')"
+    @cancel="close"
+  >
+    <div slot="body">
+      <p>
+        {{ __('We want to be sure it is you, please confirm you are not a robot.') }}
+      </p>
+      <div
+        ref="recaptcha"
+        v-html="html"
+      >
+      </div>
+    </div>
+  </modal>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
index a5dfcd7ffee..8211d425b1f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue
@@ -24,7 +24,11 @@
     <i
       aria-label="toggle collapse"
       class="fa"
-      :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }"
-    />
+      :class="{
+        'fa-angle-double-right': !collapsed,
+        'fa-angle-double-left': collapsed
+      }"
+    >
+    </i>
   </button>
 </template>