From 35d40a88ebed382a09cfa1686b14fe5f725034be Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 23 Oct 2023 14:31:02 +0300
Subject: [PATCH] UI: Improved show confirm on exit dialog in widget editor

---
 .../app/core/guards/confirm-on-exit.guard.ts  | 11 ++++++-
 .../dashboard-page.component.ts               | 11 +++++++
 .../pages/widget/widget-editor.component.ts   | 33 +++++++++++++++++--
 .../app/shared/models/window-message.model.ts |  3 +-
 .../assets/locale/locale.constant-en_US.json  |  1 +
 5 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts b/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
index f3a72e7aae..e28578fe61 100644
--- a/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
+++ b/ui-ngx/src/app/core/guards/confirm-on-exit.guard.ts
@@ -28,10 +28,12 @@ import { isDefined } from '../utils';
 
 export interface HasConfirmForm {
   confirmForm(): UntypedFormGroup;
+  confirmOnExitMessage?: string;
 }
 
 export interface HasDirtyFlag {
   isDirty: boolean;
+  confirmOnExitMessage?: string;
 }
 
 @Injectable({
@@ -66,9 +68,10 @@ export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm & HasDir
         isDirty = component.isDirty;
       }
       if (isDirty) {
+        const message = this.getMessage(component);
         return this.dialogService.confirm(
           this.translate.instant('confirm-on-exit.title'),
-          this.translate.instant('confirm-on-exit.html-message')
+          message
         ).pipe(
           map((dialogResult) => {
             if (dialogResult) {
@@ -85,4 +88,10 @@ export class ConfirmOnExitGuard implements CanDeactivate<HasConfirmForm & HasDir
     }
     return true;
   }
+
+  private getMessage(component: HasConfirmForm & HasDirtyFlag): string {
+    return component.confirmOnExitMessage
+      ? component.confirmOnExitMessage
+      : this.translate.instant('confirm-on-exit.html-message');
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index af76812fa1..6f6e39c52c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -956,6 +956,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   public toggleDashboardEditMode() {
     this.setEditMode(!this.isEdit, true);
+    this.notifyDashboardToggleEditMode();
   }
 
   public saveDashboard() {
@@ -1063,6 +1064,16 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.dashboardCtx.aliasController.updateFilters(this.dashboard.configuration.filters);
   }
 
+  private notifyDashboardToggleEditMode() {
+    if (this.widgetEditMode) {
+      const message: WindowMessage = {
+        type: 'widgetEditModeToggle',
+        data: this.isEdit
+      };
+      this.window.parent.postMessage(JSON.stringify(message), '*');
+    }
+  }
+
   private notifyDashboardUpdated() {
     if (this.widgetEditMode) {
       const widget = this.layouts.main.layoutCtx.widgets.widgetByIndex(0);
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
index ea9a6bbcb2..7fcf632d14 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
@@ -122,7 +122,19 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   widget: WidgetInfo;
   origWidget: WidgetInfo;
 
-  isDirty = false;
+  private isEditModeWidget = false;
+  private _isDirty = false;
+
+  get isDirty(): boolean {
+    return this._isDirty || this.isEditModeWidget;
+  }
+
+  set isDirty(value: boolean) {
+    if (!value) {
+      this.isEditModeWidget = false;
+    }
+    this._isDirty = value;
+  }
 
   fullscreen = false;
   htmlFullscreen = false;
@@ -450,6 +462,10 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
           break;
         case 'widgetEditUpdated':
           this.onWidgetEditUpdated(message.data);
+          this.onWidgetEditModeToggled(false);
+          break;
+        case 'widgetEditModeToggle':
+          this.onWidgetEditModeToggled(message.data);
           break;
       }
     }
@@ -486,6 +502,10 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.isDirty = true;
   }
 
+  private onWidgetEditModeToggled(mode: boolean) {
+    this.isEditModeWidget = mode;
+  }
+
   private onWidgetException(details: ExceptionData) {
     if (!this.gotError) {
       this.gotError = true;
@@ -639,7 +659,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
   }
 
   undoDisabled(): boolean {
-    return !this.isDirty
+    return !this._isDirty
     || !this.iframeWidgetEditModeInited
     || this.saveWidgetPending
     || this.saveWidgetAsPending;
@@ -647,7 +667,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
 
   saveDisabled(): boolean {
     return this.isReadOnly
-      || !this.isDirty
+      || !this._isDirty
       || !this.iframeWidgetEditModeInited
       || this.saveWidgetPending
       || this.saveWidgetAsPending;
@@ -799,4 +819,11 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     this.widget.defaultConfig = JSON.stringify(config);
     this.isDirty = true;
   }
+
+  get confirmOnExitMessage(): string {
+    if (this.isEditModeWidget && !this._isDirty) {
+      return this.translate.instant('widget.confirm-to-exit-editor-html');
+    }
+    return '';
+  }
 }
diff --git a/ui-ngx/src/app/shared/models/window-message.model.ts b/ui-ngx/src/app/shared/models/window-message.model.ts
index f720f2692f..5e26283b47 100644
--- a/ui-ngx/src/app/shared/models/window-message.model.ts
+++ b/ui-ngx/src/app/shared/models/window-message.model.ts
@@ -14,7 +14,8 @@
 /// limitations under the License.
 ///
 
-export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage' | 'reloadUserMessage' | 'toggleDashboardLayout';
+export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage'
+  | 'reloadUserMessage' | 'toggleDashboardLayout' | 'widgetEditModeToggle';
 
 export interface WindowMessage {
   type: WindowMessageType;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index b4c0f07c85..9c067c0c35 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4759,6 +4759,7 @@
         "no-widgets-text": "No widgets found",
         "management": "Widget management",
         "editor": "Widget Editor",
+        "confirm-to-exit-editor-html": "You have unsaved default widget settings.<br>Are you sure you want to leave this page?",
         "widget-type-not-found": "Problem loading widget configuration.<br>Probably associated\n    widget type was removed.",
         "widget-type-load-error": "Widget wasn't loaded due to the following errors:",
         "remove": "Remove widget",