feat: update combo-box to account for 'create new' autocomplete use cases

projects/common/src/public-api.ts

@@ -29,6 +29,7 @@ export * from './custom-error/custom-error';
 
 // DOM
 export { DomElementMeasurerService } from './utilities/dom/dom-element-measurer.service';
+export { DomElementScrollIntoViewService } from './utilities/dom/dom-element-scroll-into-view.service';
 export * from './utilities/dom/dom-utilities';
 
 // External

projects/common/src/utilities/dom/dom-element-scroll-into-view.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class DomElementScrollIntoViewService {
+  public scrollIntoView(element?: HTMLElement): void {
+    // Basically just here so we can polyfill this in tests
+    return element?.scrollIntoView();
+  }
+}

projects/common/src/utilities/formatters/string/highlight.pipe.ts

@@ -12,7 +12,10 @@ export class HighlightPipe implements PipeTransform {
     return snippetsToHighlight.reduce((highlightedText, highlightConfig) => {
       const highlightHtmlTag = getHtmlTagForHighlightType(highlightConfig.highlightType);
 
-      return highlightedText.replace(highlightConfig.text, `<${highlightHtmlTag}>$&</${highlightHtmlTag}>`);
+      return highlightedText.replace(
+        new RegExp(highlightConfig.text, 'ig'),
+        `<${highlightHtmlTag}>$&</${highlightHtmlTag}>`
+      );
     }, fullText);
   }
 }

projects/components/src/combo-box/combo-box-api.ts

@@ -1,6 +1,7 @@
 export interface ComboBoxOption<TValue = string> {
   text: string;
-  value: TValue;
+  value?: TValue;
+  icon?: string;
   tooltip?: string;
 }
 

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

@@ -1,8 +1,16 @@
 @import 'mixins';
 
+.combo-box {
+  display: flex;
+  height: inherit;
+  width: inherit;
+}
+
 .popover-trigger {
   display: flex;
-  height: 24px;
+  align-items: center;
+  height: inherit;
+  width: inherit;
   border: 1px solid $color-border;
   border-radius: 6px;
 
@@ -54,7 +62,7 @@
     background: inherit;
     width: 100%;
     border: none;
-    margin-left: 2px; // Need this so that the border radius of container isn't cut off when no icons
+    margin-left: 12px; // Need this so that the border radius of container isn't cut off when no icons
     outline: none;
   }
 
@@ -70,6 +78,7 @@
     color: $gray-3;
     cursor: pointer;
     visibility: hidden;
+    margin-right: 8px;
 
     &.has-text {
       visibility: visible;
@@ -91,16 +100,29 @@
 
 .popover-content {
   @include dropdown();
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: hidden;
   max-height: 400px;
 
+  .option-list {
+    overflow-y: auto;
+    height: 100%;
+  }
+
   .popover-item {
     height: 36px;
-    padding: 2px 8px;
+    padding: 2px 12px;
     cursor: pointer;
 
     display: flex;
     align-items: center;
 
+    .option-icon {
+      padding-right: 10px;
+    }
+
     &:hover {
       background: $gray-1;
     }
@@ -109,4 +131,13 @@
       background: $blue-1;
     }
   }
+
+  .option-divider {
+    border-top: 1px solid $gray-2;
+    margin: 0 12px;
+  }
+
+  .create-option {
+    min-height: 36px;
+  }
 }

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

@@ -1,8 +1,8 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, flush } from '@angular/core/testing';
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
-import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
+import { DomElementScrollIntoViewService, NavigationService } from '@hypertrace/common';
+import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
 import { EMPTY } from 'rxjs';
 import { ComboBoxOption } from './combo-box-api';
 import { ComboBoxComponent } from './combo-box.component';
@@ -17,37 +17,52 @@ describe('Combo Box component', () => {
       mockProvider(NavigationService, {
         navigation$: EMPTY,
         navigateWithinApp: jest.fn()
-      })
+      }),
+      mockProvider(DomElementScrollIntoViewService)
     ]
   });
 
-  let spectator: SpectatorHost<ComboBoxComponent>;
-
   const comboBoxOptions: ComboBoxOption[] = [
-    { text: 'first-text', value: 'first-value' },
-    { text: 'second-text', value: 'second-value' },
-    { text: 'third-text', value: 'third-value' }
+    { text: 'First-text', value: 'first-value' },
+    { text: 'Second-Text', value: 'second-value' },
+    { text: 'Third-TEXT', value: 'third-value' }
   ];
 
-  beforeEach(fakeAsync(() => {
-    spectator = createHost(`<ht-combo-box [options]="options" [text]="text"></ht-combo-box>`, {
-      hostProps: {
-        options: comboBoxOptions,
-        text: 'test-text'
+  test('should display and not notify for initial value', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text'
+        }
       }
-    });
+    );
     spectator.tick();
-  }));
 
-  test('should display and not notify for initial value', () => {
     spyOn(spectator.component.textChange, 'emit');
     const element = spectator.query('.trigger-input');
 
     expect(element).toHaveValue('test-text');
     expect(spectator.component.textChange.emit).not.toHaveBeenCalled();
-  });
+  }));
 
   test('should clear input and notify', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text'
+        }
+      }
+    );
+    spectator.tick();
+
     spyOn(spectator.component.clear, 'emit');
     const element = spectator.query('.trigger-input');
     expect(element).toHaveValue('test-text');
