[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

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"

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();

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">

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();
+  }
 }