UI: refactoring of widget action component

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/action/widget-action.component.ts

@@ -34,7 +34,7 @@ import {
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetActionCallbacks } from '@home/components/widget/action/manage-widget-actions.component.models';
 import { map, mergeMap, share, startWith, takeUntil, tap } from 'rxjs/operators';
-import { Observable, of, Subject, Subscription } from 'rxjs';
+import { Observable, of, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { DashboardService } from '@core/http/dashboard.service';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
@@ -186,7 +186,7 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
   }
 
   onDashboardStateInputFocus(): void {
-    this.actionTypeFormGroup.get('targetDashboardId').updateValueAndValidity({onlySelf: true, emitEvent: true});
+    this.actionTypeFormGroup.get('targetDashboardStateId').updateValueAndValidity({onlySelf: true, emitEvent: true});
   }
 
   stateDisplayTypeName(displayType: stateDisplayType): string {
@@ -228,16 +228,16 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
             this.fb.control(action ? action.stateEntityParamName : null, [])
           );
           if (type === WidgetActionType.openDashboard) {
+            const targetDashboardId = action ? action.targetDashboardId : null;
             this.actionTypeFormGroup.addControl(
               'openNewBrowserTab',
               this.fb.control(action ? action.openNewBrowserTab : false, [])
             );
             this.actionTypeFormGroup.addControl(
               'targetDashboardId',
-              this.fb.control(action ? action.targetDashboardId : null,
-                [Validators.required])
+              this.fb.control(targetDashboardId, [Validators.required])
             );
-            this.setupSelectedDashboardStateIds();
+            this.setupSelectedDashboardStateIds(targetDashboardId);
           } else {
             if (type === WidgetActionType.openDashboardState) {
               const displayType = this.getStateDisplayType(action);
@@ -367,9 +367,10 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
     );
   }
 
-  private setupSelectedDashboardStateIds() {
+  private setupSelectedDashboardStateIds(targetDashboardId: string | null) {
     this.selectedDashboardStateIds =
       this.actionTypeFormGroup.get('targetDashboardId').valueChanges.pipe(
+        startWith(targetDashboardId),
         tap((dashboardId) => {
           if (!dashboardId) {
             this.actionTypeFormGroup.get('targetDashboardStateId')
@@ -400,7 +401,12 @@ export class WidgetActionComponent implements ControlValueAccessor, OnInit, Vali
             return [];
           }
         }),
-        share()
+        share({
+          connector: () => new ReplaySubject(1),
+          resetOnError: false,
+          resetOnComplete: false,
+          resetOnRefCountZero: false
+        })
       );
   }