feat: support searching in multi select component (#625)

* feat: support searching in multi select component

Author: arjunlalb

projects/components/src/multi-select/multi-select.component.scss

@@ -64,7 +64,7 @@
 }
 
 .multi-select-content {
-  @include dropdown();
+  @include dropdown(6px);
   min-width: 120px;
 
   .multi-select-option {
@@ -91,4 +91,13 @@
       background: $gray-1;
     }
   }
+
+  .search-bar {
+    display: flex;
+    height: 34px;
+    margin-top: 2px;
+    cursor: pointer;
+    font-size: 14px;
+    align-items: center;
+  }
 }

projects/components/src/multi-select/multi-select.component.test.ts

@@ -1,5 +1,6 @@
 import { fakeAsync, flush } from '@angular/core/testing';
 import { IconType } from '@hypertrace/assets-library';
+import { SearchBoxComponent } from '@hypertrace/components';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { DividerComponent } from '../divider/divider.component';
@@ -14,7 +15,7 @@ describe('Multi Select Component', () => {
     component: MultiSelectComponent,
     imports: [LetAsyncModule],
     entryComponents: [SelectOptionComponent],
-    declarations: [MockComponent(LabelComponent), MockComponent(DividerComponent)],
+    declarations: [MockComponent(LabelComponent), MockComponent(DividerComponent), MockComponent(SearchBoxComponent)],
     shallow: true
   });
 
@@ -250,4 +251,40 @@ describe('Multi Select Component', () => {
     expect(spectator.element).toHaveText(selectionOptions[1].label);
     expect(spectator.query('.trigger-content')!.getAttribute('style')).toBe('justify-content: flex-end;');
   }));