@@ -62,6 +77,19 @@ describe('Combo Box component', () => {
   }));
 
   test('should escape from popover and notify on second escape', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text'
+        }
+      }
+    );
+    spectator.tick();
+
     spyOn(spectator.component.escape, 'emit');
     const trigger = spectator.query('.trigger-input');
     expect(trigger).toHaveValue('test-text');
@@ -78,7 +106,50 @@ describe('Combo Box component', () => {
     flush();
   }));
 
-  test('should autocomplete value', fakeAsync(() => {
+  test('should autocomplete value when provideCreateOption disabled', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text'
+        }
+      }
+    );
+    spectator.tick();
+
+    spyOn(spectator.component.textChange, 'emit');
+    spectator.click('.popover-trigger');
+    spectator.tick();
+
+    const element = spectator.query('.trigger-input');
+    spectator.typeInElement('th', element!);
+    element?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    spectator.tick();
+
+    expect(spectator.component.text).toEqual('Third-TEXT');
+    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('Third-TEXT');
+
+    flush();
+  }));
+
+  test('should create new value when provideCreateOption enabled', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text" [provideCreateOption]="provideCreateOption"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text',
+          provideCreateOption: true
+        }
+      }
+    );
+    spectator.tick();
+
     spyOn(spectator.component.textChange, 'emit');
     spectator.click('.popover-trigger');
     spectator.tick();
@@ -88,15 +159,68 @@ describe('Combo Box component', () => {
     element?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     spectator.tick();
 
-    expect(spectator.component.text).toEqual('third-text');
-    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('third-text');
+    expect(spectator.component.text).toEqual('th'); // Creates instead of autocompletes first match
+    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('th');
+
+    flush();
+  }));
+
+  test('should display and notify for tabbed to value when wrapping list without createOption', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text" [provideCreateOption]="provideCreateOption"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text',
+          provideCreateOption: false
+        }
+      }
+    );
+
+    spyOn(spectator.component.textChange, 'emit');
+    spyOn(spectator.component.enter, 'emit');
+    spectator.click('.trigger-clear-button'); // Need to clear the 'test-text' to unfilter all options
+    spectator.click('.popover-trigger');
+    spectator.tick();
+
+    const element = spectator.query('.trigger-input');
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+    element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    spectator.tick();
+
+    expect(spectator.component.text).toEqual('Second-Text');
+    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('Second-Text');
+    expect(spectator.component.enter.emit).toHaveBeenCalledWith({
+      text: 'Second-Text',
+      option: { text: 'Second-Text', value: 'second-value' }
+    });
 
     flush();
   }));
 
-  test('should display and notify for tabbed to value', fakeAsync(() => {
+  test('should display and notify for tabbed to value when wrapping list with createOption', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text" [provideCreateOption]="provideCreateOption"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text',
+          provideCreateOption: true
+        }
+      }
+    );
+
     spyOn(spectator.component.textChange, 'emit');
     spyOn(spectator.component.enter, 'emit');
+    spectator.click('.trigger-clear-button'); // Need to clear the 'test-text' to unfilter all options
     spectator.click('.popover-trigger');
     spectator.tick();
 
@@ -109,31 +233,45 @@ describe('Combo Box component', () => {
     element!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
     spectator.tick();
 
-    expect(spectator.component.text).toEqual('second-text');
-    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('second-text');
+    expect(spectator.component.text).toEqual('First-text');
+    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('First-text');
     expect(spectator.component.enter.emit).toHaveBeenCalledWith({
-      text: 'second-text',
-      option: { text: 'second-text', value: 'second-value' }
+      text: 'First-text',
+      option: { text: 'First-text', value: 'first-value' }
     });
 
     flush();
   }));
 
   test('should display and notify for clicked value', fakeAsync(() => {
+    const spectator = createHost(
+      `
+      <ht-combo-box [options]="options" [text]="text" [provideCreateOption]="provideCreateOption"></ht-combo-box>
+    `,
+      {
+        hostProps: {
+          options: comboBoxOptions,
+          text: 'test-text',
+          provideCreateOption: true
+        }
+      }
+    );
+
     spyOn(spectator.component.textChange, 'emit');
     spyOn(spectator.component.selection, 'emit');
+    spectator.click('.trigger-clear-button'); // Need to clear the 'test-text' to unfilter all options
     spectator.click('.popover-trigger');
     spectator.tick();
 
     const elements = spectator.queryAll('.popover-item', { root: true });
     spectator.click(elements[2]);
     spectator.tick();
 
-    expect(spectator.component.text).toEqual('third-text');
-    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('third-text');
+    expect(spectator.component.text).toEqual('Third-TEXT');
+    expect(spectator.component.textChange.emit).toHaveBeenCalledWith('Third-TEXT');
     expect(spectator.component.selection.emit).toHaveBeenCalledWith({
-      text: 'third-text',
-      option: { text: 'third-text', value: 'third-value' }
+      text: 'Third-TEXT',
+      option: { text: 'Third-TEXT', value: 'third-value' }
     });
 
     flush();