From d6859c1eed6ef266ffddb49db525b7c82f516f9e Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 23 Mar 2021 14:17:51 -0700
Subject: [PATCH 1/4] feat: add clickable values to summary list

---
 .../src/summary-list/summary-list-api.ts           |  1 +
 .../src/summary-list/summary-list.component.scss   |  4 ++++
 .../src/summary-list/summary-list.component.ts     | 14 ++++++++++++--
 .../src/table/controls/table-controls.component.ts |  5 +++--
 .../widgets/table/table-widget-base.model.ts       | 11 +++++++++++
 .../table/table-widget-renderer.component.ts       |  1 +
 .../table/table-widget-view-toggle.model.ts        |  4 ++++
 7 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/projects/components/src/summary-list/summary-list-api.ts b/projects/components/src/summary-list/summary-list-api.ts
index 090d205b6..04f0a4c9a 100644
--- a/projects/components/src/summary-list/summary-list-api.ts
+++ b/projects/components/src/summary-list/summary-list-api.ts
@@ -3,4 +3,5 @@ import { PrimitiveValue } from '@hypertrace/common';
 export interface SummaryItem {
   label: string;
   value: PrimitiveValue | PrimitiveValue[];
+  navigable?: boolean;
 }
diff --git a/projects/components/src/summary-list/summary-list.component.scss b/projects/components/src/summary-list/summary-list.component.scss
index fb2609b8b..4bdd6d537 100644
--- a/projects/components/src/summary-list/summary-list.component.scss
+++ b/projects/components/src/summary-list/summary-list.component.scss
@@ -35,6 +35,10 @@
       @include body-2-regular($gray-7);
       padding-top: 3px;
 
+      &.navigable {
+        @include link();
+      }
+
       &:first-child {
         padding-top: 6px;
       }
diff --git a/projects/components/src/summary-list/summary-list.component.ts b/projects/components/src/summary-list/summary-list.component.ts
index 6b9cc8785..f81709bc6 100644
--- a/projects/components/src/summary-list/summary-list.component.ts
+++ b/projects/components/src/summary-list/summary-list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { PrimitiveValue } from '@hypertrace/common';
 import { startCase } from 'lodash-es';
@@ -18,7 +18,14 @@ import { SummaryItem } from './summary-list-api';
         <ht-label class="summary-value-title" [label]="this.getFormattedLabel(item.label)"></ht-label>
         <ul class="summary-value-list">
           <li class="summary-value" *ngIf="this.getValuesArray(item.value).length === 0">None</li>
-          <li class="summary-value" *ngFor="let value of this.getValuesArray(item.value)">{{ value }}</li>
+          <li
+            class="summary-value"
+            [class.navigable]="item.navigable"
+            *ngFor="let value of this.getValuesArray(item.value)"
+            (click)="this.itemClick.emit(item)"
+          >
+            {{ value }}
+          </li>
         </ul>
       </ng-container>
     </div>
