Prettify additional modules (A through I)

app/assets/javascripts/activities.js

@@ -9,7 +9,7 @@ export default class Activities {
   constructor() {
     Pager.init(20, true, false, data => data, this.updateTooltips);
-    $('.event-filter-link').on('click', (e) => {
+    $('.event-filter-link').on('click', e => {
       e.preventDefault();
       this.toggleFilter(e.currentTarget);
       this.reloadActivities();

app/assets/javascripts/breadcrumb.js

 import $ from 'jquery';
-export const addTooltipToEl = (el) => {
+export const addTooltipToEl = el => {
   const textEl = el.querySelector('.js-breadcrumb-item-text');
   if (textEl && textEl.scrollWidth > textEl.offsetWidth) {
@@ -14,17 +14,18 @@ export default () => {
   const breadcrumbs = document.querySelector('.js-breadcrumbs-list');
   if (breadcrumbs) {
-    const topLevelLinks = [...breadcrumbs.children].filter(el => !el.classList.contains('dropdown'))
+    const topLevelLinks = [...breadcrumbs.children]
+      .filter(el => !el.classList.contains('dropdown'))
       .map(el => el.querySelector('a'))
       .filter(el => el);
     const $expander = $('.js-breadcrumbs-collapsed-expander');
     topLevelLinks.forEach(el => addTooltipToEl(el));
-    $expander.closest('.dropdown')
-      .on('show.bs.dropdown hide.bs.dropdown', (e) => {
-        $('.js-breadcrumbs-collapsed-expander', e.currentTarget).toggleClass('open')
-          .tooltip('hide');
-      });
+    $expander.closest('.dropdown').on('show.bs.dropdown hide.bs.dropdown', e => {
+      $('.js-breadcrumbs-collapsed-expander', e.currentTarget)
+        .toggleClass('open')
+        .tooltip('hide');
+    });
   }
 };

app/assets/javascripts/build_artifacts.js

@@ -12,16 +12,16 @@ export default class BuildArtifacts {
   }
   // eslint-disable-next-line class-methods-use-this
   disablePropagation() {
-    $('.top-block').on('click', '.download', function (e) {
+    $('.top-block').on('click', '.download', function(e) {
       return e.stopPropagation();
     });
-    return $('.tree-holder').on('click', 'tr[data-link] a', function (e) {
+    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
       return e.stopImmediatePropagation();
     });
   }
   // eslint-disable-next-line class-methods-use-this
   setupEntryClick() {
-    return $('.tree-holder').on('click', 'tr[data-link]', function () {
+    return $('.tree-holder').on('click', 'tr[data-link]', function() {
       visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink));
     });
   }
@@ -37,11 +37,15 @@ export default class BuildArtifacts {
     // We want the tooltip to show if you hover anywhere on the row
     // But be placed below and in the middle of the file name
     $('.js-artifact-tree-row')
-      .on('mouseenter', (e) => {
-        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('show');
+      .on('mouseenter', e => {
+        $(e.currentTarget)
+          .find('.js-artifact-tree-tooltip')
+          .tooltip('show');
       })
-      .on('mouseleave', (e) => {
-        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide');
+      .on('mouseleave', e => {
+        $(e.currentTarget)
+          .find('.js-artifact-tree-tooltip')
+          .tooltip('hide');
       });
   }
 }

app/assets/javascripts/ci_variable_list/ajax_variable_list.js

@@ -7,11 +7,13 @@ import statusCodes from '../lib/utils/http_status';
 import VariableList from './ci_variable_list';
 function generateErrorBoxContent(errors) {
-  const errorList = [].concat(errors).map(errorString => `
+  const errorList = [].concat(errors).map(
+    errorString => `
     <li>
       ${_.escape(errorString)}
     </li>
-  `);
+  `,
+  );
   return `
     <p>
@@ -25,13 +27,7 @@ function generateErrorBoxContent(errors) {
 // Used for the variable list on CI/CD projects/groups settings page
 export default class AjaxVariableList {
-  constructor({
-    container,
-    saveButton,
-    errorBox,
-    formField = 'variables',
-    saveEndpoint,
-  }) {
+  constructor({ container, saveButton, errorBox, formField = 'variables', saveEndpoint }) {
     this.container = container;
     this.saveButton = saveButton;
     this.errorBox = errorBox;
@@ -58,18 +54,21 @@ export default class AjaxVariableList {
     // to match it up in `updateRowsWithPersistedVariables`
     this.variableList.toggleEnableRow(false);
-    return axios.patch(this.saveEndpoint, {
-      variables_attributes: this.variableList.getAllData(),
-    }, {
-      // We want to be able to process the `res.data` from a 400 error response
-      // and print the validation messages such as duplicate variable keys
-      validateStatus: status => (
-          status >= statusCodes.OK &&
-          status < statusCodes.MULTIPLE_CHOICES
-        ) ||
-        status === statusCodes.BAD_REQUEST,
-    })
-      .then((res) => {
+    return axios
+      .patch(
+        this.saveEndpoint,
+        {
+          variables_attributes: this.variableList.getAllData(),
+        },
+        {
+          // We want to be able to process the `res.data` from a 400 error response
+          // and print the validation messages such as duplicate variable keys
+          validateStatus: status =>
+            (status >= statusCodes.OK && status < statusCodes.MULTIPLE_CHOICES) ||
+            status === statusCodes.BAD_REQUEST,
+        },
+      )
+      .then(res => {
         loadingIcon.classList.toggle('hide', true);
         this.variableList.toggleEnableRow(true);
@@ -90,18 +89,21 @@ export default class AjaxVariableList {
   }
   updateRowsWithPersistedVariables(persistedVariables = []) {
-    const persistedVariableMap = [].concat(persistedVariables).reduce((variableMap, variable) => ({
-      ...variableMap,
-      [variable.key]: variable,
-    }), {});
-    this.container.querySelectorAll('.js-row').forEach((row) => {
+    const persistedVariableMap = [].concat(persistedVariables).reduce(
+      (variableMap, variable) => ({
+        ...variableMap,
+        [variable.key]: variable,
+      }),
+      {},
+    );
+    this.container.querySelectorAll('.js-row').forEach(row => {
       // If we submitted a row that was destroyed, remove it so we don't try
       // to destroy it again which would cause a BE error
       const destroyInput = row.querySelector('.js-ci-variable-input-destroy');
       if (convertPermissionToBoolean(destroyInput.value)) {
         row.remove();
-      // Update the ID input so any future edits and `_destroy` will apply on the BE
+        // Update the ID input so any future edits and `_destroy` will apply on the BE
       } else {
         const key = row.querySelector('.js-ci-variable-input-key').value;
         const persistedVariable = persistedVariableMap[key];

app/assets/javascripts/ci_variable_list/ci_variable_list.js

@@ -16,10 +16,7 @@ function createEnvironmentItem(value) {
 }
 export default class VariableList {
-  constructor({
-    container,
-    formField,
-  }) {
+  constructor({ container, formField }) {
     this.$container = $(container);
     this.formField = formField;
     this.environmentDropdownMap = new WeakMap();
@@ -71,7 +68,7 @@ export default class VariableList {
       this.initRow(rowEl);
     });
-    this.$container.on('click', '.js-row-remove-button', (e) => {
+    this.$container.on('click', '.js-row-remove-button', e => {
       e.preventDefault();
       this.removeRow($(e.currentTarget).closest('.js-row'));
     });
@@ -81,7 +78,7 @@ export default class VariableList {
       .join(',');
     // Remove any empty rows except the last row
-    this.$container.on('blur', inputSelector, (e) => {
+    this.$container.on('blur', inputSelector, e => {
       const $row = $(e.currentTarget).closest('.js-row');
       if ($row.is(':not(:last-child)') && !this.checkIfRowTouched($row)) {
@@ -136,7 +133,7 @@ export default class VariableList {
     $rowClone.removeAttr('data-is-persisted');
     // Reset the inputs to their defaults
-    Object.keys(this.inputMap).forEach((name) => {
+    Object.keys(this.inputMap).forEach(name => {
       const entry = this.inputMap[name];
       $rowClone.find(entry.selector).val(entry.default);
     });
@@ -171,7 +168,7 @@ export default class VariableList {
   }
   checkIfRowTouched($row) {
-    return Object.keys(this.inputMap).some((name) => {
+    return Object.keys(this.inputMap).some(name => {
       const entry = this.inputMap[name];
       const $el = $row.find(entry.selector);
       return $el.length && $el.val() !== entry.default;
@@ -190,11 +187,14 @@ export default class VariableList {
   getAllData() {
     // Ignore the last empty row because we don't want to try persist
     // a blank variable and run into validation problems.
-    const validRows = this.$container.find('.js-row').toArray().slice(0, -1);
-    return validRows.map((rowEl) => {
+    const validRows = this.$container
+      .find('.js-row')
+      .toArray()
+      .slice(0, -1);
+    return validRows.map(rowEl => {
       const resultant = {};
-      Object.keys(this.inputMap).forEach((name) => {
+      Object.keys(this.inputMap).forEach(name => {
         const entry = this.inputMap[name];
         const $input = $(rowEl).find(entry.selector);
         if ($input.length) {
@@ -207,11 +207,16 @@ export default class VariableList {
   }
   getEnvironmentValues() {
-    const valueMap = this.$container.find(this.inputMap.environment_scope.selector).toArray()
-      .reduce((prevValueMap, envInput) => ({
-        ...prevValueMap,
-        [envInput.value]: envInput.value,
-      }), {});
+    const valueMap = this.$container
+      .find(this.inputMap.environment_scope.selector)
+      .toArray()
+      .reduce(
+        (prevValueMap, envInput) => ({
+          ...prevValueMap,
+          [envInput.value]: envInput.value,
+        }),
+        {},
+      );
     return Object.keys(valueMap).map(createEnvironmentItem);
   }

app/assets/javascripts/ci_variable_list/native_form_variable_list.js

@@ -2,10 +2,7 @@ import $ from 'jquery';
 import VariableList from './ci_variable_list';
 // Used for the variable list on scheduled pipeline edit page
-export default function setupNativeFormVariableList({
-  container,
-  formField = 'variables',
-}) {
+export default function setupNativeFormVariableList({ container, formField = 'variables' }) {
   const $container = $(container);
   const variableList = new VariableList({

app/assets/javascripts/clusters/components/application_row.vue

 <script>
-  /* eslint-disable vue/require-default-prop */
-  import { s__, sprintf } from '../../locale';
-  import eventHub from '../event_hub';
-  import identicon from '../../vue_shared/components/identicon.vue';
-  import loadingButton from '../../vue_shared/components/loading_button.vue';
-  import {
-    APPLICATION_STATUS,
-    REQUEST_LOADING,
-    REQUEST_SUCCESS,
-    REQUEST_FAILURE,
-  } from '../constants';
-  export default {
-    components: {
-      loadingButton,
-      identicon,
+/* eslint-disable vue/require-default-prop */
+import { s__, sprintf } from '../../locale';
+import eventHub from '../event_hub';
+import identicon from '../../vue_shared/components/identicon.vue';
+import loadingButton from '../../vue_shared/components/loading_button.vue';
+import {
+  APPLICATION_STATUS,
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+} from '../constants';
+export default {
+  components: {
+    loadingButton,
+    identicon,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
     },
-    props: {
-      id: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      titleLink: {
-        type: String,
-        required: false,
-      },
-      manageLink: {
-        type: String,
-        required: false,
-      },
-      logoUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      status: {
-        type: String,
-        required: false,
-      },
-      statusReason: {
-        type: String,
-        required: false,
-      },
-      requestStatus: {
-        type: String,
-        required: false,
-      },
-      requestReason: {
-        type: String,
-        required: false,
-      },
-      installApplicationRequestParams: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+    title: {
+      type: String,
+      required: true,
     },
-    computed: {
-      isUnknownStatus() {
-        return !this.isKnownStatus && this.status !== null;
-      },
-      isKnownStatus() {
-        return Object.values(APPLICATION_STATUS).includes(this.status);
-      },
-      isInstalled() {
-        return (
-          this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
-        );
-      },
-      hasLogo() {
-        return !!this.logoUrl;
-      },
-      identiconId() {
-        // generate a deterministic integer id for the identicon background
-        return this.id.charCodeAt(0);
-      },
-      rowJsClass() {
-        return `js-cluster-application-row-${this.id}`;
-      },
-      installButtonLoading() {
-        return !this.status ||
-          this.status === APPLICATION_STATUS.SCHEDULED ||
-          this.status === APPLICATION_STATUS.INSTALLING ||
-          this.requestStatus === REQUEST_LOADING;
-      },
-      installButtonDisabled() {
-        // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
-        // we already made a request to install and are just waiting for the real-time
-        // to sync up.
-        return ((this.status !== APPLICATION_STATUS.INSTALLABLE
-          && this.status !== APPLICATION_STATUS.ERROR) ||
+    titleLink: {
+      type: String,
+      required: false,
+    },
+    manageLink: {
+      type: String,
+      required: false,
+    },
+    logoUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    status: {
+      type: String,
+      required: false,
+    },
+    statusReason: {
+      type: String,
+      required: false,
+    },
+    requestStatus: {
+      type: String,
+      required: false,
+    },
+    requestReason: {
+      type: String,
+      required: false,
+    },
+    installApplicationRequestParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isUnknownStatus() {
+      return !this.isKnownStatus && this.status !== null;
+    },
+    isKnownStatus() {
+      return Object.values(APPLICATION_STATUS).includes(this.status);
+    },
+    isInstalled() {
+      return (
+        this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
+      );
+    },
+    hasLogo() {
+      return !!this.logoUrl;
+    },
+    identiconId() {
+      // generate a deterministic integer id for the identicon background
+      return this.id.charCodeAt(0);
+    },
+    rowJsClass() {
+      return `js-cluster-application-row-${this.id}`;
+    },
+    installButtonLoading() {
+      return (
+        !this.status ||
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING ||
+        this.requestStatus === REQUEST_LOADING
+      );
+    },
+    installButtonDisabled() {
+      // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
+      // we already made a request to install and are just waiting for the real-time
+      // to sync up.
+      return (
+        ((this.status !== APPLICATION_STATUS.INSTALLABLE &&
+          this.status !== APPLICATION_STATUS.ERROR) ||
           this.requestStatus === REQUEST_LOADING ||
-          this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus;
-      },
-      installButtonLabel() {
-        let label;
-        if (
-          this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
-          this.status === APPLICATION_STATUS.INSTALLABLE ||
-          this.status === APPLICATION_STATUS.ERROR ||
-          this.isUnknownStatus
-        ) {
-          label = s__('ClusterIntegration|Install');
-        } else if (this.status === APPLICATION_STATUS.SCHEDULED ||
-          this.status === APPLICATION_STATUS.INSTALLING) {
-          label = s__('ClusterIntegration|Installing');
-        } else if (this.status === APPLICATION_STATUS.INSTALLED ||
-          this.status === APPLICATION_STATUS.UPDATED) {
-          label = s__('ClusterIntegration|Installed');
-        }
-        return label;
-      },
-      showManageButton() {
-        return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
-      },
-      manageButtonLabel() {
-        return s__('ClusterIntegration|Manage');
-      },
-      hasError() {
-        return this.status === APPLICATION_STATUS.ERROR ||
-        this.requestStatus === REQUEST_FAILURE;
-      },
-      generalErrorDescription() {
-        return sprintf(
-          s__('ClusterIntegration|Something went wrong while installing %{title}'), {
-            title: this.title,
-          },
-        );
-      },
+          this.requestStatus === REQUEST_SUCCESS) &&
+        this.isKnownStatus
+      );
+    },
+    installButtonLabel() {
+      let label;
+      if (
+        this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
+        this.status === APPLICATION_STATUS.INSTALLABLE ||
+        this.status === APPLICATION_STATUS.ERROR ||
+        this.isUnknownStatus
+      ) {
+        label = s__('ClusterIntegration|Install');
+      } else if (
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING
+      ) {
+        label = s__('ClusterIntegration|Installing');
+      } else if (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED
+      ) {
+        label = s__('ClusterIntegration|Installed');
+      }
+      return label;
+    },
+    showManageButton() {
+      return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
+    },
+    manageButtonLabel() {
+      return s__('ClusterIntegration|Manage');
+    },
+    hasError() {
+      return this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE;
+    },
+    generalErrorDescription() {
+      return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {
+        title: this.title,
+      });
     },
-    methods: {
-      installClicked() {
-        eventHub.$emit('installApplication', {
-          id: this.id,
-          params: this.installApplicationRequestParams,
-        });
-      },
+  },
+  methods: {
+    installClicked() {
+      eventHub.$emit('installApplication', {
+        id: this.id,
+        params: this.installApplicationRequestParams,
+      });
     },
-  };
+  },
+};
 </script>
 <template>

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -76,12 +76,8 @@ export default class ClusterStore {
     this.state.status = serverState.status;
     this.state.statusReason = serverState.status_reason;
-    serverState.applications.forEach((serverAppEntry) => {
-      const {
-        name: appId,
-        status,
-        status_reason: statusReason,
-      } = serverAppEntry;
+    serverState.applications.forEach(serverAppEntry => {
+      const { name: appId, status, status_reason: statusReason } = serverAppEntry;
       this.state.applications[appId] = {
         ...(this.state.applications[appId] || {}),

app/assets/javascripts/comment_type_toggle.js

@@ -24,36 +24,44 @@ class CommentTypeToggle {
   setConfig() {
     const config = {
-      InputSetter: [{
-        input: this.noteTypeInput,
-        valueAttribute: 'data-value',
-      },
-      {
-        input: this.submitButton,
-        valueAttribute: 'data-submit-text',
-      }],
+      InputSetter: [
+        {
+          input: this.noteTypeInput,
+          valueAttribute: 'data-value',
+        },
+        {
+          input: this.submitButton,
+          valueAttribute: 'data-submit-text',
+        },
+      ],
     };
     if (this.closeButton) {
-      config.InputSetter.push({
-        input: this.closeButton,
-        valueAttribute: 'data-close-text',
-      }, {
-        input: this.closeButton,
-        valueAttribute: 'data-close-text',
-        inputAttribute: 'data-alternative-text',
-      });
+      config.InputSetter.push(
+        {
+          input: this.closeButton,
+          valueAttribute: 'data-close-text',
+        },
+        {
+          input: this.closeButton,
+          valueAttribute: 'data-close-text',
+          inputAttribute: 'data-alternative-text',
+        },
+      );
     }
     if (this.reopenButton) {
-      config.InputSetter.push({
-        input: this.reopenButton,
-        valueAttribute: 'data-reopen-text',
-      }, {
-        input: this.reopenButton,
-        valueAttribute: 'data-reopen-text',
-        inputAttribute: 'data-alternative-text',
-      });
+      config.InputSetter.push(
+        {
+          input: this.reopenButton,
+          valueAttribute: 'data-reopen-text',
+        },
+        {
+          input: this.reopenButton,
+          valueAttribute: 'data-reopen-text',
+          inputAttribute: 'data-alternative-text',
+        },
+      );
     }
     return config;

app/assets/javascripts/commit/image_file.js

@@ -9,44 +9,60 @@ const viewModes = ['two-up', 'swipe'];
 export default class ImageFile {
   constructor(file) {
     this.file = file;
-    this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) {
-      return function(deletedWidth, deletedHeight) {
-        return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) {
-          _this.initViewModes();
-
-          // Load two-up view after images are loaded
-          // so that we can display the correct width and height information
-          const $images = $('.two-up.view img', _this.file);
-
-          $images.waitForImages(function() {
-            _this.initView('two-up');
+    this.requestImageInfo(
+      $('.two-up.view .frame.deleted img', this.file),
+      (function(_this) {
+        return function(deletedWidth, deletedHeight) {
+          return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(
+            width,
+            height,
+          ) {
+            _this.initViewModes();
+
+            // Load two-up view after images are loaded
+            // so that we can display the correct width and height information
+            const $images = $('.two-up.view img', _this.file);
+
+            $images.waitForImages(function() {
+              _this.initView('two-up');
+            });
           });
-        });
-      };
-    })(this));
+        };
+      })(this),
+    );
   }
   initViewModes() {
     const viewMode = viewModes[0];
     $('.view-modes', this.file).removeClass('hide');
-    $('.view-modes-menu', this.file).on('click', 'li', (function(_this) {
-      return function(event) {
-        if (!$(event.currentTarget).hasClass('active')) {
-          return _this.activateViewMode(event.currentTarget.className);
-        }
-      };
-    })(this));
+    $('.view-modes-menu', this.file).on(
+      'click',
+      'li',
+      (function(_this) {
+        return function(event) {
+          if (!$(event.currentTarget).hasClass('active')) {
+            return _this.activateViewMode(event.currentTarget.className);
+          }
+        };
+      })(this),
+    );
     return this.activateViewMode(viewMode);
   }
   activateViewMode(viewMode) {
-    $('.view-modes-menu li', this.file).removeClass('active').filter("." + viewMode).addClass('active');
-    return $(".view:visible:not(." + viewMode + ")", this.file).fadeOut(200, (function(_this) {
-      return function() {
-        $(".view." + viewMode, _this.file).fadeIn(200);
-        return _this.initView(viewMode);
-      };
-    })(this));
+    $('.view-modes-menu li', this.file)
+      .removeClass('active')
+      .filter('.' + viewMode)
+      .addClass('active');
+    return $('.view:visible:not(.' + viewMode + ')', this.file).fadeOut(
+      200,
+      (function(_this) {
+        return function() {
+          $('.view.' + viewMode, _this.file).fadeIn(200);
+          return _this.initView(viewMode);
+        };
+      })(this),
+    );
   }
   initView(viewMode) {
@@ -63,135 +79,154 @@ export default class ImageFile {
       $body.css('user-select', 'none');
     });
-    $body.off('mouseup').off('mousemove').on('mouseup', function() {
-      dragging = false;
-      $body.css('user-select', '');
-    })
-    .on('mousemove', function(e) {
-      var left;
-      if (!dragging) return;
-
-      left = e.pageX - ($offsetEl.offset().left + padding);
-
-      callback(e, left);
-    });
+    $body
+      .off('mouseup')
+      .off('mousemove')
+      .on('mouseup', function() {
+        dragging = false;
+        $body.css('user-select', '');
+      })
+      .on('mousemove', function(e) {
+        var left;
+        if (!dragging) return;
+
+        left = e.pageX - ($offsetEl.offset().left + padding);
+
+        callback(e, left);
+      });
   }
   prepareFrames(view) {
     var maxHeight, maxWidth;
     maxWidth = 0;
     maxHeight = 0;
-    $('.frame', view).each((function(_this) {
-      return function(index, frame) {
-        var height, width;
-        width = $(frame).width();
-        height = $(frame).height();
-        maxWidth = width > maxWidth ? width : maxWidth;
-        return maxHeight = height > maxHeight ? height : maxHeight;
-      };
-    })(this)).css({
-      width: maxWidth,
-      height: maxHeight
-    });
+    $('.frame', view)
+      .each(
+        (function(_this) {
+          return function(index, frame) {
+            var height, width;
+            width = $(frame).width();
+            height = $(frame).height();
+            maxWidth = width > maxWidth ? width : maxWidth;
+            return (maxHeight = height > maxHeight ? height : maxHeight);
+          };
+        })(this),
+      )
+      .css({
+        width: maxWidth,
+        height: maxHeight,
+      });
     return [maxWidth, maxHeight];
   }
   views = {
     'two-up': function() {
-      return $('.two-up.view .wrap', this.file).each((function(_this) {
-        return function(index, wrap) {
-          $('img', wrap).each(function() {
-            var currentWidth;
-            currentWidth = $(this).width();
-            if (currentWidth > availWidth / 2) {
-              return $(this).width(availWidth / 2);
-            }
-          });
-          return _this.requestImageInfo($('img', wrap), function(width, height) {
-            $('.image-info .meta-width', wrap).text(width + "px");
-            $('.image-info .meta-height', wrap).text(height + "px");
-            return $('.image-info', wrap).removeClass('hide');
-          });
-        };
-      })(this));
+      return $('.two-up.view .wrap', this.file).each(
+        (function(_this) {
+          return function(index, wrap) {
+            $('img', wrap).each(function() {
+              var currentWidth;
+              currentWidth = $(this).width();
+              if (currentWidth > availWidth / 2) {
+                return $(this).width(availWidth / 2);
+              }
+            });
+            return _this.requestImageInfo($('img', wrap), function(width, height) {
+              $('.image-info .meta-width', wrap).text(width + 'px');
+              $('.image-info .meta-height', wrap).text(height + 'px');
+              return $('.image-info', wrap).removeClass('hide');
+            });
+          };
+        })(this),
+      );
     },
-    'swipe': function() {
+    swipe() {
       var maxHeight, maxWidth;
       maxWidth = 0;
       maxHeight = 0;
-      return $('.swipe.view', this.file).each((function(_this) {
-        return function(index, view) {
-          var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
-          $swipeFrame = $('.swipe-frame', view);
-          $swipeWrap = $('.swipe-wrap', view);
-          $swipeBar = $('.swipe-bar', view);
-
-          $swipeFrame.css({
-            width: maxWidth + 16,
-            height: maxHeight + 28
-          });
-          $swipeWrap.css({
-            width: maxWidth + 1,
-            height: maxHeight + 2
-          });
-          // Set swipeBar left position to match image frame
-          $swipeBar.css({
-            left: 1
-          });
-
-          wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
-
-          _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
-            if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
-              $swipeWrap.width((maxWidth + 1) - left);
-              $swipeBar.css('left', left);
-            }
-          });
-        };
-      })(this));
+      return $('.swipe.view', this.file).each(
+        (function(_this) {
+          return function(index, view) {
+            var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
+            (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref);
+            $swipeFrame = $('.swipe-frame', view);
+            $swipeWrap = $('.swipe-wrap', view);
+            $swipeBar = $('.swipe-bar', view);
+
+            $swipeFrame.css({
+              width: maxWidth + 16,
+              height: maxHeight + 28,
+            });
+            $swipeWrap.css({
+              width: maxWidth + 1,
+              height: maxHeight + 2,
+            });
+            // Set swipeBar left position to match image frame
+            $swipeBar.css({
+              left: 1,
+            });
+
+            wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
+
+            _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
+              if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
+                $swipeWrap.width(maxWidth + 1 - left);
+                $swipeBar.css('left', left);
+              }
+            });
+          };
+        })(this),
+      );
     },
     'onion-skin': function() {
       var dragTrackWidth, maxHeight, maxWidth;
       maxWidth = 0;
       maxHeight = 0;
       dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
-      return $('.onion-skin.view', this.file).each((function(_this) {
-        return function(index, view) {
-          var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = _this.prepareFrames(view), [maxWidth, maxHeight] = ref;
-          $frame = $('.onion-skin-frame', view);
-          $frameAdded = $('.frame.added', view);
-          $track = $('.drag-track', view);
-          $dragger = $('.dragger', $track);
-
-          $frame.css({
-            width: maxWidth + 16,
-            height: maxHeight + 28
-          });
-          $('.swipe-wrap', view).css({
-            width: maxWidth + 1,
-            height: maxHeight + 2
-          });
-          $dragger.css({
-            left: dragTrackWidth
-          });
-
-          $frameAdded.css('opacity', 1);
-          framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
-
-          _this.initDraggable($dragger, framePadding, function(e, left) {
-            var opacity = left / dragTrackWidth;
-
-            if (opacity >= 0 && opacity <= 1) {
-              $dragger.css('left', left);
-              $frameAdded.css('opacity', opacity);
-            }
-          });
-        };
-      })(this));
-    }
-  }
+      return $('.onion-skin.view', this.file).each(
+        (function(_this) {
+          return function(index, view) {
+            var $frame,
+              $track,
+              $dragger,
+              $frameAdded,
+              framePadding,
+              ref,
+              dragging = false;
+            (ref = _this.prepareFrames(view)), ([maxWidth, maxHeight] = ref);
+            $frame = $('.onion-skin-frame', view);
+            $frameAdded = $('.frame.added', view);
+            $track = $('.drag-track', view);
+            $dragger = $('.dragger', $track);
+
+            $frame.css({
+              width: maxWidth + 16,
+              height: maxHeight + 28,
+            });
+            $('.swipe-wrap', view).css({
+              width: maxWidth + 1,
+              height: maxHeight + 2,
+            });
+            $dragger.css({
+              left: dragTrackWidth,
+            });
+
+            $frameAdded.css('opacity', 1);
+            framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
+
+            _this.initDraggable($dragger, framePadding, function(e, left) {
+              var opacity = left / dragTrackWidth;
+
+              if (opacity >= 0 && opacity <= 1) {
+                $dragger.css('left', left);
+                $frameAdded.css('opacity', opacity);
+              }
+            });
+          };
+        })(this),
+      );
+    },
+  };
   requestImageInfo(img, callback) {
     const domImg = img.get(0);
@@ -199,11 +234,14 @@ export default class ImageFile {
       if (domImg.complete) {
         return callback.call(this, domImg.naturalWidth, domImg.naturalHeight);
       } else {
-        return img.on('load', (function(_this) {
-          return function() {
-            return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight);
-          };
-        })(this));
+        return img.on(
+          'load',
+          (function(_this) {
+            return function() {
+              return callback.call(_this, domImg.naturalWidth, domImg.naturalHeight);
+            };
+          })(this),
+        );
       }
     }
   }

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

@@ -19,11 +19,13 @@ export default () => {
   const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
   if (pipelineTableViewEl) {
-      // Update MR and Commits tabs
-    pipelineTableViewEl.addEventListener('update-pipelines-count', (event) => {
-      if (event.detail.pipelines &&
+    // Update MR and Commits tabs
+    pipelineTableViewEl.addEventListener('update-pipelines-count', event => {
+      if (
+        event.detail.pipelines &&
         event.detail.pipelines.count &&
-        event.detail.pipelines.count.all) {
+        event.detail.pipelines.count.all
+      ) {
         const badge = document.querySelector('.js-pipelines-mr-count');
         badge.textContent = event.detail.pipelines.count.all;

app/assets/javascripts/commit/pipelines/pipelines_table.vue

 <script>
-  import PipelinesService from '../../pipelines/services/pipelines_service';
-  import PipelineStore from '../../pipelines/stores/pipelines_store';
-  import pipelinesMixin from '../../pipelines/mixins/pipelines';
-  export default {
-    mixins: [
-      pipelinesMixin,
-    ],
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      helpPagePath: {
-        type: String,
-        required: true,
-      },
-      autoDevopsHelpPath: {
-        type: String,
-        required: true,
-      },
-      errorStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      viewType: {
-        type: String,
-        required: false,
-        default: 'child',
-      },
+import PipelinesService from '../../pipelines/services/pipelines_service';
+import PipelineStore from '../../pipelines/stores/pipelines_store';
+import pipelinesMixin from '../../pipelines/mixins/pipelines';
+export default {
+  mixins: [pipelinesMixin],
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
     },
-    data() {
-      const store = new PipelineStore();
-      return {
-        store,
-        state: store.state,
-      };
-    },
-    computed: {
-      shouldRenderTable() {
-        return !this.isLoading &&
-          this.state.pipelines.length > 0 &&
-          !this.hasError;
-      },
-      shouldRenderErrorState() {
-        return this.hasError && !this.isLoading;
-      },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+    autoDevopsHelpPath: {
+      type: String,
+      required: true,
+    },
+    errorStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    viewType: {
+      type: String,
+      required: false,
+      default: 'child',
+    },
+  },
+  data() {
+    const store = new PipelineStore();
+    return {
+      store,
+      state: store.state,
+    };
+  },
+  computed: {
+    shouldRenderTable() {
+      return !this.isLoading && this.state.pipelines.length > 0 && !this.hasError;
     },
-    created() {
-      this.service = new PipelinesService(this.endpoint);
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
     },
-    methods: {
-      successCallback(resp) {
-        // depending of the endpoint the response can either bring a `pipelines` key or not.
-        const pipelines = resp.data.pipelines || resp.data;
-        this.setCommonData(pipelines);
-        const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
-          detail: {
-            pipelines: resp.data,
-          },
-        });
-        // notifiy to update the count in tabs
-        if (this.$el.parentElement) {
-          this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
-        }
-      },
+  },
+  created() {
+    this.service = new PipelinesService(this.endpoint);
+  },
+  methods: {
+    successCallback(resp) {
+      // depending of the endpoint the response can either bring a `pipelines` key or not.
+      const pipelines = resp.data.pipelines || resp.data;
+      this.setCommonData(pipelines);
+      const updatePipelinesEvent = new CustomEvent('update-pipelines-count', {
+        detail: {
+          pipelines: resp.data,
+        },
+      });
+      // notifiy to update the count in tabs
+      if (this.$el.parentElement) {
+        this.$el.parentElement.dispatchEvent(updatePipelinesEvent);
+      }
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="content-list pipelines">

app/assets/javascripts/commit_merge_requests.js

@@ -50,7 +50,7 @@ export function createContent(mergeRequests) {
   if (mergeRequests.length === 0) {
     $content.text(s__('Commits|No related merge requests found'));
   } else {
-    mergeRequests.forEach((mergeRequest) => {
+    mergeRequests.forEach(mergeRequest => {
       const $header = createHeader($content.children().length, mergeRequests.length);
       const $item = createItem(mergeRequest);
       $content.append($header);
@@ -64,8 +64,9 @@ export function createContent(mergeRequests) {
 export function fetchCommitMergeRequests() {
   const $container = $('.merge-requests');
-  axios.get($container.data('projectCommitPath'))
-    .then((response) => {
+  axios
+    .get($container.data('projectCommitPath'))
+    .then(response => {
       const $content = createContent(response.data);
       $container.html($content);

app/assets/javascripts/commits.js

@@ -32,22 +32,31 @@ export default class CommitsList {
     if (search === this.lastSearch) return Promise.resolve();
     const commitsUrl = `${form.attr('action')}?${form.serialize()}`;
     this.content.fadeTo('fast', 0.5);
-    const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
-      [obj.name]: obj.value,
-    }), {});
-    return axios.get(form.attr('action'), {
-      params,
-    })
+    const params = form.serializeArray().reduce(
+      (acc, obj) =>
+        Object.assign(acc, {
+          [obj.name]: obj.value,
+        }),
+      {},
+    );
+    return axios
+      .get(form.attr('action'), {
+        params,
+      })
       .then(({ data }) => {
         this.lastSearch = search;
         this.content.html(data.html);
         this.content.fadeTo('fast', 1.0);
         // Change url so if user reload a page - search results are saved
-        window.history.replaceState({
-          page: commitsUrl,
-        }, document.title, commitsUrl);
+        window.history.replaceState(
+          {
+            page: commitsUrl,
+          },
+          document.title,
+          commitsUrl,
+        );
       })
       .catch(() => {
         this.content.fadeTo('fast', 1.0);
@@ -75,8 +84,15 @@ export default class CommitsList {
       processedData = $processedData.not(`li.js-commit-header[data-day='${loadedShownDayFirst}']`);
       // Update commits count in the previous commits header.
-      commitsCount += Number($(processedData).nextUntil('li.js-commit-header').first().find('li.commit').length);
-      $commitsHeadersLast.find('span.commits-count').text(`${commitsCount} ${pluralize('commit', commitsCount)}`);
+      commitsCount += Number(
+        $(processedData)
+          .nextUntil('li.js-commit-header')
+          .first()
+          .find('li.commit').length,
+      );
+      $commitsHeadersLast
+        .find('span.commits-count')
+        .text(`${commitsCount} ${pluralize('commit', commitsCount)}`);
     }
     localTimeAgo($processedData.find('.js-timeago'));

app/assets/javascripts/commons/bootstrap.js

@@ -5,6 +5,14 @@ import 'bootstrap';
 // custom jQuery functions
 $.fn.extend({
-  disable() { return $(this).prop('disabled', true).addClass('disabled'); },
-  enable() { return $(this).prop('disabled', false).removeClass('disabled'); },
+  disable() {
+    return $(this)
+      .prop('disabled', true)
+      .addClass('disabled');
+  },
+  enable() {
+    return $(this)
+      .prop('disabled', false)
+      .removeClass('disabled');
+  },
 });

app/assets/javascripts/confirm_danger_modal.js

@@ -13,19 +13,23 @@ function openConfirmDangerModal($form, text) {
   $submit.disable();
   $input.focus();
-  $('.js-confirm-danger-input').off('input').on('input', function handleInput() {
-    const confirmText = rstrip($(this).val());
-    if (confirmText === confirmTextMatch) {
-      $submit.enable();
-    } else {
-      $submit.disable();
-    }
-  });
-  $('.js-confirm-danger-submit').off('click').on('click', () => $form.submit());
+  $('.js-confirm-danger-input')
+    .off('input')
+    .on('input', function handleInput() {
+      const confirmText = rstrip($(this).val());
+      if (confirmText === confirmTextMatch) {
+        $submit.enable();
+      } else {
+        $submit.disable();
+      }
+    });
+  $('.js-confirm-danger-submit')
+    .off('click')
+    .on('click', () => $form.submit());
 }
 export default function initConfirmDangerModal() {
-  $(document).on('click', '.js-confirm-danger', (e) => {
+  $(document).on('click', '.js-confirm-danger', e => {
     e.preventDefault();
     const $btn = $(e.target);
     const $form = $btn.closest('form');

app/assets/javascripts/contextual_sidebar.js

@@ -20,8 +20,11 @@ export default class ContextualSidebar {
   }
   bindEvents() {
-    document.addEventListener('click', (e) => {
-      if (!e.target.closest('.nav-sidebar') && (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')) {
+    document.addEventListener('click', e => {
+      if (
+        !e.target.closest('.nav-sidebar') &&
+        (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
+      ) {
         this.toggleCollapsedSidebar(true);
       }
     });

app/assets/javascripts/create_item_dropdown.js

@@ -36,7 +36,7 @@ export default class CreateItemDropdown {
       },
       selectable: true,
       toggleLabel(selected) {
-        return (selected && 'id' in selected) ? _.escape(selected.title) : this.defaultToggleLabel;
+        return selected && 'id' in selected ? _.escape(selected.title) : this.defaultToggleLabel;
       },
       fieldName: this.fieldName,
       text(item) {
@@ -46,7 +46,7 @@ export default class CreateItemDropdown {
         return _.escape(item.id);
       },
       onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (options) => {
+      clicked: options => {
         options.e.preventDefault();
         this.onSelect();
       },
@@ -77,9 +77,8 @@ export default class CreateItemDropdown {
   getData(term, callback) {
     this.getDataOption(term, (data = []) => {
       // Ensure the selected item isn't already in the data to avoid duplicates
-      const alreadyHasSelectedItem = this.selectedItem && data.some(item =>
-        item.id === this.selectedItem.id,
-      );
+      const alreadyHasSelectedItem =
+        this.selectedItem && data.some(item => item.id === this.selectedItem.id);
       let uniqueData = data;
       if (!alreadyHasSelectedItem) {
@@ -106,9 +105,7 @@ export default class CreateItemDropdown {
     if (newValue) {
       this.selectedItem = this.createNewItemFromValue(newValue);
-      this.$dropdownContainer
-        .find('.js-dropdown-create-new-item code')
-        .text(newValue);
+      this.$dropdownContainer.find('.js-dropdown-create-new-item code').text(newValue);
     }
     this.toggleFooter(!newValue);

app/assets/javascripts/create_label.js

@@ -37,7 +37,7 @@ export default class CreateLabelDropdown {
   addBinding() {
     const self = this;
-    this.$colorSuggestions.on('click', function (e) {
+    this.$colorSuggestions.on('click', function(e) {
       const $this = $(this);
       self.addColorValue(e, $this);
     });
@@ -47,7 +47,7 @@ export default class CreateLabelDropdown {
     this.$dropdownBack.on('click', this.resetForm.bind(this));
-    this.$cancelButton.on('click', function (e) {
+    this.$cancelButton.on('click', function(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -79,13 +79,9 @@ export default class CreateLabelDropdown {
   }
   resetForm() {
-    this.$newLabelField
-      .val('')
-      .trigger('change');
-    this.$newColorField
-      .val('')
-      .trigger('change');
+    this.$newLabelField.val('').trigger('change');
+    this.$newColorField.val('').trigger('change');
     this.$colorPreview
       .css('background-color', '')
@@ -97,31 +93,34 @@ export default class CreateLabelDropdown {
     e.preventDefault();
     e.stopPropagation();
-    Api.newLabel(this.namespacePath, this.projectPath, {
-      title: this.$newLabelField.val(),
-      color: this.$newColorField.val(),
-    }, (label) => {
-      this.$newLabelCreateButton.enable();
-
-      if (label.message) {
-        let errors;
-
-        if (typeof label.message === 'string') {
-          errors = label.message;
+    Api.newLabel(
+      this.namespacePath,
+      this.projectPath,
+      {
+        title: this.$newLabelField.val(),
+        color: this.$newColorField.val(),
+      },
+      label => {
+        this.$newLabelCreateButton.enable();
+
+        if (label.message) {
+          let errors;
+
+          if (typeof label.message === 'string') {
+            errors = label.message;
+          } else {
+            errors = Object.keys(label.message)
+              .map(key => `${humanize(key)} ${label.message[key].join(', ')}`)
+              .join('<br/>');
+          }
+
+          this.$newLabelError.html(errors).show();
         } else {
-          errors = Object.keys(label.message).map(key =>
-            `${humanize(key)} ${label.message[key].join(', ')}`,
-          ).join('<br/>');
-        }
-        this.$newLabelError
-          .html(errors)
-          .show();
-      } else {
-        this.$dropdownBack.trigger('click');
-
-        $(document).trigger('created.label', label);
-      }
-    });
+          this.$dropdownBack.trigger('click');
+          $(document).trigger('created.label', label);
+        }
+      },
+    );
   }
 }

app/assets/javascripts/deploy_keys/components/app.vue

@@ -95,8 +95,10 @@ export default {
         .catch(() => new Flash(s__('DeployKeys|Error enabling deploy key')));
     },
     disableKey(deployKey, callback) {
-      // eslint-disable-next-line no-alert
-      if (window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?'))) {
+      if (
+        // eslint-disable-next-line no-alert
+        window.confirm(s__('DeployKeys|You are going to remove this deploy key. Are you sure?'))
+      ) {
         this.service
           .disableKey(deployKey.id)
           .then(this.fetchKeys)