[PM-13818] Allow user to edit self-hosted url during registration

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($event)">
       <bit-option
         *ngFor="let regionConfig of availableRegionConfigs"
         [value]="regionConfig"

libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts

@@ -17,6 +17,11 @@
 
 import { SelfHostedEnvConfigDialogComponent } from "../../self-hosted-env-config-dialog/self-hosted-env-config-dialog.component";
 
+/**
+ * Type for the selected region in the registration env selector.
+ */
+type RegionSelection = RegionConfig | Region.SelfHosted | null;
+
 /**
  * Component for selecting the environment to register with in the email verification registration flow.
  * Outputs the selected region to the parent component so it can respond as necessary.
@@ -109,6 +114,9 @@
       .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 +132,12 @@
               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 +174,17 @@
     }
   }
 
+  /**
+   * 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(selection: RegionSelection) {
+    if (selection === Region.SelfHosted) {
+      const result = await SelfHostedEnvConfigDialogComponent.open(this.dialogService);
+      return this.handleSelfHostedEnvConfigDialogResult(result, selection);
+    }
+  }
+
   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 @@
   QueryList,
   Self,
   ViewChild,
+  Output,
+  EventEmitter,
 } from "@angular/core";
 import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
 import { NgSelectComponent } from "@ng-select/ng-select";
@@ -31,10 +33,12 @@
   /** 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<T>();
 
   protected selectedValue: T;
   protected selectedOption: Option<T>;
   protected searchInputId = `bit-select-search-input-${nextId++}`;
+  protected userSelectedValue: T;
 
   private notifyOnChange?: (value: T) => void;
   private notifyOnTouched?: () => void;
@@ -100,6 +104,7 @@
       return;
     }
 
+    this.userSelectedValue = option?.value;
     this.notifyOnChange(option?.value);
   }
 
@@ -156,4 +161,11 @@
   private findSelectedOption(items: Option<T>[], value: T): Option<T> | undefined {
     return items.find((item) => item.value === value);
   }
+
+  /**
+   * Emits the last selected value when the select is closed.
+   */
+  protected onClose() {
+    this.closed.emit(this.userSelectedValue);
+  }
 }