1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00

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
This commit is contained in:
Alice Groux 2021-03-20 22:13:27 +01:00 committed by GitHub
parent d0d38990c7
commit a7ed6222b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 271 additions and 15 deletions

View file

@ -5,9 +5,11 @@ import angular from 'angular';
class CreateConfigController {
/* @ngInject */
constructor($async, $state, $transition$, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
constructor($async, $state, $transition$, $window, ModalService, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
this.$state = $state;
this.$transition$ = $transition$;
this.$window = $window;
this.ModalService = ModalService;
this.Notifications = Notifications;
this.ConfigService = ConfigService;
this.Authentication = Authentication;
@ -24,6 +26,7 @@ class CreateConfigController {
this.state = {
formValidationError: '',
isEditorDirty: false,
};
this.editorUpdate = this.editorUpdate.bind(this);
@ -31,6 +34,12 @@ class CreateConfigController {
}
async $onInit() {
this.$window.onbeforeunload = () => {
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
return '';
}
};
if (!this.$transition$.params().id) {
this.formValues.displayCodeEditor = true;
return;
@ -53,6 +62,12 @@ class CreateConfigController {
}
}
async uiCanExit() {
if (this.formValues.displayCodeEditor && this.formValues.ConfigContent && this.state.isEditorDirty) {
return this.ModalService.confirmWebEditorDiscard();
}
}
addLabel() {
this.formValues.Labels.push({ name: '', value: '' });
}
@ -122,6 +137,7 @@ class CreateConfigController {
const userId = userDetails.ID;
await this.ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
this.Notifications.success('Config successfully created');
this.state.isEditorDirty = false;
this.$state.go('docker.configs', {}, { reload: true });
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to create config');
@ -130,6 +146,7 @@ class CreateConfigController {
editorUpdate(cm) {
this.formValues.ConfigContent = cm.getValue();
this.state.isEditorDirty = true;
}
}

View file

@ -1,14 +1,16 @@
angular.module('portainer.docker').controller('BuildImageController', [
'$scope',
'$state',
'$window',
'ModalService',
'BuildService',
'Notifications',
'HttpRequestHelper',
function ($scope, $state, BuildService, Notifications, HttpRequestHelper) {
function ($scope, $window, ModalService, BuildService, Notifications, HttpRequestHelper) {
$scope.state = {
BuildType: 'editor',
actionInProgress: false,
activeTab: 0,
isEditorDirty: false,
};
$scope.formValues = {
@ -20,6 +22,12 @@ angular.module('portainer.docker').controller('BuildImageController', [
NodeName: null,
};
$window.onbeforeunload = () => {
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
return '';
}
};
$scope.addImageName = function () {
$scope.formValues.ImageNames.push({ Name: '' });
};
@ -93,6 +101,13 @@ angular.module('portainer.docker').controller('BuildImageController', [
$scope.editorUpdate = function (cm) {
$scope.formValues.DockerFileContent = cm.getValue();
$scope.state.isEditorDirty = true;
};
this.uiCanExit = async function () {
if ($scope.state.BuildType === 'editor' && $scope.formValues.DockerFileContent && $scope.state.isEditorDirty) {
return ModalService.confirmWebEditorDiscard();
}
};
},
]);