+
+  test('should show searchbox if applicable and function as expected', fakeAsync(() => {
+    spectator = hostFactory(
+      `
+    <ht-multi-select [enableSearch]="enableSearch">
+      <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
+        }
+      }
+    );
+
+    spectator.tick();
+    expect(spectator.query('.search-bar')).toExist();
+    spectator.click('.search-bar');
+
+    spectator.triggerEventHandler(SearchBoxComponent, 'valueChange', 'fi');
+    spectator.tick();
+
+    let options = spectator.queryAll('.multi-select-option', { root: true });
+    expect(options.length).toBe(1);
+    expect(options[0]).toContainText('first');
+
+    spectator.triggerEventHandler(SearchBoxComponent, 'valueChange', 'i');
+    spectator.tick();
+
+    options = spectator.queryAll('.multi-select-option', { root: true });
+    expect(options.length).toBe(2);
+    expect(options[0]).toContainText('first');
+    expect(options[1]).toContainText('third');
+    flush();
+  }));
 });

projects/components/src/multi-select/multi-select.component.ts

@@ -14,6 +14,7 @@ import { LoggerService, queryListAndChanges$, TypedSimpleChanges } from '@hypert
 import { EMPTY, merge, Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
+import { SearchBoxDisplayMode } from '../search-box/search-box.component';
 import { SelectOption } from '../select/select-option';
 import { SelectOptionComponent } from '../select/select-option.component';
 import { SelectSize } from '../select/select-size';
@@ -56,16 +57,23 @@ 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">
+              <ht-search-box
+                class="search-bar"
+                (valueChange)="this.searchOptions($event)"
+                displayMode="${SearchBoxDisplayMode.NoBorder}"
+              ></ht-search-box>
+            </ng-container>
             <ng-container *ngIf="this.showAllOptionControl">
               <div class="multi-select-option all-options" (click)="this.onAllSelectionChange()">
                 <input class="checkbox" type="checkbox" [checked]="this.areAllOptionsSelected()" />
                 <span class="label">Select All</span>
               </div>
-
-              <ht-divider></ht-divider>
             </ng-container>
 
-            <div *ngFor="let item of items" (click)="this.onSelectionChange(item)" class="multi-select-option">
+            <ht-divider *ngIf="this.showAllOptionControl || this.enableSearch"></ht-divider>
+
+            <div *ngFor="let item of filteredItems" (click)="this.onSelectionChange(item)" class="multi-select-option">
               <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
               <ht-icon
                 class="icon"
@@ -104,6 +112,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   @Input()
   public showBorder: boolean = false;
 
+  @Input()
+  public enableSearch: boolean = false;
+
   @Input()
   public justify: MultiSelectJustify = MultiSelectJustify.Left;
 
@@ -122,12 +133,14 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   public popoverOpen: boolean = false;
   public selected$?: Observable<SelectOption<V>[]>;
   public triggerLabel?: string;
+  public filteredItems?: SelectOptionComponent<V>[];
 
   public constructor(private readonly loggerService: LoggerService) {}
 
   public ngAfterContentInit(): void {
     this.selected$ = this.buildObservableOfSelected();
     this.setTriggerLabel();
+    this.filteredItems = this.items?.toArray();
   }
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
@@ -137,6 +150,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     this.setTriggerLabel();
   }
 
+  public searchOptions(searchText: string): void {
+    this.filteredItems = this.items?.filter(item => item.label.toLowerCase().includes(searchText.toLowerCase()));
+  }
+
   public onAllSelectionChange(): void {
     this.selected = this.areAllOptionsSelected() ? [] : this.items!.map(item => item.value); // Select All or none
     this.setSelection();

projects/components/src/multi-select/multi-select.module.ts

@@ -6,10 +6,20 @@ import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
 import { LetAsyncModule } from '../let-async/let-async.module';
 import { PopoverModule } from '../popover/popover.module';
+import { TraceSearchBoxModule } from '../search-box/search-box.module';
 import { MultiSelectComponent } from './multi-select.component';
 
 @NgModule({
-  imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, DividerModule],
+  imports: [
+    FormsModule,
+    CommonModule,
+    IconModule,
+    LabelModule,
+    LetAsyncModule,
+    PopoverModule,
+    DividerModule,
+    TraceSearchBoxModule
+  ],
   declarations: [MultiSelectComponent],
   exports: [MultiSelectComponent]
 })

projects/components/src/search-box/search-box.component.scss

@@ -6,8 +6,6 @@
   display: flex;
   position: relative;
   align-items: center;
-  border: 1px solid $color-border;
-  border-radius: 6px;
   padding: 0 8px;
 
   .icon {
@@ -25,6 +23,7 @@
   &.focused {
     caret-color: $blue-5;
     border: 1px solid $blue-5;
+    border-radius: 6px;
     box-shadow: 0 1px 3px rgba(0, 83, 215, 0.16);
 
     &:hover {
@@ -57,3 +56,14 @@
     }
   }
 }
+
+.border {
+  border: 1px solid $color-border;
+  border-radius: 6px;
+}
+
+.no-border {
+  &:hover {
+    border: none;
+  }
+}

projects/components/src/search-box/search-box.component.test.ts

@@ -1,7 +1,7 @@
 import { fakeAsync } from '@angular/core/testing';
 import { runFakeRxjs } from '@hypertrace/test-utils';
 import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
-import { SearchBoxComponent } from './search-box.component';
+import { SearchBoxComponent, SearchBoxDisplayMode } from './search-box.component';
 
 describe('Search box Component', () => {
   let spectator: Spectator<SearchBoxComponent>;
@@ -32,6 +32,24 @@ describe('Search box Component', () => {
     });
   }));
 
+  test('should apply no-border class correctly', () => {
+    spectator = createHost(`<ht-search-box [displayMode]="displayMode"></ht-search-box>`, {
+      hostProps: {
+        displayMode: SearchBoxDisplayMode.NoBorder
+      }
+    });
+
+    expect(spectator.query('.ht-search-box')?.classList).toContain('no-border');
+    expect(spectator.query('.ht-search-box')?.classList).not.toContain('border');
+  });
+
+  test('should apply border class correctly by default', () => {
+    spectator = createHost(`<ht-search-box></ht-search-box>`);
+
+    expect(spectator.query('.ht-search-box')?.classList).not.toContain('no-border');
+    expect(spectator.query('.ht-search-box')?.classList).toContain('border');
+  });
+
   test('should work with arbitrary debounce time', fakeAsync(() => {
     spectator = createHost(
       `<ht-search-box [placeholder]="placeholder" [debounceTime]="debounceTime"></ht-search-box>`,

projects/components/src/search-box/search-box.component.ts

@@ -11,7 +11,7 @@ import { IconSize } from '../icon/icon-size';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [SubscriptionLifecycle],
   template: `
-    <div class="ht-search-box" [class.focused]="this.isFocused">
+    <div class="ht-search-box" [ngClass]="this.displayMode" [class.focused]="this.isFocused">
       <ht-icon icon="${IconType.Search}" size="${IconSize.Small}" class="icon" (click)="onSubmit()"></ht-icon>
       <input
         class="input"
@@ -43,6 +43,9 @@ export class SearchBoxComponent implements OnInit, OnChanges {
   @Input()
   public debounceTime?: number;
 
+  @Input()
+  public displayMode: SearchBoxDisplayMode = SearchBoxDisplayMode.Border;
+
   @Output()
   public readonly valueChange: EventEmitter<string> = new EventEmitter();
 
@@ -91,3 +94,8 @@ export class SearchBoxComponent implements OnInit, OnChanges {
     );
   }
 }
+
+export const enum SearchBoxDisplayMode {
+  Border = 'border',
+  NoBorder = 'no-border'
+}