From cbf43a575d7eddb519b13ff6d83b164ce01f1b5c Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Thu, 2 Dec 2021 23:54:07 -0800
Subject: [PATCH 1/3] feat: list view changes

---
 .../list-view/list-view-key-renderer.directive.ts | 12 ++++++++++++
 .../src/list-view/list-view.component.ts          | 15 ++++++++++++++-
 .../components/src/list-view/list-view.module.ts  |  5 +++--
 projects/components/src/modal/modal.ts            |  7 +++++--
 .../tags/span-tags-detail.component.ts            |  9 +++++----
 5 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 projects/components/src/list-view/list-view-key-renderer.directive.ts

diff --git a/projects/components/src/list-view/list-view-key-renderer.directive.ts b/projects/components/src/list-view/list-view-key-renderer.directive.ts
new file mode 100644
index 000000000..5f437d2ca
--- /dev/null
+++ b/projects/components/src/list-view/list-view-key-renderer.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[htListViewKeyRenderer]'
+})
+export class ListViewKeyRendererDirective {
+  public constructor(private readonly templateRef: TemplateRef<unknown>) {}
+
+  public getTemplateRef(): TemplateRef<unknown> {
+    return this.templateRef;
+  }
+}
diff --git a/projects/components/src/list-view/list-view.component.ts b/projects/components/src/list-view/list-view.component.ts
index 58cf8e8d1..1dee3266e 100644
--- a/projects/components/src/list-view/list-view.component.ts
+++ b/projects/components/src/list-view/list-view.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
+import { ListViewKeyRendererDirective } from './list-view-key-renderer.directive';
 import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 @Component({
   selector: 'ht-list-view',
@@ -8,6 +9,10 @@ import { ListViewValueRendererDirective } from './list-view-value-renderer.direc
     <ng-template #defaultValueRenderer let-record
       ><span>{{ record.value }}</span></ng-template
     >
+    <ng-template #defaultKeyRenderer let-record
+      ><span>{{ record.key }}</span></ng-template
+    >
+
     <div class="list-view">
       <div *ngIf="this.header" class="header-row">
         <div class="header-key-label">
@@ -19,7 +24,12 @@ import { ListViewValueRendererDirective } from './list-view-value-renderer.direc
       </div>
       <div class="data-row" *ngFor="let record of this.records">
         <div class="key">
-          <span>{{ record.key }}</span>
+          <ng-container
+            *ngTemplateOutlet="
+              this.keyRenderer ? this.keyRenderer!.getTemplateRef() : defaultKeyRenderer;
+              context: { $implicit: record }
+            "
+          ></ng-container>
         </div>
         <div class="value">
           <ng-container
@@ -42,6 +52,9 @@ export class ListViewComponent {
 
   @ContentChild(ListViewValueRendererDirective)
   public valueRenderer?: ListViewValueRendererDirective;
+
+  @ContentChild(ListViewKeyRendererDirective)
+  public keyRenderer?: ListViewKeyRendererDirective;
 }
 
 export interface ListViewHeader {
diff --git a/projects/components/src/list-view/list-view.module.ts b/projects/components/src/list-view/list-view.module.ts
index 6d71b637b..17fca096f 100644
--- a/projects/components/src/list-view/list-view.module.ts
+++ b/projects/components/src/list-view/list-view.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
+import { ListViewKeyRendererDirective } from './list-view-key-renderer.directive';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({
-  declarations: [ListViewComponent, ListViewValueRendererDirective],
-  exports: [ListViewComponent, ListViewValueRendererDirective],
+  declarations: [ListViewComponent, ListViewValueRendererDirective, ListViewKeyRendererDirective],
+  exports: [ListViewComponent, ListViewValueRendererDirective, ListViewKeyRendererDirective],
   imports: [CommonModule]
 })
 export class ListViewModule {}
diff --git a/projects/components/src/modal/modal.ts b/projects/components/src/modal/modal.ts
index ce351485b..2e141d4fc 100644
--- a/projects/components/src/modal/modal.ts
+++ b/projects/components/src/modal/modal.ts
@@ -16,7 +16,8 @@ export const enum ModalSize {
   LargeShort = 'large-short',
   Large = 'large',
   LargeTall = 'large-tall',
-  MediumWide = 'medium-wide'
+  MediumWide = 'medium-wide',
+  LargeWide = 'large-wide'
 }
 
 export interface ModalDimension {
@@ -36,9 +37,11 @@ export const getModalDimensions = (modalSize: ModalSize): ModalDimension => {
     case ModalSize.Large:
       return getModalDimensionObject(640, 720);
     case ModalSize.LargeTall:
-      return getModalDimensionObject(640, '90vh');
+      return getModalDimensionObject(840, '90vh');
     case ModalSize.MediumWide:
       return getModalDimensionObject(840, 600);
+    case ModalSize.LargeWide:
+      return getModalDimensionObject('95em', '90vh');
     default:
       return getModalDimensionObject(420, 365);
   }
diff --git a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
index cae342b35..fdf77a6c0 100644
--- a/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
+++ b/projects/observability/src/shared/components/span-detail/tags/span-tags-detail.component.ts
@@ -13,16 +13,17 @@ import { ScopeQueryParam } from '../../../../pages/explorer/explorer.component';
   template: `
     <div class="tags-details">
       <ng-container *htLoadAsync="this.tagRecords$ as tagRecords">
-        <ht-list-view [records]="tagRecords" data-sensitive-pii
-          ><div class="tag-value" *htListViewValueRenderer="let record">
+        <ht-list-view [records]="tagRecords" data-sensitive-pii>
+          <div class="tag-value" *htListViewValueRenderer="let record">
             <div class="value">{{ record.value }}</div>
             <ht-explore-filter-link
               class="filter-link"
               [paramsOrUrl]="this.getExploreNavigationParams | htMemoize: record | async"
               htTooltip="See traces in Explorer"
             >
-            </ht-explore-filter-link></div
-        ></ht-list-view>
+            </ht-explore-filter-link>
+          </div>
+        </ht-list-view>
       </ng-container>
     </div>
   `

From 1ce25c8c596a8cdfbdbe9a48e7fc762ca82ff441 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Tue, 7 Dec 2021 15:08:19 -0800
Subject: [PATCH 2/3] refactor: fix formatting

---
 projects/components/src/list-view/list-view.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/list-view/list-view.module.ts b/projects/components/src/list-view/list-view.module.ts
index 17fca096f..fb610d5b4 100644
--- a/projects/components/src/list-view/list-view.module.ts
+++ b/projects/components/src/list-view/list-view.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 import { ListViewKeyRendererDirective } from './list-view-key-renderer.directive';
+import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({

From d867131c382079254a7d691952c7b0a9cc0dfcec Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Tue, 7 Dec 2021 15:46:03 -0800
Subject: [PATCH 3/3] refactor: fixing test

---
 .../src/modal/modal-container.component.test.ts      | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/modal/modal-container.component.test.ts b/projects/components/src/modal/modal-container.component.test.ts
index 84a4e7cf3..d7302cfb9 100644
--- a/projects/components/src/modal/modal-container.component.test.ts
+++ b/projects/components/src/modal/modal-container.component.test.ts
@@ -130,7 +130,17 @@ describe('Modal Container component', () => {
       content: TestComponent,
       size: ModalSize.LargeTall
     });
-    checkSyles('640px', '90vh');
+    checkSyles('840px', '90vh');
+  });
+
+  test('uses the requested large-wide size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeWide
+    });
+    checkSyles('95em', '90vh');
   });
 
   test('uses the requested medium-wide size', () => {