shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +03:00
Code Releases Activity

add unsaved workflow changes flow

Browse Source
This commit is contained in:
John Mitchell 2019-03-04 16:58:10 -05:00
parent bf1769af6c
commit 8c5bcffd42
No known key found for this signature in database
GPG Key ID: FE6A9B5BD4EB5C94
5 changed files with 76 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui/client/features/templates/templates.strings.js
View File

@ -131,7 +131,12 @@ function TemplatesStrings (BaseString) {
NEW_LINK: t.s('Please click on an available node to form a new link.'),
UNLINK: t.s('UNLINK'),
READ_ONLY_PROMPT_VALUES: t.s('The following promptable values were provided when this node was created:'),
READ_ONLY_NO_PROMPT_VALUES: t.s('No promptable values were provided when this node was created.')
READ_ONLY_NO_PROMPT_VALUES: t.s('No promptable values were provided when this node was created.'),
UNSAVED_CHANGES_HEADER: t.s('WARNING: UNSAVED CHANGES'),
UNSAVED_CHANGES_PROMPT_TEXT: t.s('Are you sure you want to exit the Workflow Creator without saving your changes?'),
EXIT: t.s('EXIT'),
CANCEL: t.s('CANCEL'),
SAVE_AND_EXIT: t.s('SAVE & EXIT')
};
}

3
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less
View File

