Merge pull request #7513 from aignatov-bio/ai-sci-10657-css-global-search

CSS fixes for global search [SCI-10657][SCI-10658]

app/assets/stylesheets/tailwind/inputs.css

@@ -40,7 +40,8 @@
     width: 100%;
   }
 
-  .sci-input-container-v2 input:focus {
+  .sci-input-container-v2 input:focus,
+  .sci-input-container-v2 input.active {
     @apply border-sn-science-blue shadow-none;
   }
 

app/javascript/vue/global_search/container.vue

@@ -27,7 +27,7 @@
       </div>
       <button class="btn btn-light btn-sm" @click="filterModalOpened = true">
         <i class="sn-icon sn-icon-search-options"></i>
-        {{ i18n.t('search.index.more_search_options') }}
+        <span class="tw-hidden lg:inline">{{ i18n.t('search.index.more_search_options') }}</span>
         <span
           v-if="activeFilters.length > 0"
           class="absolute -right-1 -top-1 rounded-full bg-sn-science-blue text-white flex items-center justify-center w-4 h-4 text-[9px]"
@@ -39,7 +39,7 @@
         <div class="h-4 w-[1px] bg-sn-grey"></div>
         <button class="btn btn-light btn-sm" @click="resetFilters">
           <i class="sn-icon sn-icon-close"></i>
-          {{ i18n.t('search.index.clear_filters') }}
+          <span class="tw-hidden lg:inline">{{ i18n.t('search.index.clear_filters') }}</span>
         </button>
       </template>
     </div>

app/javascript/vue/global_search/filters_modal.vue

@@ -3,18 +3,18 @@
     <div class="modal-dialog" role="document">
       <form @submit.prevent="submit">
         <div class="modal-content !pb-2.5">
-          <div class="modal-header">
+          <div class="modal-header flex-wrap">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <i class="sn-icon sn-icon-close"></i>
             </button>
             <h4 class="modal-title truncate !block" id="edit-project-modal-label">
               {{ i18n.t('search.filters.title') }}
             </h4>
-          </div>
-          <div class="modal-body !pb-0">
-            <p class="text-sn-dark-grey">
+            <div class="basis-full">
               {{ i18n.t('search.filters.sub_title') }}
-            </p>
+            </div>
+          </div>
+          <div class="modal-body !pb-0 !pt-2.5">
             <Filters
               :teams-url="teamsUrl"
               :users-url="usersUrl"

app/javascript/vue/global_search/groups/assets.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-files"></i>
           {{ i18n.t('search.index.files') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -21,12 +21,13 @@
                         :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'AssetsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
    <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/experiments.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-experiment"></i>
           {{ i18n.t('search.index.experiments') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -19,12 +19,13 @@
           <CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ExperimentsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/folders.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-folder"></i>
           {{ i18n.t('search.index.folders') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -19,12 +19,13 @@
                         :url="row.attributes.parent_folder?.url" :value="labelName(row.attributes.parent_folder)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'FoldersComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/helpers/list_end.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-6 mt-6">
     <div class="flex items-center mb-6">
-      <p class="text-sm text-sn-blue flex items-center gap-3 m-auto">
+      <p class="text-sm text-sn-blue flex items-center gap-3 m-auto px-4 py-2 rounded bg-sn-super-light-blue">
         <span class="sn-icon sn-icon-flag"></span>
         <span>{{ i18n.t('search.index.reached_end') }}</span>
       </p>

app/javascript/vue/global_search/groups/label_templates.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-label-templates"></i>
           {{ i18n.t('search.index.label_templates') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -20,12 +20,13 @@
           <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'LabelTemplatesComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/my_module_protocols.vue

@@ -5,7 +5,7 @@
       <h2 class="flex items-center gap-2 mt-0 mb-4">
         <i class="sn-icon sn-icon-protocols-templates"></i>
         {{ i18n.t('search.index.task_protocols') }}
-        [{{ total }}]
+        <span class="text-base" >[{{ total }}]</span>
       </h2>
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
@@ -21,12 +21,13 @@
           <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'MyModuleProtocolsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>

app/javascript/vue/global_search/groups/my_modules.vue

@@ -5,7 +5,7 @@
       <h2 class="flex items-center gap-2 mt-0 mb-4">
         <i class="sn-icon sn-icon-task"></i>
         {{ i18n.t('search.index.tasks') }}
-        [{{ total }}]
+        <span class="text-base" >[{{ total }}]</span>
       </h2>
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
@@ -20,12 +20,13 @@
           <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'MyModulesComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

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

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-projects"></i>
           {{ i18n.t('search.index.projects') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -20,12 +20,13 @@
                         :url="row.attributes.folder?.url" :value="labelName(row.attributes.folder)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ProjectsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/protocols.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-protocols-templates"></i>
           {{ i18n.t('search.index.protocol_templates') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -20,12 +20,13 @@
           <CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ProtocolsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>

app/javascript/vue/global_search/groups/reports.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-reports"></i>
           {{ i18n.t('search.index.reports') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -21,12 +21,13 @@
           <CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ReportsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/repository_rows.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-inventory"></i>
           {{ i18n.t('search.index.inventory_items') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -20,12 +20,13 @@
           <CellTemplate :label="i18n.t('search.index.repository')" :url="row.attributes.repository.url" :value="labelName(row.attributes.repository)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'RepositoryRowsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult"  />
   </div>
 </template>

app/javascript/vue/global_search/groups/results.vue

@@ -5,7 +5,7 @@
         <h2 class="flex items-center gap-2 mt-0 mb-4">
           <i class="sn-icon sn-icon-results"></i>
           {{ i18n.t('search.index.task_results') }}
-          [{{ total }}]
+          <span class="text-base" >[{{ total }}]</span>
         </h2>
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
@@ -20,12 +20,13 @@
           <CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
         </div>
       </div>
-      <div v-if="viewAll" class="mt-4">
+      <div v-if="viewAll">
+        <hr class="w-full mb-4 mt-0">
         <button class="btn btn-light" @click="$emit('selectGroup', 'ResultsComponent')">View all</button>
       </div>
     </template>
     <Loader v-if="loading" :loaderRows="loaderRows" />
-    <ListEnd v-if="reachedEnd" />
+    <ListEnd v-if="reachedEnd && preparedResults.length > 0" />
     <NoSearchResult v-else-if="showNoSearchResult" />
   </div>
 </template>

app/javascript/vue/navigation/quick_search.vue

@@ -1,8 +1,9 @@
 <template>
-  <GeneralDropdown ref="container" :canOpen="canOpen" :fieldOnlyOpen="true" @close="filtersOpened = false">
+  <GeneralDropdown ref="container" :canOpen="canOpen" :fieldOnlyOpen="true" @close="filtersOpened = false; flyoutOpened = false" @open="flyoutOpened = true">
     <template v-slot:field>
       <div class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}" :title="i18n.t('nav.search')">
         <input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
+               :class="{'active': flyoutOpened}"
                @focus="openHistory" :placeholder="i18n.t('nav.search')" @keyup.enter="saveQuery"/>
         <i class="sn-icon sn-icon-search"></i>
         <div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
@@ -38,7 +39,7 @@
           {{ query }}
         </div>
       </div>
-      <div v-else class="max-w-[600px]">
+      <div v-else class="w-[600px]">
         <div class="flex items-center gap-2">
           <button class="btn btn-secondary btn-xs"
                   :class="{'active': quickFilter === 'experiments'}"
@@ -55,11 +56,6 @@
                   @click="setQuickFilter('results')">
             {{ i18n.t('search.quick_search.results') }}
           </button>
-          <button class="btn btn-secondary btn-xs"
-                  :class="{'active': quickFilter === 'repository_rows'}"
-                  @click="setQuickFilter('repository_rows')">
-            {{ i18n.t('search.quick_search.inventory_items') }}
-          </button>
         </div>
         <hr class="my-2">
         <a v-if="!loading" v-for="(result, i) in results" :key="i"
@@ -75,7 +71,10 @@
               {{ result.attributes.updated_at }}
             </div>
           </div>
-          <div class="text-sn-grey text-xs flex items-center gap-1 pl-8">
+          <div
+            class="text-sn-grey text-xs flex items-center gap-1 pl-8"
+            :class="{'opacity-0': result.type.includes('label_templates')}"
+          >
             <div v-for="(breadcrumb, i) in getBreadcrumb(result.attributes)" :key="i"
                 class="flex items-center gap-1"
             >
@@ -174,7 +173,8 @@ export default {
       results: [],
       loading: false,
       filtersOpened: false,
-      focusedHistoryItem: null
+      focusedHistoryItem: null,
+      flyoutOpened: false
     };
   },
   mounted() {