CSS fixes for global search filters [SCI-10635]

app/javascript/vue/global_search/filters.vue

@@ -1,55 +1,60 @@
 <template>
   <div class="max-w-[600px] py-3.5">
-    <div class="sci-label mb-2">{{ 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"
-                :class="{'active': activeGroup === group.value}"
-                @click="setActiveGroup(group.value)">
-          {{ group.label }}
-        </button>
-      </template>
-    </div>
-    <div class="sci-label mb-2">{{ i18n.t('search.filters.by_created_date') }}</div>
-    <DateFilter
-      :date="createdAt"
-      ref="createdAtComponent"
-      class="mb-6"
-      @change="(v) => {this.createdAt = v}"
-    ></DateFilter>
-    <div class="sci-label mb-2">{{ i18n.t('search.filters.by_updated_date') }}</div>
-    <DateFilter
-      :date="updatedAt"
-      ref="updatedAtComponent"
-      class="mb-6"
-      @change="(v) => {this.updatedAt = v}"
-    ></DateFilter>
-    <div class="sci-label mb-2">{{ i18n.t('search.filters.by_team') }}</div>
-    <SelectDropdown :options="teams"
-                    class="mb-6"
-                    :with-checkboxes="true"
-                    :clearable="true"
-                    :multiple="true"
-                    :value="selectedTeams"
-                    @change="(v) => {selectedTeams = v}" />
-    <div class="sci-label mb-2">{{ i18n.t('search.filters.by_user') }}</div>
-    <SelectDropdown :options="users"
-                    class="mb-6"
-                    :value="selectedUsers"
-                    :optionRenderer="userRenderer"
-                    :labelRenderer="userRenderer"
-                    :clearable="true"
-                    :with-checkboxes="true"
-                    :multiple="true"
-                    @change="(v) => {selectedUsers = v}" />
-    <div class="flex items-center gap-2">
-      <div class="sci-checkbox-container">
-        <input type="checkbox" v-model="includeArchived" class="sci-checkbox" />
-        <span class="sci-checkbox-label"></span>
+    <div class="flex flex-col pb-6 overflow-y-auto max-h-[75vh]">
+      <div class="sci-label mb-2">{{ 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"
+                  :class="{'active': activeGroup === group.value}"
+                  @click="setActiveGroup(group.value)">
+            {{ group.label }}
+          </button>
+        </template>
+      </div>
+      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_created_date') }}</div>
+      <DateFilter
+        :date="createdAt"
+        ref="createdAtComponent"
+        class="mb-6"
+        @change="(v) => {this.createdAt = v}"
+      ></DateFilter>
+      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_updated_date') }}</div>
+      <DateFilter
+        :date="updatedAt"
+        ref="updatedAtComponent"
+        class="mb-6"
+        @change="(v) => {this.updatedAt = v}"
+      ></DateFilter>
+      <div class="sci-label mb-2">{{ i18n.t('search.filters.by_team') }}</div>
+      <SelectDropdown :options="teams"
+                      class="mb-6"
+                      :with-checkboxes="true"
+                      :clearable="true"
+                      :multiple="true"
+                      :value="selectedTeams"
+                      @change="(v) => {selectedTeams = v}" />
+      <div class="sci-label mb-2 flex items-center gap-2">
+        {{ i18n.t('search.filters.by_user') }}
+        <i class="sn-icon sn-icon-info" :title="i18n.t('search.filters.by_user_info')"></i>
+      </div>
+      <SelectDropdown :options="users"
+                      class="mb-6"
+                      :value="selectedUsers"
+                      :optionRenderer="userRenderer"
+                      :labelRenderer="userRenderer"
+                      :clearable="true"
+                      :with-checkboxes="true"
+                      :multiple="true"
+                      @change="(v) => {selectedUsers = v}" />
+      <div class="flex items-center gap-2">
+        <div class="sci-checkbox-container">
+          <input type="checkbox" v-model="includeArchived" class="sci-checkbox" />
+          <span class="sci-checkbox-label"></span>
+        </div>
+        {{ i18n.t('search.filters.include_archived') }}
       </div>
-      {{ i18n.t('search.filters.include_archived') }}
     </div>
-    <hr class="my-6">
+    <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>

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

@@ -117,14 +117,14 @@ export default {
       newDate: this.date,
       selectedOption: (this.date.mode || 'on'),
       dateOptions: [
-        ['today', 'Today'],
-        ['yesterday', 'Yesterday'],
-        ['last_week', 'Last week'],
-        ['this_month', 'This month'],
-        ['this_year', 'This year'],
-        ['last_year', 'Last year'],
-        ['on', 'On'],
-        ['custom', 'Custom']
+        ['today', this.i18n.t('search.filters.date.today')],
+        ['yesterday', this.i18n.t('search.filters.date.yesterday')],
+        ['last_week', this.i18n.t('search.filters.date.last_week'), { tooltip: this.i18n.t('search.filters.date.last_week_tooltip') }],
+        ['this_month', this.i18n.t('search.filters.date.this_month'), { tooltip: this.i18n.t('search.filters.date.this_month_tooltip') }],
+        ['this_year', this.i18n.t('search.filters.date.this_year'), { tooltip: this.i18n.t('search.filters.date.this_year_tooltip') }],
+        ['last_year', this.i18n.t('search.filters.date.last_year'), { tooltip: this.i18n.t('search.filters.date.last_year_tooltip') }],
+        ['on', this.i18n.t('search.filters.date.on')],
+        ['custom', this.i18n.t('search.filters.date.custom')]
       ]
     };
   },

app/javascript/vue/global_search/groups/projects.vue

@@ -31,7 +31,6 @@
 </template>
 
 <script>
-import Link_template from './helpers/link_template.vue';
 import searchMixin from './search_mixin';
 
 export default {

app/javascript/vue/shared/select_dropdown.vue

@@ -71,6 +71,7 @@
               <div
                 @click.stop="setValue(option[0])"
                 ref="options"
+                :title="option[2]?.tooltip || option[1]"
                 class="py-1.5 px-3 rounded cursor-pointer flex items-center gap-2 shrink-0 hover:bg-sn-super-light-grey"
                 :class="[sizeClass, {
                   '!bg-sn-super-light-blue': valueSelected(option[0]) && focusedOption !== i,

config/locales/en.yml

@@ -473,8 +473,22 @@ en:
       by_updated_date: "Filter by updated date"
       by_team: "Filter by team"
       by_user: "Filter by user"
+      by_user_info: "The 'Filter by user' option will refine search results based on records where the selected user is the creator, modifier, or is assigned to the entry."
       include_archived: "Include Archived objects"
       clear: "Clear filters"
+      date:
+        today: "Today"
+        yesterday: "Yesterday"
+        last_week: "Last week"
+        last_week_tooltip: "The previous calendar week beginning of Monday to end of Sunday."
+        this_month: "This month"
+        this_month_tooltip: "The current calendar month."
+        this_year: "This year"
+        this_year_tooltip: "The current calendar year."
+        last_year: "Last year"
+        last_year_tooltip: "The previous calendar year."
+        custom: "Custom"
+        "on": "On"
     index:
       head_title: "Search"
       page_title: "Search"