refactor: table controls more generic and common API (#576)

* refactor: table controls more generic and common API

* fix: address pr comments

Author: jake-bassett

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

@@ -0,0 +1,6 @@
+export const enum MultiSelectJustify {
+  // These are used in css
+  Left = 'flex-start',
+  Center = 'center',
+  Right = 'flex-end'
+}

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

@@ -3,11 +3,14 @@
 .multi-select {
   display: flex;
   align-items: center;
-  border: 1px solid $color-border;
-  border-radius: 6px;
   height: 100%;
   width: 100%;
 
+  &.border {
+    border: 1px solid $color-border;
+    border-radius: 6px;
+  }
+
   .multi-select-container {
     width: 100%;
   }
@@ -16,37 +19,46 @@
     opacity: 0.4;
   }
 
+  &.open .trigger-content.icon-mode {
+    color: $blue-5;
+    background: $blue-1;
+    border-color: $blue-3;
+  }
+
   .trigger-content {
     display: flex;
     align-items: center;
     padding: 0 8px;
     cursor: pointer;
     height: 34px;
 
-    &.justify-left {
-      justify-content: flex-start;
-    }
+    &.icon-mode {
+      border: 1px solid transparent;
+      border-radius: 64px;
+      padding: 0 4px;
 
-    &.justify-right {
-      justify-content: flex-end;
+      &:hover {
+        color: $blue-5;
+        background: $blue-1;
+        border-color: $blue-3;
+      }
     }
 
-    &.justify-center {
-      justify-content: center;
-    }
-
-    .trigger-prefix-icon {
-      padding-right: 8px;
-    }
-
-    .trigger-label {
-      @include body-2-medium();
+    .trigger-label-container {
+      display: flex;
+      width: 100%;
+      align-items: center;
       padding-left: 8px;
-    }
 
-    .trigger-icon {
-      padding: 0 8px;
-      margin-left: auto;
+      .trigger-label {
+        @include body-2-medium();
+        padding-left: 8px;
+      }
+
+      .trigger-icon {
+        padding: 0 8px;
+        margin-left: auto;
+      }
     }
   }
 }

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

@@ -5,8 +5,8 @@ import { MockComponent } from 'ng-mocks';
 import { DividerComponent } from '../divider/divider.component';
 import { LabelComponent } from '../label/label.component';
 import { LetAsyncModule } from '../let-async/let-async.module';
-import { SelectJustify } from '../select/select-justify';
 import { SelectOptionComponent } from '../select/select-option.component';
+import { MultiSelectJustify } from './multi-select-justify';
 import { MultiSelectComponent, TriggerLabelDisplayMode } from './multi-select.component';
 
 describe('Multi Select Component', () => {
@@ -215,52 +215,39 @@ describe('Multi Select Component', () => {
     flush();
   }));
 
-  test('should set correct label alignment', fakeAsync(() => {
+  test('should set correct justification', fakeAsync(() => {
     spectator = hostFactory(
       `
-    <ht-multi-select [selected]="selected" [showBorder]="showBorder">
+    <ht-multi-select [selected]="selected" [showBorder]="showBorder" [justify]="justify">
       <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],
-          showBorder: true
+          showBorder: true,
+          justify: MultiSelectJustify.Left
         }
       }
     );
     spectator.tick();
 
     expect(spectator.element).toHaveText(selectionOptions[1].label);
-    expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-left'));
+    expect(spectator.query('.trigger-content')!.getAttribute('style')).toBe('justify-content: flex-start;');
 
     spectator.setInput({
-      showBorder: false
+      justify: MultiSelectJustify.Center
     });
 
     expect(spectator.element).toHaveText(selectionOptions[1].label);
-    expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-right'));
+    expect(spectator.query('.trigger-content')!.getAttribute('style')).toBe('justify-content: center;');
 
     spectator.setInput({
-      justify: SelectJustify.Left
+      justify: MultiSelectJustify.Right
     });
 
     expect(spectator.element).toHaveText(selectionOptions[1].label);
-    expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-left'));
-
-    spectator.setInput({
-      justify: SelectJustify.Right
-    });
-
-    expect(spectator.element).toHaveText(selectionOptions[1].label);
-    expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-right'));
-
-    spectator.setInput({
-      justify: SelectJustify.Center
-    });
-
-    expect(spectator.element).toHaveText(selectionOptions[1].label);
-    expect(spectator.query('.trigger-content')).toBe(spectator.query('.justify-center'));
+    expect(spectator.query('.trigger-content')!.getAttribute('style')).toBe('justify-content: flex-end;');
   }));
 });

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

@@ -14,10 +14,10 @@ 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 { SelectJustify } from '../select/select-justify';
 import { SelectOption } from '../select/select-option';
 import { SelectOptionComponent } from '../select/select-option.component';
 import { SelectSize } from '../select/select-size';
+import { MultiSelectJustify } from './multi-select-justify';
 
 @Component({
   selector: 'ht-multi-select',
@@ -26,16 +26,32 @@ import { SelectSize } from '../select/select-size';
   template: `
     <div
       class="multi-select"
-      [ngClass]="[this.size, this.showBorder ? 'border' : '', this.disabled ? 'disabled' : '']"
+      [ngClass]="[
+        this.size,
+        this.showBorder ? 'border' : '',
+        this.disabled ? 'disabled' : '',
+        this.popoverOpen ? 'open' : ''
+      ]"
       *htLetAsync="this.selected$ as selected"
     >
-      <ht-popover [disabled]="this.disabled" class="multi-select-container">
+      <ht-popover
+        [disabled]="this.disabled"
+        class="multi-select-container"
+        (popoverOpen)="this.popoverOpen = true"
+        (popoverClose)="this.popoverOpen = false"
+      >
         <ht-popover-trigger>
-          <div class="trigger-content" [ngClass]="this.justifyClass" #triggerContainer>
-            <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" size="${IconSize.Small}">
-            </ht-icon>
-            <ht-label class="trigger-label" [label]="this.triggerLabel"></ht-label>
-            <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+          <div
+            class="trigger-content"
+            [style.justify-content]="this.justify"
+            [ngClass]="this.triggerLabelDisplayMode"
+            #triggerContainer
+          >
+            <ht-icon *ngIf="this.icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>
+            <div *ngIf="!this.isIconOnlyMode()" class="trigger-label-container">
+              <ht-label class="trigger-label" [label]="this.triggerLabel"></ht-label>
+              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.Small}"></ht-icon>
+            </div>
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
@@ -76,6 +92,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   @Input()
   public icon?: string;
 
+  @Input()
+  public iconSize: IconSize = IconSize.Small;
+
   @Input()
   public placeholder?: string;
 
@@ -86,7 +105,7 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   public showBorder: boolean = false;
 
   @Input()
-  public justify?: SelectJustify;
+  public justify: MultiSelectJustify = MultiSelectJustify.Left;
 
   @Input()
   public showAllOptionControl?: boolean = false;
@@ -100,17 +119,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
   @ContentChildren(SelectOptionComponent)
   public items?: QueryList<SelectOptionComponent<V>>;
 
-  public selected$?: Observable<SelectOption<V>[] | undefined>;
+  public popoverOpen: boolean = false;
+  public selected$?: Observable<SelectOption<V>[]>;
   public triggerLabel?: string;
 
-  public get justifyClass(): string {
-    if (this.justify !== undefined) {
-      return this.justify;
-    }
-
-    return this.showBorder ? SelectJustify.Left : SelectJustify.Right;
-  }
-
   public constructor(private readonly loggerService: LoggerService) {}
 
   public ngAfterContentInit(): void {
@@ -130,6 +142,10 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     this.setSelection();
   }
 
+  public isIconOnlyMode(): boolean {
+    return this.triggerLabelDisplayMode === TriggerLabelDisplayMode.Icon;
+  }
+
   public areAllOptionsSelected(): boolean {
     return this.selected !== undefined && this.items !== undefined && this.selected.length === this.items.length;
   }
@@ -169,14 +185,14 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
     }
   }
 
-  private buildObservableOfSelected(): Observable<SelectOption<V>[] | undefined> {
+  private buildObservableOfSelected(): Observable<SelectOption<V>[]> {
     if (!this.items) {
       return EMPTY;
     }
 
     return queryListAndChanges$(this.items).pipe(
       switchMap(items => merge(of(undefined), ...items.map(option => option.optionChange$))),
-      map(() => this.findItems(this.selected))
+      map(() => this.findItems(this.selected) ?? [])
     );
   }
 
@@ -193,6 +209,8 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
 }
 
 export const enum TriggerLabelDisplayMode {
-  Placeholder = 'placeholder',
-  Selection = 'selection'
+  // These may be used as css classes
+  Placeholder = 'placeholder-mode',
+  Selection = 'selection-mode',
+  Icon = 'icon-mode'
 }

projects/components/src/table/controls/table-controls-api.ts

@@ -1,12 +1,55 @@
-import { KeyValue } from '@angular/common';
+import { Dictionary } from '@hypertrace/common';
 import { SelectOption } from '../../select/select-option';
+import { TableFilter } from '../table-api';
 
-export interface SelectFilter {
+export interface SelectControl {
   placeholder?: string;
-  options: SelectOption<KeyValue<string, unknown>>[];
+  default?: SelectOption<TableControlOption>;
+  options: SelectOption<TableControlOption>[];
 }
 
 export interface SelectChange {
-  select: SelectFilter;
-  value: KeyValue<string, unknown>;
+  select: SelectControl;
+  value: TableControlOption;
 }
+
+export interface CheckboxControl {
+  label: string;
+  value: boolean;
+  options: TableCheckboxOptions;
+}
+
+export interface CheckboxChange {
+  checkbox: CheckboxControl;
+  option: TableControlOption<unknown, boolean>;
+}
+
+export const enum TableControlOptionType {
+  Filter = 'filter',
+  Property = 'property',
+  UnsetFilter = 'unset-filter'
+}
+
+export interface TableControlOption<TMetaValue = unknown, TValue = unknown> {
+  type: TableControlOptionType;
+  label: string;
+  metaValue: TMetaValue; // Used in a query - type based on TableWidgetControlOptionType
+  value?: TValue; // If a control needs to carry a value, use this (example: checkbox boolean)
+}
+
+export interface TableUnsetControlOption extends TableControlOption<string, undefined> {
+  type: TableControlOptionType.UnsetFilter;
+  metaValue: string;
+}
+
+export interface TableFilterControlOption extends TableControlOption<TableFilter> {
+  type: TableControlOptionType.Filter;
+  metaValue: TableFilter;
+}
+
+export interface TablePropertyControlOption extends TableControlOption<Dictionary<unknown>> {
+  type: TableControlOptionType.Property;
+  metaValue: Dictionary<unknown>;
+}
+
+export type TableCheckboxOptions = [TableControlOption<unknown, true>, TableControlOption<unknown, false>];

projects/components/src/table/controls/table-controls.component.scss

@@ -1,3 +1,5 @@
+@import 'mixins';
+
 .table-controls {
   display: flex;
   padding-bottom: 16px;
@@ -9,16 +11,19 @@
     }
   }
 
-  .filter-controls {
+  .table-controls-left {
     display: flex;
 
     .search-box {
       width: 256px;
     }
   }
 
-  .filter-checkbox {
+  .table-controls-right {
     display: flex;
-    align-items: center;
+
+    .filter-multi-select {
+      color: $gray-7;
+    }
   }
 }