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/kubernetes/views/configurations/create/createConfiguration.html

@@ -114,11 +114,13 @@
                 <a href="https://kubernetes.io/docs/concepts/configuration/secret/#secret-types" target="_blank">official documentation</a>.
               </div>
             </div>
+
             <kubernetes-configuration-data
               ng-if="ctrl.formValues"
               form-values="ctrl.formValues"
               is-valid="ctrl.state.isDataValid"
               is-creation="true"
+              is-editor-dirty="ctrl.state.isEditorDirty"
             ></kubernetes-configuration-data>
 
             <!-- actions -->

app/kubernetes/views/configurations/create/createConfigurationController.js

@@ -6,9 +6,11 @@ import KubernetesConfigurationHelper from 'Kubernetes/helpers/configurationHelpe
 
 class KubernetesCreateConfigurationController {
   /* @ngInject */
-  constructor($async, $state, Notifications, Authentication, KubernetesConfigurationService, KubernetesResourcePoolService, KubernetesNamespaceHelper) {
+  constructor($async, $state, $window, ModalService, Notifications, Authentication, KubernetesConfigurationService, KubernetesResourcePoolService, KubernetesNamespaceHelper) {
     this.$async = $async;
     this.$state = $state;
+    this.$window = $window;
+    this.ModalService = ModalService;
     this.Notifications = Notifications;
     this.Authentication = Authentication;
     this.KubernetesConfigurationService = KubernetesConfigurationService;
@@ -47,6 +49,7 @@ class KubernetesCreateConfigurationController {
       }
       await this.KubernetesConfigurationService.create(this.formValues);
       this.Notifications.success('Configuration succesfully created');
+      this.state.isEditorDirty = false;
       this.$state.go('kubernetes.configurations');
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to create configuration');
@@ -71,12 +74,19 @@ class KubernetesCreateConfigurationController {
     return this.$async(this.getConfigurationsAsync);
   }
 
+  async uiCanExit() {
+    if (!this.formValues.IsSimple && this.formValues.DataYaml && this.state.isEditorDirty) {
+      return this.ModalService.confirmWebEditorDiscard();
+    }
+  }
+
   async onInit() {
     this.state = {
       actionInProgress: false,
       viewReady: false,
       alreadyExist: false,
       isDataValid: true,
+      isEditorDirty: false,
     };
 
     this.formValues = new KubernetesConfigurationFormValues();
@@ -93,6 +103,12 @@ class KubernetesCreateConfigurationController {
     } finally {
       this.state.viewReady = true;
     }
+
+    this.$window.onbeforeunload = () => {
+      if (!this.formValues.IsSimple && this.formValues.DataYaml && this.state.isEditorDirty) {
+        return '';
+      }
+    };
   }
 
   $onInit() {

app/kubernetes/views/configurations/edit/configuration.html

@@ -82,6 +82,7 @@
               form-values="ctrl.formValues"
               is-valid="ctrl.state.isDataValid"
               is-creation="false"
+              is-editor-dirty="ctrl.state.isEditorDirty"
             ></kubernetes-configuration-data>
 
             <!-- actions -->

app/kubernetes/views/configurations/edit/configurationController.js

@@ -11,6 +11,7 @@ class KubernetesConfigurationController {
   constructor(
     $async,
     $state,
+    $window,
     clipboard,
     Notifications,
     LocalStorage,
@@ -25,6 +26,7 @@ class KubernetesConfigurationController {
   ) {
     this.$async = $async;
     this.$state = $state;
+    this.$window = $window;
     this.clipboard = clipboard;
     this.Notifications = Notifications;
     this.LocalStorage = LocalStorage;
@@ -143,6 +145,7 @@ class KubernetesConfigurationController {
       this.formValues.Id = this.configuration.Id;
       this.formValues.Name = this.configuration.Name;
       this.formValues.Type = this.configuration.Type;
+      this.oldDataYaml = this.formValues.DataYaml;
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retrieve configuration');
     } finally {
@@ -221,6 +224,12 @@ class KubernetesConfigurationController {
     });
   }
 
+  async uiCanExit() {
+    if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
+      return this.ModalService.confirmWebEditorDiscard();
+    }
+  }
+
   async onInit() {
     try {
       this.state = {
@@ -234,6 +243,7 @@ class KubernetesConfigurationController {
         activeTab: 0,
         currentName: this.$state.$current.name,
         isDataValid: true,
+        isEditorDirty: false,
       };
 
       this.state.activeTab = this.LocalStorage.getActiveTab('configuration');
@@ -252,6 +262,12 @@ class KubernetesConfigurationController {
     } finally {
       this.state.viewReady = true;
     }
+
+    this.$window.onbeforeunload = () => {
+      if (!this.formValues.IsSimple && this.formValues.DataYaml !== this.oldDataYaml && this.state.isEditorDirty) {
+        return '';
+      }
+    };
   }
 
   $onInit() {

app/kubernetes/views/deploy/deployController.js

@@ -5,9 +5,11 @@ import { KubernetesDeployManifestTypes } from 'Kubernetes/models/deploy';
 
 class KubernetesDeployController {
   /* @ngInject */
-  constructor($async, $state, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
+  constructor($async, $state, $window, ModalService, Notifications, EndpointProvider, KubernetesResourcePoolService, StackService) {
     this.$async = $async;
     this.$state = $state;
+    this.$window = $window;
+    this.ModalService = ModalService;
     this.Notifications = Notifications;
     this.EndpointProvider = EndpointProvider;
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
@@ -26,6 +28,7 @@ class KubernetesDeployController {
 
   async editorUpdateAsync(cm) {
     this.formValues.EditorContent = cm.getValue();
+    this.state.isEditorDirty = true;
   }
 
   editorUpdate(cm) {
@@ -46,6 +49,7 @@ class KubernetesDeployController {
       const compose = this.state.DeployType === this.ManifestDeployTypes.COMPOSE;
       await this.StackService.kubernetesDeploy(this.endpointId, this.formValues.Namespace, this.formValues.EditorContent, compose);
       this.Notifications.success('Manifest successfully deployed');
+      this.state.isEditorDirty = false;
       this.$state.go('kubernetes.applications');
     } catch (err) {
       this.Notifications.error('Unable to deploy manifest', err, 'Unable to deploy resources');
@@ -73,12 +77,19 @@ class KubernetesDeployController {
     return this.$async(this.getNamespacesAsync);
   }
 
+  async uiCanExit() {
+    if (this.formValues.EditorContent && this.state.isEditorDirty) {
+      return this.ModalService.confirmWebEditorDiscard();
+    }
+  }
+
   async onInit() {
     this.state = {
       DeployType: KubernetesDeployManifestTypes.KUBERNETES,
       tabLogsDisabled: true,
       activeTab: 0,
       viewReady: false,
+      isEditorDirty: false,
     };
 
     this.formValues = {};
@@ -88,6 +99,12 @@ class KubernetesDeployController {
     await this.getNamespaces();
 
     this.state.viewReady = true;
+
+    this.$window.onbeforeunload = () => {
+      if (this.formValues.EditorContent && this.state.isEditorDirty) {
+        return '';
+      }
+    };
   }
 
   $onInit() {