From 17f97a588377babdbeae954e3862a1b743bc8e7e Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 14:59:47 +0530
Subject: [PATCH 1/7] fix: define a service to provide global header height

---
 projects/common/src/constants/application-constants.ts |  4 ----
 .../global-header-height-provider.service.ts           | 10 ++++++++++
 projects/common/src/public-api.ts                      |  3 +++
 .../header/application/application-header.component.ts |  8 ++++----
 .../src/overlay/sheet/sheet-overlay.component.ts       |  7 ++++---
 .../components/src/popover/popover-position-builder.ts |  8 ++++----
 src/app/config.module.ts                               |  6 +-----
 7 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 projects/common/src/global-header-height/global-header-height-provider.service.ts

diff --git a/projects/common/src/constants/application-constants.ts b/projects/common/src/constants/application-constants.ts
index aa81c82c3..88baa2baf 100644
--- a/projects/common/src/constants/application-constants.ts
+++ b/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'
 }
diff --git a/projects/common/src/global-header-height/global-header-height-provider.service.ts b/projects/common/src/global-header-height/global-header-height-provider.service.ts
new file mode 100644
index 000000000..cc21de454
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts
index ebd7dd733..37026a34b 100644
--- a/projects/common/src/public-api.ts
+++ b/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';
diff --git a/projects/components/src/header/application/application-header.component.ts b/projects/components/src/header/application/application-header.component.ts
index e6fbef9b5..d5a136c1f 100644
--- a/projects/components/src/header/application/application-header.component.ts
+++ b/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
   ) {
diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts
index b9471f2a0..553457455 100644
--- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts
+++ b/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,8 @@ export class SheetOverlayComponent {
 
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
-    this.popoverRef.height(this.getHeightForPopover(globalHeaderHeight, sheetConfig.position));
+    console.log(this.globalHeaderHeightProvider.globalHeaderHeight);
+    this.popoverRef.height(this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position));
     this.setWidth();
     this.navigationParams = sheetConfig.pageNavParams;
     this.rendererInjector = Injector.create({
diff --git a/projects/components/src/popover/popover-position-builder.ts b/projects/components/src/popover/popover-position-builder.ts
index 70d563108..bd3e508f5 100644
--- a/projects/components/src/popover/popover-position-builder.ts
+++ b/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');
     }
   }
 }
diff --git a/src/app/config.module.ts b/src/app/config.module.ts
index 80aa98fbb..bfee6ba73 100644
--- a/src/app/config.module.ts
+++ b/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: {

From 79a202d5c26b1f8769f246537b091a31eb48247b Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 15:27:01 +0530
Subject: [PATCH 2/7] fix: remove console log

---
 projects/components/src/overlay/sheet/sheet-overlay.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts
index 553457455..4bb096033 100644
--- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts
+++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts
@@ -85,7 +85,6 @@ export class SheetOverlayComponent {
 
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
-    console.log(this.globalHeaderHeightProvider.globalHeaderHeight);
     this.popoverRef.height(this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position));
     this.setWidth();
     this.navigationParams = sheetConfig.pageNavParams;

From 1f96a4e71b63579ea609264311ef2454534828f9 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 15:28:03 +0530
Subject: [PATCH 3/7] fix: minor fix

---
 projects/components/src/popover/popover-position-builder.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/popover/popover-position-builder.ts b/projects/components/src/popover/popover-position-builder.ts
index bd3e508f5..6ec2ac1e9 100644
--- a/projects/components/src/popover/popover-position-builder.ts
+++ b/projects/components/src/popover/popover-position-builder.ts
@@ -116,7 +116,7 @@ export class PopoverPositionBuilder {
           .top(`${popoverPosition.customLocation!.y}px`);
       case PopoverFixedPositionLocation.RightUnderHeader:
       default:
-        return globalPosition.right('0').top(this.headerHeightProvider?.globalHeaderHeight ?? '0');
+        return globalPosition.right('0').top(this.headerHeightProvider.globalHeaderHeight ?? '0');
     }
   }
 }

From c523eda647648f6b6c52435c2cfdb534cc931c54 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 15:36:03 +0530
Subject: [PATCH 4/7] fix: lint fix

---
 .../components/src/overlay/sheet/sheet-overlay.component.ts   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.ts
index 4bb096033..f09ebb5d8 100644
--- a/projects/components/src/overlay/sheet/sheet-overlay.component.ts
+++ b/projects/components/src/overlay/sheet/sheet-overlay.component.ts
@@ -85,7 +85,9 @@ export class SheetOverlayComponent {
 
     this.isComponentSheet = !(sheetConfig.content instanceof TemplateRef);
     this.renderer = sheetConfig.content;
-    this.popoverRef.height(this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position));
+    this.popoverRef.height(
+      this.getHeightForPopover(this.globalHeaderHeightProvider.globalHeaderHeight, sheetConfig.position)
+    );
     this.setWidth();
     this.navigationParams = sheetConfig.pageNavParams;
     this.rendererInjector = Injector.create({

From 216b7a9de04632b77b9db707ae7db914b069dd16 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 17:03:02 +0530
Subject: [PATCH 5/7] fix: update test

---
 .../src/overlay/sheet/sheet-overlay.component.test.ts    | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts b/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts
index 3560be2b2..6f60bf557 100644
--- a/projects/components/src/overlay/sheet/sheet-overlay.component.test.ts
+++ b/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)
     ]
   });

From 1c3ffc2e3b0dd18334a6e8908d61102df2d75bea Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 17:10:01 +0530
Subject: [PATCH 6/7] fix: update test

---
 projects/components/src/overlay/overlay.service.test.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/components/src/overlay/overlay.service.test.ts b/projects/components/src/overlay/overlay.service.test.ts
index 9d682d627..358d79707 100644
--- a/projects/components/src/overlay/overlay.service.test.ts
+++ b/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>`
   });

From d45832468d516e211efc85326c1b69676a37df0b Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Wed, 6 Apr 2022 17:14:19 +0530
Subject: [PATCH 7/7] fix: prettier fix

---
 projects/components/src/overlay/overlay.service.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/components/src/overlay/overlay.service.test.ts b/projects/components/src/overlay/overlay.service.test.ts
index 358d79707..ad8bf5edb 100644
--- a/projects/components/src/overlay/overlay.service.test.ts
+++ b/projects/components/src/overlay/overlay.service.test.ts
@@ -35,7 +35,7 @@ describe('Overlay service', () => {
       }),
       mockProvider(GlobalHeaderHeightProviderService, {
         globalHeaderHeight: '56px'
-      }),
+      })
     ],
     template: `<host></host>`
   });