@@ -34,6 +41,9 @@ export class SummaryListComponent {
   @Input()
   public items?: SummaryItem[] = [];
 
+  @Output()
+  public readonly itemClick: EventEmitter<SummaryItem> = new EventEmitter();
+
   public getFormattedLabel(label: string): string {
     return startCase(label.toLowerCase());
   }
diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts
index 5b55b9c08..7bae09da2 100644
--- a/projects/components/src/table/controls/table-controls.component.ts
+++ b/projects/components/src/table/controls/table-controls.component.ts
@@ -31,7 +31,7 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont
         <ht-search-box
           *ngIf="this.searchEnabled"
           class="control search-box"
-          [placeholder]="this.searchPlaceholder"
+          [placeholder]="this.searchPlaceholder || this.DEFAULT_SEARCH_PLACEHOLDER"
           (valueChange)="this.onSearchChange($event)"
         ></ht-search-box>
 
@@ -85,11 +85,12 @@ import { CheckboxChange, CheckboxControl, SelectChange, SelectControl, TableCont
   `
 })
 export class TableControlsComponent implements OnChanges {
+  public readonly DEFAULT_SEARCH_PLACEHOLDER: string = 'Search...';
   @Input()
   public searchEnabled?: boolean;
 
   @Input()
-  public searchPlaceholder?: string = 'Search...';
+  public searchPlaceholder?: string;
 
   @Input()
   public selectControls?: SelectControl[] = [];
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts
index 6091933cc..ac304ece7 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-base.model.ts
@@ -48,6 +48,13 @@ export abstract class TableWidgetBaseModel extends BaseModel {
   })
   public searchAttribute?: string;
 
+  @ModelProperty({
+    key: 'search-placeholder',
+    displayName: 'Search Placeholder',
+    type: STRING_PROPERTY.type
+  })
+  public searchPlaceholder?: string;
+
   @ModelProperty({
     key: 'select-control-options',
     displayName: 'Select Options',
@@ -139,6 +146,10 @@ export abstract class TableWidgetBaseModel extends BaseModel {
     return this.searchAttribute;
   }
 
+  public getSearchPlaceholder(): string | undefined {
+    return this.searchPlaceholder;
+  }
+
   public getSelectControlOptions(): TableWidgetControlSelectOptionModel[] {
     return this.selectOptions;
   }
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
index 6e372458c..07b7e40db 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts
@@ -55,6 +55,7 @@ import { TableWidgetModel } from './table-widget.model';
         <ht-table-controls
           class="table-controls"
           [searchEnabled]="!!this.api.model.getSearchAttribute()"
+          [searchPlaceholder]="this.api.model.getSearchPlaceholder()"
           [selectControls]="this.selectControls$ | async"
           [checkboxControls]="this.checkboxControls$ | async"
           [viewItems]="this.viewItems"
diff --git a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts
index 197a0a872..d8a1cd484 100644
--- a/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts
+++ b/projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts
@@ -83,6 +83,10 @@ export class TableWidgetViewToggleModel extends TableWidgetModel implements Mode
     return this.delegateModel?.getSearchAttribute() ?? this.searchAttribute;
   }
 
+  public getSearchPlaceholder(): string | undefined {
+    return this.delegateModel?.getSearchPlaceholder() ?? this.searchPlaceholder;
+  }
+
   public getCheckboxControlOptions(): TableWidgetControlCheckboxOptionModel[] {
     return this.delegateModel?.getCheckboxControlOptions() ?? this.checkboxOptions;
   }

From 4e2c8dba7b5db4e80dbb5f3b5afff4859a753eaf Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 23 Mar 2021 14:20:35 -0700
Subject: [PATCH 2/4] feat: rename navigable to more generic clickable

---
 projects/components/src/summary-list/summary-list-api.ts        | 2 +-
 .../components/src/summary-list/summary-list.component.scss     | 2 +-
 projects/components/src/summary-list/summary-list.component.ts  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/components/src/summary-list/summary-list-api.ts b/projects/components/src/summary-list/summary-list-api.ts
index 04f0a4c9a..570fdb231 100644
--- a/projects/components/src/summary-list/summary-list-api.ts
+++ b/projects/components/src/summary-list/summary-list-api.ts
@@ -3,5 +3,5 @@ import { PrimitiveValue } from '@hypertrace/common';
 export interface SummaryItem {
   label: string;
   value: PrimitiveValue | PrimitiveValue[];
-  navigable?: boolean;
+  clickable?: boolean;
 }
diff --git a/projects/components/src/summary-list/summary-list.component.scss b/projects/components/src/summary-list/summary-list.component.scss
index 4bdd6d537..c218129e6 100644
--- a/projects/components/src/summary-list/summary-list.component.scss
+++ b/projects/components/src/summary-list/summary-list.component.scss
@@ -35,7 +35,7 @@
       @include body-2-regular($gray-7);
       padding-top: 3px;
 
-      &.navigable {
+      &.clickable {
         @include link();
       }
 
diff --git a/projects/components/src/summary-list/summary-list.component.ts b/projects/components/src/summary-list/summary-list.component.ts
index f81709bc6..7dc8e9e13 100644
--- a/projects/components/src/summary-list/summary-list.component.ts
+++ b/projects/components/src/summary-list/summary-list.component.ts
@@ -20,7 +20,7 @@ import { SummaryItem } from './summary-list-api';
           <li class="summary-value" *ngIf="this.getValuesArray(item.value).length === 0">None</li>
           <li
             class="summary-value"
-            [class.navigable]="item.navigable"
+            [class.clickable]="item.clickable"
             *ngFor="let value of this.getValuesArray(item.value)"
             (click)="this.itemClick.emit(item)"
           >

From 2fef984b07d1a4f315dc8624d6157736674476f7 Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Tue, 23 Mar 2021 14:49:54 -0700
Subject: [PATCH 3/4] test: fix whitespace

---
 .../components/src/summary-list/summary-list.component.test.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/summary-list/summary-list.component.test.ts b/projects/components/src/summary-list/summary-list.component.test.ts
index 762ce8894..7a30cf2f8 100644
--- a/projects/components/src/summary-list/summary-list.component.test.ts
+++ b/projects/components/src/summary-list/summary-list.component.test.ts
@@ -73,7 +73,7 @@ describe('Summary List component', () => {
   });
 
   test('gets value array', () => {
-    const values = spectator.queryAll('li').map(e => e.textContent);
+    const values = spectator.queryAll('li').map(e => e.textContent?.trim());
     expect(values).toEqual(['0', '0', '1', '2', 'zero', 'zero', 'one', 'two', 'three', 'true', 'true', 'false']);
   });
 });

From 617177224a6e64d0bd17fe2bc532c480e3fd614e Mon Sep 17 00:00:00 2001
From: Jake Bassett <jake@traceable.ai>
Date: Wed, 24 Mar 2021 10:11:40 -0700
Subject: [PATCH 4/4] feat: only emit if clickable

---
 .../components/src/summary-list/summary-list.component.ts   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/summary-list/summary-list.component.ts b/projects/components/src/summary-list/summary-list.component.ts
index 7dc8e9e13..5ca502abd 100644
--- a/projects/components/src/summary-list/summary-list.component.ts
+++ b/projects/components/src/summary-list/summary-list.component.ts
@@ -22,7 +22,7 @@ import { SummaryItem } from './summary-list-api';
             class="summary-value"
             [class.clickable]="item.clickable"
             *ngFor="let value of this.getValuesArray(item.value)"
-            (click)="this.itemClick.emit(item)"
+            (click)="this.onItemCLick(item)"
           >
             {{ value }}
           </li>
@@ -51,4 +51,8 @@ export class SummaryListComponent {
   public getValuesArray(value: PrimitiveValue | PrimitiveValue[]): PrimitiveValue[] {
     return Array.isArray(value) ? value : [value];
   }
+
+  public onItemCLick(item: SummaryItem): void {
+    item.clickable && this.itemClick.emit(item);
+  }
 }