Merge branch 'notification-update' of github.com:hypertrace/hypertrace-ui into notification-update

Author: anandtiwary

package-lock.json

@@ -25,17 +25,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^11.0.7",
-    "@angular/cdk": "^11.0.3",
+    "@angular/cdk": "^11.0.4",
     "@angular/common": "^11.0.7",
     "@angular/compiler": "^11.0.7",
     "@angular/core": "^11.0.7",
     "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "^11.0.7",
-    "@angular/material": "^11.0.3",
+    "@angular/material": "^11.0.4",
     "@angular/platform-browser": "^11.0.7",
     "@angular/platform-browser-dynamic": "^11.0.7",
     "@angular/router": "^11.0.7",
-    "@apollo/client": "^3.3.6",
+    "@apollo/client": "^3.3.7",
     "@hypertrace/hyperdash": "^1.2.1",
     "@hypertrace/hyperdash-angular": "^2.4.0",
     "@types/d3-hierarchy": "^2.0.0",
@@ -57,7 +57,7 @@
     "d3-shape": "^1.3.5",
     "d3-transition": "^1.2.0",
     "d3-zoom": "^1.8.3",
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
     "graphql-tag": "^2.11.0",
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.20",
@@ -75,7 +75,7 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@compodoc/compodoc": "^1.1.11",
-    "@ngneat/spectator": "^6.1.3",
+    "@ngneat/spectator": "^7.0.0",
     "@types/d3-array": "^2.9.0",
     "@types/d3-axis": "^2.0.0",
     "@types/d3-brush": "^2.1.0",
@@ -89,7 +89,7 @@
     "@types/d3-zoom": "^1.7.5",
     "@types/jest": "^26.0.20",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^14.14.14",
+    "@types/node": "^14.14.25",
     "@types/uuid": "^8.3.0",
     "@types/webpack-env": "^1.14.0",
     "codelyzer": "^6.0.1",
@@ -102,7 +102,7 @@
     "jest-junit": "^12.0.0",
     "lodash": "^4.17.20",
     "ng-mocks": "^11.3.1",
-    "ng-packagr": "^11.1.2",
+    "ng-packagr": "^11.1.4",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.0.0",
     "ts-node": "~9.1.1",

package.json

@@ -59,6 +59,10 @@ export class TimeRangeService {
     return this.setTimeRange(TimeRangeService.toFixedTimeRange(startTime, endTime));
   }
 
+  public refresh(): void {
+    this.setTimeRange(this.getCurrentTimeRange());
+  }
+
   private initializeTimeRange(): void {
     this.navigationService.navigation$
       .pipe(

projects/common/src/time/time-range.service.ts

@@ -0,0 +1,22 @@
+:host {
+  min-width: 0;
+}
+
+.description {
+  display: flex;
+}
+
+.description-button {
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+  &-more {
+    margin-left: 5px;
+  }
+}
+
+.truncated-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

projects/components/src/description/description.component.scss

@@ -0,0 +1,34 @@
+import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { DescriptionComponent } from './description.component';
+
+describe('Description Component', () => {
+  let spectator: Spectator<DescriptionComponent>;
+
+  const createHost = createHostFactory<DescriptionComponent>({
+    component: DescriptionComponent,
+    shallow: true
+  });
+
+  test('should render the description', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+
+    expect(spectator.query('.description')).toExist();
+    expect(spectator.query('.description-text')).toHaveText('Description text');
+  });
+
+  test('should show full description text if pressed button show more', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+
+    expect(spectator.component.isDescriptionTextToggled).toBeFalsy();
+    spectator.component.toggleDescriptionText();
+    expect(spectator.component.isDescriptionTextToggled).toBeTruthy();
+  });
+});

projects/components/src/description/description.component.test.ts

