Merge branch 'main' into ng-15

Author: anandtiwary

package-lock.json

@@ -40,7 +40,7 @@
     "@types/d3-hierarchy": "^2.0.2",
     "@types/d3-transition": "1.1.5",
     "apollo-angular": "^5.0.0",
-    "core-js": "^3.31.0",
+    "core-js": "^3.32.0",
     "d3-array": "^2.12.0",
     "d3-axis": "^2.1.0",
     "d3-brush": "^1.1.6",
@@ -63,9 +63,9 @@
     "lodash-es": "^4.17.21",
     "mixpanel-browser": "^2.47.0",
     "ngx-color": "7.0.0",
-    "rudder-sdk-js": "^2.36.0",
+    "rudder-sdk-js": "^2.38.0",
     "rxjs": "~6.6.7",
-    "tslib": "^2.5.3",
+    "tslib": "^2.6.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.8"
   },
@@ -97,27 +97,27 @@
     "@types/d3-zoom": "^1.7.5",
     "@types/highlight.js": "^10.1.0",
     "@types/jest": "^28.0.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/mixpanel-browser": "^2.38.2",
-    "@types/node": "^18.16.19",
+    "@types/lodash-es": "^4.17.8",
+    "@types/mixpanel-browser": "^2.47.1",
+    "@types/node": "^18.17.1",
     "@types/uuid": "^8.3.4",
     "@types/webpack-env": "^1.18.1",
     "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.59.9",
+    "@typescript-eslint/parser": "5.62.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.43.0",
+    "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jsdoc": "46.4.3",
+    "eslint-plugin-jsdoc": "46.4.4",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-unicorn": "47.0.0",
+    "eslint-plugin-unicorn": "48.0.0",
     "husky": "^8.0.3",
     "jest": "^28.0.0",
     "jest-preset-angular": "^12.2.3",
-    "jest-config": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-config": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-html-reporter": "^3.10.1",
     "jest-junit": "16.0.0",
     "lodash": "^4.17.21",

package.json

@@ -98,6 +98,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.Spinner, url: `${iconsRootPath}/spinner.svg` },
         { key: IconType.StatusCode, url: `${iconsRootPath}/status-code.svg` },
         { key: IconType.StringAttribute, url: `${iconsRootPath}/string-attribute.svg` },
+        { key: IconType.TimeHistory, url: `${iconsRootPath}/time-history.svg` },
         { key: IconType.TraceId, url: `${iconsRootPath}/trace-id.svg` },
         { key: IconType.Trash, url: `${iconsRootPath}/trash.svg` },
         { key: IconType.TriangleDown, url: `${iconsRootPath}/triangle-down.svg` },

projects/assets-library/assets/icons/time-history.svg

