fix: adding hyperlink capabilities to nav items and nav tabs

projects/components/src/navigation/nav-item/nav-item.component.test.ts

@@ -0,0 +1,107 @@
+import { ActivatedRoute } from '@angular/router';
+import { IconType } from '@hypertrace/assets-library';
+import {
+  FeatureState,
+  FeatureStateResolver,
+  MemoizeModule,
+  NavigationParamsType,
+  NavigationService
+} from '@hypertrace/common';
+import { BetaTagComponent, IconComponent, LinkComponent } from '@hypertrace/components';
+import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { EMPTY, of } from 'rxjs';
+import { NavItemConfig, NavItemType } from '../navigation-list.component';
+import { FeatureConfigCheckModule } from './../../feature-check/feature-config-check.module';
+import { NavItemComponent } from './nav-item.component';
+
+describe('Navigation Item Component', () => {
+  let spectator: SpectatorHost<NavItemComponent>;
+  const activatedRoute = {
+    root: {}
+  };
+  const createHost = createHostFactory({
+    shallow: true,
+    component: NavItemComponent,
+    declarations: [MockComponent(IconComponent), MockComponent(LinkComponent), MockComponent(BetaTagComponent)],
+    imports: [MemoizeModule, FeatureConfigCheckModule],
+    providers: [
+      mockProvider(ActivatedRoute, activatedRoute),
+      mockProvider(NavigationService, {
+        navigation$: EMPTY,
+        navigateWithinApp: jest.fn(),
+        getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute))
+      }),
+      mockProvider(FeatureStateResolver, {
+        getCombinedFeatureState: () => of(FeatureState.Enabled)
+      })
+    ]
+  });
+
+  test('should update layout when collapsed input is updated', () => {
+    const navItem: NavItemConfig = {
+      type: NavItemType.Link,
+      icon: IconType.TriangleLeft,
+      label: 'Foo Label',
+      matchPaths: ['foo', 'bar']
+    };
+    spectator = createHost(`<ht-nav-item [config]="navItem"></ht-nav-item>`, {
+      hostProps: { navItem: navItem }
+    });
+
+    expect(spectator.query('.label')).not.toExist();
+    expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleLeft);
+
+    spectator.setInput({
+      collapsed: false
+    });
+
+    spectator.detectChanges();
+    expect(spectator.query('.label')).toExist();
+    expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleLeft);
+  });
+
+  test('should navigate to first match on click, relative to activated route', () => {
+    const navItem: NavItemConfig = {
+      type: NavItemType.Link,
+      icon: 'icon',
+      label: 'Foo Label',
+      matchPaths: ['foo', 'bar']
+    };
+    spectator = createHost(`<ht-nav-item [config]="navItem"></ht-nav-item>`, {
+      hostProps: { navItem: navItem }
+    });
+
+    const link = spectator.query(LinkComponent);
+    expect(link).toExist();
+    expect(link?.paramsOrUrl).toEqual({
+      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 navItem: NavItemConfig = {
+      type: NavItemType.Link,
+      icon: 'icon',
+      label: 'Foo Label',
+      matchPaths: ['foo', 'bar'],
+      replaceCurrentHistory: true
+    };
+
+    spectator = createHost(`<ht-nav-item [config]="navItem"></ht-nav-item>`, {
+      hostProps: { navItem: navItem }
+    });
+
+    const link = spectator.query(LinkComponent);
+    expect(link).toExist();
+    expect(link?.paramsOrUrl).toEqual({
+      navType: NavigationParamsType.InApp,
+      path: 'foo',
+      relativeTo: spectator.inject(ActivatedRoute),
+      replaceCurrentHistory: true
+    });
+  });
+});

projects/components/src/navigation/nav-item/nav-item.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { FeatureState } from '@hypertrace/common';
+import { ActivatedRoute } from '@angular/router';
+import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
 import { NavItemLinkConfig } from '../navigation-list.component';
 
