Merge branch 'prettify-all-the-things-4' into 'master'

Prettify all the things (part 4)

See merge request gitlab-org/gitlab-ce!22253

42 files changed, 626 insertions, 631 deletions

diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue
index c68860d98ae..e707f44bf5a 100644
--- a/app/assets/javascripts/notes/components/note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/note_awards_list.vue
@@ -95,29 +95,20 @@ export default {
       return awardList.filter(award => award.user.id === this.getUserData.id).length;
     },
     awardTitle(awardsList) {
-      const hasReactionByCurrentUser = this.hasReactionByCurrentUser(
-        awardsList,
-      );
+      const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
       const TOOLTIP_NAME_COUNT = hasReactionByCurrentUser ? 9 : 10;
       let awardList = awardsList;
 
       // Filter myself from list if I am awarded.
       if (hasReactionByCurrentUser) {
-        awardList = awardList.filter(
-          award => award.user.id !== this.getUserData.id,
-        );
+        awardList = awardList.filter(award => award.user.id !== this.getUserData.id);
       }
 
       // Get only 9-10 usernames to show in tooltip text.
-      const namesToShow = awardList
-        .slice(0, TOOLTIP_NAME_COUNT)
-        .map(award => award.user.name);
+      const namesToShow = awardList.slice(0, TOOLTIP_NAME_COUNT).map(award => award.user.name);
 
       // Get the remaining list to use in `and x more` text.
-      const remainingAwardList = awardList.slice(
-        TOOLTIP_NAME_COUNT,
-        awardList.length,
-      );
+      const remainingAwardList = awardList.slice(TOOLTIP_NAME_COUNT, awardList.length);
 
       // Add myself to the begining of the list so title will start with You.
       if (hasReactionByCurrentUser) {
@@ -128,9 +119,7 @@ export default {
 
       // We have 10+ awarded user, join them with comma and add `and x more`.
       if (remainingAwardList.length) {
-        title = `${namesToShow.join(', ')}, and ${
-          remainingAwardList.length
-        } more.`;
+        title = `${namesToShow.join(', ')}, and ${remainingAwardList.length} more.`;
       } else if (namesToShow.length > 1) {
         // Join all names with comma but not the last one, it will be added with and text.
         title = namesToShow.slice(0, namesToShow.length - 1).join(', ');
@@ -170,9 +159,7 @@ export default {
         awardName: parsedName,
       };
 
-      this.toggleAwardRequest(data).catch(() =>
-        Flash('Something went wrong on our end.'),
-      );
+      this.toggleAwardRequest(data).catch(() => Flash('Something went wrong on our end.'));
     },
   },
 };
diff --git a/app/assets/javascripts/notes/stores/collapse_utils.js b/app/assets/javascripts/notes/stores/collapse_utils.js
index fa4a1c56b20..4532226aa07 100644
--- a/app/assets/javascripts/notes/stores/collapse_utils.js
+++ b/app/assets/javascripts/notes/stores/collapse_utils.js
@@ -68,10 +68,7 @@ export const collapseSystemNotes = notes => {
         lastDescriptionSystemNote = note;
         lastDescriptionSystemNoteIndex = acc.length;
       } else if (lastDescriptionSystemNote) {
-        const timeDifferenceMinutes = getTimeDifferenceMinutes(
-          lastDescriptionSystemNote,
-          note,
-        );
+        const timeDifferenceMinutes = getTimeDifferenceMinutes(lastDescriptionSystemNote, note);
 
         // are they less than 10 minutes appart?
         if (timeDifferenceMinutes > 10) {
diff --git a/app/assets/javascripts/notes/stores/index.js b/app/assets/javascripts/notes/stores/index.js
index f105b7d0d11..d41b02b4a4b 100644
--- a/app/assets/javascripts/notes/stores/index.js
+++ b/app/assets/javascripts/notes/stores/index.js
@@ -4,5 +4,4 @@ import notesModule from './modules';
 
 Vue.use(Vuex);
 
-export default () =>
-  new Vuex.Store(notesModule());
+export default () => new Vuex.Store(notesModule());
diff --git a/app/assets/javascripts/performance_bar/components/simple_metric.vue b/app/assets/javascripts/performance_bar/components/simple_metric.vue
index 760ea8fe1e6..7a558558c4d 100644
--- a/app/assets/javascripts/performance_bar/components/simple_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/simple_metric.vue
@@ -1,29 +1,29 @@
 <script>
-  export default {
-    props: {
-      currentRequest: {
-        type: Object,
-        required: true,
-      },
-      metric: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    currentRequest: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      duration() {
-        return (
-          this.currentRequest.details[this.metric] &&
-          this.currentRequest.details[this.metric].duration
-        );
-      },
-      calls() {
-        return (
-          this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
-        );
-      },
+    metric: {
+      type: String,
+      required: true,
     },
-  };
+  },
+  computed: {
+    duration() {
+      return (
+        this.currentRequest.details[this.metric] &&
+        this.currentRequest.details[this.metric].duration
+      );
+    },
+    calls() {
+      return (
+        this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
+      );
+    },
+  },
+};
 </script>
 <template>
   <div
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index 6e5ef0ac0b2..29bfb7ee5df 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -9,8 +9,7 @@ export default ({ container }) =>
       performanceBarApp: () => import('./components/performance_bar_app.vue'),
     },
     data() {
-      const performanceBarData = document.querySelector(this.$options.el)
-        .dataset;
+      const performanceBarData = document.querySelector(this.$options.el).dataset;
       const store = new PerformanceBarStore();
 
       return {
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 60d9ba62570..3a496fa2ed8 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -11,8 +11,10 @@ export default class PerformanceBarService {
 
   static registerInterceptor(peekUrl, callback) {
     const interceptor = response => {
-      const [fireCallback, requestId, requestUrl] =
-        PerformanceBarService.callbackParams(response, peekUrl);
+      const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
+        response,
+        peekUrl,
+      );
 
       if (fireCallback) {
         callback(requestId, requestUrl);
@@ -30,10 +32,7 @@ export default class PerformanceBarService {
 
   static removeInterceptor(interceptor) {
     axios.interceptors.response.eject(interceptor);
-    Vue.http.interceptors = _.without(
-      Vue.http.interceptors,
-      vueResourceInterceptor,
-    );
+    Vue.http.interceptors = _.without(Vue.http.interceptors, vueResourceInterceptor);
   }
 
   static callbackParams(response, peekUrl) {
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index c6b2f55243c..031e774d533 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -32,8 +32,6 @@ export default class PerformanceBarStore {
   }
 
   canTrackRequest(requestUrl) {
-    return (
-      this.requests.filter(request => request.url === requestUrl).length < 2
-    );
+    return this.requests.filter(request => request.url === requestUrl).length < 2;
   }
 }
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
index 974629fa2af..99b57f4c9d5 100644
--- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -1,78 +1,78 @@
 <script>
-  import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-  import { __, s__, sprintf } from '~/locale';
-  import csrf from '~/lib/utils/csrf';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import { __, s__, sprintf } from '~/locale';
+import csrf from '~/lib/utils/csrf';
 
-  export default {
-    components: {
-      DeprecatedModal,
+export default {
+  components: {
+    DeprecatedModal,
+  },
+  props: {
+    actionUrl: {
+      type: String,
+      required: true,
     },
-    props: {
-      actionUrl: {
-        type: String,
-        required: true,
-      },
-      confirmWithPassword: {
-        type: Boolean,
-        required: true,
-      },
-      username: {
-        type: String,
-        required: true,
-      },
+    confirmWithPassword: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        enteredPassword: '',
-        enteredUsername: '',
-      };
+    username: {
+      type: String,
+      required: true,
     },
-    computed: {
-      csrfToken() {
-        return csrf.token;
-      },
-      inputLabel() {
-        let confirmationValue;
-        if (this.confirmWithPassword) {
-          confirmationValue = __('password');
-        } else {
-          confirmationValue = __('username');
-        }
+  },
+  data() {
+    return {
+      enteredPassword: '',
+      enteredUsername: '',
+    };
+  },
+  computed: {
+    csrfToken() {
+      return csrf.token;
+    },
+    inputLabel() {
+      let confirmationValue;
+      if (this.confirmWithPassword) {
+        confirmationValue = __('password');
+      } else {
+        confirmationValue = __('username');
+      }
 
-        confirmationValue = `<code>${confirmationValue}</code>`;
+      confirmationValue = `<code>${confirmationValue}</code>`;
 
-        return sprintf(
-          s__('Profiles|Type your %{confirmationValue} to confirm:'),
-          { confirmationValue },
-          false,
-        );
-      },
-      text() {
-        return sprintf(
-          s__(`Profiles|
+      return sprintf(
+        s__('Profiles|Type your %{confirmationValue} to confirm:'),
+        { confirmationValue },
+        false,
+      );
+    },
+    text() {
+      return sprintf(
+        s__(`Profiles|
 You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account.
 Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
-          {
-            yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
-            deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
-          },
-          false,
-        );
-      },
+        {
+          yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
+          deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
+        },
+        false,
+      );
     },
-    methods: {
-      canSubmit() {
-        if (this.confirmWithPassword) {
-          return this.enteredPassword !== '';
-        }
+  },
+  methods: {
+    canSubmit() {
+      if (this.confirmWithPassword) {
+        return this.enteredPassword !== '';
+      }
 
-        return this.enteredUsername === this.username;
-      },
-      onSubmit() {
-        this.$refs.form.submit();
-      },
+      return this.enteredUsername === this.username;
+    },
+    onSubmit() {
+      this.$refs.form.submit();
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
index af134881f31..befe91c332f 100644
--- a/app/assets/javascripts/profile/gl_crop.js
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -4,20 +4,35 @@ import $ from 'jquery';
 import 'cropper';
 import _ from 'underscore';
 
-((global) => {
+(global => {
   // Matches everything but the file name
   const FILENAMEREGEX = /^.*[\\\/]/;
 
   class GitLabCrop {
-    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
-        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
+    constructor(
+      input,
+      {
+        filename,
+        previewImage,
+        modalCrop,
+        pickImageEl,
+        uploadImageBtn,
+        modalCropImg,
+        exportWidth = 200,
+        exportHeight = 200,
+        cropBoxWidth = 200,
+        cropBoxHeight = 200,
+      } = {},
+    ) {
       this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
       this.onModalHide = this.onModalHide.bind(this);
       this.onModalShow = this.onModalShow.bind(this);
       this.onPickImageClick = this.onPickImageClick.bind(this);
       this.fileInput = $(input);
       this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
-      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `${this.fileInput.attr('id')}-trigger`);
+      this.fileInput
+        .attr('name', `${this.fileInput.attr('name')}-trigger`)
+        .attr('id', `${this.fileInput.attr('id')}-trigger`);
       this.exportWidth = exportWidth;
       this.exportHeight = exportHeight;
       this.cropBoxWidth = cropBoxWidth;
@@ -59,7 +74,7 @@ import _ from 'underscore';
         btn = this;
         return _this.onActionBtnClick(btn);
       });
-      return this.croppedImageBlob = null;
+      return (this.croppedImageBlob = null);
     }
 
     onPickImageClick() {
@@ -94,9 +109,9 @@ import _ from 'underscore';
             width: cropBoxWidth,
             height: cropBoxHeight,
             left: (container.width - cropBoxWidth) / 2,
-            top: (container.height - cropBoxHeight) / 2
+            top: (container.height - cropBoxHeight) / 2,
           });
-        }
+        },
       });
     }
 
@@ -116,7 +131,7 @@ import _ from 'underscore';
       var data, result;
       data = $(btn).data();
       if (this.modalCropImg.data('cropper') && data.method) {
-        return result = this.modalCropImg.cropper(data.method, data.option);
+        return (result = this.modalCropImg.cropper(data.method, data.option));
       }
     }
 
@@ -127,7 +142,7 @@ import _ from 'underscore';
     readFile(input) {
       var _this, reader;
       _this = this;
-      reader = new FileReader;
+      reader = new FileReader();
       reader.onload = () => {
         _this.modalCropImg.attr('src', reader.result);
         return _this.modalCrop.modal('show');
@@ -145,7 +160,7 @@ import _ from 'underscore';
         array.push(binary.charCodeAt(i));
       }
       return new Blob([new Uint8Array(array)], {
-        type: 'image/png'
+        type: 'image/png',
       });
     }
 
@@ -157,11 +172,13 @@ import _ from 'underscore';
     }
 
     setBlob() {
-      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
-        width: 200,
-        height: 200
-      }).toDataURL('image/png');
-      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
+      this.dataURL = this.modalCropImg
+        .cropper('getCroppedCanvas', {
+          width: 200,
+          height: 200,
+        })
+        .toDataURL('image/png');
+      return (this.croppedImageBlob = this.dataURLtoBlob(this.dataURL));
     }
 
     getBlob() {
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index e49c67ffb5c..8704a655b28 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -26,11 +26,7 @@ export default class Profile {
   }
 
   bindEvents() {
-    $('.js-preferences-form').on(
-      'change.preference',
-      'input[type=radio]',
-      this.submitForm,
-    );
+    $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
     $('#user_notification_email').on('change', this.submitForm);
     $('#user_notified_of_own_activity').on('change', this.submitForm);
     this.form.on('submit', this.onSubmitForm);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index b601b19e7be..48343c8ba0a 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -46,8 +46,12 @@ export default class ProtectedBranchCreate {
   onSelect() {
     // Enable submit button
     const $branchInput = this.$form.find('input[name="protected_branch[name]"]');
-    const $allowedToMergeInput = this.$form.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
-    const $allowedToPushInput = this.$form.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
+    const $allowedToMergeInput = this.$form.find(
+      'input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]',
+    );
+    const $allowedToPushInput = this.$form.find(
+      'input[name="protected_branch[push_access_levels_attributes][0][access_level]"]',
+    );
     const completedForm = !(
       $branchInput.val() &&
       $allowedToMergeInput.length &&
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 54560d08ad7..5bc08f60d16 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -29,8 +29,12 @@ export default class ProtectedBranchEdit {
   }
 
   onSelect() {
-    const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
-    const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+    const $allowedToMergeInput = this.$wrap.find(
+      `input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`,
+    );
+    const $allowedToPushInput = this.$wrap.find(
+      `input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`,
+    );
 
     // Do not update if one dropdown has not selected any option
     if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
@@ -38,25 +42,36 @@ export default class ProtectedBranchEdit {
     this.$allowedToMergeDropdown.disable();
     this.$allowedToPushDropdown.disable();
 
-    axios.patch(this.$wrap.data('url'), {
-      protected_branch: {
-        merge_access_levels_attributes: [{
-          id: this.$allowedToMergeDropdown.data('accessLevelId'),
-          access_level: $allowedToMergeInput.val(),
-        }],
-        push_access_levels_attributes: [{
-          id: this.$allowedToPushDropdown.data('accessLevelId'),
-          access_level: $allowedToPushInput.val(),
-        }],
-      },
-    }).then(() => {
-      this.$allowedToMergeDropdown.enable();
-      this.$allowedToPushDropdown.enable();
-    }).catch(() => {
-      this.$allowedToMergeDropdown.enable();
-      this.$allowedToPushDropdown.enable();
-
-      flash('Failed to update branch!', 'alert', document.querySelector('.js-protected-branches-list'));
-    });
+    axios
+      .patch(this.$wrap.data('url'), {
+        protected_branch: {
+          merge_access_levels_attributes: [
+            {
+              id: this.$allowedToMergeDropdown.data('accessLevelId'),
+              access_level: $allowedToMergeInput.val(),
+            },
+          ],
+          push_access_levels_attributes: [
+            {
+              id: this.$allowedToPushDropdown.data('accessLevelId'),
+              access_level: $allowedToPushInput.val(),
+            },
+          ],
+        },
+      })
+      .then(() => {
+        this.$allowedToMergeDropdown.enable();
+        this.$allowedToPushDropdown.enable();
+      })
+      .catch(() => {
+        this.$allowedToMergeDropdown.enable();
+        this.$allowedToPushDropdown.enable();
+
+        flash(
+          'Failed to update branch!',
+          'alert',
+          document.querySelector('.js-protected-branches-list'),
+        );
+      });
   }
 }
diff --git a/app/assets/javascripts/protected_tags/protected_tag_create.js b/app/assets/javascripts/protected_tags/protected_tag_create.js
index 2f8116df0d2..fddf2674cbb 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_create.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_create.js
@@ -40,7 +40,9 @@ export default class ProtectedTagCreate {
     const $tagInput = this.$form.find('input[name="protected_tag[name]"]');
     const $allowedToCreateInput = this.$form.find('#create_access_levels_attributes');
 
-    this.$form.find('input[type="submit"]').prop('disabled', !($tagInput.val() && $allowedToCreateInput.length));
+    this.$form
+      .find('input[type="submit"]')
+      .prop('disabled', !($tagInput.val() && $allowedToCreateInput.length));
   }
 
   static getProtectedTags(term, callback) {
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
index 8687b2a4044..c52497e62f2 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_edit.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -21,26 +21,33 @@ export default class ProtectedTagEdit {
   }
 
   onSelect() {
-    const $allowedToCreateInput = this.$wrap.find(`input[name="${this.$allowedToCreateDropdownButton.data('fieldName')}"]`);
+    const $allowedToCreateInput = this.$wrap.find(
+      `input[name="${this.$allowedToCreateDropdownButton.data('fieldName')}"]`,
+    );
 
     // Do not update if one dropdown has not selected any option
     if (!$allowedToCreateInput.length) return;
 
     this.$allowedToCreateDropdownButton.disable();
 
-    axios.patch(this.$wrap.data('url'), {
-      protected_tag: {
-        create_access_levels_attributes: [{
-          id: this.$allowedToCreateDropdownButton.data('accessLevelId'),
-          access_level: $allowedToCreateInput.val(),
-        }],
-      },
-    }).then(() => {
-      this.$allowedToCreateDropdownButton.enable();
-    }).catch(() => {
-      this.$allowedToCreateDropdownButton.enable();
-
-      flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
-    });
+    axios
+      .patch(this.$wrap.data('url'), {
+        protected_tag: {
+          create_access_levels_attributes: [
+            {
+              id: this.$allowedToCreateDropdownButton.data('accessLevelId'),
+              access_level: $allowedToCreateInput.val(),
+            },
+          ],
+        },
+      })
+      .then(() => {
+        this.$allowedToCreateDropdownButton.enable();
+      })
+      .catch(() => {
+        this.$allowedToCreateDropdownButton.enable();
+
+        flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
+      });
   }
 }
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 7e2287ac4db..9dd1c87a87d 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,42 +1,35 @@
 <script>
-  import { mapGetters, mapActions } from 'vuex';
-  import Flash from '../../flash';
-  import store from '../stores';
-  import collapsibleContainer from './collapsible_container.vue';
-  import { errorMessages, errorMessagesTypes } from '../constants';
+import { mapGetters, mapActions } from 'vuex';
+import Flash from '../../flash';
+import store from '../stores';
+import collapsibleContainer from './collapsible_container.vue';
+import { errorMessages, errorMessagesTypes } from '../constants';
 
-  export default {
-    name: 'RegistryListApp',
-    components: {
-      collapsibleContainer,
+export default {
+  name: 'RegistryListApp',
+  components: {
+    collapsibleContainer,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-    },
-    store,
-    computed: {
-      ...mapGetters([
-        'isLoading',
-        'repos',
-      ]),
-    },
-    created() {
-      this.setMainEndpoint(this.endpoint);
-    },
-    mounted() {
-      this.fetchRepos()
-        .catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
-    },
-    methods: {
-      ...mapActions([
-        'setMainEndpoint',
-        'fetchRepos',
-      ]),
-    },
-  };
+  },
+  store,
+  computed: {
+    ...mapGetters(['isLoading', 'repos']),
+  },
+  created() {
+    this.setMainEndpoint(this.endpoint);
+  },
+  mounted() {
+    this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
+  },
+  methods: {
+    ...mapActions(['setMainEndpoint', 'fetchRepos']),
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index d9bf41924d1..501b2625ae5 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -1,62 +1,59 @@
 <script>
-  import { mapActions } from 'vuex';
-  import Flash from '../../flash';
-  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import tableRegistry from './table_registry.vue';
-  import { errorMessages, errorMessagesTypes } from '../constants';
-  import { __ } from '../../locale';
+import { mapActions } from 'vuex';
+import Flash from '../../flash';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import tableRegistry from './table_registry.vue';
+import { errorMessages, errorMessagesTypes } from '../constants';
+import { __ } from '../../locale';
 
-  export default {
-    name: 'CollapsibeContainerRegisty',
-    components: {
-      clipboardButton,
-      tableRegistry,
+export default {
+  name: 'CollapsibeContainerRegisty',
+  components: {
+    clipboardButton,
+    tableRegistry,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    repo: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
-    },
-    props: {
-      repo: {
-        type: Object,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        isOpen: false,
-      };
-    },
-    methods: {
-      ...mapActions([
-        'fetchRepos',
-        'fetchList',
-        'deleteRepo',
-      ]),
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  methods: {
+    ...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']),
 
-      toggleRepo() {
-        this.isOpen = !this.isOpen;
+    toggleRepo() {
+      this.isOpen = !this.isOpen;
 
-        if (this.isOpen) {
-          this.fetchList({ repo: this.repo })
-          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
-        }
-      },
+      if (this.isOpen) {
+        this.fetchList({ repo: this.repo }).catch(() =>
+          this.showError(errorMessagesTypes.FETCH_REGISTRY),
+        );
+      }
+    },
 
-      handleDeleteRepository() {
-        this.deleteRepo(this.repo)
-          .then(() => {
-            Flash(__('This container registry has been scheduled for deletion.'), 'notice');
-            this.fetchRepos();
-          })
-          .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
-      },
+    handleDeleteRepository() {
+      this.deleteRepo(this.repo)
+        .then(() => {
+          Flash(__('This container registry has been scheduled for deletion.'), 'notice');
+          this.fetchRepos();
+        })
+        .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
+    },
 
-      showError(message) {
-        Flash(errorMessages[message]);
-      },
+    showError(message) {
+      Flash(errorMessages[message]);
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index fafb35bd69a..bb6c977fc63 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -1,66 +1,62 @@
 <script>
-  import { mapActions } from 'vuex';
-  import { n__ } from '../../locale';
-  import Flash from '../../flash';
-  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-  import tablePagination from '../../vue_shared/components/table_pagination.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import timeagoMixin from '../../vue_shared/mixins/timeago';
-  import { errorMessages, errorMessagesTypes } from '../constants';
-  import { numberToHumanSize } from '../../lib/utils/number_utils';
+import { mapActions } from 'vuex';
+import { n__ } from '../../locale';
+import Flash from '../../flash';
+import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import timeagoMixin from '../../vue_shared/mixins/timeago';
+import { errorMessages, errorMessagesTypes } from '../constants';
+import { numberToHumanSize } from '../../lib/utils/number_utils';
 
-  export default {
-    components: {
-      clipboardButton,
-      tablePagination,
+export default {
+  components: {
+    clipboardButton,
+    tablePagination,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    repo: {
+      type: Object,
+      required: true,
     },
-    directives: {
-      tooltip,
+  },
+  computed: {
+    shouldRenderPagination() {
+      return this.repo.pagination.total > this.repo.pagination.perPage;
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      repo: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      shouldRenderPagination() {
-        return this.repo.pagination.total > this.repo.pagination.perPage;
-      },
-    },
-    methods: {
-      ...mapActions([
-        'fetchList',
-        'deleteRegistry',
-      ]),
+  },
+  methods: {
+    ...mapActions(['fetchList', 'deleteRegistry']),
 
-      layers(item) {
-        return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
-      },
+    layers(item) {
+      return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
+    },
 
-      formatSize(size) {
-        return numberToHumanSize(size);
-      },
+    formatSize(size) {
+      return numberToHumanSize(size);
+    },
 
-      handleDeleteRegistry(registry) {
-        this.deleteRegistry(registry)
-          .then(() => this.fetchList({ repo: this.repo }))
-          .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
-      },
+    handleDeleteRegistry(registry) {
+      this.deleteRegistry(registry)
+        .then(() => this.fetchList({ repo: this.repo }))
+        .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
+    },
 
-      onPageChange(pageNumber) {
-        this.fetchList({ repo: this.repo, page: pageNumber })
-          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
-      },
+    onPageChange(pageNumber) {
+      this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
+        this.showError(errorMessagesTypes.FETCH_REGISTRY),
+      );
+    },
 
-      showError(message) {
-        Flash(errorMessages[message]);
-      },
+    showError(message) {
+      Flash(errorMessages[message]);
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index e15cd94a915..025afefe7f0 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@@ -4,22 +4,23 @@ import Translate from '../vue_shared/translate';
 
 Vue.use(Translate);
 
-export default () => new Vue({
-  el: '#js-vue-registry-images',
-  components: {
-    registryApp,
-  },
-  data() {
-    const { dataset } = document.querySelector(this.$options.el);
-    return {
-      endpoint: dataset.endpoint,
-    };
-  },
-  render(createElement) {
-    return createElement('registry-app', {
-      props: {
-        endpoint: this.endpoint,
-      },
-    });
-  },
-});
+export default () =>
+  new Vue({
+    el: '#js-vue-registry-images',
+    components: {
+      registryApp,
+    },
+    data() {
+      const { dataset } = document.querySelector(this.$options.el);
+      return {
+        endpoint: dataset.endpoint,
+      };
+    },
+    render(createElement) {
+      return createElement('registry-app', {
+        props: {
+          endpoint: this.endpoint,
+        },
+      });
+    },
+  });
diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/stores/mutations.js
index 208c3c39866..69c051cd2d6 100644
--- a/app/assets/javascripts/registry/stores/mutations.js
+++ b/app/assets/javascripts/registry/stores/mutations.js
@@ -2,7 +2,6 @@ import * as types from './mutation_types';
 import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils';
 
 export default {
-
   [types.SET_MAIN_ENDPOINT](state, endpoint) {
     Object.assign(state, { endpoint });
   },
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index b373d83a44b..bd204503cc7 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -1,79 +1,72 @@
 <script>
-  import { mapActions, mapGetters, mapState } from 'vuex';
-  import { s__ } from '~/locale';
-  import { componentNames } from './issue_body';
-  import ReportSection from './report_section.vue';
-  import SummaryRow from './summary_row.vue';
-  import IssuesList from './issues_list.vue';
-  import Modal from './modal.vue';
-  import createStore from '../store';
-  import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { s__ } from '~/locale';
+import { componentNames } from './issue_body';
+import ReportSection from './report_section.vue';
+import SummaryRow from './summary_row.vue';
+import IssuesList from './issues_list.vue';
+import Modal from './modal.vue';
+import createStore from '../store';
+import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
 
-  export default {
-    name: 'GroupedTestReportsApp',
-    store: createStore(),
-    components: {
-      ReportSection,
-      SummaryRow,
-      IssuesList,
-      Modal,
+export default {
+  name: 'GroupedTestReportsApp',
+  store: createStore(),
+  components: {
+    ReportSection,
+    SummaryRow,
+    IssuesList,
+    Modal,
+  },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-    },
-    componentNames,
-    computed: {
-      ...mapState([
-        'reports',
-        'isLoading',
-        'hasError',
-        'summary',
-      ]),
-      ...mapState({
-        modalTitle: state => state.modal.title || '',
-        modalData: state => state.modal.data || {},
-      }),
-      ...mapGetters([
-        'summaryStatus',
-      ]),
-      groupedSummaryText() {
-        if (this.isLoading) {
-          return s__('Reports|Test summary results are being parsed');
-        }
+  },
+  componentNames,
+  computed: {
+    ...mapState(['reports', 'isLoading', 'hasError', 'summary']),
+    ...mapState({
+      modalTitle: state => state.modal.title || '',
+      modalData: state => state.modal.data || {},
+    }),
+    ...mapGetters(['summaryStatus']),
+    groupedSummaryText() {
+      if (this.isLoading) {
+        return s__('Reports|Test summary results are being parsed');
+      }
 
-        if (this.hasError) {
-          return s__('Reports|Test summary failed loading results');
-        }
+      if (this.hasError) {
+        return s__('Reports|Test summary failed loading results');
+      }
 
-        return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
-      },
+      return summaryTextBuilder(s__('Reports|Test summary'), this.summary);
     },
-    created() {
-      this.setEndpoint(this.endpoint);
+  },
+  created() {
+    this.setEndpoint(this.endpoint);
 
-      this.fetchReports();
+    this.fetchReports();
+  },
+  methods: {
+    ...mapActions(['setEndpoint', 'fetchReports']),
+    reportText(report) {
+      const summary = report.summary || {};
+      return reportTextBuilder(report.name, summary);
+    },
+    getReportIcon(report) {
+      return statusIcon(report.status);
     },
-    methods: {
-      ...mapActions(['setEndpoint', 'fetchReports']),
-      reportText(report) {
-        const summary = report.summary || {};
-        return reportTextBuilder(report.name, summary);
-      },
-      getReportIcon(report) {
-        return statusIcon(report.status);
-      },
-      shouldRenderIssuesList(report) {
-        return (
-          report.existing_failures.length > 0 ||
-          report.new_failures.length > 0 ||
-          report.resolved_failures.length > 0
-        );
-      },
+    shouldRenderIssuesList(report) {
+      return (
+        report.existing_failures.length > 0 ||
+        report.new_failures.length > 0 ||
+        report.resolved_failures.length > 0
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <report-section
diff --git a/app/assets/javascripts/reports/components/issue_status_icon.vue b/app/assets/javascripts/reports/components/issue_status_icon.vue
index 85811698a37..6e143c4f98c 100644
--- a/app/assets/javascripts/reports/components/issue_status_icon.vue
+++ b/app/assets/javascripts/reports/components/issue_status_icon.vue
@@ -1,10 +1,6 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
-import {
-  STATUS_FAILED,
-  STATUS_NEUTRAL,
-  STATUS_SUCCESS,
-} from '../constants';
+import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '../constants';
 
 export default {
   name: 'IssueStatusIcon',
diff --git a/app/assets/javascripts/reports/components/issues_list.vue b/app/assets/javascripts/reports/components/issues_list.vue
index df42201b5de..3b425ee2fed 100644
--- a/app/assets/javascripts/reports/components/issues_list.vue
+++ b/app/assets/javascripts/reports/components/issues_list.vue
@@ -1,10 +1,6 @@
 <script>
 import IssuesBlock from '~/reports/components/report_issues.vue';
-import {
-  STATUS_SUCCESS,
-  STATUS_FAILED,
-  STATUS_NEUTRAL,
-} from '~/reports/constants';
+import { STATUS_SUCCESS, STATUS_FAILED, STATUS_NEUTRAL } from '~/reports/constants';
 
 /**
  * Renders block of issues
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
index acc5c6d85e2..5f9e4072b2d 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -1,27 +1,27 @@
 <script>
-  import Modal from '~/vue_shared/components/gl_modal.vue';
-  import LoadingButton from '~/vue_shared/components/loading_button.vue';
-  import CodeBlock from '~/vue_shared/components/code_block.vue';
-  import { fieldTypes } from '../constants';
+import Modal from '~/vue_shared/components/gl_modal.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import CodeBlock from '~/vue_shared/components/code_block.vue';
+import { fieldTypes } from '../constants';
 
-  export default {
-    components: {
-      Modal,
-      LoadingButton,
-      CodeBlock,
+export default {
+  components: {
+    Modal,
+    LoadingButton,
+    CodeBlock,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      modalData: {
-        type: Object,
-        required: true,
-      },
+    modalData: {
+      type: Object,
+      required: true,
     },
-    fieldTypes,
-  };
+  },
+  fieldTypes,
+};
 </script>
 <template>
   <modal
diff --git a/app/assets/javascripts/reports/components/test_issue_body.vue b/app/assets/javascripts/reports/components/test_issue_body.vue
index cd443a49b52..1a87822fcc3 100644
--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -1,28 +1,28 @@
 <script>
-  import { mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
-  export default {
-    name: 'TestIssueBody',
-    props: {
-      issue: {
-        type: Object,
-        required: true,
-      },
-      // failed || success
-      status: {
-        type: String,
-        required: true,
-      },
-      isNew: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+export default {
+  name: 'TestIssueBody',
+  props: {
+    issue: {
+      type: Object,
+      required: true,
     },
-    methods: {
-      ...mapActions(['openModal']),
+    // failed || success
+    status: {
+      type: String,
+      required: true,
     },
-  };
+    isNew: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    ...mapActions(['openModal']),
+  },
+};
 </script>
 <template>
   <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
diff --git a/app/assets/javascripts/reports/store/actions.js b/app/assets/javascripts/reports/store/actions.js
index acabcc1d193..db8ab5ccb80 100644
--- a/app/assets/javascripts/reports/store/actions.js
+++ b/app/assets/javascripts/reports/store/actions.js
@@ -43,9 +43,11 @@ export const fetchReports = ({ state, dispatch }) => {
     },
     data: state.endpoint,
     method: 'getReports',
-    successCallback: ({ data, status }) => dispatch('receiveReportsSuccess', {
-      data, status,
-    }),
+    successCallback: ({ data, status }) =>
+      dispatch('receiveReportsSuccess', {
+        data,
+        status,
+      }),
     errorCallback: () => dispatch('receiveReportsError'),
   });
 
diff --git a/app/assets/javascripts/reports/store/index.js b/app/assets/javascripts/reports/store/index.js
index 9d8f7dc3b74..467c692b438 100644
--- a/app/assets/javascripts/reports/store/index.js
+++ b/app/assets/javascripts/reports/store/index.js
@@ -7,9 +7,10 @@ import state from './state';
 
 Vue.use(Vuex);
 
-export default () => new Vuex.Store({
-  actions,
-  mutations,
-  getters,
-  state: state(),
-});
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    getters,
+    state: state(),
+  });
diff --git a/app/assets/javascripts/reports/store/mutation_types.js b/app/assets/javascripts/reports/store/mutation_types.js
index 82bda31df5d..599d4862dfe 100644
--- a/app/assets/javascripts/reports/store/mutation_types.js
+++ b/app/assets/javascripts/reports/store/mutation_types.js
@@ -4,4 +4,3 @@ export const REQUEST_REPORTS = 'REQUEST_REPORTS';
 export const RECEIVE_REPORTS_SUCCESS = 'RECEIVE_REPORTS_SUCCESS';
 export const RECEIVE_REPORTS_ERROR = 'RECEIVE_REPORTS_ERROR';
 export const SET_ISSUE_MODAL_DATA = 'SET_ISSUE_MODAL_DATA';
-
diff --git a/app/assets/javascripts/reports/store/mutations.js b/app/assets/javascripts/reports/store/mutations.js
index b88bff97075..2a37f5b74fa 100644
--- a/app/assets/javascripts/reports/store/mutations.js
+++ b/app/assets/javascripts/reports/store/mutations.js
@@ -19,7 +19,6 @@ export default {
 
     state.status = response.status;
     state.reports = response.suites;
-
   },
   [types.RECEIVE_REPORTS_ERROR](state) {
     state.isLoading = false;
@@ -36,7 +35,7 @@ export default {
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     state.modal.title = payload.issue.name;
 
-    Object.keys(payload.issue).forEach((key) => {
+    Object.keys(payload.issue).forEach(key => {
       if (Object.prototype.hasOwnProperty.call(state.modal.data, key)) {
         state.modal.data[key] = {
           ...state.modal.data[key],
diff --git a/app/assets/javascripts/reports/store/state.js b/app/assets/javascripts/reports/store/state.js
index 4cab2e27a16..5484900276c 100644
--- a/app/assets/javascripts/reports/store/state.js
+++ b/app/assets/javascripts/reports/store/state.js
@@ -57,5 +57,4 @@ export default () => ({
       },
     },
   },
-
 });
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
index 123c92aff64..cfa7029b388 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue
@@ -69,7 +69,8 @@ export default {
         this.loading = false;
       }
 
-      this.mediator.saveAssignees(this.field)
+      this.mediator
+        .saveAssignees(this.field)
         .then(setLoadingFalse.bind(this))
         .catch(() => {
           setLoadingFalse();
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 2b8d6207dea..439e8a69df0 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -56,11 +56,7 @@ export default {
         .update('issue', { confidential })
         .then(() => window.location.reload())
         .catch(() => {
-          Flash(
-            __(
-              'Something went wrong trying to change the confidentiality of this issue',
-            ),
-          );
+          Flash(__('Something went wrong trying to change the confidentiality of this issue'));
         });
     },
   },
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index cdff4105335..48a2b9194aa 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -34,11 +34,7 @@ export default {
       required: true,
       type: Object,
       validator(mediatorObject) {
-        return (
-          mediatorObject.service &&
-          mediatorObject.service.update &&
-          mediatorObject.store
-        );
+        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
       },
     },
   },
@@ -67,8 +63,7 @@ export default {
 
   methods: {
     toggleForm() {
-      this.mediator.store.isLockDialogOpen = !this.mediator.store
-        .isLockDialogOpen;
+      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
     },
 
     updateLockedAttribute(locked) {
@@ -79,9 +74,14 @@ export default {
         .then(() => window.location.reload())
         .catch(() =>
           Flash(
-            sprintf(__('Something went wrong trying to change the locked state of this %{issuableDisplayName}'), {
-              issuableDisplayName: this.issuableDisplayName,
-            }),
+            sprintf(
+              __(
+                'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
+              ),
+              {
+                issuableDisplayName: this.issuableDisplayName,
+              },
+            ),
           ),
         );
     },
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 286a16f7bbf..11b5dbe5f8e 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -1,78 +1,78 @@
 <script>
-  import { __, n__, sprintf } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import { __, n__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    userAvatarImage,
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    components: {
-      userAvatarImage,
+    participants: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-    props: {
-      loading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      participants: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      numberOfLessParticipants: {
-        type: Number,
-        required: false,
-        default: 7,
-      },
+    numberOfLessParticipants: {
+      type: Number,
+      required: false,
+      default: 7,
     },
-    data() {
-      return {
-        isShowingMoreParticipants: false,
-      };
+  },
+  data() {
+    return {
+      isShowingMoreParticipants: false,
+    };
+  },
+  computed: {
+    lessParticipants() {
+      return this.participants.slice(0, this.numberOfLessParticipants);
     },
-    computed: {
-      lessParticipants() {
-        return this.participants.slice(0, this.numberOfLessParticipants);
-      },
-      visibleParticipants() {
-        return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
-      },
-      hasMoreParticipants() {
-        return this.participants.length > this.numberOfLessParticipants;
-      },
-      toggleLabel() {
-        let label = '';
-        if (this.isShowingMoreParticipants) {
-          label = __('- show less');
-        } else {
-          label = sprintf(__('+ %{moreCount} more'), {
-            moreCount: this.participants.length - this.numberOfLessParticipants,
-          });
-        }
+    visibleParticipants() {
+      return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
+    },
+    hasMoreParticipants() {
+      return this.participants.length > this.numberOfLessParticipants;
+    },
+    toggleLabel() {
+      let label = '';
+      if (this.isShowingMoreParticipants) {
+        label = __('- show less');
+      } else {
+        label = sprintf(__('+ %{moreCount} more'), {
+          moreCount: this.participants.length - this.numberOfLessParticipants,
+        });
+      }
 
-        return label;
-      },
-      participantLabel() {
-        return sprintf(
-          n__('%{count} participant', '%{count} participants', this.participants.length),
-          { count: this.loading ? '' : this.participantCount },
-        );
-      },
-      participantCount() {
-        return this.participants.length;
-      },
+      return label;
+    },
+    participantLabel() {
+      return sprintf(
+        n__('%{count} participant', '%{count} participants', this.participants.length),
+        { count: this.loading ? '' : this.participantCount },
+      );
+    },
+    participantCount() {
+      return this.participants.length;
+    },
+  },
+  methods: {
+    toggleMoreParticipants() {
+      this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
     },
-    methods: {
-      toggleMoreParticipants() {
-        this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
-      },
-      onClickCollapsedIcon() {
-        this.$emit('toggleSidebar');
-      },
+    onClickCollapsedIcon() {
+      this.$emit('toggleSidebar');
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
index 5c1ead1a8ac..4ac515e552a 100644
--- a/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/sidebar_participants.vue
@@ -1,23 +1,23 @@
 <script>
-  import Store from '../../stores/sidebar_store';
-  import participants from './participants.vue';
+import Store from '../../stores/sidebar_store';
+import participants from './participants.vue';
 
-  export default {
-    components: {
-      participants,
+export default {
+  components: {
+    participants,
+  },
+  props: {
+    mediator: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mediator: {
-        type: Object,
-        required: true,
-      },
-    },
-    data() {
-      return {
-        store: new Store(),
-      };
-    },
-  };
+  },
+  data() {
+    return {
+      store: new Store(),
+    };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
index 385717e7c1e..95a2c8cce6e 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue
@@ -21,10 +21,9 @@ export default {
   },
   methods: {
     onToggleSubscription() {
-      this.mediator.toggleSubscription()
-        .catch(() => {
-          Flash(__('Error occurred when toggling the notification subscription'));
-        });
+      this.mediator.toggleSubscription().catch(() => {
+        Flash(__('Error occurred when toggling the notification subscription'));
+      });
     },
   },
 };
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 19ec0f05a26..91909cd49b8 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -15,16 +15,22 @@ export default {
     },
     estimateText() {
       return sprintf(
-        s__('estimateCommand|%{slash_command} will update the estimated time with the latest command.'), {
+        s__(
+          'estimateCommand|%{slash_command} will update the estimated time with the latest command.',
+        ),
+        {
           slash_command: '<code>/estimate</code>',
-        }, false,
+        },
+        false,
       );
     },
     spendText() {
       return sprintf(
-        s__('spendCommand|%{slash_command} will update the sum of the time spent.'), {
+        s__('spendCommand|%{slash_command} will update the sum of the time spent.'),
+        {
           slash_command: '<code>/spend</code>',
-        }, false,
+        },
+        false,
       );
     },
   },
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
index 8660b0546cf..8e8b9f19b6e 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
@@ -26,7 +26,7 @@ export default {
   methods: {
     listenForQuickActions() {
       $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
-      eventHub.$on('timeTrackingUpdated', (data) => {
+      eventHub.$on('timeTrackingUpdated', data => {
         this.quickActionListened(null, data);
       });
     },
@@ -34,9 +34,7 @@ export default {
       const subscribedCommands = ['spend_time', 'time_estimate'];
       let changedCommands;
       if (data !== undefined) {
-        changedCommands = data.commands_changes
-          ? Object.keys(data.commands_changes)
-          : [];
+        changedCommands = data.commands_changes ? Object.keys(data.commands_changes) : [];
       } else {
         changedCommands = [];
       }
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index a6b3a674952..bc59774f0a8 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -41,9 +41,9 @@ export default {
   },
   computed: {
     buttonClasses() {
-      return this.collapsed ?
-        'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
-        'btn btn-default btn-todo issuable-header-btn float-right';
+      return this.collapsed
+        ? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
+        : 'btn btn-default btn-todo issuable-header-btn float-right';
     },
     buttonLabel() {
       return this.isTodo ? MARK_TEXT : TODO_TEXT;
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index b267422cd97..225ebb61195 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -37,7 +37,8 @@ class SidebarMoveIssue {
       // Keep the dropdown open after selecting an option
       shouldPropagate: false,
       data: (searchTerm, callback) => {
-        this.mediator.fetchAutocompleteProjects(searchTerm)
+        this.mediator
+          .fetchAutocompleteProjects(searchTerm)
           .then(callback)
           .catch(() => new window.Flash('An error occurred while fetching projects autocomplete.'));
       },
@@ -48,7 +49,7 @@ class SidebarMoveIssue {
           </a>
         </li>
       `,
-      clicked: (options) => {
+      clicked: options => {
         const project = options.selectedObj;
         const selectedProjectId = options.isMarking ? project.id : 0;
         this.mediator.setMoveToProjectId(selectedProjectId);
@@ -68,17 +69,12 @@ class SidebarMoveIssue {
 
   onConfirmClicked() {
     if (isValidProjectId(this.mediator.store.moveToProjectId)) {
-      this.$confirmButton
-        .disable()
-        .addClass('is-loading');
+      this.$confirmButton.disable().addClass('is-loading');
 
-      this.mediator.moveIssue()
-        .catch(() => {
-          window.Flash('An error occurred while moving the issue.');
-          this.$confirmButton
-            .enable()
-            .removeClass('is-loading');
-        });
+      this.mediator.moveIssue().catch(() => {
+        window.Flash('An error occurred while moving the issue.');
+        this.$confirmButton.enable().removeClass('is-loading');
+      });
     }
   }
 }
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
index 87da65a1b1f..1ebdbec7bc9 100644
--- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
@@ -15,15 +15,16 @@ export default class SidebarMilestone {
       components: {
         timeTracker,
       },
-      render: createElement => createElement('timeTracker', {
-        props: {
-          timeEstimate: parseInt(timeEstimate, 10),
-          timeSpent: parseInt(timeSpent, 10),
-          humanTimeEstimate,
-          humanTimeSpent,
-          rootPath: '/',
-        },
-      }),
+      render: createElement =>
+        createElement('timeTracker', {
+          props: {
+            timeEstimate: parseInt(timeEstimate, 10),
+            timeSpent: parseInt(timeSpent, 10),
+            humanTimeEstimate,
+            humanTimeSpent,
+            rootPath: '/',
+          },
+        }),
     });
   }
 }
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 655bf9198b7..6f8214b18ee 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -22,14 +22,15 @@ function mountAssigneesComponent(mediator) {
     components: {
       SidebarAssignees,
     },
-    render: createElement => createElement('sidebar-assignees', {
-      props: {
-        mediator,
-        field: el.dataset.field,
-        signedIn: el.hasAttribute('data-signed-in'),
-        issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-assignees', {
+        props: {
+          mediator,
+          field: el.dataset.field,
+          signedIn: el.hasAttribute('data-signed-in'),
+          issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
+        },
+      }),
   });
 }
 
@@ -83,11 +84,12 @@ function mountParticipantsComponent(mediator) {
     components: {
       sidebarParticipants,
     },
-    render: createElement => createElement('sidebar-participants', {
-      props: {
-        mediator,
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-participants', {
+        props: {
+          mediator,
+        },
+      }),
   });
 }
 
@@ -102,11 +104,12 @@ function mountSubscriptionsComponent(mediator) {
     components: {
       sidebarSubscriptions,
     },
-    render: createElement => createElement('sidebar-subscriptions', {
-      props: {
-        mediator,
-      },
-    }),
+    render: createElement =>
+      createElement('sidebar-subscriptions', {
+        props: {
+          mediator,
+        },
+      }),
   });
 }
 
diff --git a/app/assets/javascripts/sidebar/services/sidebar_service.js b/app/assets/javascripts/sidebar/services/sidebar_service.js
index 37c97225bfd..cbe20f761ff 100644
--- a/app/assets/javascripts/sidebar/services/sidebar_service.js
+++ b/app/assets/javascripts/sidebar/services/sidebar_service.js
@@ -22,11 +22,15 @@ export default class SidebarService {
   }
 
   update(key, data) {
-    return Vue.http.put(this.endpoint, {
-      [key]: data,
-    }, {
-      emulateJSON: true,
-    });
+    return Vue.http.put(
+      this.endpoint,
+      {
+        [key]: data,
+      },
+      {
+        emulateJSON: true,
+      },
+    );
   }
 
   getProjectsAutocomplete(searchTerm) {