Added data-e2e to Global search filters [SCI-10717]

app/javascript/vue/global_search/filters.vue

@@ -1,33 +1,36 @@
 <template>
   <div class="max-w-[600px] py-3.5">
     <div class="flex flex-col pb-6 overflow-y-auto max-h-[calc(80vh_-_160px)]">
-      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_type') }}</div>
+      <div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByType">{{ i18n.t('search.filters.by_type') }}</div>
       <div class="flex items-center gap-2 flex-wrap mb-6">
         <template v-for="group in searchGroups" :key="group.value">
           <button class="btn btn-secondary btn-xs"
                   ref="groupButtons"
                   :class="{'active': activeGroup === group.value}"
-                  @click="setActiveGroup(group.value)">
+                  @click="setActiveGroup(group.value)"
+                  :data-e2e="`e2e-BT-globalSearch-filters-${group.label.toLowerCase().replaceAll(/\s+/g, '')}`">
             {{ group.label }}
           </button>
         </template>
       </div>
-      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_created_date') }}</div>
+      <div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByCreated">{{ i18n.t('search.filters.by_created_date') }}</div>
       <DateFilter
         :date="createdAt"
         ref="createdAtComponent"
         class="mb-6"
         @change="(v) => {this.createdAt = v}"
+        e2eValue="globalSearch-filters-createdDate"
       ></DateFilter>
-      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_updated_date') }}</div>
+      <div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByUpdated">{{ i18n.t('search.filters.by_updated_date') }}</div>
       <DateFilter
         :date="updatedAt"
         ref="updatedAtComponent"
         class="mb-6"
         @change="(v) => {this.updatedAt = v}"
+        e2eValue="globalSearch-filters-updatedDate"
       ></DateFilter>
       <template v-if="teams.length > 1">
-        <div class="sci-label mb-2">{{ i18n.t('search.filters.by_team') }}</div>
+        <div class="sci-label mb-2" data-e2e="e2e-TX-globalSearch-filters-filterByTeam">{{ i18n.t('search.filters.by_team') }}</div>
         <SelectDropdown :options="teams"
                         class="mb-6"
                         :with-checkboxes="true"
@@ -36,9 +39,10 @@
                         :multiple="true"
                         :value="selectedTeams"
                         :placeholder="i18n.t('search.filters.by_team_placeholder')"
-                        @change="selectTeams" />
+                        @change="selectTeams"
+                        e2eValue="e2e-DC-globalSearch-filters-teams" />
       </template>
-      <div class="sci-label mb-2 flex items-center gap-2">
+      <div class="sci-label mb-2 flex items-center gap-2" data-e2e="e2e-TX-globalSearch-filters-filterByUser">
         {{ i18n.t('search.filters.by_user') }}
         <i class="sn-icon sn-icon-info" :title="i18n.t('search.filters.by_user_info')"></i>
       </div>
@@ -52,10 +56,11 @@
                       :with-checkboxes="true"
                       :multiple="true"
                       :placeholder="i18n.t('search.filters.by_user_placeholder')"
-                      @change="selectUsers" />
-      <div class="flex items-center gap-2">
+                      @change="selectUsers"
+                      e2eValue="e2e-DC-globalSearch-filters-users" />
+      <div class="flex items-center gap-2" data-e2e="e2e-TX-globalSearch-filters-includeArchived">
         <div class="sci-checkbox-container">
-          <input type="checkbox" v-model="includeArchived" class="sci-checkbox" />
+          <input type="checkbox" v-model="includeArchived" class="sci-checkbox" data-e2e="e2e-CB-globalSearch-filters-includeArchived"/>
           <span class="sci-checkbox-label"></span>
         </div>
         {{ i18n.t('search.filters.include_archived') }}
@@ -63,9 +68,9 @@
     </div>
     <hr class="mb-6">
     <div class="flex items-center gap-6">
