feat(app): Prevent web editor related views from being accidentally closed (#4715)

* feat(app): when leaving a view with unsaved changed, a modal prompt the user with a confirmation message

feat(app): when leaving a view with unsaved changes, a modal prompt the user with a confirmation message

* feat(app/web-editor): fix the modal behaviour when editing a stack details

* feat(app/web-editor): add a reusable function confirmWebEditorDiscard in modal service

* feat(docker/stack): fix missing dependency

app/portainer/services/modalService.js

@@ -37,6 +37,23 @@ angular.module('portainer.app').factory('ModalService', [
       });
     };
 
+    service.confirmWebEditorDiscard = confirmWebEditorDiscard;
+    function confirmWebEditorDiscard() {
+      const options = {
+        title: 'Are you sure ?',
+        message: 'You currently have unsaved changes in the editor. Are you sure you want to leave?',
+        buttons: {
+          confirm: {
+            label: 'Yes',
+            className: 'btn-danger',
+          },
+        },
+      };
+      return new Promise((resolve) => {
+        service.confirm({ ...options, callback: (confirmed) => resolve(confirmed) });
+      });
+    }
+
     service.confirmAsync = confirmAsync;
     function confirmAsync(options) {
       return new Promise((resolve) => {

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js

@@ -3,8 +3,20 @@ import { AccessControlFormData } from 'Portainer/components/accessControlForm/po
 
 class CreateCustomTemplateViewController {
   /* @ngInject */
-  constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager) {
-    Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager });
+  constructor($async, $state, $window, Authentication, ModalService, CustomTemplateService, FormValidator, Notifications, ResourceControlService, StackService, StateManager) {
+    Object.assign(this, {
+      $async,
+      $state,
+      $window,
+      Authentication,
+      ModalService,
+      CustomTemplateService,
+      FormValidator,
+      Notifications,
+      ResourceControlService,
+      StackService,
+      StateManager,
+    });
 
     this.formValues = {
       Title: '',
@@ -29,6 +41,7 @@ class CreateCustomTemplateViewController {
       actionInProgress: false,
       fromStack: false,
       loading: true,
+      isEditorDirty: false,
     };
     this.templates = [];
 
@@ -73,6 +86,7 @@ class CreateCustomTemplateViewController {
       await this.ResourceControlService.applyResourceControl(userId, accessControlData, customTemplate.ResourceControl);
 
       this.Notifications.success('Custom template successfully created');
+      this.state.isEditorDirty = false;
       this.$state.go('docker.templates.custom');
     } catch (err) {
       this.Notifications.error('Failure', err, 'A template with the same name already exists');
@@ -133,6 +147,7 @@ class CreateCustomTemplateViewController {
 
   editorUpdate(cm) {
     this.formValues.FileContent = cm.getValue();
+    this.state.isEditorDirty = true;
   }
 
   async $onInit() {
@@ -161,6 +176,18 @@ class CreateCustomTemplateViewController {
     }
 
     this.state.loading = false;
+
+    this.$window.onbeforeunload = () => {
+      if (this.state.Method === 'editor' && this.formValues.FileContent && this.state.isEditorDirty) {
+        return '';
+      }
+    };
+  }
+
+  async uiCanExit() {
+    if (this.state.Method === 'editor' && this.formValues.FileContent && this.state.isEditorDirty) {
+      return this.ModalService.confirmWebEditorDiscard();
+    }
   }
 }
 

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js

@@ -5,12 +5,13 @@ import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resou
 
 class EditCustomTemplateViewController {
   /* @ngInject */
-  constructor($async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
-    Object.assign(this, { $async, $state, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
+  constructor($async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService) {
+    Object.assign(this, { $async, $state, $window, ModalService, Authentication, CustomTemplateService, FormValidator, Notifications, ResourceControlService });
 
     this.formValues = null;
     this.state = {
       formValidationError: '',
+      isEditorDirty: false,
     };
     this.templates = [];
 
@@ -32,6 +33,7 @@ class EditCustomTemplateViewController {
       ]);
       template.FileContent = file;
       this.formValues = template;
+      this.oldFileContent = this.formValues.FileContent;
       this.formValues.ResourceControl = new ResourceControlViewModel(template.ResourceControl);
       this.formValues.AccessControlData = new AccessControlFormData();
     } catch (err) {
@@ -84,6 +86,7 @@ class EditCustomTemplateViewController {
       await this.ResourceControlService.applyResourceControl(userId, this.formValues.AccessControlData, this.formValues.ResourceControl);
 
       this.Notifications.success('Custom template successfully updated');
+      this.state.isEditorDirty = false;
       this.$state.go('docker.templates.custom');
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to update custom template');
@@ -93,7 +96,14 @@ class EditCustomTemplateViewController {
   }
 
   editorUpdate(cm) {
-    this.formValues.fileContent = cm.getValue();
+    this.formValues.FileContent = cm.getValue();
+    this.state.isEditorDirty = true;
+  }
+
+  async uiCanExit() {
+    if (this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
+      return this.ModalService.confirmWebEditorDiscard();
+    }
   }
 
   async $onInit() {
@@ -104,6 +114,12 @@ class EditCustomTemplateViewController {
     } catch (err) {
       this.Notifications.error('Failure loading', err, 'Failed loading custom templates');
     }
+
+    this.$window.onbeforeunload = () => {
+      if (this.formValues.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
+        return '';
+      }
+    };
   }
 }
 

app/portainer/views/stacks/create/createStackController.js

@@ -9,6 +9,8 @@ angular
     $scope,
     $state,
     $async,
+    $window,
+    ModalService,
     StackService,
     Authentication,
     Notifications,
@@ -42,6 +44,13 @@ angular
       StackType: null,
       editorYamlValidationError: '',
       uploadYamlValidationError: '',
+      isEditorDirty: false,
+    };
+
+    $window.onbeforeunload = () => {
+      if ($scope.state.Method === 'editor' && $scope.formValues.StackFileContent && $scope.state.isEditorDirty) {
+        return '';
+      }
     };
 
     $scope.addEnvironmentVariable = function () {
@@ -148,6 +157,7 @@ angular
         })
         .then(function success() {
           Notifications.success('Stack successfully deployed');
+          $scope.state.isEditorDirty = false;
           $state.go('docker.stacks');
         })
         .catch(function error(err) {
@@ -161,6 +171,7 @@ angular
     $scope.editorUpdate = function (cm) {
       $scope.formValues.StackFileContent = cm.getValue();
       $scope.state.editorYamlValidationError = StackHelper.validateYAML($scope.formValues.StackFileContent, $scope.containerNames);
+      $scope.state.isEditorDirty = true;
     };
 
     async function onFileLoadAsync(event) {
@@ -221,5 +232,11 @@ angular
       }
     }
 
+    this.uiCanExit = async function () {
+      if ($scope.state.Method === 'editor' && $scope.formValues.StackFileContent && $scope.state.isEditorDirty) {
+        return ModalService.confirmWebEditorDiscard();
+      }
+    };
+
     initView();
   });

app/portainer/views/stacks/edit/stackController.js

@@ -3,6 +3,7 @@ angular.module('portainer.app').controller('StackController', [
   '$q',
   '$scope',
   '$state',
+  '$window',
   '$transition$',
   'StackService',
   'NodeService',
@@ -18,11 +19,13 @@ angular.module('portainer.app').controller('StackController', [
   'GroupService',
   'ModalService',
   'StackHelper',
+  'ContainerHelper',
   function (
     $async,
     $q,
     $scope,
     $state,
+    $window,
     $transition$,
     StackService,
     NodeService,
@@ -46,6 +49,7 @@ angular.module('portainer.app').controller('StackController', [
       externalStack: false,
       showEditorTab: false,
       yamlError: false,
+      isEditorDirty: false,
     };
 
     $scope.formValues = {
@@ -53,6 +57,12 @@ angular.module('portainer.app').controller('StackController', [
       Endpoint: null,
     };
 
+    $window.onbeforeunload = () => {
+      if ($scope.stackFileContent && $scope.state.isEditorDirty) {
+        return '';
+      }
+    };
+
     $scope.duplicateStack = function duplicateStack(name, endpointId) {
       var stack = $scope.stack;
       var env = FormHelper.removeInvalidEnvVars(stack.Env);
@@ -171,6 +181,7 @@ angular.module('portainer.app').controller('StackController', [
       StackService.updateStack(stack, stackFile, env, prune)
         .then(function success() {
           Notifications.success('Stack successfully deployed');
+          $scope.state.isEditorDirty = false;
           $state.reload();
         })
         .catch(function error(err) {
@@ -190,8 +201,12 @@ angular.module('portainer.app').controller('StackController', [
     };
 
     $scope.editorUpdate = function (cm) {
+      if ($scope.stackFileContent !== cm.getValue()) {
+        $scope.state.isEditorDirty = true;
+      }
       $scope.stackFileContent = cm.getValue();
       $scope.state.yamlError = StackHelper.validateYAML($scope.stackFileContent, $scope.containerNames);
+      $scope.state.isEditorDirty = true;
     };
 
     $scope.stopStack = stopStack;
@@ -369,6 +384,12 @@ angular.module('portainer.app').controller('StackController', [
         });
     }
 
+    this.uiCanExit = async function () {
+      if ($scope.stackFileContent && $scope.state.isEditorDirty) {
+        return ModalService.confirmWebEditorDiscard();
+      }
+    };
+
     async function initView() {
       var stackName = $transition$.params().name;
       $scope.stackName = stackName;