Merge branch 'main' into scoped-storage

Author: aaron-steinfeld

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 {

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: `
   <ht-sheet-overlay>
@@ -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();
+  });
 });

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';
         <ng-container *ngIf="!this.isViewCollapsed">
           <div *ngIf="this.showHeader" class="header">
             <h3 class="header-title">{{ sheetTitle }}</h3>
-            <ht-button
-              class="close-button"
-              icon="${IconType.CloseCircle}"
-              display="${ButtonStyle.Outlined}"
-              htTooltip="Close Sheet"
-              (click)="this.close()"
-            >
-            </ht-button>
+            <div class="action-buttons">
+              <ht-open-in-new-tab
+                *ngIf="this.navigationParams"
+                [paramsOrUrl]="this.navigationParams"
+              ></ht-open-in-new-tab>
+              <ht-button
+                class="close-button"
+                icon="${IconType.CloseCircle}"
+                display="${ButtonStyle.Outlined}"
+                htTooltip="Close Sheet"
+                (click)="this.close()"
+              >
+              </ht-button>
+            </div>
           </div>
           <div class="content-wrapper">
             <div class="content">
@@ -61,6 +67,7 @@ export class SheetOverlayComponent {
   public readonly closeOnEscape: boolean;
   public readonly attachedTriggerTemplate?: TemplateRef<unknown>;
   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: [
         {

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

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<TData = unknown> extends OverlayConfig {
   closeOnEscapeKey?: boolean;
   closeOnNavigation?: boolean;
   attachedTriggerTemplate?: TemplateRef<unknown>;
+  pageNavParams?: ExternalNavigationParams;
 }
 
 export const enum SheetSize {