From 05252a4dc15b192851152a8588c4281696140784 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Fri, 5 Nov 2021 15:36:33 -0700
Subject: [PATCH 1/3] feat: add ability to choose regular or multi select table
 controls

---
 .../src/table/controls/table-controls-api.ts  |  1 +
 .../controls/table-controls.component.ts      | 47 ++++++++++++++-----
 .../apis/endpoints/endpoint-list.dashboard.ts |  2 +-
 ...idget-control-multi-select-option.model.ts |  9 ++++
 ...able-widget-control-select-option.model.ts |  2 +
 .../table/table-widget-renderer.component.ts  |  1 +
 .../widgets/table/table-widget.module.ts      |  2 +
 7 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts

diff --git a/projects/components/src/table/controls/table-controls-api.ts b/projects/components/src/table/controls/table-controls-api.ts
index 149fa04e7..406d518c1 100644
--- a/projects/components/src/table/controls/table-controls-api.ts
+++ b/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[];
 }
 
diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
index ede10a6e3..02d07baf7 100644
--- a/projects/components/src/table/controls/table-controls.component.ts
+++ b/projects/components/src/table/controls/table-controls.component.ts
@@ -43,21 +43,42 @@ import {
         ></ht-search-box>
 
         <!-- Selects -->
-        <ht-multi-select
+        <ng-container
           *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>
+          <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 -->
diff --git a/projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts b/projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts
index 9c4069b1e..e3e8f9c53 100644
--- a/projects/observability/src/pages/apis/endpoints/endpoint-list.dashboard.ts
+++ b/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: {
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-multi-select-option.model.ts
new file mode 100644
index 000000000..432b68c94
--- /dev/null
+++ b/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;
+}
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts
index 5022a54dc..5556aaae9 100644
--- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-control-select-option.model.ts
+++ b/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',
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
index 43e71d88f..36eb26ef3 100644
--- a/projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
+++ b/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)
diff --git a/projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts b/projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts
index 8059c76a8..9fedf75b8 100644
--- a/projects/observability/src/shared/dashboard/widgets/table/table-widget.module.ts
+++ b/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

From a8c98dc34507bcdc6aa562e0cf2e9d03c71df553 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Fri, 5 Nov 2021 15:39:01 -0700
Subject: [PATCH 2/3] style: prettier

---
 .../src/table/controls/table-controls.component.ts           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
index 02d07baf7..7c94717b9 100644
--- a/projects/components/src/table/controls/table-controls.component.ts
+++ b/projects/components/src/table/controls/table-controls.component.ts
@@ -43,9 +43,7 @@ import {
         ></ht-search-box>
 
         <!-- Selects -->
-        <ng-container
-          *ngFor="let selectControl of this.selectControls"
-        >
+        <ng-container *ngFor="let selectControl of this.selectControls">
           <ht-multi-select
             *ngIf="selectControl.isMultiSelect"
             [selected]="this.appliedFilters(selectControl)"
@@ -77,7 +75,6 @@ import {
               [value]="option"
             ></ht-select-option>
           </ht-select>
-
         </ng-container>
       </div>
 

From 657576a4da0ee283d7030b1df90f96dbd5ef7e5a Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Fri, 5 Nov 2021 15:54:03 -0700
Subject: [PATCH 3/3] test: fix

---
 .../src/table/controls/table-controls.component.test.ts         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts
index 643c7ad00..734d78560 100644
--- a/projects/components/src/table/controls/table-controls.component.test.ts
+++ b/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',