feat: support route wise page titles (#993)

* feat: support route wise page titles

Author: arjunlalb

projects/common/src/navigation/ht-route-data.ts

@@ -4,4 +4,5 @@ import { Breadcrumb } from './breadcrumb';
 export interface HtRouteData {
   breadcrumb?: Breadcrumb | Observable<Breadcrumb>;
   features?: string[];
+  title?: string;
 }

projects/common/src/navigation/ht-route.ts

@@ -1,7 +1,10 @@
+import { InjectionToken } from '@angular/core';
 import { Route } from '@angular/router';
 import { HtRouteData } from './ht-route-data';
 
 export interface HtRoute extends Route {
   data?: HtRouteData;
   children?: HtRoute[];
 }
+
+export const APP_TITLE = new InjectionToken<string>('APP_TITLE');

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

@@ -1,7 +1,9 @@
 import { Location } from '@angular/common';
+import { Title } from '@angular/platform-browser';
 import { Router, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { IconType } from '@hypertrace/assets-library';
+import { APP_TITLE } from '@hypertrace/common';
 import { NavItemType } from '@hypertrace/components';
 import { patchRouterNavigateForTest } from '@hypertrace/test-utils';
 import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
@@ -16,7 +18,10 @@ import {
 describe('Navigation Service', () => {
   const firstChildRouteConfig = {
     path: 'child',
-    children: []
+    children: [],
+    data: {
+      title: 'child1'
+    }
   };
   const defaultChildRouteConfig = {
     path: '**',
@@ -44,7 +49,11 @@ describe('Navigation Service', () => {
 
   const buildService = createServiceFactory({
     service: NavigationService,
-    providers: [mockProvider(Location)],
+    providers: [
+      mockProvider(Location),
+      mockProvider(Title, { setTitle: jest.fn().mockReturnValue(undefined) }),
+      { provide: APP_TITLE, useValue: 'defaultAppTitle' }
+    ],
     imports: [
       RouterTestingModule.withRoutes([
         {
@@ -318,4 +327,12 @@ describe('Navigation Service', () => {
       features: ['test-feature']
     });
   });
+
+  test('setting title should work as expected', () => {
+    router.navigate(['root', 'child']);
+    expect(spectator.inject(Title).setTitle).toHaveBeenCalledWith('defaultAppTitle | child1');
+
+    router.navigate(['root']);
+    expect(spectator.inject(Title).setTitle).toHaveBeenCalledWith('defaultAppTitle');
+  });
 });

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

@@ -1,5 +1,6 @@
 import { Location, PlatformLocation } from '@angular/common';
-import { Injectable, Type } from '@angular/core';
+import { Inject, Injectable, Optional, Type } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
@@ -16,10 +17,10 @@ import {
 import { NavItemConfig, NavItemType } from '@hypertrace/components';
 import { uniq } from 'lodash-es';
 import { from, Observable, of } from 'rxjs';
-import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take, tap } from 'rxjs/operators';
 import { isEqualIgnoreFunctions, throwIfNil } from '../utilities/lang/lang-utils';
 import { Dictionary } from '../utilities/types/types';
-import { HtRoute } from './ht-route';
+import { APP_TITLE, HtRoute } from './ht-route';
 
 @Injectable({ providedIn: 'root' })
 export class NavigationService {
@@ -34,11 +35,22 @@ export class NavigationService {
   public constructor(
     private readonly router: Router,
     private readonly location: Location,
-    private readonly platformLocation: PlatformLocation
+    private readonly platformLocation: PlatformLocation,
+    private readonly titleService: Title,
+    @Optional() @Inject(APP_TITLE) private readonly appTitle: string
   ) {
     this.event$(RoutesRecognized)
       .pipe(skip(1), take(1))
       .subscribe(() => (this.isFirstNavigation = false));
+
+    this.navigation$
+      .pipe(
+        switchMap(() => this.getCurrentActivatedRoute().data),
+        tap(routeData =>
+          this.titleService.setTitle(routeData.title ? `${this.appTitle} | ${routeData.title}` : this.appTitle)
+        )
+      )
+      .subscribe();
   }
 
   public addQueryParametersToUrl(newParams: QueryParamObject): Observable<boolean> {

src/app/config.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ALTERNATE_COLOR_PALETTES, DEFAULT_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
+import { ALTERNATE_COLOR_PALETTES, APP_TITLE, DEFAULT_COLOR_PALETTE, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
 import { GRAPHQL_OPTIONS } from '@hypertrace/graphql-client';
 import { ENTITY_METADATA, RED_COLOR_PALETTE } from '@hypertrace/observability';
 import { environment } from '../environments/environment';
@@ -38,6 +38,10 @@ import { FeatureResolverModule } from './shared/feature-resolver/feature-resolve
     {
       provide: ENTITY_METADATA,
       useValue: entityMetadata
+    },
+    {
+      provide: APP_TITLE,
+      useValue: environment.appTitle
     }
   ]
 })

src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
-  graphqlUri: '/graphql'
+  graphqlUri: '/graphql',
+  appTitle: 'Hypertrace'
 };

src/environments/environment.ts

@@ -5,7 +5,8 @@
 
 export const environment = {
   production: false,
-  graphqlUri: 'http://localhost:2020/graphql'
+  graphqlUri: 'http://localhost:2020/graphql',
+  appTitle: 'Hypertrace'
 };
 
 /*

src/index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <title>Hypertrace</title>
     <base href="/" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />