Allow configurable select or multiselect table controls (#1238)

* feat: add ability to choose regular or multi select table controls

* style: prettier

* test: fix

Author: jake-bassett

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

@@ -37,6 +37,7 @@ export interface TablePropertyControlOption {
 
 export interface TableSelectControl {
   placeholder: string;
+  isMultiSelect: boolean;
   options: TableSelectControlOption[];
 }
 

projects/components/src/table/controls/table-controls.component.test.ts

@@ -62,6 +62,7 @@ describe('Table Controls component', () => {
         selectControls: [
           {
             placeholder: 'test1',
+            isMultiSelect: true,
             options: [
               {
                 label: 'first1',
@@ -88,6 +89,7 @@ describe('Table Controls component', () => {
         selectControls: [
           {
             placeholder: 'test1',
+            isMultiSelect: true,
             options: [
               {
                 label: 'first1',

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

@@ -43,21 +43,39 @@ import {
         ></ht-search-box>
 
         <!-- Selects -->
-        <ht-multi-select
-          *ngFor="let selectControl of this.selectControls"
-          [selected]="this.appliedFilters(selectControl)"
-          [placeholder]="selectControl.placeholder"
-          class="control select"
-          showBorder="true"
-          searchMode="${MultiSelectSearchMode.CaseInsensitive}"
-          (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
-        >
-          <ht-select-option
-            *ngFor="let option of selectControl.options"
-            [label]="option.label"
-            [value]="option"
-          ></ht-select-option>
-        </ht-multi-select>
+        <ng-container *ngFor="let selectControl of this.selectControls">
+          <ht-multi-select
+            *ngIf="selectControl.isMultiSelect"
+            [selected]="this.appliedFilters(selectControl)"
+            [placeholder]="selectControl.placeholder"
+            class="control select"
+            showBorder="true"
+            searchMode="${MultiSelectSearchMode.CaseInsensitive}"
+            (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
+          >
+            <ht-select-option
+              *ngFor="let option of selectControl.options"
+              [label]="option.label"
+              [value]="option"
+            ></ht-select-option>
+          </ht-multi-select>
+
+          <ht-select
+            *ngIf="!selectControl.isMultiSelect"
+            [selected]="this.appliedFilters(selectControl)"
+            [placeholder]="selectControl.placeholder"
+            class="control select"
+            showBorder="true"
+            searchMode="${MultiSelectSearchMode.CaseInsensitive}"
+            (selectedChange)="this.onMultiSelectChange(selectControl, $event)"
+          >
+            <ht-select-option
+              *ngFor="let option of selectControl.options"
+              [label]="option.label"
+              [value]="option"
+            ></ht-select-option>
+          </ht-select>
+        </ng-container>
       </div>
 
       <!-- Right -->

projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts

@@ -22,7 +22,7 @@ export const endpointListDashboard: DashboardDefaultConfiguration = {
         searchAttribute: 'name',
         'select-control-options': [
           {
-            type: 'table-widget-select-option',
+            type: 'table-widget-multi-select-option',
             'unique-values': true,
             placeholder: 'Services',
             data: {

projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts

@@ -0,0 +1,9 @@
+import { Model } from '@hypertrace/hyperdash';
+import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
+
+@Model({
+  type: 'table-widget-multi-select-option'
+})
+export class TableWidgetControlMultiSelectOptionModel extends TableWidgetControlSelectOptionModel {
+  public readonly isMultiselect: boolean = true;
+}

projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts

@@ -8,6 +8,8 @@ import { TableWidgetControlModel } from './table-widget-control.model';
   type: 'table-widget-select-option'
 })
 export class TableWidgetControlSelectOptionModel extends TableWidgetControlModel<TableSelectControlOption> {
+  public readonly isMultiselect: boolean = false;
+
   @ModelProperty({
     key: 'placeholder',
     displayName: 'Placeholder',

projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -255,6 +255,7 @@ export class TableWidgetRendererComponent
                   return (
                     foundPreferences ?? {
                       placeholder: selectControlModel.placeholder,
+                      isMultiSelect: selectControlModel.isMultiselect,
                       options: options.map(option => ({
                         ...option,
                         applied: this.isFilterApplied(option.metaValue, filters)

projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts

@@ -14,6 +14,7 @@ import { TracingTableCellRendererModule } from '../../../components/table/tracin
 import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { TableWidgetColumnModel } from './table-widget-column.model';
 import { TableWidgetControlCheckboxOptionModel } from './table-widget-control-checkbox-option.model';
+import { TableWidgetControlMultiSelectOptionModel } from './table-widget-control-multi-select-option.model';
 import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
 import { TableWidgetRendererComponent } from './table-widget-renderer.component';
 import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model';
@@ -30,6 +31,7 @@ import { TableWidgetModel } from './table-widget.model';
         TableWidgetRowInteractionModel,
         TableWidgetControlCheckboxOptionModel,
         TableWidgetControlSelectOptionModel,
+        TableWidgetControlMultiSelectOptionModel,
         WidgetHeaderModel,
         TableWidgetViewToggleModel,
         TableWidgetViewModel