Prettify performance_bar notes and profile modules

10 files changed, 134 insertions, 142 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);