From b715f8717a78df936e2f10249d3ce528dc8f8510 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 25 Mar 2022 13:15:45 +0530 Subject: [PATCH 1/3] feat(sheet overlay): support for nav params config --- .../sheet/sheet-overlay.component.scss | 6 ++++ .../sheet/sheet-overlay.component.test.ts | 33 +++++++++++++++++-- .../overlay/sheet/sheet-overlay.component.ts | 25 ++++++++------ .../src/overlay/sheet/sheet-overlay.module.ts | 3 +- .../components/src/overlay/sheet/sheet.ts | 2 ++ 5 files changed, 55 insertions(+), 14 deletions(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.scss b/projects/components/src/overlay/sheet/sheet-overlay.component.scss index eb96db1f1..ddb444dc6 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.scss +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.scss @@ -28,6 +28,12 @@ $box-shadow: -3px 0px 24px rgba(0, 0, 0, 0.12), -1px 0px 8px rgba(0, 0, 0, 0.08) @include header-4($gray-7); margin: 0; } + + .action-buttons { + display: flex; + align-items: center; + gap: 24px; + } } .content-wrapper { diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts index 1e4e18b70..97fb08492 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts @@ -1,6 +1,11 @@ import { ChangeDetectionStrategy, Component, Inject, Injector, Optional } from '@angular/core'; -import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common'; -import { POPOVER_DATA } from '@hypertrace/components'; +import { + ExternalNavigationWindowHandling, + GLOBAL_HEADER_HEIGHT, + LayoutChangeService, + NavigationParamsType +} from '@hypertrace/common'; +import { OpenInNewTabComponent, POPOVER_DATA } from '@hypertrace/components'; import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { ButtonComponent } from '../../button/button.component'; @@ -26,7 +31,7 @@ describe('Sheet Overlay component', () => { const createHost = createHostFactory({ component: SheetOverlayComponent, - declarations: [MockComponent(ButtonComponent), TestComponent], + declarations: [MockComponent(ButtonComponent), TestComponent, MockComponent(OpenInNewTabComponent)], shallow: true, template: ` @@ -151,4 +156,26 @@ describe('Sheet Overlay component', () => { expect(spectator.query(TestComponent)?.data).toBe(42); }); + + test('should show open in new tab button if applicable', () => { + spectator = createConfiguredHost({ + pageNavParams: { + navType: NavigationParamsType.External, + url: '/test', + windowHandling: ExternalNavigationWindowHandling.NewWindow + } + }); + + expect(spectator.query(OpenInNewTabComponent)?.paramsOrUrl).toBe({ + navType: NavigationParamsType.External, + url: '/test', + windowHandling: ExternalNavigationWindowHandling.NewWindow + }); + }); + + test('should not show open in new tab button if config is empty', () => { + spectator = createConfiguredHost(); + + expect(spectator.query(OpenInNewTabComponent)).not.toExist(); + }) }); diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts index 48ee9ac6e..00e0cd9b3 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, TemplateRef, Type } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common'; +import { ExternalNavigationParams, GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common'; import { ButtonStyle } from '../../button/button'; import { IconSize } from '../../icon/icon-size'; import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover'; @@ -18,14 +18,18 @@ import { SheetOverlayConfig, SheetSize } from './sheet';

{{ sheetTitle }}

- - +
+ + + +
+
@@ -61,6 +65,7 @@ export class SheetOverlayComponent { public readonly closeOnEscape: boolean; public readonly attachedTriggerTemplate?: TemplateRef; public isViewCollapsed: boolean; + public navigationParams: ExternalNavigationParams | undefined; public constructor( private readonly popoverRef: PopoverRef, @@ -80,7 +85,7 @@ export class SheetOverlayComponent { this.renderer = sheetConfig.content; this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position)); this.setWidth(); - + this.navigationParams = sheetConfig.pageNavParams; this.rendererInjector = Injector.create({ providers: [ { diff --git a/projects/components/src/overlay/sheet/sheet-overlay.module.ts b/projects/components/src/overlay/sheet/sheet-overlay.module.ts index 2a1d466eb..03d1f9f99 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.module.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.module.ts @@ -2,11 +2,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ButtonModule } from '../../button/button.module'; import { IconModule } from '../../icon/icon.module'; +import { OpenInNewTabModule } from '../../open-in-new-tab/open-in-new-tab.module'; import { TooltipModule } from '../../tooltip/tooltip.module'; import { SheetOverlayComponent } from './sheet-overlay.component'; @NgModule({ - imports: [CommonModule, ButtonModule, TooltipModule, IconModule], + imports: [CommonModule, ButtonModule, TooltipModule, IconModule, OpenInNewTabModule], declarations: [SheetOverlayComponent], exports: [SheetOverlayComponent] }) diff --git a/projects/components/src/overlay/sheet/sheet.ts b/projects/components/src/overlay/sheet/sheet.ts index ec5d1f94d..7c319b027 100644 --- a/projects/components/src/overlay/sheet/sheet.ts +++ b/projects/components/src/overlay/sheet/sheet.ts @@ -1,4 +1,5 @@ import { InjectionToken, TemplateRef } from '@angular/core'; +import { ExternalNavigationParams } from '@hypertrace/common'; import { Observable } from 'rxjs'; import { PopoverFixedPositionLocation } from '../../popover/popover'; import { OverlayConfig } from './../overlay'; @@ -10,6 +11,7 @@ export interface SheetOverlayConfig extends OverlayConfig { closeOnEscapeKey?: boolean; closeOnNavigation?: boolean; attachedTriggerTemplate?: TemplateRef; + pageNavParams?: ExternalNavigationParams; } export const enum SheetSize { From 2f3c37cb0cc3508fef1d46ea48614662e0d98b5a Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 25 Mar 2022 13:16:04 +0530 Subject: [PATCH 2/3] fix: test fix --- .../src/overlay/sheet/sheet-overlay.component.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts index 97fb08492..e3c83e2d4 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts @@ -166,7 +166,7 @@ describe('Sheet Overlay component', () => { } }); - expect(spectator.query(OpenInNewTabComponent)?.paramsOrUrl).toBe({ + expect(spectator.query(OpenInNewTabComponent)?.paramsOrUrl).toEqual({ navType: NavigationParamsType.External, url: '/test', windowHandling: ExternalNavigationWindowHandling.NewWindow From ed6d6919d8287c96dc00d914580b2a74288b57a7 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Fri, 25 Mar 2022 13:25:56 +0530 Subject: [PATCH 3/3] fix: prettier fix --- .../src/overlay/sheet/sheet-overlay.component.test.ts | 2 +- .../components/src/overlay/sheet/sheet-overlay.component.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts index e3c83e2d4..3560be2b2 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts @@ -177,5 +177,5 @@ describe('Sheet Overlay component', () => { spectator = createConfiguredHost(); expect(spectator.query(OpenInNewTabComponent)).not.toExist(); - }) + }); }); diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts index 00e0cd9b3..b9471f2a0 100644 --- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts +++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts @@ -19,7 +19,10 @@ import { SheetOverlayConfig, SheetSize } from './sheet';

{{ sheetTitle }}

- +
-