@ -114,7 +114,8 @@
color: @btn-txt;
}
.WorkflowMaker-deleteOverlay {
.WorkflowMaker-deleteOverlay,
.WorkflowMaker-unsavedChangesOverlay {
height: 100%;
width: 100%;
position: absolute;

30
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js
View File

@ -7,11 +7,11 @@
export default ['$scope', 'TemplatesService',
'ProcessErrors', '$q',
'PromptService', 'TemplatesStrings', 'WorkflowChartService',
'Wait', '$state',
'Wait', '$state', '$transitions',
function ($scope, TemplatesService,
ProcessErrors, $q,
PromptService, TemplatesStrings, WorkflowChartService,
Wait, $state
Wait, $state, $transitions
) {
let deletedNodeIds = [];
@ -32,6 +32,13 @@ export default ['$scope', 'TemplatesService',
'showLinkForm': false
};
$scope.workflowChangesUnsaved = false;
$scope.workflowChangesStarted = false;
$scope.cancelUnsavedChanges = () => {
$scope.unsavedChangesVisible = false;
}
let getNodes = () => {
Wait('start');
TemplatesService.getWorkflowJobTemplateNodes($scope.workflowJobTemplateObj.id, page)
@ -72,6 +79,8 @@ export default ['$scope', 'TemplatesService',
Wait('start');
$scope.unsavedChangesVisible = false;
let buildSendableNodeData = (node) => {
// Create the node
let sendableNodeData = {
@ -364,6 +373,8 @@ export default ['$scope', 'TemplatesService',
return $q.all(associatePromises.concat(credentialPromises))
.then(() => {
Wait('stop');
$scope.workflowChangesUnsaved = false;
$scope.workflowChangesStarted = false;
$scope.closeDialog();
}).catch(({ data, status }) => {
Wait('stop');
@ -396,6 +407,8 @@ export default ['$scope', 'TemplatesService',
$q.all(deletePromises)
.then(() => {
Wait('stop');
$scope.workflowChangesUnsaved = false;
$scope.workflowChangesStarted = false;
$scope.closeDialog();
$state.transitionTo('templates');
}).catch(({ data, status }) => {
@ -410,6 +423,7 @@ export default ['$scope', 'TemplatesService',
/* ADD NODE FUNCTIONS */
$scope.startAddNodeWithoutChild = (parent) => {
$scope.workflowChangesStarted = true;
if ($scope.nodeConfig) {
$scope.cancelNodeForm();
}
@ -448,6 +462,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.startAddNodeWithChild = (link) => {
$scope.workflowChangesStarted = true;
if ($scope.nodeConfig) {
$scope.cancelNodeForm();
}
@ -494,6 +509,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.confirmNodeForm = (selectedTemplate, promptData, edgeType) => {
$scope.workflowChangesUnsaved = true;
const nodeId = $scope.nodeConfig.nodeId;
if ($scope.nodeConfig.mode === "add") {
if (selectedTemplate && edgeType && edgeType.value) {
@ -543,6 +559,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.cancelNodeForm = () => {
$scope.workflowChangesStarted = false;
const nodeId = $scope.nodeConfig.nodeId;
if ($scope.nodeConfig.mode === "add") {
// Remove the placeholder node from the array
@ -599,6 +616,7 @@ export default ['$scope', 'TemplatesService',
/* EDIT NODE FUNCTIONS */
$scope.startEditNode = (nodeToEdit) => {
$scope.workflowChangesStarted = true;
if ($scope.linkConfig) {
$scope.cancelLinkForm();
}
@ -625,6 +643,7 @@ export default ['$scope', 'TemplatesService',
/* LINK FUNCTIONS */
$scope.startEditLink = (linkToEdit) => {
$scope.workflowChangesStarted = true;
const setupLinkEdit = () => {
// Determine whether or not this link can be removed
@ -677,6 +696,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.selectNodeForLinking = (node) => {
$scope.workflowChangesStarted = true;
if ($scope.nodeConfig) {
$scope.cancelNodeForm();
}
@ -772,6 +792,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.confirmLinkForm = (newEdgeType) => {
$scope.workflowChangesUnsaved = true;
$scope.graphState.arrayOfLinksForChart.forEach((link) => {
if (link.source.id === $scope.linkConfig.source.id && link.target.id === $scope.linkConfig.target.id) {
link.edgeType = newEdgeType;
@ -792,6 +813,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.unlink = () => {
$scope.workflowChangesUnsaved = true;
// Remove the link
for( let i = $scope.graphState.arrayOfLinksForChart.length; i--; ){
const link = $scope.graphState.arrayOfLinksForChart[i];
@ -807,6 +829,7 @@ export default ['$scope', 'TemplatesService',
};
$scope.cancelLinkForm = () => {
$scope.workflowChangesStarted = false;
if ($scope.linkConfig.mode === "add" && $scope.linkConfig.target) {
$scope.graphState.arrayOfLinksForChart.splice($scope.graphState.arrayOfLinksForChart.length-1, 1);
let targetIsOrphaned = true;
@ -838,16 +861,19 @@ export default ['$scope', 'TemplatesService',
/* DELETE NODE FUNCTIONS */
$scope.startDeleteNode = (nodeToDelete) => {
$scope.workflowChangesStarted = true;
$scope.nodeToBeDeleted = nodeToDelete;
$scope.deleteOverlayVisible = true;
};
$scope.cancelDeleteNode = () => {
$scope.workflowChangesStarted = false;
$scope.nodeToBeDeleted = null;
$scope.deleteOverlayVisible = false;
};
$scope.confirmDeleteNode = () => {
$scope.workflowChangesUnsaved = true;
if ($scope.nodeToBeDeleted) {
const nodeId = $scope.nodeToBeDeleted.id;

5
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.directive.js
View File

@ -63,10 +63,15 @@ export default ['templateUrl', 'CreateDialog', 'Wait', '$state', '$window',
});
scope.closeDialog = function() {
if (scope.workflowChangesUnsaved || scope.workflowChangesStarted) {
scope.unsavedChangesVisible = true;
} else {
scope.unsavedChangesVisible = false;
$('#workflow-modal-dialog').dialog('destroy');
$('body').removeClass('WorkflowMaker-preventBodyScrolling');
$state.go('^');
}
};
function onResize(){

34
awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html
View File

@ -17,8 +17,38 @@
<div class="Prompt-bodyQuery">{{strings.get('workflow_maker.DELETE_NODE_PROMPT_TEXT')}}</div>
</div>
<div class="Modal-footer">
<button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">{{strings.get('CANCEL')}}</a>
<button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">{{strings.get('DELETE')}}</a>
<button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">{{strings.get('CANCEL')}}</button>
<button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">{{strings.get('DELETE')}}</button>
</div>
</div>
</div>
</div>
<div class="WorkflowMaker-unsavedChangesOverlay" ng-show="unsavedChangesVisible">
<div class="modal-dialog">
<div class="Modal-content modal-content">
<div class="Modal-header">
<div class="Modal-title">
<span>{{strings.get('workflow_maker.UNSAVED_CHANGES_HEADER')}}</span>
</div>
<div class="Modal-exitHolder">
<button class="close Modal-exit" ng-click="cancelUnsavedChanges()">
<i class="fa fa-times-circle"></i>
</button>
</div>
</div>
<div class="Modal-body ng-binding">
<div class="Prompt-bodyQuery">{{strings.get('workflow_maker.UNSAVED_CHANGES_PROMPT_TEXT')}}</div>
</div>
<div class="Modal-footer">
<button ng-click="closeDialog()" class="btn Modal-footerButton Modal-errorButton">{{strings.get('workflow_maker.EXIT')}}</button>
<button ng-click="cancelUnsavedChanges()" class="btn Modal-footerButton Modal-defaultButton">{{strings.get('workflow_maker.CANCEL')}}</button>
<button
ng-hide="formState.showNodeForm || formState.showLinkForm"
ng-click="saveWorkflowMaker()"
class="btn Modal-footerButton btn-success"
>
{{strings.get('workflow_maker.SAVE_AND_EXIT')}}
</button>
</div>
</div>
</div>