feat: make page header configurable to persist active tab (#1147)

* feat: make page header configurable to persist active tab

* style: prettier

* test: add mockProviders

* feat: add subscription lifecycle

* feat: fix provider

* feat: add distinctUntilChanged

Author: jake-bassett

projects/components/src/header/page/page-header.component.test.ts

@@ -1,3 +1,4 @@
+import { NavigationService, PreferenceService, SubscriptionLifecycle } from '@hypertrace/common';
 import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { of } from 'rxjs';
 import { BreadcrumbsService } from '../../breadcrumbs/breadcrumbs.service';
@@ -10,6 +11,9 @@ describe('Page Header Component', () => {
     component: PageHeaderComponent,
     shallow: true,
     providers: [
+      mockProvider(NavigationService),
+      mockProvider(PreferenceService),
+      mockProvider(SubscriptionLifecycle),
       mockProvider(BreadcrumbsService, {
         breadcrumbs$: of([
           {

projects/components/src/header/page/page-header.component.ts

@@ -1,7 +1,13 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Breadcrumb } from '@hypertrace/common';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import {
+  Breadcrumb,
+  isNonEmptyString,
+  NavigationService,
+  PreferenceService,
+  SubscriptionLifecycle
+} from '@hypertrace/common';
+import { Observable, of } from 'rxjs';
+import { first, map } from 'rxjs/operators';
 import { BreadcrumbsService } from '../../breadcrumbs/breadcrumbs.service';
 import { IconSize } from '../../icon/icon-size';
 import { NavigableTab } from '../../tabs/navigable/navigable-tab';
@@ -10,6 +16,7 @@ import { NavigableTab } from '../../tabs/navigable/navigable-tab';
   selector: 'ht-page-header',
   styleUrls: ['./page-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [SubscriptionLifecycle],
   template: `
     <div
       *ngIf="this.breadcrumbs$ | async as breadcrumbs"
@@ -34,7 +41,7 @@ import { NavigableTab } from '../../tabs/navigable/navigable-tab';
 
       <ng-content></ng-content>
 
-      <ht-navigable-tab-group *ngIf="this.tabs?.length" class="tabs">
+      <ht-navigable-tab-group *ngIf="this.tabs?.length" class="tabs" (tabChange)="this.onTabChange($event)">
         <ht-navigable-tab
           *ngFor="let tab of this.tabs"
           [path]="tab.path"
@@ -47,7 +54,10 @@ import { NavigableTab } from '../../tabs/navigable/navigable-tab';
     </div>
   `
 })
-export class PageHeaderComponent {
+export class PageHeaderComponent implements OnInit {
+  @Input()
+  public persistenceId?: string;
+
   @Input()
   public tabs?: NavigableTab[] = [];
 
@@ -62,5 +72,47 @@ export class PageHeaderComponent {
     map(breadcrumbs => (breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1] : {}))
   );
 
-  public constructor(protected readonly breadcrumbsService: BreadcrumbsService) {}
+  public constructor(
+    protected readonly navigationService: NavigationService,
+    protected readonly preferenceService: PreferenceService,
+    protected readonly subscriptionLifecycle: SubscriptionLifecycle,
+    protected readonly breadcrumbsService: BreadcrumbsService
+  ) {}
+
+  public ngOnInit(): void {
+    this.subscriptionLifecycle.add(
+      this.getPreferences().subscribe(preferences => this.navigateIfPersistedActiveTab(preferences))
+    );
+  }
+
+  private navigateIfPersistedActiveTab(preferences: PageHeaderPreferences): void {
+    if (isNonEmptyString(this.persistenceId) && isNonEmptyString(preferences.selectedTabPath)) {
+      this.navigationService.navigateWithinApp(
+        preferences.selectedTabPath,
+        this.navigationService.getCurrentActivatedRoute().parent!
+      );
+    }
+  }
+
+  public onTabChange(path?: string): void {
+    this.setPreferences(path);
+  }
+
+  private getPreferences(): Observable<PageHeaderPreferences> {
+    return isNonEmptyString(this.persistenceId)
+      ? this.preferenceService.get<PageHeaderPreferences>(this.persistenceId, {}).pipe(first())
+      : of({});
+  }
+
+  private setPreferences(selectedTabPath?: string): void {
+    if (isNonEmptyString(this.persistenceId)) {
+      this.preferenceService.set(this.persistenceId, {
+        selectedTabPath: selectedTabPath
+      });
+    }
+  }
+}
+
+interface PageHeaderPreferences {
+  selectedTabPath?: string;
 }

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

@@ -1,8 +1,16 @@
-import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Output,
+  QueryList
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Color, FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common';
 import { merge, Observable } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
+import { distinctUntilChanged, map, startWith, tap } from 'rxjs/operators';
 import { NavigableTabComponent } from './navigable-tab.component';
 
 @Component({
@@ -47,6 +55,9 @@ export class NavigableTabGroupComponent implements AfterContentInit {
   @ContentChildren(NavigableTabComponent)
   public tabs!: QueryList<NavigableTabComponent>;
 
+  @Output()
+  public readonly tabChange: EventEmitter<string | undefined> = new EventEmitter<string | undefined>();
+
   public activeTab$?: Observable<NavigableTabComponent | undefined>;
 
   public constructor(
@@ -57,7 +68,9 @@ export class NavigableTabGroupComponent implements AfterContentInit {
   public ngAfterContentInit(): void {
     this.activeTab$ = merge(this.navigationService.navigation$, this.tabs.changes).pipe(
       startWith(undefined),
-      map(() => this.findActiveTab())
+      map(() => this.findActiveTab()),
+      distinctUntilChanged(),
+      tap(activeTab => this.tabChange.emit(activeTab?.path))
     );
   }