From 5169261e09d3883c1e3d4cc46b9230dce6a45709 Mon Sep 17 00:00:00 2001
From: Dzhavat Ushev <dzu@energinet.dk>
Date: Fri, 25 Aug 2023 08:26:02 +0200
Subject: [PATCH 1/2] fix(watt): drawer should overlay topbar when open (#1981)

* fix(watt): drawer should overlay topbar when open

* Chore: bump version to 0.3.326 for build/infrastructure/eo/chart/Chart.yaml

* Chore: bump version to 0.3.326 for build/infrastructure/eo/chart/values.yaml

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 build/infrastructure/eo/chart/Chart.yaml          |  2 +-
 build/infrastructure/eo/chart/values.yaml         |  2 +-
 .../components/drawer/watt-drawer.component.ts    | 15 +++++++++++++++
 .../src/lib/components/shell/shell.component.scss |  2 +-
 libs/ui-watt/src/lib/foundations/_variables.scss  |  6 ++++++
 .../lib/utils/css-custom-properties.service.ts    | 10 +++++++---
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/build/infrastructure/eo/chart/Chart.yaml b/build/infrastructure/eo/chart/Chart.yaml
index 7d84a5c19b..a36f1a314f 100644
--- a/build/infrastructure/eo/chart/Chart.yaml
+++ b/build/infrastructure/eo/chart/Chart.yaml
@@ -2,4 +2,4 @@ apiVersion: v2
 name: eo-frontend
 description: A Helm chart for Kubernetes
 type: application
-version: 0.3.325
+version: 0.3.326
diff --git a/build/infrastructure/eo/chart/values.yaml b/build/infrastructure/eo/chart/values.yaml
index b760f5c4f3..fa74ebf76e 100644
--- a/build/infrastructure/eo/chart/values.yaml
+++ b/build/infrastructure/eo/chart/values.yaml
@@ -2,4 +2,4 @@ app:
   replicaCount: 2
   image:
     name: ghcr.io/energinet-datahub/eo-frontend-app
-    tag: 0.3.325
+    tag: 0.3.326
diff --git a/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts b/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts
index 88afb68756..c0bd1391c2 100644
--- a/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts
+++ b/libs/ui-watt/src/lib/components/drawer/watt-drawer.component.ts
@@ -30,10 +30,12 @@ import {
   Input,
   ElementRef,
   ViewChild,
+  inject,
 } from '@angular/core';
 
 import { WattButtonComponent } from '../button';
 import { WattSpinnerComponent } from '../spinner';
+import { WattCssCustomPropertiesService } from '../../utils/css-custom-properties.service';
 
 import { WattDrawerTopbarComponent } from './watt-drawer-topbar.component';
 import { WattDrawerActionsComponent } from './watt-drawer-actions.component';
@@ -51,6 +53,7 @@ export type WattDrawerSize = 'small' | 'normal' | 'large';
   imports: [A11yModule, MatSidenavModule, WattButtonComponent, WattSpinnerComponent, CommonModule],
 })
 export class WattDrawerComponent implements OnDestroy {
+  private cssCustomPropertiesService = inject(WattCssCustomPropertiesService);
   private static currentDrawer?: WattDrawerComponent;
 
   /** Used to adjust drawer size to best fit the content. */
@@ -133,6 +136,12 @@ export class WattDrawerComponent implements OnDestroy {
       WattDrawerComponent.currentDrawer = this;
       this.isOpen = true;
       this.cdr.detectChanges();
+
+      const value = this.cssCustomPropertiesService.getPropertyValue(
+        '--watt-toolbar-z-index-when-drawer-is-open'
+      );
+
+      this.cssCustomPropertiesService.setPropertyValue('--watt-toolbar-z-index', value);
     }
   }
 
@@ -144,6 +153,12 @@ export class WattDrawerComponent implements OnDestroy {
       WattDrawerComponent.currentDrawer = undefined;
       this.isOpen = false;
       this.closed.emit();
+
+      const value = this.cssCustomPropertiesService.getPropertyValue(
+        '--watt-toolbar-z-index-when-drawer-is-closed'
+      );
+
+      this.cssCustomPropertiesService.setPropertyValue('--watt-toolbar-z-index', value);
     }
   }
 }
diff --git a/libs/ui-watt/src/lib/components/shell/shell.component.scss b/libs/ui-watt/src/lib/components/shell/shell.component.scss
index 7484d13b06..27069b11f4 100644
--- a/libs/ui-watt/src/lib/components/shell/shell.component.scss
+++ b/libs/ui-watt/src/lib/components/shell/shell.component.scss
@@ -85,5 +85,5 @@
   background-color: var(--watt-color-neutral-white);
   border-bottom: 1px solid var(--watt-color-neutral-grey-300);
   height: var(--watt-space-xl);
-  z-index: 2;
+  z-index: var(--watt-toolbar-z-index);
 }
diff --git a/libs/ui-watt/src/lib/foundations/_variables.scss b/libs/ui-watt/src/lib/foundations/_variables.scss
index dee7d56392..ccefeb237a 100644
--- a/libs/ui-watt/src/lib/foundations/_variables.scss
+++ b/libs/ui-watt/src/lib/foundations/_variables.scss
@@ -97,4 +97,10 @@
 
   // shadows
   --watt-bottom-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
+
+  // Topbar z-index
+  --watt-toolbar-z-index-when-drawer-is-open: "auto";
+  --watt-toolbar-z-index-when-drawer-is-closed: 2;
+
+  --watt-toolbar-z-index: var(--watt-toolbar-z-index-when-drawer-is-closed);
 }
diff --git a/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts b/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts
index 70ec2a1b36..8feb58330f 100644
--- a/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts
+++ b/libs/ui-watt/src/lib/utils/css-custom-properties.service.ts
@@ -19,13 +19,17 @@ import { Inject, Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class WattCssCustomPropertiesService {
+  private get rootElement() {
+    return this.document.documentElement;
+  }
+
   constructor(@Inject(DOCUMENT) private document: Document) {}
 
   public getPropertyValue(name: string): string {
-    return this.getComputedStyle().getPropertyValue(name);
+    return getComputedStyle(this.rootElement).getPropertyValue(name);
   }
 
-  private getComputedStyle() {
-    return getComputedStyle(this.document.documentElement);
+  public setPropertyValue(name: string, value: string): void {
+    this.rootElement.style.setProperty(name, value);
   }
 }

From f5826e14346edde0fb7a79fc8046d1a7d8235fe0 Mon Sep 17 00:00:00 2001
From: Dzhavat Ushev <dzu@energinet.dk>
Date: Fri, 25 Aug 2023 10:28:27 +0200
Subject: [PATCH 2/2] feat(dh): add GLN/EIC to actor drawer headline (#1983)

---
 .../src/lib/drawer/dh-actor-drawer.component.html               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html b/libs/dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html
index ea65904551..e5a6936919 100644
--- a/libs/dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html
+++ b/libs/dh/market-participant/actors/feature-actors/src/lib/drawer/dh-actor-drawer.component.html
@@ -21,7 +21,7 @@
     </watt-drawer-topbar>
 
     <watt-drawer-heading>
-      <h2 class="actor-heading">{{ actor?.name }}</h2>
+      <h2 class="actor-heading">{{ actor?.glnOrEicNumber }} {{ actor?.name }}</h2>
 
       <div class="actor-metadata">
         <div class="actor-metadata__item">