fix: hide navigation header if there is nothing underneath

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

@@ -1,6 +1,6 @@
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { MemoizeModule, NavigationService } from '@hypertrace/common';
+import { FeatureStateResolver, MemoizeModule, NavigationService } from '@hypertrace/common';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { EMPTY, of } from 'rxjs';
@@ -21,6 +21,9 @@ describe('Navigation List Component', () => {
     imports: [LetAsyncModule, MemoizeModule],
     providers: [
       mockProvider(ActivatedRoute, activatedRoute),
+      mockProvider(FeatureStateResolver, {
+        getFeatureState: jest.fn().mockReturnValue(of(false))
+      }),
       mockProvider(NavigationService, {
         navigation$: EMPTY,
         navigateWithinApp: jest.fn(),
@@ -78,4 +81,36 @@ 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'
+      },
+      {
+        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'
+      }
+    ];
+
+    spectator = createHost(`<ht-navigation-list [navItems]="navItems"></ht-navigation-list>`, {
+      hostProps: { navItems: navItems }
+    });
+    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,8 +1,9 @@
 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 { Observable } from 'rxjs';
+import { FeatureState, FeatureStateResolver, NavigationService } from '@hypertrace/common';
+import { isEmpty } from 'lodash-es';
+import { combineLatest, Observable, of } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
 
@@ -13,13 +14,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="this.shouldShowHeader(id) | 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,7 +71,8 @@ export class NavigationListComponent {
 
   public constructor(
     private readonly navigationService: NavigationService,
-    private readonly activatedRoute: ActivatedRoute
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly featureStateResolver: FeatureStateResolver
   ) {
     this.activeItem$ = this.navigationService.navigation$.pipe(
       startWith(this.navigationService.getCurrentActivatedRoute()),
@@ -87,6 +91,26 @@ export class NavigationListComponent {
     return this.collapsed ? IconType.TriangleRight : IconType.TriangleLeft;
   }
 
+  public shouldShowHeader(index: number): Observable<boolean> {
+    const features = [];
+    for (let i = index + 1; i < this.navItems.length; i++) {
+      if (this.navItems[i].type !== NavItemType.Link) {
+        break;
+      }
+
+      const navLinkItemFeatures = (this.navItems[i] as NavItemLinkConfig).features;
+      features.push(isEmpty(navLinkItemFeatures) ? 'None' : navLinkItemFeatures);
+    }
+
+    return isEmpty(features.flat())
+      ? of(false)
+      : combineLatest(
+          features
+            .flat()
+            .map(f => (f === 'None' ? of(FeatureState.Enabled) : this.featureStateResolver.getFeatureState(f!)))
+        ).pipe(map(states => states.some(state => state === FeatureState.Enabled)));
+  }
+
   private findActiveItem(navItems: NavItemConfig[]): NavItemLinkConfig | undefined {
     return navItems
       .filter((item): item is NavItemLinkConfig => item.type === NavItemType.Link)