Merge branch...

Merge branch '328075-create-eslint-rule-forbidding-data-toggle-dropdown-within-vue-components' into 'master'

Resolve "Create eslint rule forbidding data-toggle="dropdown" within Vue components"

See merge request gitlab-org/gitlab!60069

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

@@ -117,6 +117,7 @@ export default {
           </div>
           <div class="flex-grow align-self-center text-center">
             <div class="js-ca-dropdown dropdown inline">
+              <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle -->
               <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
                 <span class="dropdown-label">
                   <gl-sprintf :message="$options.i18n.dropdownText">

app/assets/javascripts/issue_show/components/fields/description_template.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 
 <template>
+  <!-- eslint-disable @gitlab/vue-no-data-toggle -->
   <div class="dropdown js-issuable-selector-wrap" data-issuable-type="issues">
     <button
       ref="toggle"

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

@@ -354,6 +354,7 @@ export default {
       @click="onDelete"
     />
     <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions">
+      <!-- eslint-disable @gitlab/vue-no-data-toggle -->
       <gl-button
         v-gl-tooltip
         :title="$options.i18n.moreActionsLabel"
@@ -365,6 +366,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       />
+      <!-- eslint-enable @gitlab/vue-no-data-toggle -->
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <gl-dropdown-item v-if="canReportAsAbuse" :href="reportAbusePath">
           {{ __('Report abuse to admin') }}

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

@@ -53,6 +53,7 @@ export default {
 };
 </script>
 <template>
+  <!-- eslint-disable @gitlab/vue-no-data-toggle -->
   <div :id="computedJobId" class="ci-job-dropdown-container dropdown dropright">
     <button
       type="button"

app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue

@@ -28,6 +28,7 @@ export default {
 </script>
 
 <template>
+  <!-- eslint-disable @gitlab/vue-no-data-toggle -->
   <button
     :disabled="isDisabled || isLoading"
     class="dropdown-menu-toggle dropdown-menu-full-width"

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue

@@ -61,6 +61,7 @@ export default {
 </script>
 
 <template>
+  <!-- eslint-disable @gitlab/vue-no-data-toggle -->
   <button
     ref="dropdownButton"
     :class="{ 'js-extra-options': showExtraOptions }"

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_nav_item.vue

@@ -137,6 +137,7 @@ export default {
             data-testid="more-actions-toggle"
           >
             <template #button-content>
+              <!-- eslint-disable @gitlab/vue-no-data-toggle -->
               <span
                 v-gl-tooltip
                 category="tertiary"
@@ -145,6 +146,7 @@ export default {
               >
                 <gl-icon name="ellipsis_v" />
               </span>
+              <!-- eslint-enable @gitlab/vue-no-data-toggle -->
             </template>
             <template v-if="isDefaultStage">
               <gl-dropdown-item

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

@@ -121,6 +121,7 @@ export default {
 
     <div class="selectbox" style="display: none">
       <div class="dropdown">
+        <!-- eslint-disable @gitlab/vue-no-data-toggle -->
         <button
           ref="dropdown"
           :data-field-name="fieldName"
@@ -141,6 +142,8 @@ export default {
             :size="16"
           />
         </button>
+        <!-- eslint-enable @gitlab/vue-no-data-toggle -->
+
         <div
           class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-user dropdown-menu-selectable dropdown-menu-author"
         >

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

@@ -89,6 +89,7 @@ export default {
     <div class="selectbox" style="display: none">
       <input :value="milestoneId" name="milestone_id" type="hidden" />
       <div class="dropdown">
+        <!-- eslint-disable @gitlab/vue-no-data-toggle -->
         <button
           ref="dropdownButton"
           :data-selected="selected"
@@ -110,6 +111,8 @@ export default {
             :size="16"
           />
         </button>
+        <!-- eslint-enable @gitlab/vue-no-data-toggle -->
+
         <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
           <div class="dropdown-input">
             <input

ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue

@@ -102,6 +102,8 @@ export default {
             {{ $options[$options.LICENSE_APPROVAL_ACTION.DENY] }}
           </gl-dropdown-item>
         </gl-dropdown>
+
+        <!-- eslint-disable @gitlab/vue-no-data-toggle -->
         <gl-button
           v-gl-tooltip
           v-gl-modal.modal-license-delete-confirmation
@@ -114,6 +116,7 @@ export default {
           data-toggle="modal"
           @click="setLicenseInModal(license)"
         />
+        <!-- eslint-enable @gitlab/vue-no-data-toggle -->
       </div>
     </div>
   </div>

package.json

@@ -185,7 +185,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.10.1",
-    "@gitlab/eslint-plugin": "8.2.0",
+    "@gitlab/eslint-plugin": "8.3.0",
     "@gitlab/stylelint-config": "2.3.0",
     "@testing-library/dom": "^7.16.2",
     "@vue/test-utils": "1.1.2",

yarn.lock

@@ -867,10 +867,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/at.js/-/at.js-1.5.7.tgz#1ee6f838cc4410a1d797770934df91d90df8179e"
   integrity sha512-c6ySRK/Ma7lxwpIVbSAF3P+xiTLrNTGTLRx4/pHK111AdFxwgUwrYF6aVZFXvmG65jHOJHoa0eQQ21RW6rm0Rg==
 
-"@gitlab/eslint-plugin@8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-8.2.0.tgz#caccf2777febd89420c0225e000a789376ecaba2"
-  integrity sha512-14VJEOmAx8MpsxlYdloWD9KG9+AVX8HLKWAo2M5cz57Ji6AiJtdCAfFCrVetcvzDyeiFA7gt4k1fSKbTjuVgBQ==
+"@gitlab/eslint-plugin@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-8.3.0.tgz#156a375c6ab9e578ba39080932bca27006413486"
+  integrity sha512-AuJ6ddKVbfjVUd9DLaNLhpflThZKULWatpUuI+0RhcqyRTmcb1KL5YPxxKDlE1K+faeefgiWaGB+vSNmyNNPQQ==
   dependencies:
     babel-eslint "^10.0.3"
     eslint-config-airbnb-base "^14.2.1"