Merge branch 'main' of github.com:hypertrace/hypertrace-ui into DonutAlignment

Author: Patricio Albizu

projects/components/src/list-view/list-view-value-renderer.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[htListViewValueRenderer]'
+})
+export class ListViewValueRendererDirective {
+  public constructor(private readonly templateRef: TemplateRef<unknown>) {}
+
+  public getTemplateRef(): TemplateRef<unknown> {
+    return this.templateRef;
+  }
+}

projects/components/src/list-view/list-view.component.scss

@@ -1,8 +1,7 @@
-@import 'font';
-@import 'color-palette';
+@import 'mixins';
 
 $key-width: 40%;
-$value-width: 60%;
+$value-width: auto;
 $horizontal-offset: 12px;
 
 @mixin grid-view {

projects/components/src/list-view/list-view.component.test.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavigationService } from '@hypertrace/common';
+import { mockProvider } from '@ngneat/spectator/jest';
 import { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view.component';
 
 describe('List View Component', () => {
@@ -32,7 +34,8 @@ describe('List View Component', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestHostComponent, ListViewComponent],
-      imports: [CommonModule]
+      imports: [CommonModule],
+      providers: [mockProvider(NavigationService)]
     });
 
     fixture = TestBed.createComponent(TestHostComponent);

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

@@ -1,10 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
+import { ChangeDetectionStrategy, Component, ContentChild, Input } from '@angular/core';
+import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 @Component({
   selector: 'ht-list-view',
   styleUrls: ['./list-view.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
+    <ng-template #defaultValueRenderer let-record
+      ><span>{{ record.value }}</span></ng-template
+    >
     <div class="list-view">
       <div *ngIf="this.header" class="header-row">
         <div class="header-key-label">
@@ -19,7 +22,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
           <span>{{ record.key }}</span>
         </div>
         <div class="value">
-          <span>{{ record.value }}</span>
+          <ng-container
+            *ngTemplateOutlet="
+              this.valueRenderer ? this.valueRenderer!.getTemplateRef() : defaultValueRenderer;
+              context: { $implicit: record }
+            "
+          ></ng-container>
         </div>
       </div>
     </div>
@@ -31,6 +39,9 @@ export class ListViewComponent {
 
   @Input()
   public records?: ListViewRecord[];
+
+  @ContentChild(ListViewValueRendererDirective)
+  public valueRenderer?: ListViewValueRendererDirective;
 }
 
 export interface ListViewHeader {

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

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ListViewValueRendererDirective } from './list-view-value-renderer.directive';
 import { ListViewComponent } from './list-view.component';
 
 @NgModule({
-  declarations: [ListViewComponent],
-  exports: [ListViewComponent],
+  declarations: [ListViewComponent, ListViewValueRendererDirective],
+  exports: [ListViewComponent, ListViewValueRendererDirective],
   imports: [CommonModule]
 })
 export class ListViewModule {}

projects/components/src/modal/modal-container.component.scss

@@ -11,36 +11,6 @@
   display: flex;
   flex-direction: column;
 
-  &.modal-size-small {
-    height: 365px;
-    width: 420px;
-  }
-
-  &.modal-size-medium {
-    height: 530px;
-    width: 456px;
-  }
-
-  &.modal-size-large-short {
-    height: 540px;
-    width: 640px;
-  }
-
-  &.modal-size-large {
-    height: 720px;
-    width: 640px;
-  }
-
-  &.modal-size-large-tall {
-    height: 800px;
-    width: 640px;
-  }
-
-  &.modal-size-medium-wide {
-    height: 600px;
-    width: 840px;
-  }
-
   .header {
     display: flex;
     flex-direction: column;

projects/components/src/modal/modal-container.component.test.ts

@@ -22,6 +22,12 @@ class TestComponent {
 describe('Modal Container component', () => {
   let spectator: Spectator<ModalContainerComponent>;
 
+  const checkSyles = (width: string, height: string): void => {
+    const modalContainer = spectator.query('.modal-container') as HTMLElement;
+    expect(modalContainer.style.height).toBe(height);
+    expect(modalContainer.style.width).toBe(width);
+  };
+
   const createHost = createHostFactory({
     component: ModalContainerComponent,
     shallow: true,
@@ -77,14 +83,77 @@ describe('Modal Container component', () => {
     expect(spectator.query('.header')).toHaveText('Create User');
   });
 
-  test('uses the requested size', () => {
+  test('uses the requested small size', () => {
     spectator = createConfiguredHost({
       showControls: true,
       title: 'Create User',
       content: TestComponent,
       size: ModalSize.Small
     });
-    expect(spectator.query('.modal-container')).toHaveClass('modal-size-small');
+    checkSyles('420px', '365px');
+  });
+
+  test('uses the requested medium size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Medium
+    });
+    checkSyles('456px', '530px');
+  });
+
+  test('uses the requested large-short size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeShort
+    });
+    checkSyles('640px', '540px');
+  });
+
+  test('uses the requested large size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.Large
+    });
+    checkSyles('640px', '720px');
+  });
+
+  test('uses the requested large-tall size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.LargeTall
+    });
+    checkSyles('640px', '800px');
+  });
+
+  test('uses the requested medium-wide size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: ModalSize.MediumWide
+    });
+    checkSyles('840px', '600px');
+  });
+
+  test('custom size', () => {
+    spectator = createConfiguredHost({
+      showControls: true,
+      title: 'Create User',
+      content: TestComponent,
+      size: {
+        width: 100,
+        height: 100
+      }
+    });
+    checkSyles('100px', '100px');
   });
 
   test('closes on close button click', () => {

projects/components/src/modal/modal-container.component.ts

@@ -4,14 +4,14 @@ import { LayoutChangeService } from '@hypertrace/common';
 import { ButtonSize, ButtonStyle } from '../button/button';
 import { POPOVER_DATA } from '../popover/popover';
 import { PopoverRef } from '../popover/popover-ref';
-import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
+import { getModalDimensions, ModalConfig, ModalDimension, MODAL_DATA } from './modal';
 
 @Component({
   selector: 'ht-modal-container',
   styleUrls: ['./modal-container.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div *ngIf="this.visible" class="modal-container" [ngClass]="'modal-size-' + this.size">
+    <div *ngIf="this.visible" class="modal-container" [style.height]="this.size.height" [style.width]="this.size.width">
       <div class="header">
         <ht-button
           *ngIf="this.showControls"
@@ -41,7 +41,7 @@ import { ModalConfig, ModalSize, MODAL_DATA } from './modal';
 export class ModalContainerComponent {
   public readonly modalTitle: string;
   public readonly showControls: boolean;
-  public readonly size: ModalSize;
+  public readonly size: ModalDimension;
   public readonly isComponentModal: boolean;
   public readonly renderer: TemplateRef<unknown> | Type<unknown>;
   public readonly rendererInjector: Injector;
@@ -58,7 +58,9 @@ export class ModalContainerComponent {
     const config = constructionData.config;
     this.showControls = config.showControls ?? false;
     this.modalTitle = config.title ?? '';
-    this.size = config.size;
+    this.size = this.isModalDimension(config.size)
+      ? this.getDimensionsWithUnits(config.size)
+      : this.getDimensionsWithUnits(getModalDimensions(config.size));
     this.isComponentModal = !(config.content instanceof TemplateRef);
     this.closeOnEscape = config.closeOnEscapeKey ?? true;
     this.renderer = config.content;
@@ -85,6 +87,24 @@ export class ModalContainerComponent {
     this.visible = false;
     this.popoverRef.close();
   }
+
+  private isModalDimension(size: unknown): size is ModalDimension {
+    // tslint:disable-next-line:strict-type-predicates
+    return typeof size === 'object' && size !== null && 'width' in (size as ModalDimension);
+  }
+
+  private getDimensionsWithUnits(dims: ModalDimension): ModalDimension {
+    const dimsWithUnits: ModalDimension = { ...dims };
+    if (typeof dims.height === 'number') {
+      dimsWithUnits.height = `${dims.height}px`;
+    }
+
+    if (typeof dims.width === 'number') {
+      dimsWithUnits.width = `${dims.width}px`;
+    }
+
+    return dimsWithUnits;
+  }
 }
 
 export interface ModalConstructionData {

projects/components/src/modal/modal.ts

@@ -2,8 +2,8 @@ import { InjectionToken, TemplateRef, Type } from '@angular/core';
 import { Observable } from 'rxjs';
 
 export interface ModalConfig<TData = unknown> {
-  size: ModalSize;
   content: TemplateRef<unknown> | Type<unknown>;
+  size: ModalSize | ModalDimension;
   showControls?: boolean;
   title?: string;
   data?: TData;
@@ -19,6 +19,33 @@ export const enum ModalSize {
   MediumWide = 'medium-wide'
 }
 
+export interface ModalDimension {
+  // Number => without unit (considered px) and String => with units (expression included)
+  width: number | string;
+  height: number | string;
+}
+
+export const getModalDimensions = (modalSize: ModalSize): ModalDimension => {
+  switch (modalSize) {
+    case ModalSize.Small:
+      return getModalDimensionObject(420, 365);
+    case ModalSize.Medium:
+      return getModalDimensionObject(456, 530);
+    case ModalSize.LargeShort:
+      return getModalDimensionObject(640, 540);
+    case ModalSize.Large:
+      return getModalDimensionObject(640, 720);
+    case ModalSize.LargeTall:
+      return getModalDimensionObject(640, 800);
+    case ModalSize.MediumWide:
+      return getModalDimensionObject(840, 600);
+    default:
+      return getModalDimensionObject(420, 365);
+  }
+};
+
+const getModalDimensionObject = (width: number, height: number): ModalDimension => ({ width: width, height: height });
+
 export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');
 
 export abstract class ModalRef<TResult> {

projects/components/src/public-api.ts

@@ -167,8 +167,8 @@ export * from './link/link.component';
 export * from './link/link.module';
 
 // List View
-export { ListViewComponent, ListViewHeader, ListViewRecord } from './list-view/list-view.component';
-export { ListViewModule } from './list-view/list-view.module';
+export * from './list-view/list-view.component';
+export * from './list-view/list-view.module';
 
 // Load Async
 export { LoadAsyncDirective } from './load-async/load-async.directive';