Settings nav

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

@@ -3,7 +3,7 @@ import { Router, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { patchRouterNavigateForTest } from '@hypertrace/test-utils';
 import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
-import { NavigationService } from './navigation.service';
+import { NavigationParamsType, NavigationService } from './navigation.service';
 
 describe('Navigation Service', () => {
   const firstChildRouteConfig = {
@@ -205,4 +205,19 @@ describe('Navigation Service', () => {
       })
     });
   });
+
+  test('can run navigation with location replace', () => {
+    router.navigate = jest.fn().mockResolvedValue(true);
+    spectator.service.navigate({
+      navType: NavigationParamsType.InApp,
+      path: ['root', 'child'],
+      replaceCurrentHistory: true
+    });
+    expect(router.navigate).toHaveBeenCalledWith(
+      ['root', 'child'],
+      expect.objectContaining({
+        replaceUrl: true
+      })
+    );
+  });
 });

projects/components/src/navigation/navigation-list.component.test.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
+import { NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
@@ -93,9 +93,34 @@ describe('Navigation List Component', () => {
     });
 
     spectator.click(spectator.query(NavItemComponent, { read: ElementRef })!);
-    expect(spectator.inject(NavigationService).navigateWithinApp).toHaveBeenCalledWith(
-      'foo',
-      spectator.inject(ActivatedRoute)
-    );
+    expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith<NavigationParams[]>({
+      navType: NavigationParamsType.InApp,
+      path: 'foo',
+      relativeTo: spectator.inject(ActivatedRoute),
+      replaceCurrentHistory: undefined
+    });
+  });
+
+  test('should navigate to first match on click, relative to activated route with skip location change option', () => {
+    const navItems: NavItemConfig[] = [
+      {
+        type: NavItemType.Link,
+        icon: 'icon',
+        label: 'Foo Label',
+        matchPaths: ['foo', 'bar'],
+        replaceCurrentHistory: true
+      }
+    ];
+    spectator = createHost(`<ht-navigation-list [navItems]="navItems"></ht-navigation-list>`, {
+      hostProps: { navItems: navItems }
+    });
+
+    spectator.click(spectator.query(NavItemComponent, { read: ElementRef })!);
+    expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith<NavigationParams[]>({
+      navType: NavigationParamsType.InApp,
+      path: 'foo',
+      relativeTo: spectator.inject(ActivatedRoute),
+      replaceCurrentHistory: true
+    });
   });
 });

projects/components/src/navigation/navigation-list.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
+import { NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
@@ -83,7 +83,12 @@ export class NavigationListComponent {
   }
 
   public navigate(item: NavItemLinkConfig): void {
-    this.navigationService.navigateWithinApp(item.matchPaths[0], this.activatedRoute);
+    this.navigationService.navigate({
+      navType: NavigationParamsType.InApp,
+      path: item.matchPaths[0],
+      relativeTo: this.activatedRoute,
+      replaceCurrentHistory: item.replaceCurrentHistory
+    });
   }
 
   public toggleView(): void {
@@ -116,6 +121,7 @@ export interface NavItemLinkConfig {
   label: string;
   matchPaths: string[]; // For now, default path is index 0
   features?: string[];
+  replaceCurrentHistory?: boolean;
 }
 
 export type FooterItemConfig = FooterItemLinkConfig;