-      <button class="btn btn-light" @click="clearFilters">{{ i18n.t('search.filters.clear') }}</button>
-      <button class="btn btn-secondary ml-auto" @click="$emit('cancel')">{{ i18n.t('general.cancel') }}</button>
-      <button class="btn btn-primary" @click="search" >{{ i18n.t('general.search') }}</button>
+      <button class="btn btn-light" @click="clearFilters" data-e2e="e2e-BT-globalSearch-filters-clearFilters">{{ i18n.t('search.filters.clear') }}</button>
+      <button class="btn btn-secondary ml-auto" @click="$emit('cancel')" data-e2e="e2e-BT-globalSearch-filters-cancel">{{ i18n.t('general.cancel') }}</button>
+      <button class="btn btn-primary" @click="search" data-e2e="e2e-BT-globalSearch-filters-search">{{ i18n.t('general.search') }}</button>
     </div>
   </div>
 </template>

app/javascript/vue/global_search/filters/date.vue

@@ -3,6 +3,7 @@
     <SelectDropdown class="!w-40"
                     :options="dateOptions"
                     :value="selectedOption"
+                    :data-e2e="`e2e-DD-${e2eValue}`"
                     @change="(v) => {selectedOption = v}" />
     <div class="grow">
       <DateTimePicker
@@ -12,7 +13,8 @@
         size="mb"
         placeholder="Enter date"
         :defaultValue="date.on"
-        :clearable="true"/>
+        :clearable="true"
+        :data-e2e="`e2e-DP-${e2eValue}`"/>
       <DateTimePicker
         v-if="selectedOption === 'custom'"
         @change="setFrom"
@@ -21,7 +23,8 @@
         size="mb"
         placeholder="From date"
         :defaultValue="date.from"
-        :clearable="true"/>
+        :clearable="true"
+        :data-e2e="`e2e-DP-${e2eValue}From`"/>
       <DateTimePicker
         v-if="selectedOption === 'custom'"
         @change="setTo"
@@ -29,7 +32,8 @@
         size="mb"
         placeholder="To date"
         :defaultValue="date.to"
-        :clearable="true"/>
+        :clearable="true"
+        :data-e2e="`e2e-DP-${e2eValue}To`"/>
     </div>
   </div>
 </template>
@@ -44,6 +48,10 @@ export default {
     date: {
       type: Object,
       required: true
+    },
+    e2eValue:{
+      type: String,
+      default: ''
     }
   },
   components: {

app/javascript/vue/global_search/filters_modal.vue

@@ -2,15 +2,15 @@
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <form @submit.prevent="submit">
-        <div class="modal-content !pb-2.5">
+        <div class="modal-content !pb-2.5" data-e2e="e2e-MD-globalSearch-filters">
           <div class="modal-header flex-wrap">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-globalSearch-filters-close">
               <i class="sn-icon sn-icon-close"></i>
             </button>
-            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" data-e2e="e2e-TX-globalSearch-filters-title">
               {{ i18n.t('search.filters.title') }}
             </h4>
-            <div class="basis-full">
+            <div class="basis-full" data-e2e="e2e-TX-globalSearch-filters-subtitle">
               {{ i18n.t('search.filters.sub_title') }}
             </div>
           </div>

app/javascript/vue/shared/select_dropdown.vue

@@ -2,7 +2,8 @@
   <div v-click-outside="close"
        @focus="open"
        @keydown="keySelectOptions($event)"
-       tabindex="0" class="w-full focus:outline-none "
+       tabindex="0" class="w-full focus:outline-none"
+       :data-e2e="e2eValue ? e2eValue : null"
   >
     <div
       ref="field"
@@ -126,7 +127,8 @@ export default {
     searchable: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     tagsView: { type: Boolean, default: false },
-    urlParams: { type: Object, default: () => ({}) }
+    urlParams: { type: Object, default: () => ({}) },
+    e2eValue: { type: String }
   },
   directives: {
     'click-outside': vOnClickOutside