NAS-128795 / 24.10 / Various improvements for global search (#10039)

* NAS-128795: Various improvements for global search * NAS-128795: Various improvements for global search * NAS-128795: Various improvements for global search * NAS-128795: Various improvements for global search
truenas · May 13, 2024 · fea96e0 · fea96e0
1 parent 4fc801a
commit fea96e0
Show file tree

Hide file tree

Showing 96 changed files with 122 additions and 9 deletions.
diff --git a/...dules/global-search/components/global-search-results/global-search-results.component.html b/...dules/global-search/components/global-search-results/global-search-results.component.html
@@ -9,6 +9,7 @@ <h2 class="section">
         *ngFor="let result of getLimitedSectionResults(section.value); trackBy: trackById"
         class="search-result"
         tabindex="0"
+        [class.highlighted-result]="isSearchInputFocused && isSameHierarchyResult(firstAvailableSearchResult, result)"
         [ixTest]="['search-result', result.hierarchy.join('-')]"
         (click)="selectElement(result)"
         (keydown.enter)="selectElement(result)"

diff --git a/...dules/global-search/components/global-search-results/global-search-results.component.scss b/...dules/global-search/components/global-search-results/global-search-results.component.scss
@@ -81,6 +81,11 @@
     cursor: pointer;
     padding: 13px 20px;
 
+    &.highlighted-result {
+      background-color: var(--bg1);
+      opacity: 0.8;
+    }
+
     &:hover {
       background-color: var(--bg1);
     }

diff --git a/...modules/global-search/components/global-search-results/global-search-results.component.ts b/...modules/global-search/components/global-search-results/global-search-results.component.ts
@@ -25,6 +25,7 @@ import { AuthService } from 'app/services/auth/auth.service';
 export class GlobalSearchResultsComponent implements OnChanges {
   @Input() searchTerm = '';
   @Input() isLoading = false;
+  @Input() isSearchInputFocused = false;
   @Input() results: UiSearchableElement[] = [];
 
   readonly initialResultsLimit = this.globalSearchSectionsProvider.globalSearchInitialLimit;
@@ -55,6 +56,10 @@ export class GlobalSearchResultsComponent implements OnChanges {
     );
   }
 
+  get firstAvailableSearchResult(): UiSearchableElement | null {
+    return this.availableSections.flatMap((section) => this.getLimitedSectionResults(section.value))[0];
+  }
+
   constructor(
     protected authService: AuthService,
     private searchProvider: UiSearchProvider,
@@ -101,6 +106,10 @@ export class GlobalSearchResultsComponent implements OnChanges {
     return this.results.filter((element) => element?.section === section);
   }
 
+  isSameHierarchyResult(a: UiSearchableElement, b: UiSearchableElement): boolean {
+    return isEqual(a.hierarchy, b.hierarchy);
+  }
+
   private saveSearchResult(result: UiSearchableElement): void {
     const existingResults = JSON.parse(
       this.window.localStorage.getItem('recentSearches') || '[]',

diff --git a/...dules/global-search/components/global-search-trigger/global-search-trigger.component.html b/...dules/global-search/components/global-search-trigger/global-search-trigger.component.html
@@ -6,7 +6,7 @@
     matInput
     ixTest="global-search"
     class="search-input"
-    [placeholder]="'Search' | translate"
+    [placeholder]="'Search UI' | translate"
     (click)="showOverlay()"
     (focus)="overlayRef.detach(); searchInput.blur(); showOverlay()"
     (blur)="overlayRef.detach()"

diff --git a/src/app/modules/global-search/components/global-search/global-search.component.html b/src/app/modules/global-search/components/global-search/global-search.component.html
@@ -13,7 +13,7 @@
       matInput
       ixTest="global-search"
       class="search-input"
-      [placeholder]="'Search' | translate"
+      [placeholder]="'Search UI' | translate"
       [formControl]="searchControl"
       (keydown)="handleKeyDown($event)"
     />
@@ -27,6 +27,7 @@
     [searchTerm]="searchControl.value"
     [results]="searchResults"
     [isLoading]="isLoading"
+    [isSearchInputFocused]="isSearchInputFocused"
     (keydown)="handleKeyDown($event)"
   ></ix-global-search-results>
 </div>
diff --git a/src/app/modules/global-search/components/global-search/global-search.component.ts b/src/app/modules/global-search/components/global-search/global-search.component.ts
@@ -37,6 +37,10 @@ export class GlobalSearchComponent implements OnInit {
   isLoading = false;
   systemVersion: string;
 
+  get isSearchInputFocused(): boolean {
+    return document.activeElement === this.searchInput?.nativeElement;
+  }
+
   constructor(
     protected sidenavService: SidenavService,
     private searchProvider: UiSearchProvider,
@@ -70,6 +74,11 @@ export class GlobalSearchComponent implements OnInit {
         break;
       case 'Enter':
         event.preventDefault();
+
+        if (this.isSearchInputFocused) {
+          moveToNextFocusableElement();
+          (this.document.activeElement as HTMLElement)?.click();
+        }
         break;
       default:
         if (event.key.length === 1 && !event.metaKey) {

diff --git a/src/app/modules/global-search/services/ui-search.service.ts b/src/app/modules/global-search/services/ui-search.service.ts
@@ -38,14 +38,14 @@ export class UiSearchProvider implements GlobalSearchProvider {
   search(term: string, limit: number): Observable<UiSearchableElement[]> {
     // sort results by showing hierarchy match first, then synonyms match
     const sortedResults = this.translatedTerms.filter((item) => {
-      return item.synonyms.find((synonym) => synonym?.toLowerCase().startsWith(term.toLowerCase()))
-        || item.hierarchy[item.hierarchy.length - 1]?.toLowerCase().startsWith(term.toLowerCase());
+      return item.synonyms.find((synonym) => synonym?.toLowerCase().includes(term.toLowerCase()))
+        || item.hierarchy[item.hierarchy.length - 1]?.toLowerCase().includes(term.toLowerCase());
     }).sort((a, b) => {
-      const aHierarchyMatch = a.hierarchy[a.hierarchy.length - 1]?.toLowerCase().startsWith(term.toLowerCase()) ? 1 : 0;
-      const bHierarchyMatch = b.hierarchy[b.hierarchy.length - 1]?.toLowerCase().startsWith(term.toLowerCase()) ? 1 : 0;
+      const aHierarchyMatch = a.hierarchy[a.hierarchy.length - 1]?.toLowerCase().includes(term.toLowerCase()) ? 1 : 0;
+      const bHierarchyMatch = b.hierarchy[b.hierarchy.length - 1]?.toLowerCase().includes(term.toLowerCase()) ? 1 : 0;
 
-      const aSynonymMatch = a.synonyms.find((synonym) => synonym?.toLowerCase().startsWith(term.toLowerCase())) ? 1 : 0;
-      const bSynonymMatch = b.synonyms.find((synonym) => synonym?.toLowerCase().startsWith(term.toLowerCase())) ? 1 : 0;
+      const aSynonymMatch = a.synonyms.find((synonym) => synonym?.toLowerCase().includes(term.toLowerCase())) ? 1 : 0;
+      const bSynonymMatch = b.synonyms.find((synonym) => synonym?.toLowerCase().includes(term.toLowerCase())) ? 1 : 0;
 
       return bHierarchyMatch - aHierarchyMatch || aSynonymMatch - bSynonymMatch;
     }).slice(0, limit);

diff --git a/src/assets/i18n/af.json b/src/assets/i18n/af.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/ar.json b/src/assets/i18n/ar.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/ast.json b/src/assets/i18n/ast.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/az.json b/src/assets/i18n/az.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/be.json b/src/assets/i18n/be.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/bg.json b/src/assets/i18n/bg.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/bn.json b/src/assets/i18n/bn.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/br.json b/src/assets/i18n/br.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/bs.json b/src/assets/i18n/bs.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/ca.json b/src/assets/i18n/ca.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/cs.json b/src/assets/i18n/cs.json
@@ -2904,6 +2904,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary Email": "",

diff --git a/src/assets/i18n/cy.json b/src/assets/i18n/cy.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -2398,6 +2398,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Email": "",
   "Secondary Name": "",

diff --git a/src/assets/i18n/dsb.json b/src/assets/i18n/dsb.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/el.json b/src/assets/i18n/el.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/en-au.json b/src/assets/i18n/en-au.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/en-gb.json b/src/assets/i18n/en-gb.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/eo.json b/src/assets/i18n/eo.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/es-ar.json b/src/assets/i18n/es-ar.json
@@ -1446,6 +1446,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Email": "",
   "Secondary Name": "",

diff --git a/src/assets/i18n/es-co.json b/src/assets/i18n/es-co.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/es-mx.json b/src/assets/i18n/es-mx.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/es-ni.json b/src/assets/i18n/es-ni.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/es-ve.json b/src/assets/i18n/es-ve.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
@@ -3077,6 +3077,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/et.json b/src/assets/i18n/et.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/eu.json b/src/assets/i18n/eu.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/fa.json b/src/assets/i18n/fa.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/fi.json b/src/assets/i18n/fi.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -333,6 +333,7 @@
   "SNMP": "",
   "Saving settings": "",
   "Search Documentation for «{value}»": "",
+  "Search UI": "",
   "Secret Confirm must match Secret": "",
   "Select Image Tag": "",
   "Select Rating": "",

diff --git a/src/assets/i18n/fy.json b/src/assets/i18n/fy.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/ga.json b/src/assets/i18n/ga.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/gd.json b/src/assets/i18n/gd.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",

diff --git a/src/assets/i18n/gl.json b/src/assets/i18n/gl.json
@@ -3274,6 +3274,7 @@
   "Search Documentation for «{value}»": "",
   "Search Input Fields": "",
   "Search Results for «{query}»": "",
+  "Search UI": "",
   "Search or enter value": "",
   "Secondary Contact": "",
   "Secondary DNS server.": "",