From 619651ca553d83d1df7eabd6f5405f94aad88a88 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Wed, 6 Nov 2024 13:17:59 -0600
Subject: [PATCH] [PM-13818] Allow user to edit self-hosted url during
 registration (#11790)

* Trigger self hosted settings dialog on select close

* Simplify triggering self hosted env config dialog

* Always emit selected value

* Update variable naming of lastSelectedValue to userSelectedValue to better reflect purpose

* Add comment for userSelectedValue variable

* Remove userSelectedValue and simply emit a closed event

* Remove passing selectedRegion in closed event
---
 .../registration-env-selector.component.html  |  2 +-
 .../registration-env-selector.component.ts    | 26 +++++++++++++------
 .../src/select/select.component.html          |  1 +
 .../components/src/select/select.component.ts |  8 ++++++
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
index 5135fb61922..35bb4236c56 100644
--- a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="formGroup" *ngIf="!hideEnvSelector">
   <bit-form-field>
     <bit-label>{{ "creatingAccountOn" | i18n }}</bit-label>
-    <bit-select formControlName="selectedRegion">
+    <bit-select formControlName="selectedRegion" (closed)="onSelectClosed()">
       <bit-option
         *ngFor="let regionConfig of availableRegionConfigs"
         [value]="regionConfig"
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
index 0fe88552653..e2407a65800 100644
--- a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
+++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts
@@ -109,6 +109,9 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
       .subscribe();
   }
 
+  /**
+   * Listens for changes to the selected region and updates the form value and emits the selected region.
+   */
   private listenForSelectedRegionChanges() {
     this.selectedRegion.valueChanges
       .pipe(
@@ -124,16 +127,12 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
               return of(null);
             }
 
-            if (selectedRegion === Region.SelfHosted) {
-              return from(SelfHostedEnvConfigDialogComponent.open(this.dialogService)).pipe(
-                tap((result: boolean | undefined) =>
-                  this.handleSelfHostedEnvConfigDialogResult(result, prevSelectedRegion),
-                ),
-              );
+            if (selectedRegion !== Region.SelfHosted) {
+              this.selectedRegionChange.emit(selectedRegion);
+              return from(this.environmentService.setEnvironment(selectedRegion.key));
             }
 
-            this.selectedRegionChange.emit(selectedRegion);
-            return from(this.environmentService.setEnvironment(selectedRegion.key));
+            return of(null);
           },
         ),
         takeUntil(this.destroy$),
@@ -170,6 +169,17 @@ export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Handles the event when the select is closed.
+   * If the selected region is self-hosted, opens the self-hosted environment settings dialog.
+   */
+  protected async onSelectClosed() {
+    if (this.selectedRegion.value === Region.SelfHosted) {
+      const result = await SelfHostedEnvConfigDialogComponent.open(this.dialogService);
+      return this.handleSelfHostedEnvConfigDialogResult(result, this.selectedRegion.value);
+    }
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
diff --git a/libs/components/src/select/select.component.html b/libs/components/src/select/select.component.html
index f334e67d691..848692526a1 100644
--- a/libs/components/src/select/select.component.html
+++ b/libs/components/src/select/select.component.html
@@ -7,6 +7,7 @@
   (blur)="onBlur()"
   [labelForId]="labelForId"
   [clearable]="false"
+  (close)="onClose()"
   appendTo="body"
 >
   <ng-template ng-option-tmp let-item="item">
diff --git a/libs/components/src/select/select.component.ts b/libs/components/src/select/select.component.ts
index 2d900353a69..d189f1ab52c 100644
--- a/libs/components/src/select/select.component.ts
+++ b/libs/components/src/select/select.component.ts
@@ -7,6 +7,8 @@ import {
   QueryList,
   Self,
   ViewChild,
+  Output,
+  EventEmitter,
 } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 import { NgSelectComponent } from "@ng-select/ng-select";
@@ -31,6 +33,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   /** Optional: Options can be provided using an array input or using `bit-option` */
   @Input() items: Option<T>[] = [];
   @Input() placeholder = this.i18nService.t("selectPlaceholder");
+  @Output() closed = new EventEmitter();
 
   protected selectedValue: T;
   protected selectedOption: Option<T>;
@@ -156,4 +159,9 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   private findSelectedOption(items: Option<T>[], value: T): Option<T> | undefined {
     return items.find((item) => item.value === value);
   }
+
+  /**Emits the closed event. */
+  protected onClose() {
+    this.closed.emit();
+  }
 }