From c5fa20ce42aa7421fca004c082c18f5c1d4ae6a1 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <alec@livefront.com>
Date: Wed, 16 Oct 2024 11:51:47 -0500
Subject: [PATCH] Adjust overlay position of EnvironmentSelectorComponent for
 new layout.

Since the switcher is located at the bottom of the screen we need to position it up above the trigger button so that it is not cut off.
---
 apps/browser/src/popup/app-routing.module.ts  | 27 ++++++++++++++++-
 apps/desktop/src/app/app-routing.module.ts    | 10 +++++++
 .../environment-selector.component.ts         | 30 ++++++++++++++-----
 3 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 8b8d393e0ff..5b78851edc2 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -436,6 +436,17 @@ const routes: Routes = [
               path: "",
               component: EnvironmentSelectorComponent,
               outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+                test: "test",
+              },
             },
           ],
         },
@@ -467,7 +478,21 @@ const routes: Routes = [
           children: [
             { path: "", component: LoginComponent },
             { path: "", component: LoginSecondaryContentComponent, outlet: "secondary" },
-            { path: "", component: EnvironmentSelectorComponent, outlet: "environment-selector" },
+            {
+              path: "",
+              component: EnvironmentSelectorComponent,
+              outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+              },
+            },
           ],
         },
       ],
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index 0851ee6a841..add3f2ab749 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -188,6 +188,16 @@ const routes: Routes = [
               path: "",
               component: EnvironmentSelectorComponent,
               outlet: "environment-selector",
+              data: {
+                overlayPosition: [
+                  {
+                    originX: "start",
+                    originY: "top",
+                    overlayX: "start",
+                    overlayY: "bottom",
+                  },
+                ],
+              },
             },
           ],
         },
diff --git a/libs/angular/src/auth/components/environment-selector.component.ts b/libs/angular/src/auth/components/environment-selector.component.ts
index 9e811d02af5..9a9431db752 100644
--- a/libs/angular/src/auth/components/environment-selector.component.ts
+++ b/libs/angular/src/auth/components/environment-selector.component.ts
@@ -1,8 +1,8 @@
 import { animate, state, style, transition, trigger } from "@angular/animations";
 import { ConnectedPosition } from "@angular/cdk/overlay";
-import { Component, EventEmitter, Output } from "@angular/core";
-import { Router } from "@angular/router";
-import { Observable, map } from "rxjs";
+import { Component, EventEmitter, Output, Input, OnInit, OnDestroy } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { Observable, map, Subject, takeUntil } from "rxjs";
 
 import {
   EnvironmentService,
@@ -34,11 +34,9 @@ import {
     ]),
   ],
 })
-export class EnvironmentSelectorComponent {
+export class EnvironmentSelectorComponent implements OnInit, OnDestroy {
   @Output() onOpenSelfHostedSettings = new EventEmitter();
-  protected isOpen = false;
-  protected ServerEnvironmentType = Region;
-  protected overlayPosition: ConnectedPosition[] = [
+  @Input() overlayPosition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",
@@ -47,6 +45,8 @@ export class EnvironmentSelectorComponent {
     },
   ];
 
+  protected isOpen = false;
+  protected ServerEnvironmentType = Region;
   protected availableRegions = this.environmentService.availableRegions();
   protected selectedRegion$: Observable<RegionConfig | undefined> =
     this.environmentService.environment$.pipe(
@@ -54,11 +54,27 @@ export class EnvironmentSelectorComponent {
       map((r) => this.availableRegions.find((ar) => ar.key === r)),
     );
 
+  private destroy$ = new Subject<void>();
+
   constructor(
     protected environmentService: EnvironmentService,
     protected router: Router,
+    private route: ActivatedRoute,
   ) {}
 
+  ngOnInit() {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
+      if (data && data["overlayPosition"]) {
+        this.overlayPosition = data["overlayPosition"];
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   async toggle(option: Region) {
     this.isOpen = !this.isOpen;
     if (option === null) {