From 26539854aa552bfb62c593f9148940f63dd6fa7a Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 31 Mar 2024 23:21:42 -0700
Subject: [PATCH] Select button instead of dropdown-item

---
 .../global-search.component.html              |  8 ++---
 .../global-search.component.scss              |  4 +++
 .../global-search.component.spec.ts           | 29 +++++++++++--------
 .../global-search/global-search.component.ts  | 19 ++++++------
 4 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.html b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
index 35c72ecf5..4903611a6 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.html
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
@@ -9,11 +9,11 @@
 </form>
 
 <ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon">
-    <div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" (click)="primaryAction(type, item)">
+    <div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1" (click)="primaryAction(type, item)">
         <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
-        <span>{{item[nameProp]}}</span>
+        <span class="text-truncate">{{item[nameProp]}}</span>
         <div class="btn-group ms-auto">
-            <button type="button" class="btn btn-sm btn-outline-primary" (click)="primaryAction(type, item); $event.stopPropagation()">
+            <button #primaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="primaryAction(type, item); $event.stopPropagation()">
                 @if (type === 'document' || type === 'workflow' || type === 'customField' || type === 'group' || type === 'user') {
                     <i-bs width="1em" height="1em" name="pencil"></i-bs>
                 } @else {
@@ -21,7 +21,7 @@
                 }
             </button>
             @if (type !== 'workflow' && type !== 'customField' && type !== 'group' && type !== 'user') {
-                <button type="button" class="btn btn-sm btn-outline-secondary" (click)="secondaryAction(type, item); $event.stopPropagation()">
+                <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary" (click)="secondaryAction(type, item); $event.stopPropagation()">
                     @if (type === 'document') {
                         <i-bs width="1em" height="1em" name="download"></i-bs>
                     } @else {
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
index cc38e8e26..0d9ad00df 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
@@ -58,3 +58,7 @@ form {
 .mh-75 {
   max-height: 75vh;
 }
+
+.dropdown-item:has(button:focus) {
+  background-color: var(--pngx-bg-alt);
+}
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
index 342ee6975..fbff43e0b 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts
@@ -161,7 +161,7 @@ describe('GlobalSearchComponent', () => {
 
     component['currentItemIndex'] = 0
     const firstItemFocusSpy = jest.spyOn(
-      component.resultItems.get(1).nativeElement,
+      component.primaryButtons.get(1).nativeElement,
       'focus'
     )
     component.handleKeyboardEvent(
@@ -170,8 +170,22 @@ describe('GlobalSearchComponent', () => {
     expect(component['currentItemIndex']).toBe(1)
     expect(firstItemFocusSpy).toHaveBeenCalled()
 
+    const secondaryItemFocusSpy = jest.spyOn(
+      component.secondaryButtons.get(1).nativeElement,
+      'focus'
+    )
+    component.handleKeyboardEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowRight' })
+    )
+    expect(secondaryItemFocusSpy).toHaveBeenCalled()
+
+    component.handleKeyboardEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+    )
+    expect(firstItemFocusSpy).toHaveBeenCalled()
+
     const zeroItemSpy = jest.spyOn(
-      component.resultItems.get(0).nativeElement,
+      component.primaryButtons.get(0).nativeElement,
       'focus'
     )
     component.handleKeyboardEvent(
@@ -189,15 +203,6 @@ describe('GlobalSearchComponent', () => {
     )
     expect(component['currentItemIndex']).toBe(-1)
     expect(inputFocusSpy).toHaveBeenCalled()
-
-    const actionSpy = jest.spyOn(component, 'primaryAction')
-    component.handleKeyboardEvent(
-      new KeyboardEvent('keydown', { key: 'ArrowDown' })
-    )
-    component.handleKeyboardEvent(
-      new KeyboardEvent('keydown', { key: 'Enter' })
-    )
-    expect(actionSpy).toHaveBeenCalled()
   })
 
   it('should search', fakeAsync(() => {
@@ -314,7 +319,7 @@ describe('GlobalSearchComponent', () => {
     component.searchResults = searchResults as any
     fixture.detectChanges()
     const focusSpy = jest.spyOn(
-      component.resultItems.get(0).nativeElement,
+      component.primaryButtons.get(0).nativeElement,
       'focus'
     )
     component['currentItemIndex'] = 0
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
index f08987997..ee210ac6c 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
@@ -47,7 +47,8 @@ export class GlobalSearchComponent {
 
   @ViewChild('searchInput') searchInput: ElementRef
   @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
-  @ViewChildren('resultItem') resultItems: QueryList<ElementRef>
+  @ViewChildren('primaryButton') primaryButtons: QueryList<ElementRef>
+  @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   @HostListener('document:keydown', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
@@ -57,7 +58,7 @@ export class GlobalSearchComponent {
 
     if (this.searchResults && this.resultsDropdown.isOpen()) {
       if (event.key === 'ArrowDown') {
-        if (this.currentItemIndex < this.resultItems.length - 1) {
+        if (this.currentItemIndex < this.searchResults.total - 1) {
           this.currentItemIndex++
           this.setCurrentItem()
           event.preventDefault()
@@ -71,12 +72,10 @@ export class GlobalSearchComponent {
           this.searchInput.nativeElement.focus()
           this.currentItemIndex = -1
         }
-      } else if (
-        event.key === 'Enter' &&
-        document.activeElement !== this.searchInput.nativeElement
-      ) {
-        this.resultItems.get(this.currentItemIndex).nativeElement.click()
-        event.preventDefault()
+      } else if (event.key === 'ArrowRight') {
+        this.secondaryButtons.get(this.currentItemIndex).nativeElement.focus()
+      } else if (event.key === 'ArrowLeft') {
+        this.primaryButtons.get(this.currentItemIndex).nativeElement.focus()
       }
     }
   }
@@ -211,7 +210,7 @@ export class GlobalSearchComponent {
   }
 
   private setCurrentItem() {
-    const item: ElementRef = this.resultItems.get(this.currentItemIndex)
+    const item: ElementRef = this.primaryButtons.get(this.currentItemIndex)
     item.nativeElement.focus()
   }
 
@@ -228,7 +227,7 @@ export class GlobalSearchComponent {
       this.searchResults?.total === 1 &&
       this.resultsDropdown.isOpen()
     ) {
-      this.resultItems.first.nativeElement.click()
+      this.primaryButtons.first.nativeElement.click()
     } else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
       this.reset(true)
     }