@@ -0,0 +1,81 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild
+} from '@angular/core';
+
+@Component({
+  selector: 'ht-description',
+  styleUrls: ['./description.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="description" (htLayoutChange)="this.remeasure()" #eventDescriptionContainer>
+      <div
+        class="description-text"
+        [ngClass]="{ 'truncated-text': !isDescriptionTextToggled }"
+        data-sensitive-pii
+        #eventDescriptionText
+      >
+        {{ description }}
+        <span
+          *ngIf="isDescriptionTruncated && isDescriptionTextToggled"
+          (click)="toggleDescriptionText()"
+          class="description-button"
+          >show less</span
+        >
+      </div>
+      <div
+        class="description-button description-button-more"
+        *ngIf="isDescriptionTruncated && !isDescriptionTextToggled"
+        (click)="toggleDescriptionText()"
+      >
+        show more
+      </div>
+    </div>
+  `
+})
+export class DescriptionComponent implements OnChanges, AfterViewInit {
+  public isInitialized: boolean = false;
+  public isDescriptionTextToggled: boolean = false;
+  public isDescriptionTruncated!: boolean;
+
+  @ViewChild('eventDescriptionText', { read: ElementRef })
+  public readonly eventDescriptionText!: ElementRef;
+
+  @ViewChild('eventDescriptionContainer', { read: ElementRef })
+  public readonly eventDescriptionContainer!: ElementRef;
+
+  @Input()
+  public description!: string;
+
+  public constructor(private readonly cdRef: ChangeDetectorRef) {}
+
+  public ngOnChanges(): void {
+    if (this.isInitialized) {
+      this.remeasure();
+    }
+  }
+
+  public ngAfterViewInit(): void {
+    this.isInitialized = true;
+    this.remeasure();
+  }
+
+  public toggleDescriptionText(): void {
+    this.isDescriptionTextToggled = !this.isDescriptionTextToggled;
+  }
+
+  public remeasure(): void {
+    this.isDescriptionTextToggled = false;
+    this.cdRef.detectChanges();
+
+    this.isDescriptionTruncated =
+      this.eventDescriptionContainer.nativeElement.offsetWidth < this.eventDescriptionText.nativeElement.scrollWidth;
+    this.cdRef.detectChanges();
+  }
+}

projects/components/src/description/description.component.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { LayoutChangeModule } from '../layout/layout-change.module';
+import { DescriptionComponent } from './description.component';
+
+@NgModule({
+  imports: [CommonModule, LayoutChangeModule],
+  declarations: [DescriptionComponent],
+  exports: [DescriptionComponent]
+})
+export class DescriptionModule {}

projects/components/src/description/description.module.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, Injector, TemplateRef, Type } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, TemplateRef, Type } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { LayoutChangeService } from '@hypertrace/common';
 import { ButtonSize, ButtonStyle } from '../button/button';
@@ -46,6 +46,7 @@ export class ModalContainerComponent {
   public readonly renderer: TemplateRef<unknown> | Type<unknown>;
   public readonly rendererInjector: Injector;
   public readonly rendererContext: unknown;
+  public readonly closeOnEscape: boolean;
 
   public visible: boolean = true;
 
@@ -59,6 +60,7 @@ export class ModalContainerComponent {
     this.modalTitle = config.title ?? '';
     this.size = config.size;
     this.isComponentModal = !(config.content instanceof TemplateRef);
+    this.closeOnEscape = config.closeOnEscapeKey ?? true;
     this.renderer = config.content;
     this.rendererInjector = Injector.create({
       providers: [
@@ -72,6 +74,13 @@ export class ModalContainerComponent {
     this.rendererContext = this.rendererInjector.get(MODAL_DATA, {});
   }
 
+  @HostListener('document:keydown.escape', ['$event'])
+  public onKeydownHandler(): void {
+    if (this.closeOnEscape) {
+      this.close();
+    }
+  }
+
   public close(): void {
     this.visible = false;
     this.popoverRef.close();

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

@@ -69,4 +69,24 @@ describe('Modal service', () => {
 
     flush(); // CDK timer to remove overlay
   }));
+
+  test('modal can be closed on press ESC key', fakeAsync(() => {
+    const spectator = createHost();
+    const modal: ModalRef<string> = spectator.inject(ModalService).createModal({
+      content: TestComponent,
+      size: ModalSize.Small,
+      data: 'custom input'
+    });
+
+    spectator.tick();
+    const subscription = modal.closed$.subscribe();
+    expect(subscription.closed).toBe(false);
+
+    spectator.dispatchKeyboardEvent(document, 'keydown', { key: 'Escape', keyCode: 27 });
+
+    expect(spectator.query('.test-modal-content', { root: true })).not.toExist();
+    expect(subscription.closed).toBe(true);
+
+    flush();
+  }));
 });

projects/components/src/modal/modal.service.test.ts

@@ -7,6 +7,7 @@ export interface ModalConfig<TData = unknown> {
   showControls?: boolean;
   title?: string;
   data?: TData;
+  closeOnEscapeKey?: boolean;
 }
 
 export const enum ModalSize {