Open in new tab

projects/common/src/navigation/navigation.service.ts

@@ -13,10 +13,12 @@ import {
   UrlSegment,
   UrlTree
 } from '@angular/router';
+import { isEmpty } from 'lodash-es';
 import { from, Observable, of } from 'rxjs';
 import { filter, map, share, skip, take } from 'rxjs/operators';
 import { throwIfNil } from '../utilities/lang/lang-utils';
 import { Dictionary } from '../utilities/types/types';
+import { getQueryParamStringFromObject } from '../utilities/url/url-utilities';
 import { TraceRoute } from './trace-route';
 
 @Injectable({ providedIn: 'root' })
@@ -80,11 +82,16 @@ export class NavigationService {
 
     if (params.navType === NavigationParamsType.External) {
       // External
+      const queryParamString = getQueryParamStringFromObject(params.queryParams ?? {});
+      const url = isEmpty(params.url)
+        ? params.url
+        : `${params.url}${queryParamString !== '' ? `?${queryParamString}` : ``}`;
+
       return {
         path: [
           '/external',
           {
-            [ExternalNavigationPathParams.Url]: params.url,
+            [ExternalNavigationPathParams.Url]: url,
             [ExternalNavigationPathParams.WindowHandling]: params.windowHandling
           }
         ],

projects/common/src/public-api.ts

@@ -111,3 +111,6 @@ export * from './time/time';
 
 // Validators
 export * from './utilities/validators/email-validator';
+
+// URL Utilities
+export * from './utilities/url/url-utilities';

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

@@ -1,9 +1,11 @@
 import { Injectable } from '@angular/core';
+import { Params } from '@angular/router';
 import { isEmpty } from 'lodash-es';
 import { EMPTY, ReplaySubject } from 'rxjs';
 import { catchError, defaultIfEmpty, filter, map, switchMap, take } from 'rxjs/operators';
 import { NavigationService } from '../navigation/navigation.service';
 import { ReplayObservable } from '../utilities/rxjs/rxjs-utils';
+import { getQueryParamStringFromObject } from '../utilities/url/url-utilities';
 import { FixedTimeRange } from './fixed-time-range';
 import { RelativeTimeRange } from './relative-time-range';
 import { TimeDuration } from './time-duration';
@@ -30,15 +32,22 @@ export class TimeRangeService {
   }
 
   public getShareableCurrentUrl(): string {
-    const timeRangeParamValue = this.navigationService.getQueryParameter(TimeRangeService.TIME_RANGE_QUERY_PARAM, '');
-    const timeRangeParam = `${TimeRangeService.TIME_RANGE_QUERY_PARAM}=${timeRangeParamValue}`;
+    const timeRangeParam = getQueryParamStringFromObject(this.getTimeRangeParams());
     const timeRange = this.getCurrentTimeRange();
     const fixedTimeRange: FixedTimeRange = TimeRangeService.toFixedTimeRange(timeRange.startTime, timeRange.endTime);
     const newTimeRangeParam = `${TimeRangeService.TIME_RANGE_QUERY_PARAM}=${fixedTimeRange.toUrlString()}`;
 
     return this.navigationService.getAbsoluteCurrentUrl().replace(timeRangeParam, newTimeRangeParam);
   }
 
+  public getTimeRangeParams(): Params {
+    const timeRangeParamValue = this.navigationService.getQueryParameter(TimeRangeService.TIME_RANGE_QUERY_PARAM, '');
+
+    return {
+      [TimeRangeService.TIME_RANGE_QUERY_PARAM]: timeRangeParamValue
+    };
+  }
+
   public getTimeRangeAndChanges(): ReplayObservable<TimeRange> {
     return this.timeRangeSubject$.asObservable();
   }

projects/common/src/utilities/url/url-utilities.test.ts

@@ -0,0 +1,13 @@
+import { Params } from '@angular/router';
+import { getQueryParamStringFromObject } from './url-utilities';
+
+describe('getQueryParamStringFromObject', () => {
+  test('should return string from a string dictionary', () => {
+    const params: Params = {};
+    expect(getQueryParamStringFromObject(params)).toBe('');
+    params.a = 'value_1';
+    expect(getQueryParamStringFromObject(params)).toBe('a=value_1');
+    params.b = 'value_2';
+    expect(getQueryParamStringFromObject(params)).toBe(`a=value_1&b=value_2`);
+  });
+});

projects/common/src/utilities/url/url-utilities.ts

@@ -0,0 +1,5 @@
+import { HttpParams } from '@angular/common/http';
+import { Params } from '@angular/router';
+
+export const getQueryParamStringFromObject = (params: Params): string =>
+  new HttpParams({ fromObject: params }).toString();

projects/components/src/open-in-new-tab/open-in-new-tab.component.test.ts

@@ -1,13 +1,10 @@
 import { fakeAsync } from '@angular/core/testing';
-import {
-  ExternalNavigationWindowHandling,
-  NavigationParamsType,
-  NavigationService,
-  TimeRangeService
-} from '@hypertrace/common';
+import { NavigationService, TimeRangeService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
-import { ButtonComponent } from '../button/button.component';
+import { IconSize } from '../icon/icon-size';
+import { IconComponent } from '../icon/icon.component';
+import { LinkComponent } from '../link/link.component';
 import { OpenInNewTabComponent } from './open-in-new-tab.component';
 
 describe('Open in new tab component', () => {
@@ -16,42 +13,60 @@ describe('Open in new tab component', () => {
   const createHost = createHostFactory({
     shallow: true,
     component: OpenInNewTabComponent,
-    declarations: [MockComponent(ButtonComponent)],
+    declarations: [MockComponent(LinkComponent), MockComponent(IconComponent)],
     providers: [
       mockProvider(TimeRangeService, {
         getShareableCurrentUrl: () => 'url-from-timerangeservice'
       }),
-      mockProvider(NavigationService)
+      mockProvider(NavigationService, {
+        buildNavigationParams: jest.fn().mockReturnValue({
+          path: [
+            '/external',
+            {
+              url: 'http://test.hypertrace.ai',
+              navType: 'same_window'
+            }
+          ],
+          extras: { skipLocationChange: true }
+        })
+      })
     ]
   });
 
-  test('should call navigate as expected when URL input is not specified', fakeAsync(() => {
-    spectator = createHost('<ht-open-in-new-tab></ht-open-in-new-tab>');
-
-    spectator.click('.open-in-new-tab-button');
-    spectator.tick();
-
-    expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith({
-      navType: NavigationParamsType.External,
-      windowHandling: ExternalNavigationWindowHandling.NewWindow,
-      url: 'url-from-timerangeservice'
+  test('Open in new tab component should not be displayed if paramsOrUrl is undefined', () => {
+    spectator = createHost(`<ht-open-in-new-tab [paramsOrUrl]="paramsOrUrl"></ht-open-in-new-tab>`, {
+      hostProps: {
+        paramsOrUrl: undefined
+      }
     });
-  }));
+    expect(spectator.query('.open-in-new-tab')).not.toExist();
+  });
 
-  test('should call navigate as expected when URL input is specified', fakeAsync(() => {
-    spectator = createHost('<ht-open-in-new-tab [url]="url"></ht-open-in-new-tab>', {
+  test(`Open in new tab component should exist if paramsOrUrl is not undefined`, fakeAsync(() => {
+    spectator = createHost(`<ht-open-in-new-tab [paramsOrUrl]="paramsOrUrl"></ht-open-in-new-tab>`, {
       hostProps: {
-        url: 'input-url'
+        paramsOrUrl: {}
       }
     });
+    expect(spectator.query('.open-in-new-tab')).toExist();
+    expect(spectator.query('ht-link')).toExist();
+    // Default value of icon size
+    expect(spectator.component.iconSize).toBe(IconSize.Medium);
+  }));
 
-    spectator.click('.open-in-new-tab-button');
-    spectator.tick();
-
-    expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith({
-      navType: NavigationParamsType.External,
-      windowHandling: ExternalNavigationWindowHandling.NewWindow,
-      url: 'input-url'
-    });
+  test(`Open in new tab component should contain icon of passed size`, fakeAsync(() => {
+    spectator = createHost(
+      `<ht-open-in-new-tab [paramsOrUrl]="paramsOrUrl" [iconSize]="iconSize" ></ht-open-in-new-tab>`,
+      {
+        hostProps: {
+          paramsOrUrl: {},
+          iconSize: IconSize.Small
+        }
+      }
+    );
+    expect(spectator.query('.open-in-new-tab')).toExist();
+    expect(spectator.query('ht-link')).toExist();
+    // Expected value of icon size if passed
+    expect(spectator.component.iconSize).toBe(IconSize.Small);
   }));
 });

projects/components/src/open-in-new-tab/open-in-new-tab.component.ts

@@ -1,46 +1,23 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
-import {
-  ExternalNavigationWindowHandling,
-  NavigationParamsType,
-  NavigationService,
-  TimeRangeService
-} from '@hypertrace/common';
-import { ButtonSize, ButtonStyle } from '../button/button';
+import { ExternalNavigationParamsNew } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
 
 @Component({
   selector: 'ht-open-in-new-tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="open-in-new-tab" htTooltip="Open in a new tab">
-      <ht-button
-        class="open-in-new-tab-button"
-        display="${ButtonStyle.Outlined}"
-        [size]="this.size"
-        icon="${IconType.OpenInNewTab}"
-        (click)="this.openInNewTab()"
-      ></ht-button>
+    <div *ngIf="this.paramsOrUrl" class="open-in-new-tab" htTooltip="Open in a new tab">
+      <ht-link [paramsOrUrl]="this.paramsOrUrl">
+        <ht-icon icon="${IconType.OpenInNewTab}" [size]="this.iconSize"></ht-icon>
+      </ht-link>
     </div>
   `
 })
 export class OpenInNewTabComponent {
   @Input()
-  public size?: ButtonSize = ButtonSize.Small;
+  public paramsOrUrl?: ExternalNavigationParamsNew | string;
 
   @Input()
-  public url?: string;
-
-  public constructor(
-    private readonly navigationService: NavigationService,
-    private readonly timeRangeService: TimeRangeService
-  ) {}
-
-  public openInNewTab(): void {
-    this.navigationService.navigate({
-      navType: NavigationParamsType.External,
-      windowHandling: ExternalNavigationWindowHandling.NewWindow,
-      // Use input url if available. Else construct a shareable URL for the page
-      url: this.url ?? this.timeRangeService.getShareableCurrentUrl()
-    });
-  }
+  public iconSize: IconSize = IconSize.Medium;
 }

projects/components/src/open-in-new-tab/open-in-new-tab.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
+import { LinkModule } from '../link/link.module';
 import { TooltipModule } from '../tooltip/tooltip.module';
 import { OpenInNewTabComponent } from './open-in-new-tab.component';
 
 @NgModule({
   declarations: [OpenInNewTabComponent],
   exports: [OpenInNewTabComponent],
-  imports: [CommonModule, ButtonModule, TooltipModule]
+  imports: [CommonModule, TooltipModule, LinkModule, IconModule]
 })
 export class OpenInNewTabModule {}