From 459989b61ef32d7cba6d133f14a1038eff771a78 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 16 May 2024 12:41:15 +0200
Subject: [PATCH] Fix long search query [SCI-10694]

---
 .../vue/global_search/container.vue           | 16 +++++++++-----
 .../vue/navigation/quick_search.vue           | 22 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/javascript/vue/global_search/container.vue b/app/javascript/vue/global_search/container.vue
index 8219a1b1a..2d2f69e74 100644
--- a/app/javascript/vue/global_search/container.vue
+++ b/app/javascript/vue/global_search/container.vue
@@ -2,7 +2,7 @@
   <div class="content-pane flexible with-grey-background">
     <div class="content-header">
       <div class="title-row">
-        <h1 class="mt-0">
+        <h1 class="mt-0 truncate !inline">
           {{ i18n.t('search.index.results_title_html', { query: localQuery }) }}
         </h1>
       </div>
@@ -103,7 +103,8 @@
 </template>
 
 <script>
-/* global HelperModule */
+/* global HelperModule GLOBAL_CONSTANTS */
+
 import FoldersComponent from './groups/folders.vue';
 import ProjectsComponent from './groups/projects.vue';
 import ExperimentsComponent from './groups/experiments.vue';
@@ -265,10 +266,15 @@ export default {
 
       this.localQuery = event.target.value;
 
-      if (event.target.value.length < 2) {
+      if (event.target.value.length < GLOBAL_CONSTANTS.NAME_MIN_LENGTH) {
         this.invalidQuery = true;
-        const minLength = 2;
-        HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_short', { min_length: minLength }), 'danger');
+        HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_short', { min_length: GLOBAL_CONSTANTS.NAME_MIN_LENGTH }), 'danger');
+        return;
+      }
+
+      if (event.target.value.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+        this.invalidQuery = true;
+        HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_long', { max_length: GLOBAL_CONSTANTS.NAME_MAX_LENGTH }), 'danger');
         return;
       }
 
diff --git a/app/javascript/vue/navigation/quick_search.vue b/app/javascript/vue/navigation/quick_search.vue
index 819af322f..634406b2e 100644
--- a/app/javascript/vue/navigation/quick_search.vue
+++ b/app/javascript/vue/navigation/quick_search.vue
@@ -1,7 +1,9 @@
 <template>
   <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')">
+      <div class="sci--navigation--top-menu-search left-icon sci-input-container-v2"
+        :class="{'disabled' : !currentTeam, 'error': invalidQuery}" :title="i18n.t('nav.search')"
+      >
         <input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
                :class="{'active': flyoutOpened}"
                @keydown.escape="closeFlyout"
@@ -9,11 +11,11 @@
         <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">
           <div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">
-            <i class="sn-icon sn-icon-close  m-0" :title="i18n.t('nav.clear')"></i>
+            <i class="sn-icon sn-icon-close  !m-0" :title="i18n.t('nav.clear')"></i>
           </div>
           <div class="btn btn-light icon-btn btn-xs" :title="i18n.t('search.quick_search.search_options')"
                :class="{'active': filtersOpened}" @click="filtersOpened = !filtersOpened">
-            <i class="sn-icon sn-icon-search-options m-0"></i>
+            <i class="sn-icon sn-icon-search-options !m-0"></i>
           </div>
         </div>
       </div>
@@ -35,7 +37,7 @@
              tabindex="1"
              @keydown="focusHistoryItem"
              @keydown.enter="setQuery(query)"
-             class="flex px-3 h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
+             class="flex px-3 min-h-11 items-center gap-2 hover:bg-sn-super-light-grey cursor-pointer">
           <i class="sn-icon sn-icon-history-search"></i>
           {{ query }}
         </div>
@@ -104,7 +106,7 @@
           </div>
         </div>
         <hr class="my-2">
-        <div class="btn btn-light" @click="searchValue">
+        <div class="btn btn-light truncate !block leading-10" @click="searchValue">
           {{ i18n.t('search.quick_search.all_results', {query: searchQuery}) }}
         </div>
       </div>
@@ -113,6 +115,8 @@
 </template>
 
 <script>
+/* global HelperModule GLOBAL_CONSTANTS */
+
 import GeneralDropdown from '../shared/general_dropdown.vue';
 import StringWithEllipsis from '../shared/string_with_ellipsis.vue';
 import SearchFilters from '../global_search/filters.vue';
@@ -158,6 +162,9 @@ export default {
     },
     currentTeamName() {
       return document.querySelector('body').dataset.currentTeamName;
+    },
+    invalidQuery() {
+      return this.searchQuery.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH;
     }
   },
   watch: {
@@ -306,6 +313,11 @@ export default {
         });
     },
     searchValue() {
+      if (this.searchQuery.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+        HelperModule.flashAlertMsg(this.i18n.t('general.query.length_too_long', { max_length: GLOBAL_CONSTANTS.NAME_MAX_LENGTH }), 'danger');
+        return;
+      }
+
       window.open(`${this.searchUrl}?q=${this.searchQuery}&teams[]=${this.currentTeam}&include_archived=true`, '_self');
     },
     focusHistoryItem(event) {