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..3560be2b2 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).toEqual({ + 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..b9471f2a0 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,20 @@ import { SheetOverlayConfig, SheetSize } from './sheet';

{{ sheetTitle }}

- - +
+ + + +
@@ -61,6 +67,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 +87,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 {