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
pull/4935/head
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();
}
};
},
]);

View File

@ -72,6 +72,7 @@ export class EdgeJobFormController {
editorUpdate(cm) {
this.model.FileContent = cm.getValue();
this.isEditorDirty = true;
}
associateEndpoint(endpoint) {

View File

@ -14,5 +14,6 @@ angular.module('portainer.edge').component('edgeJobForm', {
formAction: '<',
formActionLabel: '@',
actionInProgress: '<',
isEditorDirty: '=',
},
});

View File

@ -6,5 +6,6 @@ export class EditEdgeStackFormController {
editorUpdate(cm) {
this.model.StackFileContent = cm.getValue();
this.isEditorDirty = true;
}
}

View File

@ -10,5 +10,6 @@ angular.module('portainer.edge').component('editEdgeStackForm', {
actionInProgress: '<',
submitAction: '<',
edgeGroups: '<',
isEditorDirty: '=',
},
});

View File

@ -14,6 +14,7 @@
form-action="$ctrl.create"
form-action-label="Create edge job"
action-in-progress="$ctrl.state.actionInProgress"
is-editor-dirty="$ctrl.state.isEditorDirty"
></edge-job-form>
</rd-widget-body>
</rd-widget>

View File

@ -1,8 +1,9 @@
export class CreateEdgeJobViewController {
/* @ngInject */
constructor($async, $q, $state, EdgeJobService, GroupService, Notifications, TagService) {
constructor($async, $q, $state, $window, ModalService, EdgeJobService, GroupService, Notifications, TagService) {
this.state = {
actionInProgress: false,
isEditorDirty: false,
};
this.model = {
@ -17,6 +18,8 @@ export class CreateEdgeJobViewController {
this.$async = $async;
this.$q = $q;
this.$state = $state;
this.$window = $window;
this.ModalService = ModalService;
this.Notifications = Notifications;
this.GroupService = GroupService;
this.EdgeJobService = EdgeJobService;
@ -37,6 +40,7 @@ export class CreateEdgeJobViewController {
try {
await this.createEdgeJob(method, this.model);
this.Notifications.success('Edge job successfully created');
this.state.isEditorDirty = false;
this.$state.go('edge.jobs', {}, { reload: true });
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to create Edge job');
@ -52,6 +56,12 @@ export class CreateEdgeJobViewController {
return this.EdgeJobService.createEdgeJobFromFileUpload(model);
}
async uiCanExit() {
if (this.model.FileContent && this.state.isEditorDirty) {
return this.ModalService.confirmWebEditorDiscard();
}
}
async $onInit() {
try {
const [groups, tags] = await Promise.all([this.GroupService.groups(), this.TagService.tags()]);
@ -60,5 +70,11 @@ export class CreateEdgeJobViewController {
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve page data');
}
this.$window.onbeforeunload = () => {
if (this.model.FileContent && this.state.isEditorDirty) {
return '';
}
};
}
}

View File

@ -24,6 +24,7 @@
form-action="$ctrl.update"
form-action-label="Update Edge job"
action-in-progress="$ctrl.state.actionInProgress"
is-editor-dirty="$ctrl.state.isEditorDirty"
></edge-job-form>
</uib-tab>

View File

@ -2,15 +2,18 @@ import _ from 'lodash-es';
export class EdgeJobController {
/* @ngInject */
constructor($async, $q, $state, EdgeJobService, EndpointService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
constructor($async, $q, $state, $window, ModalService, EdgeJobService, EndpointService, FileSaver, GroupService, HostBrowserService, Notifications, TagService) {
this.state = {
actionInProgress: false,
showEditorTab: false,
isEditorDirty: false,
};
this.$async = $async;
this.$q = $q;
this.$state = $state;
this.$window = $window;
this.ModalService = ModalService;
this.EdgeJobService = EdgeJobService;
this.EndpointService = EndpointService;
this.FileSaver = FileSaver;
@ -43,6 +46,7 @@ export class EdgeJobController {
try {
await this.EdgeJobService.updateEdgeJob(model);
this.Notifications.success('Edge job successfully updated');
this.state.isEditorDirty = false;
this.$state.go('edge.jobs', {}, { reload: true });
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to update Edge job');
@ -121,6 +125,12 @@ export class EdgeJobController {
this.state.showEditorTab = true;
}
async uiCanExit() {
if (this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
return this.ModalService.confirmWebEditorDiscard();
}
}
async $onInit() {
const { id, tab } = this.$state.params;
this.state.activeTab = tab;
@ -138,6 +148,7 @@ export class EdgeJobController {
]);
edgeJob.FileContent = file.FileContent;
this.oldFileContent = edgeJob.FileContent;
this.edgeJob = edgeJob;
this.groups = groups;
this.tags = tags;
@ -152,5 +163,11 @@ export class EdgeJobController {
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve endpoint list');
}
this.$window.onbeforeunload = () => {
if (this.edgeJob.FileContent !== this.oldFileContent && this.state.isEditorDirty) {
return '';
}
};
}
}

View File

@ -2,8 +2,8 @@ import _ from 'lodash-es';
export class CreateEdgeStackViewController {
/* @ngInject */
constructor($state, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async) {
Object.assign(this, { $state, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async });
constructor($state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async) {
Object.assign(this, { $state, $window, ModalService, EdgeStackService, EdgeGroupService, EdgeTemplateService, Notifications, FormHelper, $async });
this.formValues = {
Name: '',
@ -24,6 +24,7 @@ export class CreateEdgeStackViewController {
formValidationError: '',
actionInProgress: false,
StackType: null,
isEditorDirty: false,
};
this.edgeGroups = null;
@ -41,6 +42,12 @@ export class CreateEdgeStackViewController {
this.onChangeMethod = this.onChangeMethod.bind(this);
}
async uiCanExit() {
if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
return this.ModalService.confirmWebEditorDiscard();
}
}
async $onInit() {
try {
this.edgeGroups = await this.EdgeGroupService.groups();
@ -55,6 +62,12 @@ export class CreateEdgeStackViewController {
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve Templates');
}
this.$window.onbeforeunload = () => {
if (this.state.Method === 'editor' && this.formValues.StackFileContent && this.state.isEditorDirty) {
return '';
}
};
}
createStack() {
@ -97,6 +110,7 @@ export class CreateEdgeStackViewController {
await this.createStackByMethod(name, method);
this.Notifications.success('Stack successfully deployed');
this.state.isEditorDirty = false;
this.$state.go('edge.stacks');
} catch (err) {
this.Notifications.error('Deployment error', err, 'Unable to deploy stack');
@ -149,5 +163,6 @@ export class CreateEdgeStackViewController {
editorUpdate(cm) {
this.formValues.StackFileContent = cm.getValue();
this.state.isEditorDirty = true;
}
}

View File

@ -21,6 +21,7 @@
model="$ctrl.formValues"
action-in-progress="$ctrl.state.actionInProgress"
submit-action="$ctrl.deployStack"
is-editor-dirty="$ctrl.state.isEditorDirty"
></edit-edge-stack-form>
</div>
</uib-tab>

View File

@ -2,9 +2,11 @@ import _ from 'lodash-es';
export class EditEdgeStackViewController {
/* @ngInject */
constructor($async, $state, EdgeGroupService, EdgeStackService, EndpointService, Notifications) {
constructor($async, $state, $window, ModalService, EdgeGroupService, EdgeStackService, EndpointService, Notifications) {
this.$async = $async;
this.$state = $state;
this.$window = $window;
this.ModalService = ModalService;
this.EdgeGroupService = EdgeGroupService;
this.EdgeStackService = EdgeStackService;
this.EndpointService = EndpointService;
@ -16,6 +18,7 @@ export class EditEdgeStackViewController {
this.state = {
actionInProgress: false,
activeTab: 0,
isEditorDirty: false,
};
this.deployStack = this.deployStack.bind(this);
@ -38,9 +41,22 @@ export class EditEdgeStackViewController {
EdgeGroups: this.stack.EdgeGroups,
Prune: this.stack.Prune,
};
this.oldFileContent = this.formValues.StackFileContent;
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve stack data');
}
this.$window.onbeforeunload = () => {
if (this.formValues.StackFileContent !== this.oldFileContent && this.state.isEditorDirty) {
return '';
}
};
}
async uiCanExit() {
if (this.formValues.StackFileContent !== this.oldFileContent && this.state.isEditorDirty) {
return this.ModalService.confirmWebEditorDiscard();
}
}
filterStackEndpoints(groupIds, groups) {
@ -64,6 +80,7 @@ export class EditEdgeStackViewController {
}
await this.EdgeStackService.updateStack(this.stack.Id, this.formValues);
this.Notifications.success('Stack successfully deployed');
this.state.isEditorDirty = false;
this.$state.go('edge.stacks');
} catch (err) {
this.Notifications.error('Deployment error', err, 'Unable to deploy stack');

View File

@ -5,5 +5,6 @@ angular.module('portainer.kubernetes').component('kubernetesConfigurationData',
formValues: '=',
isValid: '=',
isCreation: '=',
isEditorDirty: '=',
},
});

View File

@ -44,6 +44,7 @@ class KubernetesConfigurationDataController {
async editorUpdateAsync(cm) {
this.formValues.DataYaml = cm.getValue();
this.isEditorDirty = true;
}
editorUpdate(cm) {

View File

@ -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 -->

View File

@ -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() {

View File

@ -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 -->

View File

@ -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() {

View File

@ -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() {

View File

@ -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) => {

View File

@ -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();
}
}
}

View File

@ -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 '';
}
};
}
}

View File

@ -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();
});

View File

@ -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;