Resolve eslint-plugin-vue errors

The eslint-plugin-vue upgrade had some breaking changes to
vue/attribute-order which needed to be resolved in order to avoid
disabling the rule entirely

.eslintrc.yml

@@ -90,3 +90,10 @@ rules:
     - 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/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

@@ -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/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

@@ -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

 <script>
+/* eslint-disable vue/prop-name-casing */
+
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';

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/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

@@ -240,8 +240,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"
@@ -286,8 +286,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,
         'issue-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"