From 2f7bf413ede66570fd8839429a3670b559e5f10b Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Thu, 27 Jun 2019 22:27:42 +0200
Subject: [PATCH] V8: Make dialogs prompt to discard changes on outside click
 and ESC (#5740)

---
 .../umbcontextdialog.directive.js             | 47 ++++++++++++++++---
 .../content/content.protect.controller.js     |  6 +++
 .../content/content.rights.controller.js      |  1 +
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js
index 99a5dad58c..904a2ce8ca 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbcontextdialog/umbcontextdialog.directive.js
@@ -1,16 +1,20 @@
 (function() {
     'use strict';
 
-    function UmbContextDialog(navigationService, keyboardService) {
+    function UmbContextDialog(navigationService, keyboardService, localizationService, overlayService) {
 
         function link($scope) {
-            
-            $scope.outSideClick = function() {
-                navigationService.hideDialog();
-            }
 
-            keyboardService.bind("esc", function() {
-                navigationService.hideDialog();
+            $scope.dialog = {
+                confirmDiscardChanges: false
+            };
+
+            $scope.outSideClick = function() {
+                hide();
+            };
+
+            keyboardService.bind("esc", function () {
+                hide();
             });
 
             //ensure to unregister from all events!
@@ -18,6 +22,35 @@
                 keyboardService.unbind("esc");
             });
 
+            function hide() {
+                if ($scope.dialog.confirmDiscardChanges) {
+                    localizationService.localizeMany(["prompt_unsavedChanges", "prompt_unsavedChangesWarning", "prompt_discardChanges", "prompt_stay"]).then(
+                        function (values) {
+                            var overlay = {
+                                "view": "default",
+                                "title": values[0],
+                                "content": values[1],
+                                "disableBackdropClick": true,
+                                "disableEscKey": true,
+                                "submitButtonLabel": values[2],
+                                "closeButtonLabel": values[3],
+                                submit: function () {
+                                    overlayService.close();
+                                    navigationService.hideDialog();
+                                },
+                                close: function () {
+                                    overlayService.close();
+                                }
+                            };
+
+                            overlayService.open(overlay);
+                        }
+                    );
+                }
+                else {
+                    navigationService.hideDialog();
+                }
+            }
         }
 
         var directive = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
index 8d80f308ab..fcd0294849 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.protect.controller.js
@@ -102,6 +102,7 @@
                         };
                     });
                     navigationService.syncTree({ tree: "content", path: $scope.currentNode.path, forceReload: true });
+                    $scope.dialog.confirmDiscardChanges = true;
                 }, function (error) {
                     vm.error = error;
                     vm.buttonState = "error";
@@ -117,6 +118,7 @@
 
         function toggle(group) {
             group.selected = !group.selected;
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         function pickGroup() {
@@ -137,6 +139,7 @@
                         });
                     editorService.close();
                     navigationService.allowHideDialog(true);
+                    $scope.dialog.confirmDiscardChanges = true;
                 },
                 close: function() {
                     editorService.close();
@@ -147,6 +150,7 @@
 
         function removeGroup(group) {
             vm.groups = _.reject(vm.groups, function(g) { return g.id === group.id });
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         function pickMember() {
@@ -186,6 +190,7 @@
                         $q.all(promises).then(function() {
                             vm.loading = false;
                         });
+                        $scope.dialog.confirmDiscardChanges = true;
                     }
                 },
                 close: function () {
@@ -219,6 +224,7 @@
                     }
                     editorService.close();
                     navigationService.allowHideDialog(true);
+                    $scope.dialog.confirmDiscardChanges = true;
                 },
                 close: function () {
                     editorService.close();
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
index 60a8694eca..0e40fc2e6c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
@@ -93,6 +93,7 @@
         function setPermissions(group) {
             assignGroupPermissions(group);  
             setViewSate("manageGroups");
+            $scope.dialog.confirmDiscardChanges = true;
         }
 
         /**