Prettify vue_shared modules

app/assets/javascripts/vue_shared/components/bar_chart.vue

@@ -118,7 +118,9 @@ export default {
         this.rectYAxisLabelDims.height != null ? this.rectYAxisLabelDims.height / 2 : 0;
       const yCoord = this.vbHeight / 2 + rectWidth - 5;
 
-      return `translate(${this.minX + this.yAxisTextTransformPadding}, ${yCoord}) rotate(-${this.yAxisTextRotation})`;
+      return `translate(${this.minX + this.yAxisTextTransformPadding}, ${yCoord}) rotate(-${
+        this.yAxisTextRotation
+      })`;
     },
   },
   mounted() {
@@ -207,8 +209,7 @@ export default {
 
       renderedYAxis.selectAll('.tick').each(function createTickLines(d, i) {
         if (i > 0) {
-          d3
-            .select(this)
+          d3.select(this)
             .select('line')
             .attr('x2', width)
             .attr('class', 'axis-tick');
@@ -217,8 +218,7 @@ export default {
 
       // Add the panning capabilities
       if (this.isPanAvailable) {
-        d3
-          .select(this.$refs.baseSvg)
+        d3.select(this.$refs.baseSvg)
           .call(this.zoom)
           .on('wheel.zoom', null); // This disables the pan of the graph with the scroll of the mouse wheel
       }

app/assets/javascripts/vue_shared/components/deprecated_modal.vue

 <script>
-  /* eslint-disable vue/require-default-prop */
-  export default {
+/* eslint-disable vue/require-default-prop */
+export default {
   name: 'DeprecatedModal', // use GlModal instead
 
   props: {
@@ -79,7 +79,7 @@
       this.$emit('submit', event);
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js

@@ -583,7 +583,5 @@ const fileNameIcons = {
 };
 
 export default function getIconForFile(name) {
-  return fileNameIcons[name] ||
-         fileExtensionIcons[name ? name.split('.').pop() : ''] ||
-         '';
+  return fileNameIcons[name] || fileExtensionIcons[name ? name.split('.').pop() : ''] || '';
 }

app/assets/javascripts/vue_shared/components/gl_modal.vue

@@ -41,10 +41,14 @@ export default {
     },
   },
   mounted() {
-    $(this.$el).on('shown.bs.modal', this.opened).on('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .on('shown.bs.modal', this.opened)
+      .on('hidden.bs.modal', this.closed);
   },
   beforeDestroy() {
-    $(this.$el).off('shown.bs.modal', this.opened).off('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .off('shown.bs.modal', this.opened)
+      .off('hidden.bs.modal', this.closed);
   },
   methods: {
     emitCancel(event) {

app/assets/javascripts/vue_shared/components/icon.vue

 <script>
-
 // only allow classes in images.scss e.g. s12
 const validSizes = [8, 10, 12, 16, 18, 24, 32, 48, 72];
 let iconValidator = () => true;

app/assets/javascripts/vue_shared/components/issue/issue_warning.vue

 <script>
-  import icon from '../../../vue_shared/components/icon.vue';
+import icon from '../../../vue_shared/components/icon.vue';
 
-  export default {
+export default {
   components: {
     icon,
   },
@@ -28,7 +28,7 @@
       return this.isConfidential && this.isLocked;
     },
   },
-  };
+};
 </script>
 <template>
   <div class="issuable-note-warning">

app/assets/javascripts/vue_shared/components/loading_button.vue

 <script>
-  /* eslint-disable vue/require-default-prop */
-  /* This is a re-usable vue component for rendering a button
+/* eslint-disable vue/require-default-prop */
+/* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
     to show the loading status by setting the `loading` option.
     This can also be used for initial page load when you don't
@@ -17,7 +17,7 @@
 
   */
 
-  export default {
+export default {
   props: {
     loading: {
       type: Boolean,
@@ -44,7 +44,7 @@
       this.$emit('click', e);
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/markdown/field.vue

 <script>
-  import $ from 'jquery';
-  import { s__ } from '~/locale';
-  import Flash from '../../../flash';
-  import GLForm from '../../../gl_form';
-  import markdownHeader from './header.vue';
-  import markdownToolbar from './toolbar.vue';
-  import icon from '../icon.vue';
+import $ from 'jquery';
+import { s__ } from '~/locale';
+import Flash from '../../../flash';
+import GLForm from '../../../gl_form';
+import markdownHeader from './header.vue';
+import markdownToolbar from './toolbar.vue';
+import icon from '../icon.vue';
 
-  export default {
+export default {
   components: {
     markdownHeader,
     markdownToolbar,
@@ -135,7 +135,7 @@
       }markdown_version=${markdownVersion}`;
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/markdown/header.vue

 <script>
-  import $ from 'jquery';
-  import tooltip from '../../directives/tooltip';
-  import toolbarButton from './toolbar_button.vue';
-  import icon from '../icon.vue';
+import $ from 'jquery';
+import tooltip from '../../directives/tooltip';
+import toolbarButton from './toolbar_button.vue';
+import icon from '../icon.vue';
 
-  export default {
+export default {
   directives: {
     tooltip,
   },
@@ -38,9 +38,10 @@
   },
   methods: {
     isValid(form) {
-        return !form ||
-          form.find('.js-vue-markdown-field').length &&
-          $(this.$el).closest('form')[0] === form[0];
+      return (
+        !form ||
+        (form.find('.js-vue-markdown-field').length && $(this.$el).closest('form')[0] === form[0])
+      );
     },
 
     previewMarkdownTab(event, form) {
@@ -57,7 +58,7 @@
       this.$emit('write-markdown');
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

 <script>
-  import { Link } from '@gitlab-org/gitlab-ui';
+import { Link } from '@gitlab-org/gitlab-ui';
 
-  export default {
+export default {
   components: {
     'gl-link': Link,
   },
@@ -26,7 +26,7 @@
       return this.quickActionsDocsPath !== '';
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

 <script>
-  import tooltip from '../../directives/tooltip';
-  import icon from '../icon.vue';
+import tooltip from '../../directives/tooltip';
+import icon from '../icon.vue';
 
-  export default {
+export default {
   components: {
     icon,
   },
@@ -38,7 +38,7 @@
       default: false,
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/memory_graph.vue

@@ -41,7 +41,8 @@ export default {
       // Find metric timestamp which is closest to deploymentTime
       timestampDiff = Math.abs(metricTimestamps[0] - median);
       metricTimestamps.forEach((timestamp, index) => {
-        if (index === 0) { // Skip first element
+        if (index === 0) {
+          // Skip first element
           return;
         }
 

app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue

 <script>
-  /**
+/**
  * Common component to render a placeholder note and user information.
  *
  * This component needs to be used with a vuex store.
@@ -16,10 +16,10 @@
  *   :note="{body: 'This is a note'}"
  *   />
  */
-  import { mapGetters } from 'vuex';
-  import userAvatarLink from '../user_avatar/user_avatar_link.vue';
+import { mapGetters } from 'vuex';
+import userAvatarLink from '../user_avatar/user_avatar_link.vue';
 
-  export default {
+export default {
   name: 'PlaceholderNote',
   components: {
     userAvatarLink,
@@ -31,11 +31,9 @@
     },
   },
   computed: {
-      ...mapGetters([
-        'getUserData',
-      ]),
+    ...mapGetters(['getUserData']),
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue

 <script>
-  /**
+/**
  * Common component to render a placeholder system note.
  *
  * @example
@@ -7,7 +7,7 @@
  *  :note="{ body: 'Commands are being applied'}"
  *  />
  */
-  export default {
+export default {
   name: 'PlaceholderSystemNote',
   props: {
     note: {
@@ -15,7 +15,7 @@
       required: true,
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/panel_resizer.vue

 <script>
-  export default {
+export default {
   props: {
     startSize: {
       type: Number,
@@ -84,7 +84,7 @@
       this.$emit('resize-end', this.size);
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/pikaday.vue

 <script>
-  import Pikaday from 'pikaday';
-  import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
+import Pikaday from 'pikaday';
+import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
 
-  export default {
+export default {
   name: 'DatePicker',
   props: {
     label: {
@@ -56,7 +56,7 @@
       this.$emit('hidePicker');
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/project_avatar/image.vue

 <script>
-
-  /* This is a re-usable vue component for rendering a project avatar that
+/* This is a re-usable vue component for rendering a project avatar that
     does not need to link to the project's profile. The image and an optional
     tooltip can be configured by props passed to this component.
 
@@ -16,11 +15,11 @@
 
   */
 
-  import defaultAvatarUrl from 'images/no_avatar.png';
-  import { placeholderImage } from '../../../lazy_loader';
-  import tooltip from '../../directives/tooltip';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '../../../lazy_loader';
+import tooltip from '../../directives/tooltip';
 
-  export default {
+export default {
   name: 'ProjectAvatarImage',
   directives: {
     tooltip,
@@ -79,7 +78,7 @@
       return `s${this.size}`;
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/recaptcha_modal.vue

 <script>
-  import DeprecatedModal from './deprecated_modal.vue';
+import DeprecatedModal from './deprecated_modal.vue';
 
-  export default {
+export default {
   name: 'RecaptchaModal',
 
   components: {
@@ -61,7 +61,7 @@
       this.$el.querySelector('form').submit();
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue

 <script>
-  import datePicker from '../pikaday.vue';
-  import toggleSidebar from './toggle_sidebar.vue';
-  import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
-  import { dateInWords } from '../../../lib/utils/datetime_utility';
+import datePicker from '../pikaday.vue';
+import toggleSidebar from './toggle_sidebar.vue';
+import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
+import { dateInWords } from '../../../lib/utils/datetime_utility';
 
-  export default {
+export default {
   name: 'SidebarDatePicker',
   components: {
     datePicker,
@@ -90,7 +90,7 @@
       this.$emit('toggleCollapse');
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/table_pagination.vue

 <script>
-  import { s__ } from '../../locale';
+import { s__ } from '../../locale';
 
-  const PAGINATION_UI_BUTTON_LIMIT = 4;
-  const UI_LIMIT = 6;
-  const SPREAD = '...';
-  const PREV = s__('Pagination|Prev');
-  const NEXT = s__('Pagination|Next');
-  const FIRST = s__('Pagination|« First');
-  const LAST = s__('Pagination|Last »');
+const PAGINATION_UI_BUTTON_LIMIT = 4;
+const UI_LIMIT = 6;
+const SPREAD = '...';
+const PREV = s__('Pagination|Prev');
+const NEXT = s__('Pagination|Next');
+const FIRST = s__('Pagination|« First');
+const LAST = s__('Pagination|Last »');
 
-  export default {
+export default {
   props: {
     /**
         This function will take the information given by the pagination component
@@ -128,7 +128,7 @@
       return !item.first && !item.last && !item.next && !item.prev && !item.active;
     },
   },
-  };
+};
 </script>
 <template>
   <div

app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue

@@ -11,9 +11,7 @@ export default {
   directives: {
     tooltip,
   },
-  mixins: [
-    timeagoMixin,
-  ],
+  mixins: [timeagoMixin],
   props: {
     time: {
       type: String,

app/assets/javascripts/vue_shared/components/toggle_button.vue

 <script>
-  import { s__ } from '../../locale';
-  import icon from './icon.vue';
+import { s__ } from '../../locale';
+import icon from './icon.vue';
 
-  const ICON_ON = 'status_success_borderless';
-  const ICON_OFF = 'status_failed_borderless';
-  const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
-  const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
+const ICON_ON = 'status_success_borderless';
+const ICON_OFF = 'status_failed_borderless';
+const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
+const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 
-  export default {
+export default {
   components: {
     icon,
   },
@@ -54,7 +54,7 @@
       if (!this.disabledInput) this.$emit('change', !this.value);
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue

 <script>
-
 /* This is a re-usable vue component for rendering a user avatar wrapped in
   a clickable link (likely to the user's profile). The link, image, and
   tooltip can be configured by props passed to this component.

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

 <script>
-
 /* This is a re-usable vue component for rendering a user avatar svg (typically
   for a blank state). It will receive styles comparable to the user avatar,
   but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
@@ -42,4 +41,3 @@ export default {
     v-html="svg"
   />
 </template>
-

app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js

@@ -4,10 +4,7 @@
  *
  * Components need to have `scope`, `page` and `requestData`
  */
-import {
-  historyPushState,
-  buildUrlWithCurrentLocation,
-} from '../../lib/utils/common_utils';
+import { historyPushState, buildUrlWithCurrentLocation } from '../../lib/utils/common_utils';
 
 export default {
   methods: {
@@ -24,12 +21,14 @@ export default {
       // stop polling
       this.poll.stop();
 
-      const queryString = Object.keys(parameters).map((parameter) => {
+      const queryString = Object.keys(parameters)
+        .map(parameter => {
           const value = parameters[parameter];
           // update internal state for UI
           this[parameter] = value;
           return `${parameter}=${encodeURIComponent(value)}`;
-      }).join('&');
+        })
+        .join('&');
 
       // update polling parameters
       this.requestData = parameters;

app/assets/javascripts/vue_shared/models/label.js

@@ -6,7 +6,7 @@ export default class ListLabel {
     this.color = obj.color;
     this.textColor = obj.text_color;
     this.description = obj.description;
-    this.priority = (obj.priority !== null) ? obj.priority : Infinity;
+    this.priority = obj.priority !== null ? obj.priority : Infinity;
   }
 }
 

app/assets/javascripts/vue_shared/translate.js

-import {
-  __,
-  n__,
-  s__,
-  sprintf,
-} from '../locale';
+import { __, n__, s__, sprintf } from '../locale';
 
-export default (Vue) => {
+export default Vue => {
   Vue.mixin({
     methods: {
       /**

app/assets/javascripts/vue_shared/vue_resource_interceptor.js

@@ -21,7 +21,7 @@ Vue.http.interceptors.push((request, next) => {
 Vue.http.interceptors.push((request, next) => {
   request.headers.set(csrf.headerKey, csrf.token);
 
-  next((response) => {
+  next(response => {
     // Headers object has a `forEach` property that iterates through all values.
     const headers = {};