Merge branch 'upgrade-eslint-ee' into 'master'

Upgrade eslint (EE port)

See merge request gitlab-org/gitlab-ee!7422

.eslintrc.yml

@@ -56,6 +56,10 @@ rules:
         component: always
       svg: always
       math: always
+  camelcase:
+    - error
+    - properties: never
+      ignoreDestructuring: true
   ## Conflicting rules with prettier:
   space-before-function-paren: off
   curly: off
@@ -63,7 +67,7 @@ rules:
   function-paren-newline: off
   object-curly-newline: off
   padded-blocks: off
-  # Disabled for now, to make the eslint 3 -> eslint 4 update smoother
+  # Disabled for now, to make the eslint 3 -> eslint 5 update smoother
   ## Indent rule. We are using the old for now: https://eslint.org/docs/user-guide/migrating-to-4.0.0#indent-rewrite
   indent: off
   indent-legacy:
@@ -78,3 +82,18 @@ rules:
       FunctionExpression:
         parameters: 1
         body: 1
+  # Disabled for now, to make the airbnb-base 12.1.0 -> 13.1.0 update smoother
+  operator-linebreak: off
+  implicit-arrow-linebreak: off
+  no-else-return:
+    - error
+    - allowElseIf: true
+  import/no-useless-path-segments: off
+  lines-between-class-members: off
+  # Disabled for now, to make the plugin-vue 4.5 -> 5.0 update smoother
+  vue/html-closing-bracket-newline: off
+  vue/html-closing-bracket-spacing: off
+  vue/no-confusing-v-for-v-if: error
+  vue/no-unused-components: off
+  vue/no-use-v-if-with-v-for: off
+  vue/no-v-html: off

app/assets/javascripts/badges/components/badge.vue