@@ -8,28 +9,30 @@ import { NavItemLinkConfig } from '../navigation-list.component';
   styleUrls: ['./nav-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div
-      *htIfFeature="this.config.features | htFeature as featureState"
-      class="nav-item"
-      [ngClass]="{ active: this.active }"
-    >
-      <ht-icon
-        class="icon"
-        [icon]="this.config.icon"
-        size="${IconSize.Medium}"
-        [label]="this.config.label"
-        [showTooltip]="this.collapsed"
+    <ht-link *ngIf="this.config" [paramsOrUrl]="buildNavigationParam | htMemoize: this.config">
+      <div
+        *htIfFeature="this.config.features | htFeature as featureState"
+        class="nav-item"
+        [ngClass]="{ active: this.active }"
       >
-      </ht-icon>
+        <ht-icon
+          class="icon"
+          [icon]="this.config.icon"
+          size="${IconSize.Medium}"
+          [label]="this.config.label"
+          [showTooltip]="this.collapsed"
+        >
+        </ht-icon>
 
-      <div class="label-container" *ngIf="!this.collapsed">
-        <span class="label">{{ this.config.label }}</span>
-        <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
-          <span class="soon">SOON</span>
-        </span>
-        <ht-beta-tag *ngIf="config.isBeta" class="beta"></ht-beta-tag>
+        <div class="label-container" *ngIf="!this.collapsed">
+          <span class="label">{{ this.config.label }}</span>
+          <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
+            <span class="soon">SOON</span>
+          </span>
+          <ht-beta-tag *ngIf="config.isBeta" class="beta"></ht-beta-tag>
+        </div>
       </div>
-    </div>
+    </ht-link>
   `
 })
 export class NavItemComponent {
@@ -41,4 +44,13 @@ export class NavItemComponent {
 
   @Input()
   public collapsed: boolean = true;
+
+  public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
+    navType: NavigationParamsType.InApp,
+    path: item.matchPaths[0],
+    relativeTo: this.activatedRoute,
+    replaceCurrentHistory: item.replaceCurrentHistory
+  });
+
+  public constructor(private readonly activatedRoute: ActivatedRoute) {}
 }

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

@@ -1,12 +1,12 @@
-import { ElementRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
+import { MemoizeModule, NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
 import { IconComponent } from '../icon/icon.component';
 import { LetAsyncModule } from '../let-async/let-async.module';
+import { LinkComponent } from './../link/link.component';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { FooterItemConfig, NavigationListComponent, NavItemConfig, NavItemType } from './navigation-list.component';
 describe('Navigation List Component', () => {
@@ -17,8 +17,8 @@ describe('Navigation List Component', () => {
   const createHost = createHostFactory({
     shallow: true,
     component: NavigationListComponent,
-    declarations: [MockComponent(IconComponent), MockComponent(NavItemComponent)],
-    imports: [LetAsyncModule],
+    declarations: [MockComponent(IconComponent), MockComponent(NavItemComponent), MockComponent(LinkComponent)],
+    imports: [LetAsyncModule, MemoizeModule],
     providers: [
       mockProvider(ActivatedRoute, activatedRoute),
       mockProvider(NavigationService, {
@@ -78,49 +78,4 @@ describe('Navigation List Component', () => {
     expect(spectator.query('.navigation-list')).not.toHaveClass('expanded');
     expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleRight);
   });
-
-  test('should navigate to first match on click, relative to activated route', () => {
-    const navItems: NavItemConfig[] = [
-      {
-        type: NavItemType.Link,
-        icon: 'icon',
-        label: 'Foo Label',
-        matchPaths: ['foo', 'bar']
-      }
-    ];
-    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: 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 { NavigationParamsType, NavigationService } from '@hypertrace/common';
+import { NavigationService } from '@hypertrace/common';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
@@ -25,13 +25,7 @@ import { IconSize } from '../icon/icon-size';
             <hr *ngSwitchCase="'${NavItemType.Divider}'" class="nav-divider" />
 
             <ng-container *ngSwitchCase="'${NavItemType.Link}'">
-              <ht-nav-item
-                [config]="item"
-                [active]="item === activeItem"
-                [collapsed]="this.collapsed"
-                (click)="this.navigate(item)"
-              >
-              </ht-nav-item>
+              <ht-nav-item [config]="item" [active]="item === activeItem" [collapsed]="this.collapsed"> </ht-nav-item>
             </ng-container>
           </ng-container>
         </ng-container>
@@ -82,15 +76,6 @@ export class NavigationListComponent {
     );
   }
 
-  public navigate(item: NavItemLinkConfig): void {
-    this.navigationService.navigate({
-      navType: NavigationParamsType.InApp,
-      path: item.matchPaths[0],
-      relativeTo: this.activatedRoute,
-      replaceCurrentHistory: item.replaceCurrentHistory
-    });
-  }
-
   public toggleView(): void {
     if (this.resizable) {
       this.collapsed = !this.collapsed;

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { MemoizeModule } from '@hypertrace/common';
 import { BetaTagModule } from '../beta-tag/beta-tag.module';
 import { ButtonModule } from '../button/button.module';
 import { FeatureConfigCheckModule } from '../feature-check/feature-config-check.module';
@@ -23,7 +24,9 @@ import { NavigationListComponent } from './navigation-list.component';
     ButtonModule,
     LinkModule,
     LabelModule,
-    BetaTagModule
+    BetaTagModule,
+    MemoizeModule,
+    LinkModule
   ],
   declarations: [NavigationListComponent, NavItemComponent],
   exports: [NavigationListComponent]

projects/components/src/tabs/navigable/navigable-tab-group.component.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { FeatureState, NavigationService } from '@hypertrace/common';
+import { FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
@@ -14,15 +14,17 @@ import { NavigableTabComponent } from './navigable-tab.component';
       <nav mat-tab-nav-bar *htLetAsync="this.activeTab$ as activeTab" disableRipple>
         <ng-container *ngFor="let tab of this.tabs">
           <ng-container *ngIf="!tab.hidden">
-            <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
-              <a mat-tab-link (click)="this.onTabClick(tab)" class="tab-link" [active]="activeTab === tab">
-                <ng-container *ngTemplateOutlet="tab.content"></ng-container>
-                <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
-                  <span class="soon">SOON</span>
-                </span>
-              </a>
-              <div class="ink-bar" [ngClass]="{ active: activeTab === tab }"></div>
-            </div>
+            <ht-link [paramsOrUrl]="buildNavigationParam | htMemoize: tab">
+              <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
+                <a mat-tab-link (click)="this.onTabClick(tab)" class="tab-link" [active]="activeTab === tab">
+                  <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+                  <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
+                    <span class="soon">SOON</span>
+                  </span>
+                </a>
+                <div class="ink-bar" [ngClass]="{ active: activeTab === tab }"></div>
+              </div>
+            </ht-link>
           </ng-container>
         </ng-container>
       </nav>
@@ -48,6 +50,12 @@ export class NavigableTabGroupComponent implements AfterContentInit {
     );
   }
 
+  public buildNavigationParam = (tab: NavigableTabComponent): NavigationParams => ({
+    navType: NavigationParamsType.InApp,
+    path: [tab.path],
+    relativeTo: this.activatedRoute
+  });
+
   public onTabClick(tab: NavigableTabComponent): void {
     this.navigationService.navigateWithinApp([tab.path], this.activatedRoute);
   }

projects/components/src/tabs/navigable/navigable-tab.module.ts

@@ -2,14 +2,24 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { MemoizeModule } from '@hypertrace/common';
 import { FeatureConfigCheckModule } from '../../feature-check/feature-config-check.module';
 import { LetAsyncModule } from '../../let-async/let-async.module';
+import { LinkModule } from '../../link/link.module';
 import { NavigableTabGroupComponent } from './navigable-tab-group.component';
 import { NavigableTabComponent } from './navigable-tab.component';
 
 @NgModule({
   declarations: [NavigableTabGroupComponent, NavigableTabComponent],
   exports: [NavigableTabGroupComponent, NavigableTabComponent],
-  imports: [MatTabsModule, CommonModule, RouterModule, LetAsyncModule, FeatureConfigCheckModule]
+  imports: [
+    MatTabsModule,
+    CommonModule,
+    RouterModule,
+    LetAsyncModule,
+    FeatureConfigCheckModule,
+    MemoizeModule,
+    LinkModule
+  ]
 })
 export class NavigableTabModule {}