feat: list view changes (hypertrace#1302)

* feat: list view changes

* refactor: fix formatting

* refactor: fixing test

Author: anandtiwary

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;
+  }
+}

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 {

projects/components/src/list-view/list-view.module.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ListViewKeyRendererDirective } from './list-view-key-renderer.directive';
 import { ListViewValueRendererDirective } from './list-view-value-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 {}

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', () => {

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);
   }

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>
   `