@@ -25,6 +25,7 @@ describe('Icon Registry Service', () => {
       'hypertrace',
       spectator.inject(DomSanitizer).bypassSecurityTrustResourceUrl('test-url')
     );
+    expect(spectator.service.getRegisteredIcons()).toMatchObject([IconType.Hypertrace]);
   });
 
   test('looks up ligature icons', () => {

projects/assets-library/src/icons/icon-library.module.ts

@@ -8,9 +8,12 @@ import { Observable } from 'rxjs';
 export class IconRegistryService {
   private static readonly SVG_ICON_PREFIX: string = 'svg:';
 
+  private readonly registeredIcons: Set<string> = new Set();
+
   public constructor(private readonly matIconRegistry: MatIconRegistry, private readonly sanitizer: DomSanitizer) {}
 
   public registerSvgIcon(iconInfo: SvgIconRegistrationInfo): void {
+    this.registeredIcons.add(iconInfo.key);
     this.matIconRegistry.addSvgIcon(
       this.getIconNameWithoutPrefix(iconInfo.key),
       this.sanitizer.bypassSecurityTrustResourceUrl(iconInfo.url)
@@ -38,11 +41,15 @@ export class IconRegistryService {
     };
   }
 
-  private getIconNameWithoutPrefix(icon: string): string {
+  public getIconNameWithoutPrefix(icon: string): string {
     return icon.startsWith(IconRegistryService.SVG_ICON_PREFIX)
       ? icon.substring(IconRegistryService.SVG_ICON_PREFIX.length)
       : icon;
   }
+
+  public getRegisteredIcons(): string[] {
+    return Array.from(this.registeredIcons.keys());
+  }
 }
 
 export type IconRenderInfo = LigatureIconRenderInfo | SvgIconRenderInfo;

projects/assets-library/src/icons/icon-registry.service.test.ts

@@ -122,6 +122,7 @@ export const enum IconType {
   StatusCode = 'svg:status-code',
   StringAttribute = 'svg:string-attribute',
   Time = 'schedule',
+  TimeHistory = 'svg:time-history',
   TraceId = 'svg:trace-id',
   Trash = 'svg:trash',
   TriangleDown = 'svg:triangle-down',

projects/assets-library/src/icons/icon-registry.service.ts

@@ -12,7 +12,8 @@ describe('External URL navigator', () => {
     service: ExternalUrlNavigator,
     providers: [
       mockProvider(NavigationService, {
-        canGoBackWithoutLeavingApp: jest.fn().mockReturnValue(true)
+        canGoBackWithoutLeavingApp: jest.fn().mockReturnValue(true),
+        firstNavigatedUrl: '/test-url'
       })
     ]
   });
@@ -25,7 +26,8 @@ describe('External URL navigator', () => {
     const spectator = buildNavigator({
       providers: [
         mockProvider(NavigationService, {
-          canGoBackWithoutLeavingApp: jest.fn().mockReturnValue(false)
+          canGoBackWithoutLeavingApp: jest.fn().mockReturnValue(false),
+          firstNavigatedUrl: '/external'
         })
       ]
     });

projects/assets-library/src/icons/icon-type.ts

@@ -13,7 +13,7 @@ export class ExternalUrlNavigator implements CanActivate {
   public constructor(private readonly navService: NavigationService) {}
 
   public canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
-    if (!this.navService.canGoBackWithoutLeavingApp()) {
+    if (this.navService.firstNavigatedUrl.startsWith('/external')) {
       this.navService.navigateToErrorPage();
 
       return of(false);

projects/common/src/external/external-url-navigator.test.ts

@@ -15,7 +15,7 @@ import {
   UrlSegment,
   UrlTree
 } from '@angular/router';
-import { isArray, isString } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { from, Observable, of } from 'rxjs';
 import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { isEqualIgnoreFunctions, throwIfNil } from '../utilities/lang/lang-utils';
@@ -32,6 +32,7 @@ export class NavigationService {
   private isFirstNavigation: boolean = true;
   private readonly globalQueryParams: Set<string> = new Set();
   private pendingQueryParams: QueryParamObject = {};
+  public firstNavigatedUrl: string = '';
 
   public constructor(
     private readonly router: Router,
@@ -42,6 +43,15 @@ export class NavigationService {
   ) {
     this.event$(RoutesRecognized)
       .pipe(
+        tap(event => {
+          // In case of reloading a correct URL, we only have a single event
+          // Due to that we are getting `this.isFirstNavigation = true` since
+          // we're not reaching to .subscribe due to skip(1) and causing external navigation failure from the app
+          // So we're storing the first navigated URL to check whether it is external URL or not.
+          if (isEmpty(this.firstNavigatedUrl)) {
+            this.firstNavigatedUrl = decodeURIComponent(event.url);
+          }
+        }),
         skip(1),
         filter(() => !this.getActiveNavigation()?.extras.skipLocationChange),
         take(1)

projects/common/src/external/external-url-navigator.ts

@@ -1,8 +1,19 @@
 import { parse, toSeconds } from 'iso8601-duration';
+import { indexOf, isNil } from 'lodash-es';
 import { assertUnreachable } from '../utilities/lang/lang-utils';
 import { TimeUnit } from './time-unit.type';
 
 export class TimeDuration {
+  private static readonly TIME_UNITS: ConvertibleTimeUnit[] = [
+    TimeUnit.Year,
+    TimeUnit.Month,
+    TimeUnit.Week,
+    TimeUnit.Day,
+    TimeUnit.Hour,
+    TimeUnit.Minute,
+    TimeUnit.Second,
+    TimeUnit.Millisecond
+  ];
   private readonly millis: number;
 
   public constructor(public readonly value: number, public readonly unit: TimeUnit) {
@@ -52,17 +63,10 @@ export class TimeDuration {
     return unitStringType === UnitStringType.Short ? this.toString() : this.toLongString();
   }
 
-  public getMostSignificantUnitOnly(): TimeDuration {
-    const orderedUnits: ConvertibleTimeUnit[] = [
-      TimeUnit.Year,
-      TimeUnit.Month,
-      TimeUnit.Week,
-      TimeUnit.Day,
-      TimeUnit.Hour,
-      TimeUnit.Minute,
-      TimeUnit.Second,
-      TimeUnit.Millisecond
-    ];
+  public getMostSignificantUnitOnly(maxSupportedUnit?: TimeUnit): TimeDuration {
+    let orderedUnits: ConvertibleTimeUnit[] = isNil(maxSupportedUnit)
+      ? TimeDuration.TIME_UNITS
+      : TimeDuration.TIME_UNITS.slice(indexOf(TimeDuration.TIME_UNITS, maxSupportedUnit));
 
     const firstApplicableUnit = orderedUnits.find(unit => this.getAmountForUnit(unit) >= 1) || TimeUnit.Millisecond;
     const amountForUnit = Math.floor(this.getAmountForUnit(firstApplicableUnit));

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

@@ -1,6 +1,11 @@
 import { RouterLinkWithHref } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { NavigationService, TrackDirective } from '@hypertrace/common';
+import {
+  ExternalNavigationWindowHandling,
+  NavigationParamsType,
+  NavigationService,
+  TrackDirective
+} from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -26,10 +31,12 @@ describe('Link component', () => {
 
     const anchorElement = spectator.query('.ht-link');
     expect(anchorElement).toExist();
-    expect(anchorElement).toHaveClass('ht-link disabled');
+    expect(anchorElement).toHaveClass('ht-link internal disabled');
   });
 
   test('Link should navigate correctly to external URLs', () => {
+    window.open = jest.fn();
+
     spectator = createHost(`<ht-link [paramsOrUrl]="paramsOrUrl"></ht-link>`, {
       hostProps: {
         paramsOrUrl: 'http://test.hypertrace.ai'
@@ -47,28 +54,30 @@ describe('Link component', () => {
               ],
               extras: { skipLocationChange: true }
             })
-          )
+          ),
+          isExternalUrl: jest.fn().mockReturnValue(true)
         })
       ]
     });
 
-    const anchorElement = spectator.query('.ht-link');
+    let anchorElement = spectator.query('.ht-link.external') as HTMLAnchorElement;
     expect(anchorElement).toExist();
     expect(anchorElement).not.toHaveClass('disabled');
-    const routerLinkDirective = spectator.query(RouterLinkWithHref);
-
-    expect(routerLinkDirective).toBeDefined();
-    expect(routerLinkDirective?.routerLink).toEqual([
-      '/external',
-      {
-        url: 'http://test.hypertrace.ai',
-        navType: 'same_window'
+    expect(anchorElement.href).toBe('http://test.hypertrace.ai/');
+    spectator.click(anchorElement);
+    expect(window.open).toHaveBeenLastCalledWith('http://test.hypertrace.ai', '_self');
+
+    // With new window
+    spectator.setHostInput({
+      paramsOrUrl: {
+        navType: NavigationParamsType.External,
+        url: '/test',
+        windowHandling: ExternalNavigationWindowHandling.NewWindow
       }
-    ]);
-    expect(routerLinkDirective!.skipLocationChange).toBeTruthy();
-    expect(routerLinkDirective!.queryParams).toBeUndefined();
-    expect(routerLinkDirective!.queryParamsHandling).toBeUndefined();
-    expect(routerLinkDirective!.replaceUrl).toBeUndefined();
+    });
+    expect(anchorElement.href).toBe('http://localhost/test');
+    spectator.click(anchorElement);
+    expect(window.open).toHaveBeenLastCalledWith('/test', undefined);
   });
 
   test('Link should navigate correctly to internal relative URLs', () => {
@@ -83,7 +92,7 @@ describe('Link component', () => {
       ]
     });
 
-    const anchorElement = spectator.query('.ht-link');
+    const anchorElement = spectator.query('.ht-link.internal');
     expect(anchorElement).toExist();
     expect(anchorElement).not.toHaveClass('disabled');
     const routerLinkDirective = spectator.query(RouterLinkWithHref);
@@ -108,7 +117,7 @@ describe('Link component', () => {
       ]
     });
 
-    const anchorElement = spectator.query('.ht-link');
+    const anchorElement = spectator.query('.ht-link.internal');
     expect(anchorElement).toExist();
     expect(anchorElement).not.toHaveClass('disabled');
     const routerLinkDirective = spectator.query(RouterLinkWithHref);
@@ -133,9 +142,9 @@ describe('Link component', () => {
       ]
     });
 
-    const anchorElement = spectator.query('.ht-link');
+    const anchorElement = spectator.query('.ht-link.internal');
     expect(anchorElement).toExist();
-    expect(anchorElement).toHaveClass('ht-link disabled');
+    expect(anchorElement).toHaveClass('ht-link internal disabled');
 
     const routerLinkDirective = spectator.query(RouterLinkWithHref);