fix: define a service to provide global header height (#1535)

* fix: define a service to provide global header height

Author: arjunlalb

projects/common/src/constants/application-constants.ts

@@ -1,7 +1,3 @@
-import { InjectionToken } from '@angular/core';
-
-export const GLOBAL_HEADER_HEIGHT = new InjectionToken<string>('Global Header Height');
-
 export const enum ApplicationFeature {
   PageTimeRange = 'ui.page-time-range'
 }

projects/common/src/global-header-height/global-header-height-provider.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class GlobalHeaderHeightProviderService {
+  protected headerHeight: string = '56px';
+
+  public get globalHeaderHeight(): string {
+    return this.headerHeight;
+  }
+}

projects/common/src/public-api.ts

@@ -127,3 +127,6 @@ export * from './utilities/validators';
 
 // Color Palette
 export * from './color/color-palette';
+
+// Global header height provider
+export * from './global-header-height/global-header-height-provider.service';

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

@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
   ApplicationFeature,
   FeatureState,
   FeatureStateResolver,
-  GLOBAL_HEADER_HEIGHT,
+  GlobalHeaderHeightProviderService,
   NavigationService
 } from '@hypertrace/common';
 import { Observable } from 'rxjs';
@@ -14,7 +14,7 @@ import { map } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./application-header.component.scss'],
   template: `
-    <div class="ht-header" [style.height]="this.height">
+    <div class="ht-header" [style.height]="this.headerHeightProvider.globalHeaderHeight">
       <div class="left-side">
         <div class="logo" (click)="this.onLogoClick()">
           <ng-content select="[logo]"></ng-content>
@@ -43,7 +43,7 @@ export class ApplicationHeaderComponent {
   public pageLevelTimeRangeDisabled$: Observable<boolean>;
 
   public constructor(
-    @Inject(GLOBAL_HEADER_HEIGHT) public readonly height: string,
+    public readonly headerHeightProvider: GlobalHeaderHeightProviderService,
     private readonly navigationService: NavigationService,
     private readonly featureStateResolver: FeatureStateResolver
   ) {

projects/components/src/overlay/overlay.service.test.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { fakeAsync, flush } from '@angular/core/testing';
 import { IconLibraryTestingModule } from '@hypertrace/assets-library';
-import { GLOBAL_HEADER_HEIGHT, NavigationService } from '@hypertrace/common';
+import { GlobalHeaderHeightProviderService, NavigationService } from '@hypertrace/common';
 import { OverlayService, SheetRef, SheetSize } from '@hypertrace/components';
 import { createHostFactory, mockProvider } from '@ngneat/spectator/jest';
 import { EMPTY } from 'rxjs';
@@ -33,10 +33,9 @@ describe('Overlay service', () => {
       mockProvider(NavigationService, {
         navigation$: EMPTY
       }),
-      {
-        provide: GLOBAL_HEADER_HEIGHT,
-        useValue: 100
-      }
+      mockProvider(GlobalHeaderHeightProviderService, {
+        globalHeaderHeight: '56px'
+      })
     ],
     template: `<host></host>`
   });

projects/components/src/overlay/sheet/sheet-overlay.component.test.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, Injector, Optional } from '@angular/core';
 import {
   ExternalNavigationWindowHandling,
-  GLOBAL_HEADER_HEIGHT,
+  GlobalHeaderHeightProviderService,
   LayoutChangeService,
   NavigationParamsType
 } from '@hypertrace/common';
@@ -38,10 +38,9 @@ describe('Sheet Overlay component', () => {
   </ht-sheet-overlay>
     `,
     providers: [
-      {
-        provide: GLOBAL_HEADER_HEIGHT,
-        useValue: 20
-      },
+      mockProvider(GlobalHeaderHeightProviderService, {
+        globalHeaderHeight: '56px'
+      }),
       mockProvider(LayoutChangeService)
     ]
   });

projects/components/src/overlay/sheet/sheet-overlay.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostListener, Inject, Injector, TemplateRef, Type } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
-import { ExternalNavigationParams, GLOBAL_HEADER_HEIGHT, LayoutChangeService } from '@hypertrace/common';
+import { ExternalNavigationParams, GlobalHeaderHeightProviderService, LayoutChangeService } from '@hypertrace/common';
 import { ButtonStyle } from '../../button/button';
 import { IconSize } from '../../icon/icon-size';
 import { PopoverFixedPositionLocation, POPOVER_DATA } from '../../popover/popover';
@@ -71,8 +71,8 @@ export class SheetOverlayComponent {
 
   public constructor(
     private readonly popoverRef: PopoverRef,
+    private readonly globalHeaderHeightProvider: GlobalHeaderHeightProviderService,
     @Inject(POPOVER_DATA) sheetData: SheetConstructionData,
-    @Inject(GLOBAL_HEADER_HEIGHT) globalHeaderHeight: string,
     layoutChange: LayoutChangeService
   ) {
     const sheetConfig: SheetOverlayConfig = sheetData.config;
@@ -85,7 +85,9 @@ export class SheetOverlayComponent {
 
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
-    this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
+    this.popoverRef.height(
+      this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position)
+    );
     this.setWidth();
     this.navigationParams = sheetConfig.pageNavParams;
     this.rendererInjector = Injector.create({

projects/components/src/popover/popover-position-builder.ts

@@ -1,6 +1,6 @@
 import { ConnectionPositionPair, GlobalPositionStrategy, Overlay, PositionStrategy } from '@angular/cdk/overlay';
-import { Inject, Injectable, Optional } from '@angular/core';
-import { assertUnreachable, GLOBAL_HEADER_HEIGHT } from '@hypertrace/common';
+import { Injectable } from '@angular/core';
+import { assertUnreachable, GlobalHeaderHeightProviderService } from '@hypertrace/common';
 import {
   PopoverFixedPosition,
   PopoverFixedPositionLocation,
@@ -15,7 +15,7 @@ import { MousePositionStrategy } from './position-strategy/mouse-position-strate
 export class PopoverPositionBuilder {
   public constructor(
     private readonly overlay: Overlay,
-    @Optional() @Inject(GLOBAL_HEADER_HEIGHT) private readonly headerHeight?: string
+    private readonly headerHeightProvider: GlobalHeaderHeightProviderService
   ) {}
 
   public buildPositionStrategy(position: PopoverPosition): PositionStrategy | undefined {
@@ -116,7 +116,7 @@ export class PopoverPositionBuilder {
           .top(`${popoverPosition.customLocation!.y}px`);
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
-        return globalPosition.right('0').top(this.headerHeight ?? '0');
+        return globalPosition.right('0').top(this.headerHeightProvider.globalHeaderHeight ?? '0');
     }
   }
 }

src/app/config.module.ts

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