@@ -103,8 +103,8 @@ export default {
     </div>
 
     <button
-      v-tooltip
       v-show="hasError"
+      v-tooltip
       :title="s__('Badges|Reload badge image')"
       class="btn btn-transparent btn-sm text-primary"
       type="button"

app/assets/javascripts/boards/components/board_list.vue

@@ -231,14 +231,14 @@ export default {
       <board-card
         v-for="(issue, index) in issues"
         ref="issue"
+        :key="issue.id"
         :index="index"
         :list="list"
         :issue="issue"
         :issue-link-base="issueLinkBase"
         :group-id="groupId"
         :root-path="rootPath"
-        :disabled="disabled"
-        :key="issue.id" />
+        :disabled="disabled" />
       <li
         v-if="showCount"
         class="board-list-count text-center"

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -113,9 +113,9 @@ export default {
           Title
         </label>
         <input
+          :id="list.id + '-title'"
           ref="input"
           v-model="title"
-          :id="list.id + '-title'"
           class="form-control"
           type="text"
           name="issue_title"

app/assets/javascripts/boards/components/issue_card_inner.vue

@@ -176,8 +176,8 @@
           tooltip-placement="bottom"
         />
         <span
-          v-tooltip
           v-if="shouldRenderCounter"
+          v-tooltip
           :title="assigneeCounterTooltip"
           class="avatar-counter"
         >
@@ -190,10 +190,10 @@
       class="board-card-footer"
     >
       <button
-        v-tooltip
         v-for="label in issue.labels"
         v-if="showLabel(label)"
         :key="label.id"
+        v-tooltip
         :style="labelStyle(label)"
         :title="label.description"
         class="badge color-label"

app/assets/javascripts/boards/index.js

@@ -9,7 +9,7 @@ import '~/vue_shared/models/assignee';
 
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
-import sidebarEventHub from '~/sidebar/event_hub'; // eslint-disable-line import/first
+import sidebarEventHub from '~/sidebar/event_hub';
 import './models/milestone';
 import './models/project';
 import './stores/boards_store';
@@ -21,19 +21,19 @@ import './components/board';
 import './components/board_sidebar';
 import './components/new_list_dropdown';
 import BoardAddIssuesModal from './components/modal/index.vue';
-import '~/vue_shared/vue_resource_interceptor'; // eslint-disable-line import/first
+import '~/vue_shared/vue_resource_interceptor';
 
-import 'ee/boards/models/list'; // eslint-disable-line import/first
-import 'ee/boards/models/issue'; // eslint-disable-line import/first
-import 'ee/boards/models/project'; // eslint-disable-line import/first
-import BoardService from 'ee/boards/services/board_service'; // eslint-disable-line import/first
-import 'ee/boards/components/board_sidebar'; // eslint-disable-line import/first
-import 'ee/boards/components/board'; // eslint-disable-line import/first
-import 'ee/boards/components/modal/index'; // eslint-disable-line import/first
-import 'ee/boards/components/boards_selector'; // eslint-disable-line import/first
-import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg'; // eslint-disable-line import/first
-import expandIcon from 'ee/boards/icons/fullscreen_expand.svg'; // eslint-disable-line import/first
-import tooltip from '~/vue_shared/directives/tooltip'; // eslint-disable-line import/first
+import 'ee/boards/models/list';
+import 'ee/boards/models/issue';
+import 'ee/boards/models/project';
+import BoardService from 'ee/boards/services/board_service';
+import 'ee/boards/components/board_sidebar';
+import 'ee/boards/components/board';
+import 'ee/boards/components/modal/index';
+import 'ee/boards/components/boards_selector';
+import collapseIcon from 'ee/boards/icons/fullscreen_collapse.svg';
+import expandIcon from 'ee/boards/icons/fullscreen_expand.svg';
+import tooltip from '~/vue_shared/directives/tooltip';
 
 export default () => {
   const $boardApp = document.getElementById('board-app');

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

@@ -145,8 +145,8 @@ export default {
             <icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
           </a>
           <a
-            v-tooltip
             v-if="isExpandable"
+            v-tooltip
             :title="restProjectsTooltip"
             class="label deploy-project-label"
             @click="toggleExpanded"
@@ -154,10 +154,10 @@ export default {
             <span>{{ restProjectsLabel }}</span>
           </a>
           <a
-            v-tooltip
             v-for="deployKeysProject in restProjects"
             v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
+            v-tooltip
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
             class="label deploy-project-label"
@@ -198,8 +198,8 @@ export default {
           {{ __('Enable') }}
         </action-btn>
         <a
-          v-tooltip
           v-if="deployKey.can_edit"
+          v-tooltip
           :href="editDeployKeyPath"
           :title="__('Edit')"
           class="btn btn-default text-secondary"
@@ -208,8 +208,8 @@ export default {
           <icon name="pencil"/>
         </a>
         <action-btn
-          v-tooltip
           v-if="isRemovable"
+          v-tooltip
           :deploy-key="deployKey"
           :title="__('Remove')"
           btn-css-class="btn-danger"
@@ -219,8 +219,8 @@ export default {
           <icon name="remove"/>
         </action-btn>
         <action-btn
-          v-tooltip
           v-else-if="isEnabled"
+          v-tooltip
           :deploy-key="deployKey"
           :title="__('Disable')"
           btn-css-class="btn-warning"

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -181,8 +181,8 @@ export default {
         </span>
 
         <strong
-          v-tooltip
           v-else
+          v-tooltip
           :title="filePath"
           class="file-title-name"
           data-container="body"
@@ -255,8 +255,8 @@ export default {
       </a>
 
       <a
-        v-tooltip
         v-if="diffFile.externalUrl"
+        v-tooltip
         :href="diffFile.externalUrl"
         :title="`View on ${diffFile.formattedExternalUrl}`"
         target="_blank"

app/assets/javascripts/diffs/components/diff_gutter_avatars.vue

@@ -87,8 +87,8 @@ export default {
         @click.native="toggleDiscussions"
       />
       <span
-        v-gl-tooltip
         v-if="moreText"
+        v-gl-tooltip
         :title="moreText"
         class="diff-comments-more-count js-diff-comment-avatar js-diff-comment-plus"
         data-container="body"

app/assets/javascripts/diffs/components/inline_diff_view.vue

@@ -43,18 +43,18 @@ export default {
         v-for="(line, index) in diffLines"
       >
         <inline-diff-table-row
+          :key="line.lineCode"
           :file-hash="diffFile.fileHash"
           :context-lines-path="diffFile.contextLinesPath"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
-          :key="line.lineCode"
         />
         <inline-diff-comment-row
           v-if="shouldRenderInlineCommentRow(line)"
+          :key="index"
           :diff-file-hash="diffFile.fileHash"
           :line="line"
           :line-index="index"
-          :key="index"
         />
       </template>
     </tbody>

app/assets/javascripts/diffs/components/parallel_diff_view.vue

@@ -45,11 +45,11 @@ export default {
           v-for="(line, index) in diffLines"
         >
           <parallel-diff-table-row
+            :key="index"
             :file-hash="diffFile.fileHash"
             :context-lines-path="diffFile.contextLinesPath"
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
-            :key="index"
           />
           <parallel-diff-comment-row
             v-if="shouldRenderParallelCommentRow(line)"

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

@@ -4,7 +4,7 @@
  */
 import environmentItem from './environment_item.vue';
 
-import deployBoard from 'ee/environments/components/deploy_board_component.vue'; // eslint-disable-line import/first
+import deployBoard from 'ee/environments/components/deploy_board_component.vue'; // eslint-disable-line import/order
 
 export default {
   components: {
@@ -86,10 +86,10 @@ export default {
       :model="model">
       <div
         is="environment-item"
+        :key="`environment-item-${i}`"
         :model="model"
         :can-create-deployment="canCreateDeployment"
         :can-read-environment="canReadEnvironment"
-        :key="`environment-item-${i}`"
       />
 
       <div
@@ -120,10 +120,10 @@ export default {
           <div
             is="environment-item"
             v-for="(children, index) in model.children"
+            :key="`env-item-${i}-${index}`"
             :model="children"
             :can-create-deployment="canCreateDeployment"
             :can-read-environment="canReadEnvironment"
-            :key="`env-item-${i}-${index}`"
           />
 
           <div :key="`sub-div-${i}`">

app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue

@@ -72,8 +72,8 @@ export default {
           @click="onItemActivated(item.text)">
           <span>
             <span
-              v-for="(token, index) in item.tokens"
-              :key="`dropdown-token-${index}`"
+              v-for="(token, tokenIndex) in item.tokens"
+              :key="`dropdown-token-${tokenIndex}`"
               class="filtered-search-history-dropdown-token"
             >
               <span class="name">{{ token.prefix }}</span>

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

 <script>
-/* eslint-disable vue/require-default-prop, vue/require-prop-types */
+/* eslint-disable vue/require-default-prop */
 import Identicon from '../../vue_shared/components/identicon.vue';
 
 export default {

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

@@ -46,8 +46,8 @@ export default {
 <template>
   <div class="controls">
     <a
-      v-tooltip
       v-if="group.canEdit"
+      v-tooltip
       :href="group.editPath"
       :title="editBtnTitle"
       :aria-label="editBtnTitle"
@@ -57,8 +57,8 @@ export default {
       <icon name="settings"/>
     </a>
     <a
-      v-tooltip
       v-if="group.canLeave"
+      v-tooltip
       :href="group.leavePath"
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -60,8 +60,8 @@ export default {
       <div class="position-relative">
         <input
           ref="searchInput"
-          :placeholder="__('Search branches')"
           v-model="search"
+          :placeholder="__('Search branches')"
           type="search"
           class="form-control dropdown-input-field"
           @input="searchBranches"

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -113,8 +113,8 @@ export default {
         </strong>
         <div class="d-flex ml-auto">
           <button
-            v-tooltip
             ref="actionBtn"
+            v-tooltip
             :title="actionBtnText"
             :aria-label="actionBtnText"
             :disabled="!filesLength"
@@ -135,8 +135,8 @@ export default {
             />
           </button>
           <button
-            v-tooltip
             v-if="!stagedList"
+            v-tooltip
             :title="__('Discard all changes')"
             :aria-label="__('Discard all changes')"
             :disabled="!filesLength"

app/assets/javascripts/ide/components/file_finder/index.vue

@@ -174,8 +174,8 @@ export default {
       <div class="dropdown-input">
         <input
           ref="searchInput"
-          :placeholder="__('Search files')"
           v-model="searchText"
+          :placeholder="__('Search files')"
           type="search"
           class="dropdown-input-field"
           autocomplete="off"

app/assets/javascripts/ide/components/file_finder/item.vue

@@ -78,10 +78,10 @@ export default {
         class="diff-changed-file-name"
       >
         <span
-          v-for="(char, index) in file.name.split('')"
-          :key="index + char"
+          v-for="(char, charIndex) in file.name.split('')"
+          :key="charIndex + char"
           :class="{
-            highlighted: nameSearchTextOccurences.indexOf(index) >= 0,
+            highlighted: nameSearchTextOccurences.indexOf(charIndex) >= 0,
           }"
           v-text="char"
         >
@@ -91,10 +91,10 @@ export default {
         class="diff-changed-file-path prepend-top-5"
       >
         <span
-          v-for="(char, index) in pathWithEllipsis.split('')"
-          :key="index + char"
+          v-for="(char, charIndex) in pathWithEllipsis.split('')"
+          :key="charIndex + char"
           :class="{
-            highlighted: pathSearchTextOccurences.indexOf(index) >= 0,
+            highlighted: pathSearchTextOccurences.indexOf(charIndex) >= 0,
           }"
           v-text="char"
         >

app/assets/javascripts/ide/components/jobs/stage.vue

@@ -69,8 +69,8 @@ export default {
         :size="24"
       />
       <strong
-        v-tooltip="showTooltip"
         ref="stageTitle"
+        v-tooltip="showTooltip"
         :title="showTooltip ? stage.name : null"
         data-container="body"
         class="prepend-left-8 ide-stage-title"

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

@@ -26,8 +26,8 @@ export default {
 
 <template>
   <span
-    v-tooltip
     v-if="file.file_lock"
+    v-tooltip
     :title="lockTooltip"
     data-container="body"
   >

app/assets/javascripts/issue_show/components/title.vue

@@ -76,8 +76,8 @@ export default {
     >
     </h2>
     <button
-      v-tooltip
       v-if="showInlineEditButton && canUpdate"
+      v-tooltip
       type="button"
       class="btn btn-default btn-edit btn-svg js-issuable-edit"
       title="Edit title and description"

app/assets/javascripts/jobs/components/job_log_controllers.vue

@@ -78,8 +78,8 @@
     <div class="controllers float-right">
       <!-- links -->
       <a
-        v-tooltip
         v-if="rawTracePath"
+        v-tooltip
         :title="s__('Job|Show complete raw')"
         :href="rawTracePath"
         class="js-raw-link-controller controllers-buttons"
@@ -89,8 +89,8 @@
       </a>
 
       <button
-        v-tooltip
         v-if="canEraseJob"
+        v-tooltip
         :title="s__('Job|Erase job log')"
         type="button"
         class="js-erase-link controllers-buttons"

app/assets/javascripts/jobs/components/jobs_container.vue

@@ -25,9 +25,9 @@
       class="build-job"
     >
       <a
-        v-tooltip
         v-for="job in jobs"
         :key="job.id"
+        v-tooltip
         :href="job.path"
         :title="job.tooltip"
         :class="{ active: job.active, retried: job.retried }"

app/assets/javascripts/main.js

@@ -32,7 +32,7 @@ import initSearchAutocomplete from './search_autocomplete';
 import GlFieldErrors from './gl_field_errors';
 
 // EE-only scripts
-import 'ee/main'; // eslint-disable-line import/first
+import 'ee/main';
 
 // expose jQuery as global (TODO: remove these)
 window.jQuery = jQuery;

app/assets/javascripts/merge_request_tabs.js

@@ -115,8 +115,9 @@ export default class MergeRequestTabs {
       this.mergeRequestTabs &&
       this.mergeRequestTabs.querySelector(`a[data-action='${action}']`) &&
       this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click
-    )
+    ) {
       this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click();
+    }
     this.initAffix();
   }
 

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

@@ -235,8 +235,8 @@ export default {
       :show-panels="showPanels"
     >
       <graph
-        v-for="(graphData, index) in groupData.metrics"
-        :key="index"
+        v-for="(graphData, graphIndex) in groupData.metrics"
+        :key="graphIndex"
         :graph-data="graphData"
         :hover-data="hoverData"
         :update-aspect-ratio="updateAspectRatio"

app/assets/javascripts/monitoring/components/graph/legend.vue

@@ -58,8 +58,8 @@ export default {
         </td>
         <template v-for="(track, trackIndex) in series.tracksLegend">
           <track-line
-            :track="track"
-            :key="`track-line-${trackIndex}`"/>
+            :key="`track-line-${trackIndex}`"
+            :track="track"/>
           <td :key="`track-info-${trackIndex}`">
             <track-info
               :track="track"

app/assets/javascripts/notebook/index.vue

@@ -51,10 +51,10 @@
 <template>
   <div v-if="hasNotebook">
     <component
-      v-for="(cell, index) in cells"
       :is="cellType(cell.cell_type)"
-      :cell="cell"
+      v-for="(cell, index) in cells"
       :key="index"
+      :cell="cell"
       :code-css-class="codeCssClass" />
   </div>
 </template>

app/assets/javascripts/notes/components/diff_file_header.vue

@@ -41,8 +41,8 @@ export default {
     </div>
     <template v-else>
       <component
-        ref="titleWrapper"
         :is="titleTag"
+        ref="titleWrapper"
         :href="diffFile.discussionPath"
       >
         <span v-html="diffFile.blobIcon"></span>

app/assets/javascripts/notes/components/note_awards_list.vue

@@ -182,9 +182,9 @@ export default {
   <div class="note-awards">
     <div class="awards js-awards-block">
       <button
-        v-tooltip
         v-for="(awardList, awardName, index) in groupedAwards"
         :key="index"
+        v-tooltip
         :class="getAwardClassBindings(awardList)"
         :title="awardTitle(awardList)"
         class="btn award-control"

app/assets/javascripts/notes/components/note_form.vue

@@ -171,8 +171,8 @@ export default {
           id="note_note"
           ref="textarea"
           slot="textarea"
-          :data-supports-quick-actions="!isEditing"
           v-model="updatedNoteBody"
+          :data-supports-quick-actions="!isEditing"
           name="note[note]"
           class="note-textarea js-gfm-input js-note-text
 js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -348,10 +348,10 @@ Please check your network connection and try again.`;
               <div class="discussion-notes">
                 <ul class="notes">
                   <component
-                    v-for="note in discussion.notes"
                     :is="componentName(note)"
-                    :note="componentData(note)"
+                    v-for="note in discussion.notes"
                     :key="note.id"
+                    :note="componentData(note)"
                     @handleDeleteNote="deleteNoteHandler"
                   />
                 </ul>

app/assets/javascripts/notes/components/notes_app.vue

@@ -187,10 +187,10 @@ export default {
       class="notes main-notes-list timeline"
     >
       <component
-        v-for="discussion in allDiscussions"
         :is="getComponentName(discussion)"
-        v-bind="getComponentData(discussion)"
+        v-for="discussion in allDiscussions"
         :key="discussion.id"
+        v-bind="getComponentData(discussion)"
       />
     </ul>
 

app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue

@@ -155,10 +155,7 @@
         />
       </form>
     </template>
-    <template
-      slot="secondary-button"
-      slot-scope="props"
-    >
+    <template slot="secondary-button">
       <button
         :disabled="!canSubmit"
         type="button"

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue

@@ -147,8 +147,8 @@
     <div class="cron-interval-input-wrapper">
       <input
         id="schedule_cron"
-        :placeholder="__('Define a custom pattern with cron syntax')"
         v-model="cronInterval"
+        :placeholder="__('Define a custom pattern with cron syntax')"
         :name="inputNameAttribute"
         :disabled="!isEditable"
         class="form-control inline cron-interval-input"

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -253,8 +253,8 @@
         help-text="Lightweight issue tracking system for this project"
       >
         <project-feature-setting
-          :options="featureAccessLevelOptions"
           v-model="issuesAccessLevel"
+          :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][issues_access_level]"
         />
       </project-setting-row>
@@ -263,8 +263,8 @@
         help-text="View and edit files in this project"
       >
         <project-feature-setting
-          :options="featureAccessLevelOptions"
           v-model="repositoryAccessLevel"
+          :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][repository_access_level]"
         />
       </project-setting-row>
@@ -274,8 +274,8 @@
           help-text="Submit changes to be merged upstream"
         >
           <project-feature-setting
-            :options="repoFeatureAccessLevelOptions"
             v-model="mergeRequestsAccessLevel"
+            :options="repoFeatureAccessLevelOptions"
             :disabled-input="!repositoryEnabled"
             name="project[project_feature_attributes][merge_requests_access_level]"
           />
@@ -285,8 +285,8 @@
           help-text="Build, test, and deploy your changes"
         >
           <project-feature-setting
-            :options="repoFeatureAccessLevelOptions"
             v-model="buildsAccessLevel"
+            :options="repoFeatureAccessLevelOptions"
             :disabled-input="!repositoryEnabled"
             name="project[project_feature_attributes][builds_access_level]"
           />
@@ -333,8 +333,8 @@
         help-text="Pages for project documentation"
       >
         <project-feature-setting
-          :options="featureAccessLevelOptions"
           v-model="wikiAccessLevel"
+          :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][wiki_access_level]"
         />
       </project-setting-row>
@@ -343,8 +343,8 @@
         help-text="Share code pastes with others out of Git repository"
       >
         <project-feature-setting
-          :options="featureAccessLevelOptions"
           v-model="snippetsAccessLevel"
+          :options="featureAccessLevelOptions"
           name="project[project_feature_attributes][snippets_access_level]"
         />
       </project-setting-row>

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -130,8 +130,8 @@ export default {
       </div>
       <simple-metric
         v-for="metric in $options.simpleMetrics"
-        :current-request="currentRequest"
         :key="metric"
+        :current-request="currentRequest"
         :metric="metric"
       />
       <div

app/assets/javascripts/pipelines/components/graph/graph_component.vue

 <script>
 import _ from 'underscore';
 import StageColumnComponent from './stage_column_component.vue';
-import LinkedPipelinesColumn from 'ee/pipelines/components/graph/linked_pipelines_column.vue'; // eslint-disable-line import/first
+import LinkedPipelinesColumn from 'ee/pipelines/components/graph/linked_pipelines_column.vue'; // eslint-disable-line import/order
 
 export default {
   components: {
@@ -94,6 +94,7 @@ export default {
       >
         <stage-column-component
           v-for="(stage, index) in graph"
+          :key="stage.name"
           :class="{
             'has-upstream': index === 0 && hasTriggeredBy,
             'has-downstream': index === graph.length - 1 && hasTriggered,
@@ -101,7 +102,6 @@ export default {
           }"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
-          :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
           :has-triggered-by="hasTriggeredBy"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -98,8 +98,8 @@ export default {
 <template>
   <div class="ci-job-component">
     <a
-      v-tooltip
       v-if="status.has_details"
+      v-tooltip
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
@@ -115,8 +115,8 @@ export default {
     </a>
 
     <div
-      v-tooltip
       v-else
+      v-tooltip
       :title="tooltipText"
       :class="cssClassJobName"
       class="js-job-component-tooltip non-details-job-component"

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -67,11 +67,11 @@ export default {
       <ul>
         <li
           v-for="(job, index) in jobs"
+          :id="jobId(job)"
           :key="job.id"
           :class="{
             'left-connector': index === 0 && (!isFirstColumn || hasTriggeredBy)
           }"
-          :id="jobId(job)"
           class="build"
         >
 

app/assets/javascripts/pipelines/components/pipeline_url.vue

@@ -67,29 +67,29 @@ export default {
     </span>
     <div class="label-container">
       <span
-        v-tooltip
         v-if="pipeline.flags.latest"
+        v-tooltip
         class="js-pipeline-url-latest badge badge-success"
         title="Latest pipeline for this branch">
         latest
       </span>
       <span
-        v-tooltip
         v-if="pipeline.flags.yaml_errors"
+        v-tooltip
         :title="pipeline.yaml_errors"
         class="js-pipeline-url-yaml badge badge-danger">
         yaml invalid
       </span>
       <span
-        v-tooltip
         v-if="pipeline.flags.failure_reason"
+        v-tooltip
         :title="pipeline.failure_reason"
         class="js-pipeline-url-failure badge badge-danger">
         error
       </span>
       <a
-        v-popover="popoverOptions"
         v-if="pipeline.flags.auto_devops"
+        v-popover="popoverOptions"
         tabindex="0"
         class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
         role="button">

app/assets/javascripts/pipelines/components/stage.vue

@@ -155,9 +155,9 @@ export default {
 <template>
   <div class="dropdown">
     <button
-      v-tooltip
       id="stageDropdown"
       ref="dropdown"
+      v-tooltip
       :class="triggerButtonClass"
       :title="stage.title"
       class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"

app/assets/javascripts/registry/components/collapsible_container.vue

@@ -88,8 +88,8 @@
 
       <div class="controls d-none d-sm-block float-right">
         <button
-          v-tooltip
           v-if="repo.canDelete"
+          v-tooltip
           :title="s__('ContainerRegistry|Remove repository')"
           :aria-label="s__('ContainerRegistry|Remove repository')"
           type="button"

app/assets/javascripts/registry/components/table_registry.vue

@@ -118,8 +118,8 @@
 
           <td class="content">
             <button
-              v-tooltip
               v-if="item.canDelete"
+              v-tooltip
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
               type="button"

app/assets/javascripts/reports/components/grouped_test_reports_app.vue

@@ -92,16 +92,16 @@
         v-for="(report, i) in reports"
       >
         <summary-row
+          :key="`summary-row-${i}`"
           :summary="reportText(report)"
           :status-icon="getReportIcon(report)"
-          :key="`summary-row-${i}`"
         />
         <issues-list
           v-if="shouldRenderIssuesList(report)"
+          :key="`issues-list-${i}`"
           :unresolved-issues="report.existing_failures"
           :new-issues="report.new_failures"
           :resolved-issues="report.resolved_failures"
-          :key="`issues-list-${i}`"
           :component="$options.componentNames.TestIssueBody"
           class="report-block-group-list"
         />

app/assets/javascripts/reports/components/report_issues.vue

@@ -37,8 +37,8 @@ export default {
     <ul class="report-block-list">
       <li
         v-for="(issue, index) in issues"
-        :class="{ 'is-dismissed': issue.isDismissed }"
         :key="index"
+        :class="{ 'is-dismissed': issue.isDismissed }"
         class="report-block-list-issue"
       >
         <issue-status-icon
@@ -47,8 +47,8 @@ export default {
         />
 
         <component
-          v-if="component"
           :is="component"
+          v-if="component"
           :issue="issue"
           :status="issue.status || status"
           :is-new="isNew"

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

@@ -19,19 +19,23 @@ export default {
     TimeTrackingHelpState,
   },
   props: {
+    // eslint-disable-next-line vue/prop-name-casing
     time_estimate: {
       type: Number,
       required: true,
     },
+    // eslint-disable-next-line vue/prop-name-casing
     time_spent: {
       type: Number,
       required: true,
     },
+    // eslint-disable-next-line vue/prop-name-casing
     human_time_estimate: {
       type: String,
       required: false,
       default: '',
     },
+    // eslint-disable-next-line vue/prop-name-casing
     human_time_spent: {
       type: String,
       required: false,

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

@@ -106,8 +106,8 @@ export default {
               </tooltip-on-truncate>
             </template>
             <span
-              v-tooltip
               v-if="hasDeploymentTime"
+              v-tooltip
               :title="deployment.deployed_at_formatted"
               class="js-deploy-time"
             >

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

@@ -114,8 +114,8 @@
           :date-readable="mr.metrics.readableMergedAt"
         />
         <a
-          v-tooltip
           v-if="mr.canRevertInCurrentMR"
+          v-tooltip
           :title="revertTitle"
           class="btn btn-close btn-sm"
           href="#modal-revert-commit"
@@ -125,8 +125,8 @@
           {{ revertLabel }}
         </a>
         <a
-          v-tooltip
           v-else-if="mr.revertInForkPath"
+          v-tooltip
           :href="mr.revertInForkPath"
           :title="revertTitle"
           class="btn btn-close btn-sm"
@@ -135,8 +135,8 @@
           {{ revertLabel }}
         </a>
         <a
-          v-tooltip
           v-if="mr.canCherryPickInCurrentMR"
+          v-tooltip
           :title="cherryPickTitle"
           class="btn btn-default btn-sm"
           href="#modal-cherry-pick-commit"
@@ -146,8 +146,8 @@
           {{ cherryPickLabel }}
         </a>
         <a
-          v-tooltip
           v-else-if="mr.cherryPickInForkPath"
+          v-tooltip
           :href="mr.cherryPickInForkPath"
           :title="cherryPickTitle"
           class="btn btn-default btn-sm"

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

@@ -37,8 +37,8 @@ export default {
   <div class="accept-control inline">
     <label class="merge-param-checkbox">
       <input
-        :disabled="isMergeButtonDisabled"
         v-model="squashBeforeMerge"
+        :disabled="isMergeButtonDisabled"
         type="checkbox"
         name="squash"
         class="qa-squash-checkbox"

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

@@ -291,8 +291,8 @@ export default {
         <template
           v-for="(data, index) in graphData">
           <rect
-            v-tooltip
             :key="index"
+            v-tooltip
             :width="xScale.bandwidth()"
             :x="xScale(data.name)"
             :y="yScale(data.value)"

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

@@ -135,8 +135,8 @@ export default {
           {{ file.name }}
         </span>
         <component
-          v-if="extraComponent"
           :is="extraComponent"
+          v-if="extraComponent"
           :file="file"
           :mouse-over="mouseOver"
         />

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

@@ -126,18 +126,18 @@ export default {
       >
         <a
           v-if="action.type === 'link'"
+          :key="i"
           :href="action.path"
           :class="action.cssClass"
-          :key="i"
         >
           {{ action.label }}
         </a>
 
         <a
           v-else-if="action.type === 'ujs-link'"
+          :key="i"
           :href="action.path"
           :class="action.cssClass"
-          :key="i"
           data-method="post"
           rel="nofollow"
         >
@@ -146,9 +146,9 @@ export default {
 
         <button
           v-else-if="action.type === 'button'"
+          :key="i"
           :disabled="action.isLoading"
           :class="action.cssClass"
-          :key="i"
           type="button"
           @click="onClickAction(action)"
         >

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

@@ -99,8 +99,8 @@ export default {
       {{ __("Not available") }}
     </span>
     <span
-      v-tooltip
       v-if="successPercent"
+      v-tooltip
       :title="successTooltip"
       :style="successBarStyle"
       class="status-green"
@@ -109,8 +109,8 @@ export default {
       {{ successPercent }}%
     </span>
     <span
-      v-tooltip
       v-if="neutralPercent"
+      v-tooltip
       :title="neutralTooltip"
       :style="neutralBarStyle"
       class="status-neutral"
@@ -119,8 +119,8 @@ export default {
       {{ neutralPercent }}%
     </span>
     <span
-      v-tooltip
       v-if="failurePercent"
+      v-tooltip
       :title="failureTooltip"
       :style="failureBarStyle"
       class="status-red"

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

@@ -51,8 +51,8 @@ export default {
 
 <template>
   <span
-    v-tooltip
     v-if="showTooltip"
+    v-tooltip
     :title="title"
     :data-placement="placement"
     class="js-show-tooltip"

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

@@ -94,8 +94,8 @@ export default {
       :tooltip-text="avatarTooltipText"
       :tooltip-placement="tooltipPlacement"
     /><span
-      v-tooltip
       v-if="shouldShowUsername"
+      v-tooltip
       :title="tooltipText"
       :tooltip-placement="tooltipPlacement"
     >{{ username }}</span>

ee/app/assets/javascripts/boards/components/board_form.vue

@@ -294,9 +294,9 @@ export default {
             />
 
             <board-weight-select
+              v-model="board.weight"
               :board="board"
               :weights="weightsArray"
-              v-model="board.weight"
               :can-edit="canAdminBoard"
             />
           </div>

ee/app/assets/javascripts/boards/components/boards_list_selector/list_content.vue

@@ -30,8 +30,8 @@ export default {
   <div class="dropdown-content">
     <ul>
       <component
-        v-for="item in items"
         :is="listContentComponent"
+        v-for="item in items"
         :key="item.id"
         :item="item"
         @onItemSelect="handleItemClick"

ee/app/assets/javascripts/boards/components/boards_list_selector/list_filter.vue

@@ -23,8 +23,8 @@ export default {
     class="dropdown-input"
   >
     <input
-      :placeholder="__('Search')"
       v-model.trim="query"
+      :placeholder="__('Search')"
       type="search"
       class="dropdown-input-field"
       @keyup="handleInputChange"

ee/app/assets/javascripts/boards/stores/boards_store_ee.js

@@ -114,8 +114,9 @@ class BoardsStoreEE {
       !this.$boardApp.hasAttribute('data-show-promotion') ||
       this.promotionIsHidden() ||
       this.store.disabled
-    )
+    ) {
       return;
+    }
 
     this.store.addList({
       id: 'promotion',

ee/app/assets/javascripts/droplab/plugins/custom_number.js

@@ -32,8 +32,9 @@ const CustomNumber = {
         92, // right window
         93, // select
       ].indexOf(e.detail.which || e.detail.keyCode) > -1
-    )
+    ) {
       return;
+    }
 
     if (this.timeout) clearTimeout(this.timeout);
     this.timeout = setTimeout(this.keydown.bind(this, e), 200);

ee/app/assets/javascripts/environments/components/deploy_board_component.vue

@@ -101,12 +101,12 @@
         <div class="deploy-board-instances-container">
           <template v-for="(instance, i) in deployBoardData.instances">
             <instance-component
+              :key="i"
               :status="instance.status"
               :tooltip-text="instance.tooltip"
               :pod-name="instance.pod_name"
               :logs-path="logsPath"
               :stable="instance.stable"
-              :key="i"
             />
           </template>
         </div>

ee/app/assets/javascripts/epics/new_epic/components/new_epic.vue

@@ -74,8 +74,8 @@
     >
       <input
         ref="title"
-        :placeholder="s__('Title')"
         v-model="title"
+        :placeholder="s__('Title')"
         type="text"
         class="form-control"
       />

ee/app/assets/javascripts/epics/sidebar/components/sidebar_date_picker.vue

@@ -248,8 +248,8 @@ export default {
           <template v-if="dateFixed">
             <span>{{ dateFixedWords }}</span>
             <icon
-              v-popover="dateInvalidPopoverOptions"
               v-if="isDateInvalid && selectedDateIsFixed"
+              v-popover="dateInvalidPopoverOptions"
               name="warning"
               css-classes="date-warning-icon append-right-5 prepend-left-5"
               tab-index="0"
@@ -294,8 +294,8 @@ export default {
         <span class="prepend-left-5">{{ __('From milestones:') }}</span>
         <span class="value-content">{{ dateFromMilestonesWords }}</span>
         <icon
-          v-popover="dateInvalidPopoverOptions"
           v-if="isDateInvalid && !selectedDateIsFixed"
+          v-popover="dateInvalidPopoverOptions"
           name="warning"
           css-classes="date-warning-icon prepend-left-5"
           tab-index="0"

ee/app/assets/javascripts/geo_nodes/components/geo_node_detail_item.vue

@@ -127,8 +127,8 @@
         {{ itemTitle }}
       </span>
       <icon
-        v-popover="popoverConfig"
         v-if="hasHelpInfo"
+        v-popover="popoverConfig"
         :size="12"
         css-classes="node-detail-help-text prepend-left-5"
         name="question"
@@ -156,8 +156,8 @@
         :total-count="itemValue.totalCount"
       />
       <icon
-        v-tooltip
         v-show="itemValueStale"
+        v-tooltip
         :title="itemValueStaleTooltip"
         name="time-out"
         css-classes="prepend-left-10 detail-value-stale-icon"

ee/app/assets/javascripts/geo_nodes/components/geo_node_event_status.vue

@@ -49,8 +49,8 @@
         {{ eventString }}
       </strong>
       <span
-        v-tooltip
         v-if="eventTimeStamp"
+        v-tooltip
         :title="timeStampString"
         class="event-status-timestamp"
         data-placement="bottom"

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -75,8 +75,8 @@
             class="node-details-loading prepend-left-10 inline"
           />
           <icon
-            v-tooltip
             v-if="showNodeStatusIcon"
+            v-tooltip
             :name="nodeStatusIconName"
             :size="18"
             :css-classes="nodeStatusIconClass"

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue

@@ -116,8 +116,8 @@
       {{ __('Unknown') }}
     </span>
     <span
-      v-tooltip
       v-else
+      v-tooltip
       :title="syncStatusTooltip"
       class="node-sync-settings"
       data-placement="bottom"

ee/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -38,10 +38,10 @@
     <ul>
       <linked-pipeline
         v-for="(pipeline, index) in linkedPipelines"
+        :key="pipeline.id"
         :class="{
           'flat-connector-before': index === 0 && graphPosition === 'right'
         }"
-        :key="pipeline.id"
         :pipeline-id="pipeline.id"
         :project-name="pipeline.project.name"
         :pipeline-status="pipeline.details.status"

ee/app/assets/javascripts/related_issues/components/issue_item.vue

@@ -37,8 +37,8 @@ export default {
       </a>
       <div class="block text-secondary">
         <icon
-          v-tooltip
           v-if="hasState"
+          v-tooltip
           :css-classes="iconClass"
           :name="iconName"
           :size="12"
@@ -49,9 +49,9 @@ export default {
       </div>
     </div>
     <button
-      v-tooltip
       v-if="canRemove"
       ref="removeButton"
+      v-tooltip
       :disabled="removeDisabled"
       type="button"
       class="btn btn-default js-issue-item-remove-button flex-align-self-center flex-right"

ee/app/assets/javascripts/related_issues/components/issue_token.vue

@@ -39,9 +39,9 @@ export default {
     }"
   >
     <component
-      v-tooltip
-      ref="link"
       :is="computedLinkElementType"
+      ref="link"
+      v-tooltip
       :class="{
         'issue-token-link': isCondensed,
         'issuable-main-info': !isCondensed,
@@ -51,9 +51,9 @@ export default {
       data-placement="top"
     >
       <component
+        :is="innerComponentType"
         v-if="hasTitle"
         ref="title"
-        :is="innerComponentType"
         :class="{
           'issue-token-title issue-token-end': isCondensed,
           'issue-title block-truncated': !isCondensed,
@@ -66,16 +66,16 @@ export default {
         </span>
       </component>
       <component
-        ref="reference"
         :is="innerComponentType"
+        ref="reference"
         :class="{
           'issue-token-reference': isCondensed,
           'issuable-info': !isCondensed,
         }"
       >
         <icon
-          v-tooltip
           v-if="hasState"
+          v-tooltip
           :css-classes="iconClass"
           :name="iconName"
           :size="12"
@@ -86,9 +86,9 @@ export default {
       </component>
     </component>
     <button
-      v-tooltip
       v-if="canRemove"
       ref="removeButton"
+      v-tooltip
       :class="{
         'issue-token-remove-button': isCondensed,
         'btn btn-default': !isCondensed

ee/app/assets/javascripts/roadmap/components/epic_item_details.vue

@@ -86,8 +86,8 @@
     </div>
     <div class="epic-group-timeframe">
       <span
-        v-tooltip
         v-if="isEpicGroupDifferent"
+        v-tooltip
         :title="epic.groupFullName"
         class="epic-group"
         data-placement="right"

ee/app/assets/javascripts/roadmap/components/roadmap_timeline_section.vue

@@ -80,8 +80,8 @@
   >
     <span class="timeline-header-blank"></span>
     <component
-      v-for="(timeframeItem, index) in timeframe"
       :is="headerItemComponentForPreset"
+      v-for="(timeframeItem, index) in timeframe"
       :key="index"
       :timeframe-index="index"
       :timeframe-item="timeframeItem"

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_body.vue

@@ -161,8 +161,8 @@ export default {
     >
       {{ approvalsRequiredStringified }}
       <a
-        v-tooltip
         v-if="showApprovalDocLink"
+        v-tooltip
         :href="mr.approvalsHelpPath"
         :title="__('About this feature')"
         data-placement="bottom"

ee/app/assets/javascripts/vue_shared/components/linked_pipelines_mini_list.vue

@@ -93,9 +93,9 @@
     />
 
     <a
-      v-tooltip
       v-for="pipeline in linkedPipelinesTrimmed"
       :key="pipeline.id"
+      v-tooltip
       :href="pipeline.path"
       :title="pipelineTooltipText(pipeline)"
       :class="triggerButtonClass(pipeline.details.status.group)"
@@ -109,8 +109,8 @@
     </a>
 
     <a
-      v-tooltip
       v-if="shouldRenderCounter"
+      v-tooltip
       :title="counterTooltipText"
       :href="pipelinePath"
       class="linked-pipelines-counter linked-pipeline-mini-item"

ee/spec/javascripts/.eslintrc.yml

@@ -36,3 +36,9 @@ rules:
     - error
     - devDependencies:
       - ee/spec/**/*.js
+  # Temporarily disabled to facilitate an upgrade to eslint-plugin-jasmine
+  jasmine/new-line-before-expect: off
+  jasmine/new-line-between-declarations: off
+  jasmine/no-promise-without-done-fail: off
+  jasmine/prefer-jasmine-matcher: off
+  jasmine/prefer-toHaveBeenCalledWith: off

package.json

@@ -112,22 +112,22 @@
   },
   "devDependencies": {
     "axios-mock-adapter": "^1.15.0",
-    "babel-eslint": "^8.2.3",
+    "babel-eslint": "^9.0.0",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-rewire": "^1.1.0",
     "babel-template": "^6.26.0",
     "babel-types": "^6.26.0",
     "chalk": "^2.4.1",
     "commander": "^2.15.1",
-    "eslint": "~4.12.1",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-import-resolver-webpack": "^0.10.0",
-    "eslint-plugin-filenames": "^1.2.0",
-    "eslint-plugin-html": "4.0.3",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-jasmine": "^2.1.0",
-    "eslint-plugin-promise": "^3.8.0",
-    "eslint-plugin-vue": "^4.5.0",
+    "eslint": "~5.6.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-html": "4.0.5",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jasmine": "^2.10.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-vue": "^5.0.0-beta.3",
     "gettext-extractor": "^3.3.2",
     "gettext-extractor-vue": "^4.0.1",
     "ignore": "^3.3.7",

spec/javascripts/.eslintrc.yml

@@ -35,3 +35,9 @@ rules:
     - error
     - ignore:
       - 'fixtures/blob'
+  # Temporarily disabled to facilitate an upgrade to eslint-plugin-jasmine
+  jasmine/new-line-before-expect: off
+  jasmine/new-line-between-declarations: off
+  jasmine/no-promise-without-done-fail: off
+  jasmine/prefer-jasmine-matcher: off
+  jasmine/prefer-toHaveBeenCalledWith: off

spec/javascripts/close_reopen_report_toggle_spec.js

+/* eslint-disable jasmine/no-unsafe-spy */
+
 import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 import DropLab from '~/droplab/drop_lab';
 

spec/javascripts/lib/utils/poll_spec.js

+/* eslint-disable jasmine/no-unsafe-spy */
+
 import Poll from '~/lib/utils/poll';
 import { successCodes } from '~/lib/utils/http_status';
 

spec/javascripts/right_sidebar_spec.js

-/* eslint-disable no-var, one-var, one-var-declaration-per-line, no-return-assign, vars-on-top, max-len */
+/* eslint-disable no-var, one-var, one-var-declaration-per-line, no-return-assign, vars-on-top, jasmine/no-unsafe-spy, max-len */
 
 import $ from 'jquery';
 import MockAdapter from 'axios-mock-adapter';

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import pipelineComponent from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import mockData from '../mock_data';
-import mockLinkedPipelines from 'ee_spec/pipelines/graph/linked_pipelines_mock_data'; // eslint-disable-line import/first
+import mockLinkedPipelines from 'ee_spec/pipelines/graph/linked_pipelines_mock_data'; // eslint-disable-line import/order
 
 describe('MRWidgetPipeline', () => {
   let vm;

spec/javascripts/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -10,7 +10,7 @@ import { TEST_HOST } from 'spec/test_constants';
 import state from 'ee/vue_shared/security_reports/store/state';
 import mockData, { baseIssues, headIssues, basePerformance, headPerformance } from './mock_data';
 
-import {
+import { // eslint-disable-line import/order
   sastIssues,
   sastIssuesBase,
   dockerReport,
@@ -19,7 +19,7 @@ import {
   dastBase,
   sastBaseAllIssues,
   sastHeadAllIssues,
-} from 'ee_spec/vue_shared/security_reports/mock_data'; // eslint-disable-line import/first
+} from 'ee_spec/vue_shared/security_reports/mock_data';
 
 describe('ee merge request widget options', () => {
   let vm;