feat: adding server side search support (#723)

anandtiwary · web-flow · commit 624009a566b8 · 2021-03-26T09:30:42.000-07:00
* feat: adding server side search support

* refactor: addressing review comments

* refactor: remove hiding search on options length logic

* refactor: addressing review comments

* refactor: update comment
diff --git a/projects/components/src/multi-select/multi-select.component.test.ts b/projects/components/src/multi-select/multi-select.component.test.ts
@@ -1,24 +1,25 @@
 import { CommonModule } from '@angular/common';
 import { fakeAsync, flush } from '@angular/core/testing';
-import { IconType } from '@hypertrace/assets-library';
+import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
 import { NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { NEVER } from 'rxjs';
 import { ButtonComponent } from '../button/button.component';
 import { DividerComponent } from '../divider/divider.component';
 import { LabelComponent } from '../label/label.component';
+import { LoadAsyncModule } from '../load-async/load-async.module';
 import { PopoverComponent } from '../popover/popover.component';
 import { PopoverModule } from '../popover/popover.module';
 import { SearchBoxComponent } from '../search-box/search-box.component';
 import { SelectOptionComponent } from '../select/select-option.component';
 import { MultiSelectJustify } from './multi-select-justify';
-import { MultiSelectComponent, TriggerLabelDisplayMode } from './multi-select.component';
+import { MultiSelectComponent, MultiSelectSearchMode, TriggerLabelDisplayMode } from './multi-select.component';
 
 describe('Multi Select Component', () => {
   const hostFactory = createHostFactory<MultiSelectComponent<string>>({
     component: MultiSelectComponent,
-    imports: [PopoverModule, CommonModule],
+    imports: [PopoverModule, CommonModule, LoadAsyncModule, IconLibraryTestingModule],
     providers: [
       mockProvider(NavigationService, {
         navigation$: NEVER
@@ -48,14 +49,15 @@ describe('Multi Select Component', () => {
   test('should display initial selections', fakeAsync(() => {
     spectator = hostFactory(
       `
-    <ht-multi-select [selected]="selected" [triggerLabelDisplayMode]="triggerLabelDisplayMode" [enableSearch]="true">
+    <ht-multi-select [selected]="selected" [triggerLabelDisplayMode]="triggerLabelDisplayMode" [searchMode]="searchMode">
       <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
       </ht-select-option>
     </ht-multi-select>`,
       {
         hostProps: {
           options: selectionOptions,
           selected: [selectionOptions[1].value],
+          searchMode: MultiSelectSearchMode.CaseInsensitive,
           triggerLabelDisplayMode: TriggerLabelDisplayMode.Selection
         }
       }
@@ -187,7 +189,7 @@ describe('Multi Select Component', () => {
 
     spectator = hostFactory(
       `
-    <ht-multi-select [selected]="selected" (selectedChange)="onChange($event)" [placeholder]="placeholder" [enableSearch]="enableSearch">
+    <ht-multi-select [selected]="selected" (selectedChange)="onChange($event)" [placeholder]="placeholder" [searchMode]="searchMode">
       <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
       </ht-select-option>
     </ht-multi-select>`,
@@ -196,7 +198,7 @@ describe('Multi Select Component', () => {
           options: selectionOptions,
           selected: [selectionOptions[1].value],
           placeholder: 'Select options',
-          enableSearch: true,
+          searchMode: MultiSelectSearchMode.CaseInsensitive,
           onChange: onChange
         }
       }
@@ -231,7 +233,7 @@ describe('Multi Select Component', () => {
     expect(spectator.query(LabelComponent)?.label).toEqual('first and 5 more');
 
     spectator.setHostInput({
-      enableSearch: false
+      searchMode: MultiSelectSearchMode.Disabled
     });
 
     expect(spectator.query('.search-bar', { root: true })).not.toExist();
@@ -313,16 +315,19 @@ describe('Multi Select Component', () => {
   }));
 
   test('should show searchbox if applicable and function as expected', fakeAsync(() => {
+    const onSearchValueChangeSpy = jest.fn();
+
     spectator = hostFactory(
       `
-    <ht-multi-select [enableSearch]="enableSearch">
+    <ht-multi-select [searchMode]="searchMode" (searchValueChange)="onSearchValueChange($event)">
       <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
       </ht-select-option>
     </ht-multi-select>`,
       {
         hostProps: {
           options: selectionOptions,
-          enableSearch: true
+          searchMode: MultiSelectSearchMode.CaseInsensitive,
+          onSearchValueChange: onSearchValueChangeSpy
         }
       }
     );
@@ -334,13 +339,15 @@ describe('Multi Select Component', () => {
 
     spectator.component.searchOptions('fi');
     spectator.tick();
+    expect(onSearchValueChangeSpy).toHaveBeenLastCalledWith('fi');
 
     let options = spectator.queryAll('.multi-select-option', { root: true });
     expect(options.length).toBe(2);
     expect(options[0]).toContainText('first');
 
     spectator.component.searchOptions('i');
     spectator.tick();
+    expect(onSearchValueChangeSpy).toHaveBeenLastCalledWith('i');
 
     options = spectator.queryAll('.multi-select-option', { root: true });
     expect(options.length).toBe(4);
@@ -351,15 +358,64 @@ describe('Multi Select Component', () => {
     expect(spectator.query('.clear-selected', { root: true })).not.toExist(); // Due to initial selection
     expect(spectator.query('.select-all', { root: true })).toExist();
 
-    // Set selected options to less than 5 and search box and buttons should hide
+    // Set options list to less than 1 and search control buttons should be hidden
     spectator.setHostInput({
-      options: selectionOptions.slice(0, 3)
+      options: []
     });
 
-    expect(spectator.query('.search-bar', { root: true })).not.toExist();
-    expect(spectator.query('.divider', { root: true })).not.toExist();
+    expect(spectator.query('.search-bar', { root: true })).toExist();
+    expect(spectator.query('.divider', { root: true })).toExist();
     expect(spectator.query('.clear-selected', { root: true })).not.toExist();
     expect(spectator.query('.select-all', { root: true })).not.toExist();
     flush();
   }));
+
+  test('should show search box and emit only when search mode is emit only', fakeAsync(() => {
+    const onSearchValueChangeSpy = jest.fn();
+
+    spectator = hostFactory(
+      `
+    <ht-multi-select [searchMode]="searchMode" (searchValueChange)="onSearchValueChange($event)">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      </ht-select-option>
+    </ht-multi-select>`,
+      {
+        hostProps: {
+          options: selectionOptions,
+          searchMode: MultiSelectSearchMode.EmitOnly,
+          onSearchValueChange: onSearchValueChangeSpy
+        }
+      }
+    );
+
+    spectator.click('.trigger-content');
+
+    const searchBar = spectator.query('.search-bar', { root: true });
+    expect(searchBar).toExist();
+
+    spectator.component.searchOptions('fi');
+    spectator.tick();
+    expect(onSearchValueChangeSpy).toHaveBeenLastCalledWith('fi');
+
+    // No change in options length since for this test, externally we did not filter any option
+    let options = spectator.queryAll('.multi-select-option', { root: true });
+    expect(options.length).toBe(6);
+    spectator.component.searchOptions('i');
+    spectator.tick();
+    expect(onSearchValueChangeSpy).toHaveBeenLastCalledWith('i');
+
+    options = spectator.queryAll('.multi-select-option', { root: true });
+    expect(options.length).toBe(6);
+
+    // Set selected options to less than 5 and search box and buttons should still be visible
+    spectator.setHostInput({
+      options: selectionOptions.slice(0, 3)
+    });
+
+    expect(spectator.query('.search-bar', { root: true })).toExist();
+    expect(spectator.query('.divider', { root: true })).toExist();
+    expect(spectator.query('.clear-selected', { root: true })).not.toExist();
+    expect(spectator.query('.select-all', { root: true })).toExist();
+    flush();
+  }));
 });
diff --git a/projects/components/src/multi-select/multi-select.component.ts b/projects/components/src/multi-select/multi-select.component.ts
@@ -56,41 +56,39 @@ import { MultiSelectJustify } from './multi-select-justify';
         </ht-popover-trigger>
         <ht-popover-content>
           <div class="multi-select-content" [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth }">
-            <ng-container *ngIf="this.enableSearch">
+            <ng-container *ngIf="this.searchMode !== '${MultiSelectSearchMode.Disabled}'">
               <ng-container *ngIf="this.allOptions$ | async as allOptions">
-                <ng-container *ngIf="allOptions.length > 5">
-                  <ht-search-box
-                    class="search-bar"
-                    (valueChange)="this.searchOptions($event)"
-                    [debounceTime]="200"
-                    displayMode="${SearchBoxDisplayMode.NoBorder}"
-                  ></ht-search-box>
-                  <ht-divider class="divider"></ht-divider>
-
-                  <ht-button
-                    class="clear-selected"
-                    *ngIf="this.isAnyOptionSelected()"
-                    role="${ButtonRole.Primary}"
-                    display="${ButtonStyle.Text}"
-                    label="Clear Selected"
-                    (click)="this.onClearSelected()"
-                  ></ht-button>
-
-                  <ht-button
-                    class="select-all"
-                    *ngIf="!this.isAnyOptionSelected()"
-                    role="${ButtonRole.Primary}"
-                    display="${ButtonStyle.Text}"
-                    label="Select All"
-                    (click)="this.onSelectAll()"
-                  ></ht-button>
-                </ng-container>
+                <ht-search-box
+                  class="search-bar"
+                  (valueChange)="this.searchOptions($event)"
+                  [debounceTime]="200"
+                  displayMode="${SearchBoxDisplayMode.NoBorder}"
+                ></ht-search-box>
+                <ht-divider class="divider"></ht-divider>
+
+                <ht-button
+                  class="clear-selected"
+                  *ngIf="this.isAnyOptionSelected()"
+                  role="${ButtonRole.Primary}"
+                  display="${ButtonStyle.Text}"
+                  label="Clear Selected"
+                  (click)="this.onClearSelected()"
+                ></ht-button>
+
+                <ht-button
+                  class="select-all"
+                  *ngIf="allOptions.length > 0 && !this.isAnyOptionSelected()"
+                  role="${ButtonRole.Primary}"
+                  display="${ButtonStyle.Text}"
+                  label="Select All"
+                  (click)="this.onSelectAll()"
+                ></ht-button>
               </ng-container>
             </ng-container>
 
-            <div class="multi-select-options">
+            <div class="multi-select-options" *htLoadAsync="this.filteredOptions$ as filteredOptions">
               <div
-                *ngFor="let item of this.filteredOptions$ | async"
+                *ngFor="let item of filteredOptions"
                 (click)="this.onSelectionChange(item)"
                 class="multi-select-option"
               >
@@ -134,7 +132,7 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   public showBorder: boolean = false;
 
   @Input()
-  public enableSearch: boolean = false;
+  public searchMode: MultiSelectSearchMode = MultiSelectSearchMode.Disabled;
 
   @Input()
   public justify: MultiSelectJustify = MultiSelectJustify.Left;
@@ -145,6 +143,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   @Output()
   public readonly selectedChange: EventEmitter<V[]> = new EventEmitter<V[]>();
 
+  @Output()
+  public readonly searchValueChange: EventEmitter<string> = new EventEmitter<string>();
+
   @ContentChildren(SelectOptionComponent)
   private readonly allOptionsList?: QueryList<SelectOptionComponent<V>>;
   public allOptions$!: Observable<QueryList<SelectOptionComponent<V>>>;
@@ -170,7 +171,15 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   }
 
   public searchOptions(searchText: string): void {
-    this.searchSubject.next(searchText);
+    if (this.searchMode === MultiSelectSearchMode.Disabled) {
+      return;
+    }
+
+    if (this.searchMode === MultiSelectSearchMode.CaseInsensitive) {
+      this.searchSubject.next(searchText);
+    }
+
+    this.searchValueChange.emit(searchText);
   }
 
   public onSelectAll(): void {
@@ -233,3 +242,9 @@ export const enum TriggerLabelDisplayMode {
   Selection = 'selection-mode',
   Icon = 'icon-mode'
 }
+
+export const enum MultiSelectSearchMode {
+  Disabled = 'disabled', // Search is not available
+  CaseInsensitive = 'case-insensitive', // Current available values are filtered in a case insensitive way and an emit is triggered
+  EmitOnly = 'emit-only' // Current available values not filtered, but an emit still triggered
+}
diff --git a/projects/components/src/multi-select/multi-select.module.ts b/projects/components/src/multi-select/multi-select.module.ts
@@ -4,12 +4,22 @@ import { ButtonModule } from '../button/button.module';
 import { DividerModule } from '../divider/divider.module';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
+import { LoadAsyncModule } from '../load-async/load-async.module';
 import { PopoverModule } from '../popover/popover.module';
 import { TraceSearchBoxModule } from '../search-box/search-box.module';
 import { MultiSelectComponent } from './multi-select.component';
 
 @NgModule({
-  imports: [CommonModule, IconModule, LabelModule, PopoverModule, DividerModule, TraceSearchBoxModule, ButtonModule],
+  imports: [
+    CommonModule,
+    IconModule,
+    LabelModule,
+    PopoverModule,
+    DividerModule,
+    TraceSearchBoxModule,
+    ButtonModule,
+    LoadAsyncModule
+  ],
   declarations: [MultiSelectComponent],
   exports: [MultiSelectComponent]
 })
