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

@@ -110,9 +110,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

@@ -170,8 +170,8 @@
           tooltip-placement="bottom"
         />
         <span
-          v-tooltip
           v-if="shouldRenderCounter"
+          v-tooltip
           :title="assigneeCounterTooltip"
           class="avatar-counter"
         >
@@ -184,10 +184,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

@@ -83,10 +83,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}`"
       />
 
       <template
@@ -102,10 +102,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

@@ -214,8 +214,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

@@ -240,8 +240,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>
@@ -250,8 +250,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>
@@ -261,8 +261,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]"
           />
@@ -272,8 +272,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]"
           />
@@ -308,8 +308,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>
@@ -318,8 +318,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

@@ -68,9 +68,9 @@ export default {
         class="stage-column-list">
         <stage-column-component
           v-for="(stage, index) in graph"
+          :key="stage.name"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
-          :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
           @refreshPipelineGraph="refreshPipelineGraph"

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

@@ -62,9 +62,9 @@ export default {
       <ul>
         <li
           v-for="(job, index) in jobs"
+          :id="jobId(job)"
           :key="job.id"
           :class="buildConnnectorClass(index)"
-          :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"