fix: apply ESLint rule vue/no-unused-refs

app/javascript/dashboard/components/ModalHeader.vue

@@ -21,6 +21,8 @@ export default {
 };
 </script>
 
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -324,7 +324,6 @@ export default {
     </div>
     <woot-context-menu
       v-if="showContextMenu"
-      ref="menu"
       :x="contextMenu.x"
       :y="contextMenu.y"
       @close="closeContextMenu"

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -42,10 +42,9 @@ export default {
 
 <template>
   <div class="w-full">
-    <div class="templates__list-search gap-1">
+    <div class="gap-1 templates__list-search">
       <fluent-icon icon="search" class="search-icon" size="16" />
       <input
-        ref="search"
         v-model="query"
         type="search"
         :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
@@ -64,7 +63,7 @@ export default {
                 {{ template.name }}
               </p>
               <span
-                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+                class="inline-block px-2 py-1 text-xs leading-none bg-white rounded-sm cursor-default dark:bg-slate-700 text-slate-800 dark:text-slate-100"
               >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -118,7 +118,6 @@ export default {
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -147,7 +147,6 @@ export default {
     <div class="flex items-center justify-between">
       <label class="flex items-center justify-between bulk-action__panel">
         <input
-          ref="selectAllCheck"
           type="checkbox"
           class="checkbox"
           :checked="allConversationsSelected"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -54,7 +54,6 @@ export default {
         >
           <fluent-icon icon="search" class="search-icon" size="16" />
           <input
-            ref="search"
             v-model="query"
             type="search"
             :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -55,7 +55,6 @@ export default {
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input
-                ref="search"
                 v-model="query"
                 type="search"
                 :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"