fix: hide navigation header if nothing underneath

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

@@ -11,7 +11,7 @@ import { BetaTagComponent, IconComponent, LinkComponent } from '@hypertrace/comp
 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 { NavItemConfig, NavItemType } from '../navigation.config';
 import { FeatureConfigCheckModule } from './../../feature-check/feature-config-check.module';
 import { NavItemComponent } from './nav-item.component';
 
@@ -43,7 +43,8 @@ describe('Navigation Item Component', () => {
       type: NavItemType.Link,
       icon: IconType.TriangleLeft,
       label: 'Foo Label',
-      matchPaths: ['foo', 'bar']
+      matchPaths: ['foo', 'bar'],
+      featureState$: of(FeatureState.Enabled)
     };
     spectator = createHost(`<ht-nav-item [config]="navItem"></ht-nav-item>`, {
       hostProps: { navItem: navItem }

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
-import { NavItemLinkConfig } from '../navigation-list.component';
+import { NavItemLinkConfig } from '../navigation.config';
 
 @Component({
   selector: 'ht-nav-item',
@@ -11,7 +11,7 @@ import { NavItemLinkConfig } from '../navigation-list.component';
   template: `
     <ht-link *ngIf="this.config" [paramsOrUrl]="buildNavigationParam | htMemoize: this.config">
       <div
-        *htIfFeature="this.config.features | htFeature as featureState"
+        *htIfFeature="this.config.featureState$ | async as featureState"
         class="nav-item"
         [ngClass]="{ active: this.active }"
       >

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

@@ -0,0 +1,56 @@
+import { FeatureState, FeatureStateResolver } from '@hypertrace/common';
+import { NavItemConfig, NavItemType } from '@hypertrace/components';
+import { runFakeRxjs } from '@hypertrace/test-utils';
+import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest';
+import { of } from 'rxjs';
+import { NavigationListComponentService } from './navigation-list-component.service';
+import { NavItemHeaderConfig } from './navigation.config';
+
+describe('Navigation List Component Service', () => {
+  const navItems: NavItemConfig[] = [
+    {
+      type: NavItemType.Header,
+      label: 'header 1'
+    },
+    {
+      type: NavItemType.Link,
+      icon: 'icon',
+      label: 'label-1',
+      features: ['feature'],
+      matchPaths: ['']
+    },
+    {
+      type: NavItemType.Link,
+      icon: 'icon',
+      label: 'label-2',
+      matchPaths: ['']
+    },
+    {
+      type: NavItemType.Header,
+      label: 'header 2'
+    }
+  ];
+
+  const createService = createServiceFactory({
+    service: NavigationListComponentService,
+    providers: [
+      mockProvider(FeatureStateResolver, {
+        getCombinedFeatureState: jest.fn().mockReturnValue(of(FeatureState.Enabled))
+      })
+    ]
+  });
+
+  test('should return correct visibility for both headers', () => {
+    const spectator = createService();
+    const resolvedItems = spectator.service.resolveFeaturesAndUpdateVisibilityForNavItems(navItems);
+
+    runFakeRxjs(({ expectObservable }) => {
+      expectObservable((resolvedItems[0] as NavItemHeaderConfig).isVisible$!).toBe('(x|)', {
+        x: true
+      });
+      expectObservable((resolvedItems[3] as NavItemHeaderConfig).isVisible$!).toBe('(x|)', {
+        x: false
+      });
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { FeatureState, FeatureStateResolver } from '@hypertrace/common';
+import { isEmpty } from 'lodash-es';
+import { combineLatest, Observable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { NavItemConfig, NavItemHeaderConfig, NavItemLinkConfig, NavItemType } from './navigation.config';
+
+@Injectable({ providedIn: 'root' })
+export class NavigationListComponentService {
+  public constructor(private readonly featureStateResolver: FeatureStateResolver) {}
+
+  public resolveFeaturesAndUpdateVisibilityForNavItems(navItems: NavItemConfig[]): NavItemConfig[] {
+    const updatedItems = this.updateLinkNavItemsVisibility(navItems);
+    let linkItemsForThisSection: NavItemLinkConfig[] = [];
+    for (let i = updatedItems.length - 1; i >= 0; i--) {
+      if (updatedItems[i].type === NavItemType.Header) {
+        (updatedItems[i] as NavItemHeaderConfig).isVisible$ = this.updateHeaderNavItemsVisibility(
+          linkItemsForThisSection
+        );
+        linkItemsForThisSection = [];
+      } else if (updatedItems[i].type === NavItemType.Link) {
+        linkItemsForThisSection.push(updatedItems[i] as NavItemLinkConfig);
+      }
+    }
+
+    return updatedItems;
+  }
+
+  private updateHeaderNavItemsVisibility(navItems: NavItemLinkConfig[]): Observable<boolean> {
+    return isEmpty(navItems)
+      ? of(false)
+      : combineLatest(navItems.map(navItem => navItem.featureState$!)).pipe(
+          map(states => states.some(state => state !== FeatureState.Disabled))
+        );
+  }
+
+  private updateLinkNavItemsVisibility(navItems: NavItemConfig[]): NavItemConfig[] {
+    return navItems.map(navItem => {
+      if (navItem.type === NavItemType.Link) {
+        return {
+          ...navItem,
+          featureState$: this.featureStateResolver.getCombinedFeatureState(navItem.features ?? [])
+        };
+      }
+
+      return navItem;
+    });
+  }
+}

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

@@ -8,7 +8,9 @@ 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';
+import { NavigationListComponentService } from './navigation-list-component.service';
+import { NavigationListComponent } from './navigation-list.component';
+import { FooterItemConfig, NavItemConfig, NavItemType } from './navigation.config';
 describe('Navigation List Component', () => {
   let spectator: SpectatorHost<NavigationListComponent>;
   const activatedRoute = {
@@ -21,6 +23,13 @@ describe('Navigation List Component', () => {
     imports: [LetAsyncModule, MemoizeModule],
     providers: [
       mockProvider(ActivatedRoute, activatedRoute),
+      mockProvider(NavigationListComponentService, {
+        resolveFeaturesAndUpdateVisibilityForNavItems: jest
+          .fn()
+          .mockImplementation((navItems: NavItemConfig[]) =>
+            navItems.map(item => (item.type !== NavItemType.Header ? item : { ...item, isVisible$: of(true) }))
+          )
+      }),
       mockProvider(NavigationService, {
         navigation$: EMPTY,
         navigateWithinApp: jest.fn(),
@@ -78,4 +87,42 @@ describe('Navigation List Component', () => {
     expect(spectator.query('.navigation-list')).not.toHaveClass('expanded');
     expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleRight);
   });
+
+  test('should only show one header 1', () => {
+    const navItems: NavItemConfig[] = [
+      {
+        type: NavItemType.Header,
+        label: 'header 1',
+        isVisible$: of(true)
+      },
+      {
+        type: NavItemType.Link,
+        icon: 'icon',
+        label: 'label-2',
+        matchPaths: ['']
+      },
+      {
+        type: NavItemType.Header,
+        label: 'header 2',
+        isVisible$: of(false)
+      }
+    ];
+
+    spectator = createHost(`<ht-navigation-list [navItems]="navItems"></ht-navigation-list>`, {
+      hostProps: { navItems: navItems },
+      providers: [
+        mockProvider(ActivatedRoute, activatedRoute),
+        mockProvider(NavigationListComponentService, {
+          resolveFeaturesAndUpdateVisibilityForNavItems: jest.fn().mockReturnValue(navItems)
+        }),
+        mockProvider(NavigationService, {
+          navigation$: EMPTY,
+          navigateWithinApp: jest.fn(),
+          getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute))
+        })
+      ]
+    });
+    expect(spectator.queryAll('.nav-header')).toHaveLength(1);
+    expect(spectator.queryAll('.nav-header .label')[0]).toHaveText('header 1');
+  });
 });

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

@@ -1,10 +1,12 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { Color, 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';
+import { NavigationListComponentService } from './navigation-list-component.service';
+import { FooterItemConfig, NavItemConfig, NavItemLinkConfig, NavItemType } from './navigation.config';
 
 @Component({
   selector: 'ht-navigation-list',
@@ -13,13 +15,15 @@ import { IconSize } from '../icon/icon-size';
   template: `
     <nav class="navigation-list" [ngClass]="{ expanded: !this.collapsed }">
       <div class="content" *htLetAsync="this.activeItem$ as activeItem" [htLayoutChangeTrigger]="this.collapsed">
-        <ng-container *ngFor="let item of this.navItems">
+        <ng-container *ngFor="let item of this.navItems; let id = index">
           <ng-container [ngSwitch]="item.type">
             <div *ngIf="!this.collapsed">
-              <div *ngSwitchCase="'${NavItemType.Header}'" class="nav-header">
-                <div class="label">{{ item.label }}</div>
-                <ht-beta-tag *ngIf="item.isBeta" class="beta"></ht-beta-tag>
-              </div>
+              <ng-container *ngSwitchCase="'${NavItemType.Header}'">
+                <div *ngIf="item.isVisible$ | async" class="nav-header">
+                  <div class="label">{{ item.label }}</div>
+                  <ht-beta-tag *ngIf="item.isBeta" class="beta"></ht-beta-tag>
+                </div>
+              </ng-container>
             </div>
 
             <hr *ngSwitchCase="'${NavItemType.Divider}'" class="nav-divider" />
@@ -68,10 +72,12 @@ export class NavigationListComponent implements OnChanges {
 
   public constructor(
     private readonly navigationService: NavigationService,
-    private readonly activatedRoute: ActivatedRoute
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly navListComponentService: NavigationListComponentService
   ) {}
 
   public ngOnChanges(): void {
+    this.navItems = this.navListComponentService.resolveFeaturesAndUpdateVisibilityForNavItems(this.navItems);
     this.activeItem$ = this.navigationService.navigation$.pipe(
       startWith(this.navigationService.getCurrentActivatedRoute()),
       map(() => this.findActiveItem(this.navItems))
@@ -99,45 +105,3 @@ export class NavigationListComponent implements OnChanges {
       );
   }
 }
-
-export type NavItemConfig = NavItemLinkConfig | NavItemHeaderConfig | NavItemDividerConfig;
-
-export interface NavItemLinkConfig {
-  type: NavItemType.Link;
-  icon: string;
-  iconSize?: IconSize;
-  label: string;
-  matchPaths: string[]; // For now, default path is index 0
-  features?: string[];
-  replaceCurrentHistory?: boolean;
-  isBeta?: boolean;
-  trailingIcon?: string;
-  trailingIconTooltip?: string;
-  trailingIconColor?: Color;
-}
-
-export type FooterItemConfig = FooterItemLinkConfig;
-
-export interface FooterItemLinkConfig {
-  url: string;
-  label: string;
-  icon: string;
-}
-
-export interface NavItemHeaderConfig {
-  type: NavItemType.Header;
-  label: string;
-  isBeta?: boolean;
-}
-
-export interface NavItemDividerConfig {
-  type: NavItemType.Divider;
-}
-
-// Must be exported to be used by AOT compiler in template
-export const enum NavItemType {
-  Header = 'header',
-  Link = 'link',
-  Divider = 'divider',
-  Footer = 'footer'
-}

projects/components/src/navigation/navigation.config.ts

@@ -0,0 +1,47 @@
+import { Color, FeatureState } from '@hypertrace/common';
+import { Observable } from 'rxjs';
+import { IconSize } from '../icon/icon-size';
+
+export type NavItemConfig = NavItemLinkConfig | NavItemHeaderConfig | NavItemDividerConfig;
+
+export interface NavItemLinkConfig {
+  type: NavItemType.Link;
+  icon: string;
+  iconSize?: IconSize;
+  label: string;
+  matchPaths: string[]; // For now, default path is index 0
+  features?: string[];
+  replaceCurrentHistory?: boolean;
+  isBeta?: boolean;
+  trailingIcon?: string;
+  trailingIconTooltip?: string;
+  trailingIconColor?: Color;
+  featureState$?: Observable<FeatureState>;
+}
+
+export type FooterItemConfig = FooterItemLinkConfig;
+
+export interface FooterItemLinkConfig {
+  url: string;
+  label: string;
+  icon: string;
+}
+
+export interface NavItemHeaderConfig {
+  type: NavItemType.Header;
+  label: string;
+  isBeta?: boolean;
+  isVisible$?: Observable<boolean>;
+}
+
+export interface NavItemDividerConfig {
+  type: NavItemType.Divider;
+}
+
+// Must be exported to be used by AOT compiler in template
+export const enum NavItemType {
+  Header = 'header',
+  Link = 'link',
+  Divider = 'divider',
+  Footer = 'footer'
+}

projects/components/src/public-api.ts

@@ -154,6 +154,8 @@ export { LayoutChangeModule } from './layout/layout-change.module';
 export * from './navigation/navigation-list.component';
 export * from './navigation/navigation-list.module';
 export * from './navigation/nav-item/nav-item.component';
+export * from './navigation/navigation.config';
+export * from './navigation/navigation-list-component.service';
 
 // Let async
 export { LetAsyncDirective } from './let-async/let-async.directive';