From 661ab5b76f9188238155cdf7bb0ea3922577c71e Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Thu, 21 Dec 2023 17:54:32 +0200
Subject: [PATCH] UI: widget action dialog refactoring and improvements

---
 .../widget-action-dialog.component.html       |  1 +
 .../action/widget-action-dialog.component.ts  | 65 ++++++++++++++-----
 2 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
index 7903388d84..57a21b6807 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.html
@@ -97,6 +97,7 @@
                    #dashboardStateInput
                    formControlName="targetDashboardStateId"
                    [required]="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState"
+                   (focusin)="onFocus()"
                    [matAutocomplete]="targetDashboardStateAutocomplete">
             <button *ngIf="actionTypeFormGroup.get('targetDashboardStateId').value"
                     type="button"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 0aeed84e5e..268b2024e3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -28,7 +28,7 @@ import {
   ValidatorFn,
   Validators
 } from '@angular/forms';
-import { Observable, of, Subscription } from 'rxjs';
+import { Observable, of, Subject, Subscription } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -43,7 +43,7 @@ import {
   WidgetActionType,
   widgetActionTypeTranslationMap
 } from '@shared/models/widget.models';
-import { map, mergeMap, startWith, tap } from 'rxjs/operators';
+import { map, mergeMap, startWith, takeUntil, tap } from 'rxjs/operators';
 import { DashboardService } from '@core/http/dashboard.service';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
@@ -88,6 +88,10 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
 
   @ViewChild('mobileActionEditor', {static: false}) mobileActionEditor: MobileActionEditorComponent;
 
+  private destroy$ = new Subject<void>();
+
+  private dashboard: Dashboard;
+
   widgetActionFormGroup: UntypedFormGroup;
   actionTypeFormGroup: UntypedFormGroup;
   actionTypeFormGroupSubscriptions: Subscription[] = [];
@@ -156,18 +160,30 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       this.fb.control(this.action.type, [Validators.required]));
     this.updateShowWidgetActionForm();
     this.updateActionTypeFormGroup(this.action.type, this.action);
-    this.widgetActionFormGroup.get('type').valueChanges.subscribe((type: WidgetActionType) => {
+    this.widgetActionFormGroup.get('type').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((type: WidgetActionType) => {
       this.updateActionTypeFormGroup(type);
     });
-    this.widgetActionFormGroup.get('actionSourceId').valueChanges.subscribe(() => {
+    this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.widgetActionFormGroup.get('name').updateValueAndValidity();
       this.updateShowWidgetActionForm();
     });
-    this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.subscribe(() => {
+    this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.updateShowWidgetActionForm();
     });
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+    super.ngOnDestroy();
+  }
+
   displayShowWidgetActionForm(): boolean {
     return !!this.data.actionsData.actionSources[this.widgetActionFormGroup.get('actionSourceId').value]?.hasShowCondition;
   }
@@ -235,8 +251,10 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
               );
               this.updateStateDisplayTypeFormGroup(displayType, action);
               this.actionTypeFormGroupSubscriptions.push(
-                this.actionTypeFormGroup.get('stateDisplayType').valueChanges.subscribe((displayTypeValue: stateDisplayType) => {
-                    this.updateStateDisplayTypeFormGroup(displayTypeValue);
+                this.actionTypeFormGroup.get('stateDisplayType').valueChanges.pipe(
+                  takeUntil(this.destroy$)
+                ).subscribe((displayTypeValue: stateDisplayType) => {
+                  this.updateStateDisplayTypeFormGroup(displayTypeValue);
                 })
               );
             }
@@ -340,26 +358,34 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   }
 
   private setupSelectedDashboardStateIds() {
-    const dashboardControl = this.actionTypeFormGroup.get('targetDashboardId');
-
     this.selectedDashboardStateIds =
-      dashboardControl.valueChanges.pipe(
-        startWith(dashboardControl.value),
-        tap(() => {
+      this.actionTypeFormGroup.get('targetDashboardId').valueChanges.pipe(
+        tap((dashboardId) => {
+          if (!dashboardId) {
+            this.actionTypeFormGroup.get('targetDashboardStateId')
+              .patchValue('', {emitEvent: true});
+          }
+
           this.targetDashboardStateSearchText = '';
         }),
         mergeMap((dashboardId) => {
           if (dashboardId) {
-            return this.dashboardService.getDashboard(dashboardId);
+            if (this.dashboard?.id.id === dashboardId) {
+              return of(this.dashboard);
+            } else {
+              return this.dashboardService.getDashboard(dashboardId);
+            }
           } else {
             return of(null);
           }
         }),
         map((dashboard: Dashboard) => {
           if (dashboard) {
-            dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard);
-            const states = dashboard.configuration.states;
-            return Object.keys(states);
+            if (this.dashboard?.id.id !== dashboard.id.id) {
+              this.dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard);
+            }
+
+            return Object.keys(this.dashboard.configuration.states);
           } else {
             return [];
           }
@@ -373,7 +399,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       .pipe(
         startWith(''),
         map(value => value ? value : ''),
-        mergeMap(name => this.fetchDashboardStates(name) )
+        mergeMap(name => this.fetchDashboardStates(name)),
+        takeUntil(this.destroy$)
       );
   }
 
@@ -463,6 +490,10 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     }
   }
 
+  onFocus(): void {
+    this.actionTypeFormGroup.get('targetDashboardId').updateValueAndValidity({onlySelf: true, emitEvent: true});
+  }
+
   cancel(): void {
     this.dialogRef.close(null);
   }