[ci skip] Fix more eslint rules

.eslintrc

@@ -41,12 +41,11 @@
     "vue/html-self-closing": ["error", {
       "html": {
         "void": "always",
-        "normal": "any",
+        "normal": "never",
         "component": "always"
       },
       "svg": "always",
-      "math": "any"
+      "math": "always"
     }]
-
   }
 }

app/assets/javascripts/cycle_analytics/components/stage_component.vue

@@ -12,7 +12,7 @@
     props: {
       items: {
         type: Array,
-        default: []
+        default: () => [],
       },
       stage: {
         type: Object,

app/assets/javascripts/cycle_analytics/components/stage_test_component.vue

@@ -70,7 +70,7 @@
             <a
               :href="build.branch.url"
               class="ref-name"
-              >
+            >
               {{ build.branch.name }}
             </a>
             <span

app/assets/javascripts/cycle_analytics/components/total_time_component.vue

@@ -28,19 +28,19 @@
         <span>
           {{ n__('Time|hr', 'Time|hrs', time.hours) }}
         </span>
-        </template>
+      </template>
       <template v-if="time.mins && !time.days">
         {{ time.mins }}
         <span>
           {{ n__('Time|min', 'Time|mins', time.mins) }}
         </span>
-        </template>
+      </template>
       <template v-if="time.seconds && hasData === 1 || time.seconds === 0">
         {{ time.seconds }}
         <span>
           {{ s__('Time|s') }}
         </span>
-        </template>
+      </template>
     </template>
     <template v-else>
       --

app/assets/javascripts/environments/components/environment_item.vue

@@ -474,18 +474,21 @@
         </span>
 
         <span>
-          {{model.folderName}}
+          {{ model.folderName }}
         </span>
 
         <span class="badge">
-          {{model.size}}
+          {{ model.size }}
         </span>
       </span>
     </div>
 
-    <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
+    <div
+      class="table-section section-10 deployment-column hidden-xs hidden-sm"
+      role="gridcell"
+    >
       <span v-if="shouldRenderDeploymentID">
-        {{deploymentInternalId}}
+        {{ deploymentInternalId }}
       </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-/**
- * Renders the Monitoring (Metrics) link in environments table.
- */
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+  * Renders the Monitoring (Metrics) link in environments table.
+  */
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    monitoringUrl: {
-      type: String,
-      required: true,
+  export default {
+    directives: {
+      tooltip,
     },
-  },
 
-  directives: {
-    tooltip,
-  },
+    props: {
+      monitoringUrl: {
+        type: String,
+        required: true,
+      },
+    },
 
-  computed: {
-    title() {
-      return 'Monitoring';
+    computed: {
+      title() {
+        return 'Monitoring';
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -31,10 +31,12 @@ export default {
     rel="noopener noreferrer nofollow"
     :href="monitoringUrl"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-area-chart"
       aria-hidden="true"
-      />
+    >
+    </i>
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

 <script>
-/**
- * Renders Rollback or Re deploy button in environments table depending
- * of the provided property `isLastDeployment`.
- *
- * Makes a post request when the button is clicked.
- */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-export default {
-  props: {
-    retryUrl: {
-      type: String,
-      default: '',
+  /**
+  * Renders Rollback or Re deploy button in environments table depending
+  * of the provided property `isLastDeployment`.
+  *
+  * Makes a post request when the button is clicked.
+  */
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    props: {
+      retryUrl: {
+        type: String,
+        default: '',
+      },
+
+      isLastDeployment: {
+        type: Boolean,
+        default: true,
+      },
     },
 
-    isLastDeployment: {
-      type: Boolean,
-      default: true,
+    components: {
+      loadingIcon,
     },
-  },
 
-  components: {
-    loadingIcon,
-  },
-
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
 
-  methods: {
-    onClick() {
-      this.isLoading = true;
+    methods: {
+      onClick() {
+        this.isLoading = true;
 
-      eventHub.$emit('postAction', this.retryUrl);
+        eventHub.$emit('postAction', this.retryUrl);
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <button
     type="button"
     class="btn hidden-xs hidden-sm"
     @click="onClick"
-    :disabled="isLoading">
+    :disabled="isLoading"
+  >
 
     <span v-if="isLastDeployment">
-      {{s__("Environments|Re-deploy")}}
+      {{ s__("Environments|Re-deploy") }}
     </span>
     <span v-else>
-      {{s__("Environments|Rollback")}}
+      {{ s__("Environments|Rollback") }}
     </span>
 
     <loading-icon v-if="isLoading" />

app/assets/javascripts/environments/components/environment_stop.vue

 <script>
-/**
- * Renders the stop "button" that allows stop an environment.
- * Used in environments table.
- */
-import eventHub from '../event_hub';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+  * Renders the stop "button" that allows stop an environment.
+  * Used in environments table.
+  */
+  import eventHub from '../event_hub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    stopUrl: {
-      type: String,
-      default: '',
+  export default {
+    components: {
+      loadingIcon,
     },
-  },
 
-  directives: {
-    tooltip,
-  },
+    directives: {
+      tooltip,
+    },
 
-  data() {
-    return {
-      isLoading: false,
-    };
-  },
+    props: {
+      stopUrl: {
+        type: String,
+        default: '',
+      },
+    },
 
-  components: {
-    loadingIcon,
-  },
+    data() {
+      return {
+        isLoading: false,
+      };
+    },
 
-  computed: {
-    title() {
-      return 'Stop';
+    computed: {
+      title() {
+        return 'Stop';
+      },
     },
-  },
 
-  methods: {
-    onClick() {
-      // eslint-disable-next-line no-alert
-      if (confirm('Are you sure you want to stop this environment?')) {
-        this.isLoading = true;
+    methods: {
+      onClick() {
+        // eslint-disable-next-line no-alert
+        if (confirm('Are you sure you want to stop this environment?')) {
+          this.isLoading = true;
 
-        $(this.$el).tooltip('destroy');
+          $(this.$el).tooltip('destroy');
 
-        eventHub.$emit('postAction', this.stopUrl);
-      }
+          eventHub.$emit('postAction', this.stopUrl);
+        }
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <button
@@ -58,10 +58,13 @@ export default {
     @click="onClick"
     :disabled="isLoading"
     :title="title"
-    :aria-label="title">
+    :aria-label="title"
+  >
     <i
       class="fa fa-stop stop-env-icon"
-      aria-hidden="true" />
+      aria-hidden="true"
+    >
+    </i>
     <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/environments/components/environment_terminal_button.vue

 <script>
-/**
- * Renders a terminal button to open a web terminal.
- * Used in environments table.
- */
-import terminalIconSvg from 'icons/_icon_terminal.svg';
-import tooltip from '../../vue_shared/directives/tooltip';
+  /**
+  * Renders a terminal button to open a web terminal.
+  * Used in environments table.
+  */
+  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import tooltip from '../../vue_shared/directives/tooltip';
 
-export default {
-  props: {
-    terminalPath: {
-      type: String,
-      required: false,
-      default: '',
+  export default {
+    directives: {
+      tooltip,
     },
-  },
 
-  directives: {
-    tooltip,
-  },
+    props: {
+      terminalPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
 
-  data() {
-    return {
-      terminalIconSvg,
-    };
-  },
+    data() {
+      return {
+        terminalIconSvg,
+      };
+    },
 
-  computed: {
-    title() {
-      return 'Terminal';
+    computed: {
+      title() {
+        return 'Terminal';
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <a
@@ -40,6 +40,7 @@ export default {
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg">
+    v-html="terminalIconSvg"
+  >
   </a>
 </template>

app/assets/javascripts/environments/components/environments_app.vue

@@ -7,6 +7,15 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    components: {
+      emptyState,
+    },
+
+    mixins: [
+      CIPaginationMixin,
+      environmentsMixin,
+    ],
+
     props: {
       endpoint: {
         type: String,
@@ -37,14 +46,6 @@
         required: true,
       },
     },
-    components: {
-      emptyState,
-    },
-
-    mixins: [
-      CIPaginationMixin,
-      environmentsMixin,
-    ],
 
     created() {
       eventHub.$on('toggleFolder', this.toggleFolder);
@@ -95,15 +96,17 @@
         :tabs="tabs"
         @onChangeTab="onChangeTab"
         scope="environments"
-        />
+      />
 
       <div
         v-if="canCreateEnvironment && !isLoading"
-        class="nav-controls">
+        class="nav-controls"
+      >
         <a
           :href="newEnvironmentPath"
-          class="btn btn-create">
-          {{s__("Environments|New environment")}}
+          class="btn btn-create"
+        >
+          {{ s__("Environments|New environment") }}
         </a>
       </div>
     </div>
@@ -122,7 +125,7 @@
         :new-path="newEnvironmentPath"
         :help-path="helpPagePath"
         :can-create-environment="canCreateEnvironment"
-        />
+      />
     </container>
   </div>
 </template>

app/assets/javascripts/environments/components/environments_table.vue

@@ -39,33 +39,55 @@ export default {
 };
 </script>
 <template>
-  <div class="ci-table" role="grid">
-    <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 environments-name" role="columnheader">
-        {{s__("Environments|Environment")}}
+  <div
+    class="ci-table"
+    role="grid"
+  >
+    <div
+      class="gl-responsive-table-row table-row-header"
+      role="row"
+    >
+      <div
+        class="table-section section-10 environments-name"
+        role="columnheader"
+      >
+        {{ s__("Environments|Environment") }}
       </div>
-      <div class="table-section section-10 environments-deploy" role="columnheader">
-        {{s__("Environments|Deployment")}}
+      <div
+        class="table-section section-10 environments-deploy"
+        role="columnheader"
+      >
+        {{ s__("Environments|Deployment") }}
       </div>
-      <div class="table-section section-15 environments-build" role="columnheader">
-        {{s__("Environments|Job")}}
+      <div
+        class="table-section section-15 environments-build"
+        role="columnheader"
+      >
+        {{ s__("Environments|Job") }}
       </div>
-      <div class="table-section section-25 environments-commit" role="columnheader">
-        {{s__("Environments|Commit")}}
+      <div
+        class="table-section section-25 environments-commit"
+        role="columnheader"
+      >
+        {{ s__("Environments|Commit") }}
       </div>
-      <div class="table-section section-10 environments-date" role="columnheader">
-        {{s__("Environments|Updated")}}
+      <div
+        class="table-section section-10 environments-date"
+        role="columnheader"
+      >
+        {{ s__("Environments|Updated") }}
       </div>
     </div>
     <template
-      v-for="model in environments"
-      v-bind:model="model">
+      v-for="(model, i) in environments"
+      :key="i"
+      :model="model">
       <div
         is="environment-item"
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
-        />
+      />
 
       <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
         <div v-if="model.isLoadingFolderContent">
@@ -79,14 +101,15 @@ export default {
             :model="children"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
-            />
+          />
 
           <div>
             <div class="text-center prepend-top-10">
               <a
                 :href="folderUrl(model)"
-                class="btn btn-default">
-                {{s__("Environments|Show all")}}
+                class="btn btn-default"
+              >
+                {{ s__("Environments|Show all") }}
               </a>
             </div>
           </div>

app/assets/javascripts/environments/folder/environments_folder_view.vue

@@ -3,6 +3,10 @@
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
 
   export default {
+    mixins: [
+      environmentsMixin,
+      CIPaginationMixin,
+    ],
     props: {
       endpoint: {
         type: String,
@@ -25,10 +29,6 @@
         required: true,
       },
     },
-    mixins: [
-      environmentsMixin,
-      CIPaginationMixin,
-    ],
     methods: {
       successCallback(resp) {
         this.saveData(resp);
@@ -40,17 +40,18 @@
   <div :class="cssContainerClass">
     <div
       class="top-area"
-      v-if="!isLoading">
+      v-if="!isLoading"
+    >
 
       <h4 class="js-folder-name environments-folder-name">
-        {{s__("Environments|Environments")}} / <b>{{folderName}}</b>
+        {{ s__("Environments|Environments") }} / <b>{{folderName}}</b>
       </h4>
 
       <tabs
         :tabs="tabs"
         @onChangeTab="onChangeTab"
         scope="environments"
-        />
+      />
     </div>
 
     <container

app/assets/javascripts/groups/components/app.vue

@@ -42,6 +42,26 @@ export default {
       return this.store.getPaginationInfo();
     },
   },
+  created() {
+    this.searchEmptyMessage = this.hideProjects ?
+      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
+
+    eventHub.$on('fetchPage', this.fetchPage);
+    eventHub.$on('toggleChildren', this.toggleChildren);
+    eventHub.$on('leaveGroup', this.leaveGroup);
+    eventHub.$on('updatePagination', this.updatePagination);
+    eventHub.$on('updateGroups', this.updateGroups);
+  },
+  mounted() {
+    this.fetchAllGroups();
+  },
+  beforeDestroy() {
+    eventHub.$off('fetchPage', this.fetchPage);
+    eventHub.$off('toggleChildren', this.toggleChildren);
+    eventHub.$off('leaveGroup', this.leaveGroup);
+    eventHub.$off('updatePagination', this.updatePagination);
+    eventHub.$off('updateGroups', this.updateGroups);
+  },
   methods: {
     fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
       return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
@@ -152,26 +172,6 @@ export default {
       }
     },
   },
-  created() {
-    this.searchEmptyMessage = this.hideProjects ?
-      COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY;
-
-    eventHub.$on('fetchPage', this.fetchPage);
-    eventHub.$on('toggleChildren', this.toggleChildren);
-    eventHub.$on('leaveGroup', this.leaveGroup);
-    eventHub.$on('updatePagination', this.updatePagination);
-    eventHub.$on('updateGroups', this.updateGroups);
-  },
-  mounted() {
-    this.fetchAllGroups();
-  },
-  beforeDestroy() {
-    eventHub.$off('fetchPage', this.fetchPage);
-    eventHub.$off('toggleChildren', this.toggleChildren);
-    eventHub.$off('leaveGroup', this.leaveGroup);
-    eventHub.$off('updatePagination', this.updatePagination);
-    eventHub.$off('updateGroups', this.updateGroups);
-  },
 };
 </script>
 

app/assets/javascripts/groups/components/group_folder.vue

@@ -23,7 +23,7 @@ export default {
       return n__(
         'One more item',
         '%d more items',
-        this.parentGroup.childrenCount - this.parentGroup.children.length
+        this.parentGroup.childrenCount - this.parentGroup.children.length,
       );
     },
   },
@@ -47,8 +47,9 @@ export default {
         <i
           class="fa fa-external-link"
           aria-hidden="true"
-        />
-        {{moreChildrenStats}}
+        >
+        </i>
+        {{ moreChildrenStats }}
       </a>
     </li>
   </ul>

app/assets/javascripts/groups/components/group_item.vue

 <script>
-import { visitUrl } from '../../lib/utils/url_utility';
-import tooltip from '../../vue_shared/directives/tooltip';
-import identicon from '../../vue_shared/components/identicon.vue';
-import eventHub from '../event_hub';
+  import { visitUrl } from '../../lib/utils/url_utility';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import identicon from '../../vue_shared/components/identicon.vue';
+  import eventHub from '../event_hub';
 
-import itemCaret from './item_caret.vue';
-import itemTypeIcon from './item_type_icon.vue';
-import itemStats from './item_stats.vue';
-import itemActions from './item_actions.vue';
+  import itemCaret from './item_caret.vue';
+  import itemTypeIcon from './item_type_icon.vue';
+  import itemStats from './item_stats.vue';
+  import itemActions from './item_actions.vue';
 
-export default {
-  directives: {
-    tooltip,
-  },
-  components: {
-    identicon,
-    itemCaret,
-    itemTypeIcon,
-    itemStats,
-    itemActions,
-  },
-  props: {
-    parentGroup: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+  export default {
+    directives: {
+      tooltip,
     },
-    group: {
-      type: Object,
-      required: true,
+    components: {
+      identicon,
+      itemCaret,
+      itemTypeIcon,
+      itemStats,
+      itemActions,
     },
-  },
-  computed: {
-    groupDomId() {
-      return `group-${this.group.id}`;
+    props: {
+      parentGroup: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+      group: {
+        type: Object,
+        required: true,
+      },
     },
-    rowClass() {
-      return {
-        'is-open': this.group.isOpen,
-        'has-children': this.hasChildren,
-        'has-description': this.group.description,
-        'being-removed': this.group.isBeingRemoved,
-      };
+    computed: {
+      groupDomId() {
+        return `group-${this.group.id}`;
+      },
+      rowClass() {
+        return {
+          'is-open': this.group.isOpen,
+          'has-children': this.hasChildren,
+          'has-description': this.group.description,
+          'being-removed': this.group.isBeingRemoved,
+        };
+      },
+      hasChildren() {
+        return this.group.childrenCount > 0;
+      },
+      hasAvatar() {
+        return this.group.avatarUrl !== null;
+      },
+      isGroup() {
+        return this.group.type === 'group';
+      },
     },
-    hasChildren() {
-      return this.group.childrenCount > 0;
-    },
-    hasAvatar() {
-      return this.group.avatarUrl !== null;
-    },
-    isGroup() {
-      return this.group.type === 'group';
-    },
-  },
-  methods: {
-    onClickRowGroup(e) {
-      const NO_EXPAND_CLS = 'no-expand';
-      if (!(e.target.classList.contains(NO_EXPAND_CLS) ||
-            e.target.parentElement.classList.contains(NO_EXPAND_CLS))) {
-        if (this.hasChildren) {
-          eventHub.$emit('toggleChildren', this.group);
-        } else {
-          visitUrl(this.group.relativePath);
+    methods: {
+      onClickRowGroup(e) {
+        const NO_EXPAND_CLS = 'no-expand';
+        if (!(e.target.classList.contains(NO_EXPAND_CLS) ||
+              e.target.parentElement.classList.contains(NO_EXPAND_CLS))) {
+          if (this.hasChildren) {
+            eventHub.$emit('toggleChildren', this.group);
+          } else {
+            visitUrl(this.group.relativePath);
+          }
         }
-      }
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -75,7 +75,7 @@ export default {
     :id="groupDomId"
     :class="rowClass"
     class="group-row"
-    >
+  >
     <div
       class="group-row-contents"
       :class="{ 'project-row-contents': !isGroup }">
@@ -84,14 +84,10 @@ export default {
         :group="group"
         :parent-group="parentGroup"
       />
-      <item-stats
-        :item="group"
-      />
+      <item-stats :item="group" />
       <div
         class="folder-toggle-wrap">
-        <item-caret
-          :is-group-open="group.isOpen"
-        />
+        <item-caret :is-group-open="group.isOpen" />
         <item-type-icon
           :item-type="group.type"
           :is-group-open="group.isOpen"
@@ -113,7 +109,7 @@ export default {
           <identicon
             v-else
             size-class="s24"
-            :entity-id=group.id
+            :entity-id="group.id"
             :entity-name="group.name"
           />
         </a>
@@ -135,13 +131,13 @@ export default {
           v-if="group.permission"
           class="user-access-role"
         >
-          {{group.permission}}
+          {{ group.permission }}
         </span>
       </div>
       <div
         v-if="group.description"
         class="description">
-        {{group.description}}
+        {{ group.description }}
       </div>
     </div>
     <group-folder

app/assets/javascripts/ide/components/repo_editor.vue

@@ -20,6 +20,38 @@ export default {
       });
     }
   },
+  computed: {
+    ...mapGetters([
+      'activeFile',
+      'activeFileExtension',
+    ]),
+    ...mapState([
+      'leftPanelCollapsed',
+      'rightPanelCollapsed',
+      'panelResizing',
+    ]),
+    shouldHideEditor() {
+      return this.activeFile.binary && !this.activeFile.raw;
+    },
+  },
+  watch: {
+    activeFile(oldVal, newVal) {
+      if (newVal && !newVal.active) {
+        this.initMonaco();
+      }
+    },
+    leftPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    rightPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    panelResizing(isResizing) {
+      if (isResizing === false) {
+        this.editor.updateDimensions();
+      }
+    },
+  },
   methods: {
     ...mapActions([
       'getRawFileData',
@@ -78,38 +110,6 @@ export default {
       });
     },
   },
-  watch: {
-    activeFile(oldVal, newVal) {
-      if (newVal && !newVal.active) {
-        this.initMonaco();
-      }
-    },
-    leftPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
-    rightPanelCollapsed() {
-      this.editor.updateDimensions();
-    },
-    panelResizing(isResizing) {
-      if (isResizing === false) {
-        this.editor.updateDimensions();
-      }
-    },
-  },
-  computed: {
-    ...mapGetters([
-      'activeFile',
-      'activeFileExtension',
-    ]),
-    ...mapState([
-      'leftPanelCollapsed',
-      'rightPanelCollapsed',
-      'panelResizing',
-    ]),
-    shouldHideEditor() {
-      return this.activeFile.binary && !this.activeFile.raw;
-    },
-  },
 };
 </script>
 

app/assets/javascripts/ide/components/repo_file.vue

@@ -6,14 +6,14 @@
   import fileIcon from '../../vue_shared/components/file_icon.vue';
 
   export default {
-    mixins: [
-      timeAgoMixin,
-    ],
     components: {
       skeletonLoadingContainer,
       newDropdown,
       fileIcon,
     },
+    mixins: [
+      timeAgoMixin,
+    ],
     props: {
       file: {
         type: Object,
@@ -99,8 +99,7 @@
           :opened="file.opened"
           :style="levelIndentation"
           :size="16"
-        >
-        </file-icon>
+        />
         {{ file.name }}
       </a>
       <new-dropdown
@@ -108,7 +107,8 @@
         :project-id="file.projectId"
         :branch="file.branchId"
         :path="file.path"
-        :parent="file"/>
+        :parent="file"
+      />
       <i
         class="fa"
         v-if="changedClass"

app/assets/javascripts/ide/components/repo_loading_file.vue

@@ -25,15 +25,13 @@
       />
     </td>
     <template v-if="!leftPanelCollapsed">
-      <td
-        class="hidden-sm hidden-xs">
+      <td class="hidden-sm hidden-xs">
         <skeleton-loading-container
           :small="true"
         />
       </td>
 
-      <td
-        class="hidden-xs">
+      <td class="hidden-xs">
         <skeleton-loading-container
           class="animation-container-right"
           :small="true"

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -15,7 +15,7 @@
       <h4>{{ name }}</h4>
     </div>
     <div class="panel-body prometheus-graph-group">
-      <slot />
+      <slot></slot>
     </div>
   </div>
 </template>

app/assets/javascripts/pdf/page/index.vue

@@ -45,24 +45,26 @@
   <canvas
     class="pdf-page"
     ref="canvas"
-    :data-page="number" />
+    :data-page="number"
+  >
+  </canvas>
 </template>
 
 <style>
-.pdf-page {
-  margin: 8px auto 0 auto;
-  border-top: 1px #ddd solid;
-  border-bottom: 1px #ddd solid;
-  width: 100%;
-}
+  .pdf-page {
+    margin: 8px auto 0 auto;
+    border-top: 1px #ddd solid;
+    border-bottom: 1px #ddd solid;
+    width: 100%;
+  }
 
-.pdf-page:first-child {
-  margin-top: 0px;
-  border-top: 0px;
-}
+  .pdf-page:first-child {
+    margin-top: 0px;
+    border-top: 0px;
+  }
 
-.pdf-page:last-child {
-  margin-bottom: 0px;
-  border-bottom: 0px;
-}
+  .pdf-page:last-child {
+    margin-bottom: 0px;
+    border-bottom: 0px;
+  }
 </style>

app/assets/javascripts/profile/account/components/delete_account_modal.vue

@@ -4,6 +4,9 @@
   import csrf from '~/lib/utils/csrf';
 
   export default {
+    components: {
+      modal,
+    },
     props: {
       actionUrl: {
         type: String,
@@ -24,9 +27,6 @@
         enteredUsername: '',
       };
     },
-    components: {
-      modal,
-    },
     computed: {
       csrfToken() {
         return csrf.token;
@@ -85,7 +85,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
     @submit="onSubmit"
     :submit-disabled="!canSubmit()">
 
-    <template slot="body" slot-scope="props">
+    <template
+      slot="body"
+      slot-scope="props">
       <p v-html="props.text"></p>
 
       <form
@@ -96,13 +98,19 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
         <input
           type="hidden"
           name="_method"
-          value="delete" />
+          value="delete"
+        />
         <input
           type="hidden"
           name="authenticity_token"
-          :value="csrfToken" />
+          :value="csrfToken"
+        />
 
-        <p id="input-label" v-html="inputLabel"></p>
+        <p
+          id="input-label"
+          v-html="inputLabel"
+        >
+        </p>
 
         <input
           v-if="confirmWithPassword"
@@ -110,14 +118,16 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
           class="form-control"
           type="password"
           v-model="enteredPassword"
-          aria-labelledby="input-label" />
+          aria-labelledby="input-label"
+        />
         <input
           v-else
           name="username"
           class="form-control"
           type="text"
           v-model="enteredUsername"
-          aria-labelledby="input-label" />
+          aria-labelledby="input-label"
+        />
       </form>
     </template>
 

app/assets/javascripts/projects/permissions/components/project_setting_row.vue

@@ -46,6 +46,6 @@
     >
       {{ helpText }}
     </span>
-    <slot />
+    <slot></slot>
   </div>
 </template>

app/assets/javascripts/projects_dropdown/components/search.vue

@@ -59,6 +59,7 @@
       v-if="!searchQuery"
       class="search-icon fa fa-fw fa-search"
       aria-hidden="true"
-    />
+    >
+    </i>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -20,10 +20,12 @@
       hasCi: {
         type: Boolean,
         required: false,
+        default: false,
       },
       ciStatus: {
         type: String,
         required: false,
+        default: '',
       },
     },
     computed: {
@@ -31,7 +33,7 @@
         return this.pipeline && Object.keys(this.pipeline).length > 0;
       },
       hasCIError() {
-        return this.hasCi && !this.ciStatus;
+        return this.hasCi && this.ciStatus !== '';
       },
       status() {
         return this.pipeline.details &&

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue

@@ -7,6 +7,10 @@
 
   export default {
     name: 'MRWidgetRebase',
+    components: {
+      statusIcon,
+      loadingIcon,
+    },
     props: {
       mr: {
         type: Object,
@@ -17,10 +21,6 @@
         required: true,
       },
     },
-    components: {
-      statusIcon,
-      loadingIcon,
-    },
     data() {
       return {
         isMakingRequest: false,
@@ -88,7 +88,7 @@
     <status-icon
       :status="status"
       :show-disabled-button="showDisabledButton"
-      />
+    />
 
     <div class="rebase-state-find-class-convention media media-body space-children">
       <template v-if="mr.rebaseInProgress || isMakingRequest">
@@ -100,7 +100,7 @@
         <span class="bold">
           Fast-forward merge is not possible.
           Rebase the source branch onto
-          <span class="label-branch">{{mr.targetBranch}}</span>
+          <span class="label-branch">{{ mr.targetBranch }}</span>
           to allow this merge request to be merged.
         </span>
       </template>
@@ -110,13 +110,15 @@
             type="button"
             class="btn btn-sm btn-reopen btn-success"
             :disabled="isMakingRequest"
-            @click="rebase">
+            @click="rebase"
+          >
             <loading-icon v-if="isMakingRequest" />
             Rebase
           </button>
           <span
             v-if="!rebasingError"
-            class="bold">
+            class="bold"
+          >
             Fast-forward merge is not possible.
             Rebase the source branch onto the target branch or merge target
             branch into source branch to allow this merge request to be merged.
@@ -124,7 +126,7 @@
           <span
             v-else
             class="bold danger">
-            {{rebasingError}}
+            {{ rebasingError }}
           </span>
         </div>
       </template>

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

@@ -11,7 +11,7 @@
    * </expand-button>
    */
   export default {
-    name: 'expandButton',
+    name: 'ExpandButton',
     data() {
       return {
         isCollapsed: true,

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

 <script>
-export default {
-  name: 'modal',
+  export default {
+    name: 'Modal',
 
-  props: {
-    id: {
-      type: String,
-      required: false,
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      text: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      hideFooter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      kind: {
+        type: String,
+        required: false,
+        default: 'primary',
+      },
+      modalDialogClass: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      closeKind: {
+        type: String,
+        required: false,
+        default: 'default',
+      },
+      closeButtonLabel: {
+        type: String,
+        required: false,
+        default: 'Cancel',
+      },
+      primaryButtonLabel: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      submitDisabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
-    title: {
-      type: String,
-      required: false,
-    },
-    text: {
-      type: String,
-      required: false,
-    },
-    hideFooter: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    kind: {
-      type: String,
-      required: false,
-      default: 'primary',
-    },
-    modalDialogClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    closeKind: {
-      type: String,
-      required: false,
-      default: 'default',
-    },
-    closeButtonLabel: {
-      type: String,
-      required: false,
-      default: 'Cancel',
-    },
-    primaryButtonLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    submitDisabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
 
-  computed: {
-    btnKindClass() {
-      return {
-        [`btn-${this.kind}`]: true,
-      };
+    computed: {
+      btnKindClass() {
+        return {
+          [`btn-${this.kind}`]: true,
+        };
+      },
+      btnCancelKindClass() {
+        return {
+          [`btn-${this.closeKind}`]: true,
+        };
+      },
     },
-    btnCancelKindClass() {
-      return {
-        [`btn-${this.closeKind}`]: true,
-      };
-    },
-  },
 
-  methods: {
-    emitCancel(event) {
-      this.$emit('cancel', event);
-    },
-    emitSubmit(event) {
-      this.$emit('submit', event);
+    methods: {
+      emitCancel(event) {
+        this.$emit('cancel', event);
+      },
+      emitSubmit(event) {
+        this.$emit('submit', event);
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
-<div class="modal-open">
-  <div
-    :id="id"
-    class="modal"
-    :class="id ? '' : 'show'"
-    role="dialog"
-    tabindex="-1"
-  >
+  <div class="modal-open">
     <div
-      :class="modalDialogClass"
-      class="modal-dialog"
-      role="document"
+      :id="id"
+      class="modal"
+      :class="id !== '' ? '' : 'show'"
+      role="dialog"
+      tabindex="-1"
     >
-      <div class="modal-content">
-        <div class="modal-header">
-          <slot name="header">
-            <h4 class="modal-title pull-left">
-              {{this.title}}
-            </h4>
+      <div
+        :class="modalDialogClass"
+        class="modal-dialog"
+        role="document"
+      >
+        <div class="modal-content">
+          <div class="modal-header">
+            <slot name="header">
+              <h4 class="modal-title pull-left">
+                {{ this.title }}
+              </h4>
+              <button
+                type="button"
+                class="close pull-right"
+                @click="emitCancel($event)"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </slot>
+          </div>
+          <div class="modal-body">
+            <slot name="body" :text="text">
+              <p>{{ this.text }}</p>
+            </slot>
+          </div>
+          <div
+            class="modal-footer"
+            v-if="!hideFooter"
+          >
             <button
               type="button"
-              class="close pull-right"
+              class="btn pull-left"
+              :class="btnCancelKindClass"
               @click="emitCancel($event)"
               data-dismiss="modal"
-              aria-label="Close"
             >
-              <span aria-hidden="true">&times;</span>
+              {{ closeButtonLabel }}
             </button>
-          </slot>
-        </div>
-        <div class="modal-body">
-          <slot name="body" :text="text">
-            <p>{{this.text}}</p>
-          </slot>
-        </div>
-        <div class="modal-footer" v-if="!hideFooter">
-          <button
-            type="button"
-            class="btn pull-left"
-            :class="btnCancelKindClass"
-            @click="emitCancel($event)"
-            data-dismiss="modal">
-            {{ closeButtonLabel }}
-          </button>
-          <button
-            v-if="primaryButtonLabel"
-            type="button"
-            class="btn pull-right js-primary-button"
-            :disabled="submitDisabled"
-            :class="btnKindClass"
-            @click="emitSubmit($event)"
-            data-dismiss="modal">
-            {{ primaryButtonLabel }}
-          </button>
+            <button
+              v-if="primaryButtonLabel"
+              type="button"
+              class="btn pull-right js-primary-button"
+              :disabled="submitDisabled"
+              :class="btnKindClass"
+              @click="emitSubmit($event)"
+              data-dismiss="modal"
+            >
+              {{ primaryButtonLabel }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
+    <div
+      v-if="id !== ''"
+      class="modal-backdrop fade in">
+    </div>
   </div>
-  <div
-    v-if="!id"
-    class="modal-backdrop fade in">
-  </div>
-</div>
 </template>

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

 <script>
-import modal from './modal.vue';
+  import modal from './modal.vue';
 
-export default {
-  name: 'recaptcha-modal',
+  export default {
+    name: 'RecaptchaModal',
 
-  props: {
-    html: {
-      type: String,
-      required: false,
-      default: '',
+    components: {
+      modal,
     },
-  },
 
-  data() {
-    return {
-      script: {},
-      scriptSrc: 'https://www.google.com/recaptcha/api.js',
-    };
-  },
+    props: {
+      html: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
 
-  components: {
-    modal,
-  },
+    data() {
+      return {
+        script: {},
+        scriptSrc: 'https://www.google.com/recaptcha/api.js',
+      };
+    },
 
-  methods: {
-    appendRecaptchaScript() {
-      this.removeRecaptchaScript();
+    watch: {
+      html() {
+        this.appendRecaptchaScript();
+      },
+    },
 
-      const script = document.createElement('script');
-      script.src = this.scriptSrc;
-      script.classList.add('js-recaptcha-script');
-      script.async = true;
-      script.defer = true;
+    mounted() {
+      window.recaptchaDialogCallback = this.submit.bind(this);
+    },
 
-      this.script = script;
+    methods: {
+      appendRecaptchaScript() {
+        this.removeRecaptchaScript();
 
-      document.body.appendChild(script);
-    },
+        const script = document.createElement('script');
+        script.src = this.scriptSrc;
+        script.classList.add('js-recaptcha-script');
+        script.async = true;
+        script.defer = true;
 
-    removeRecaptchaScript() {
-      if (this.script instanceof Element) this.script.remove();
-    },
+        this.script = script;
 
-    close() {
-      this.removeRecaptchaScript();
-      this.$emit('close');
-    },
+        document.body.appendChild(script);
+      },
 
-    submit() {
-      this.$el.querySelector('form').submit();
-    },
-  },
+      removeRecaptchaScript() {
+        if (this.script instanceof Element) this.script.remove();
+      },
 
-  watch: {
-    html() {
-      this.appendRecaptchaScript();
-    },
-  },
+      close() {
+        this.removeRecaptchaScript();
+        this.$emit('close');
+      },
 
-  mounted() {
-    window.recaptchaDialogCallback = this.submit.bind(this);
-  },
-};
+      submit() {
+        this.$el.querySelector('form').submit();
+      },
+    },
+  };
 </script>
 
 <template>
-<modal
-  kind="warning"
-  class="recaptcha-modal js-recaptcha-modal"
-  :hide-footer="true"
-  :title="__('Please solve the reCAPTCHA')"
-  @cancel="close"
->
-  <div slot="body">
-    <p>
-      {{__('We want to be sure it is you, please confirm you are not a robot.')}}
-    </p>
-    <div
-      ref="recaptcha"
-      v-html="html"
-    ></div>
-  </div>
-</modal>
+  <modal
+    kind="warning"
+    class="recaptcha-modal js-recaptcha-modal"
+    :hide-footer="true"
+    :title="__('Please solve the reCAPTCHA')"
+    @cancel="close"
+  >
+    <div slot="body">
+      <p>
+        {{ __('We want to be sure it is you, please confirm you are not a robot.') }}
+      </p>
+      <div
+        ref="recaptcha"
+        v-html="html"
+      >
+      </div>
+    </div>
+  </modal>
 </template>

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

@@ -24,7 +24,11 @@
     <i
       aria-label="toggle collapse"
       class="fa"
-      :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }"
-    />
+      :class="{
+        'fa-angle-double-right': !collapsed,
+        'fa-angle-double-left': collapsed
+      }"
+    >
+    </i>
   </button>
 </template>