Merge pull request #9869 from Dmitriymush/bug-fix/action-navigate-to-dashboard

Fixed stateId autocomplete and added improvements for widget action dialog

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"

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;
   }
@@ -225,7 +241,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
               this.fb.control(action ? action.targetDashboardId : null,
                 [Validators.required])
             );
-            this.setupSelectedDashboardStateIds(action ? action.targetDashboardId : null);
+            this.setupSelectedDashboardStateIds();
           } else {
             if (type === WidgetActionType.openDashboardState) {
               const displayType = this.getStateDisplayType(action);
@@ -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.actionTypeFormGroup.get('stateDisplayType').valueChanges.pipe(
-                    this.updateStateDisplayTypeFormGroup(displayTypeValue);
+                  takeUntil(this.destroy$)
+                ).subscribe((displayTypeValue: stateDisplayType) => {
+                  this.updateStateDisplayTypeFormGroup(displayTypeValue);
                 })
               );
             }
@@ -339,25 +357,35 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     return res;
   }
 
-  private setupSelectedDashboardStateIds(targetDashboardId?: string) {
+  private setupSelectedDashboardStateIds() {
     this.selectedDashboardStateIds =
       this.actionTypeFormGroup.get('targetDashboardId').valueChanges.pipe(
-        // startWith<string>(targetDashboardId),
+        tap((dashboardId) => {
-        tap(() => {
+          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);
+            if (this.dashboard?.id.id !== dashboard.id.id) {
-            const states = dashboard.configuration.states;
+              this.dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard);
-            return Object.keys(states);
+            }
+
+            return Object.keys(this.dashboard.configuration.states);
           } else {
             return [];
           }
@@ -371,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$)
       );
   }
 
@@ -461,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);
   }