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