From e0cdc4ff8047a460f33e5c402461f0ba9bfe5572 Mon Sep 17 00:00:00 2001 From: mabashian Date: Mon, 15 Jul 2019 15:39:06 -0400 Subject: [PATCH] Approval drawer cleanup and workflow node form UX cleanup --- .../components/approvalsDrawer/_index.less | 48 ++++-- .../approvalsDrawer.directive.js | 51 +++--- .../approvalsDrawer.partial.html | 154 +++++++++--------- .../lib/components/components.strings.js | 7 +- .../shared/paginate/paginate.controller.js | 4 +- .../forms/workflow-node-form.partial.html | 2 +- .../workflow-maker.controller.js | 43 ++--- .../workflow-maker.partial.html | 2 +- 8 files changed, 166 insertions(+), 145 deletions(-) diff --git a/awx/ui/client/lib/components/approvalsDrawer/_index.less b/awx/ui/client/lib/components/approvalsDrawer/_index.less index abca0e2166..521a23c05e 100644 --- a/awx/ui/client/lib/components/approvalsDrawer/_index.less +++ b/awx/ui/client/lib/components/approvalsDrawer/_index.less @@ -1,16 +1,25 @@ .at-ApprovalsDrawer { - position: absolute; - right: 0px; + position: fixed; top: 0; - height: 100%; - width: 540px; - background-color: white; - z-index: 1000000; - animation-duration: 0.5s; - // TODO: fix animation? - // animation-name: slidein; - padding: 20px; - box-shadow: -3px 0px 8px -2px #aaaaaa; + right: 0; + bottom: 0; + left: 0; + // z-index of the nav header is 1040 + z-index: 1041; + background-color: rgba(0, 0, 0, 0.3); + + &-drawer { + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 540px; + background-color: @default-bg; + animation-name: slidein; + animation-duration: 250ms; + padding: 20px; + overflow-y: scroll; + } &-header { display: flex; @@ -20,12 +29,23 @@ &-title { flex: 1 0 auto; - color: #606060; + color: @default-interface-txt; font-size: 14px; font-weight: bold; width: calc(82%); } + &-actionRow { + display: flex; + justify-content: flex-end; + width: 100%; + margin-top: 10px; + + button { + margin-left: 15px; + } + } + &-exit { justify-content: flex-end; display: flex; @@ -33,7 +53,7 @@ button { height: 20px; font-size: 20px; - color: #D7D7D7; + color: @d7grey; line-height: 1; opacity: 1; } @@ -41,7 +61,7 @@ button:hover{ color: @default-icon; opacity: 1; - } + } } } diff --git a/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.directive.js b/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.directive.js index 556d216559..0f6136a516 100644 --- a/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.directive.js +++ b/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.directive.js @@ -8,52 +8,36 @@ function AtApprovalsDrawerController (strings, Rest, GetBasePath, $rootScope) { value: 'created' }; + vm.strings = strings; vm.toolbarSortValue = toolbarSortDefault; + vm.queryset = { + page: 1, + page_size: 5, + order_by: 'created', + status: 'pending' + }; + vm.emptyListReason = vm.strings.get('approvals.NONE'); // This will probably need to be expanded vm.toolbarSortOptions = [ toolbarSortDefault, - { label: `${strings.get('sort.CREATED_DESCENDING')}`, value: '-created' } + { label: `${vm.strings.get('sort.CREATED_DESCENDING')}`, value: '-created' } ]; - vm.queryset = { - page_size: 5 - }; - - vm.emptyListReason = strings.get('approvals.NONE'); - const loadTheList = () => { - Rest.setUrl(`${GetBasePath('workflow_approval')}?page_size=5&order_by=created&status=pending`); - Rest.get() + const queryParams = Object.keys(vm.queryset).map(key => `${key}=${vm.queryset[key]}`).join('&'); + Rest.setUrl(`${GetBasePath('workflow_approval')}?${queryParams}`); + return Rest.get() .then(({ data }) => { vm.dataset = data; vm.approvals = data.results; vm.count = data.count; $rootScope.pendingApprovalCount = data.count; - vm.listLoaded = true; }); }; - loadTheList(); - - vm.onToolbarSort = (sort) => { - vm.toolbarSortValue = sort; - - // TODO: this... - // const queryParams = Object.assign( - // {}, - // $state.params.user_search, - // paginateQuerySet, - // { order_by: sort.value } - // ); - - // // Update URL with params - // $state.go('.', { - // user_search: queryParams - // }, { notify: false, location: 'replace' }); - - // rather than ^^ we want to just re-load the data based on new params - }; + loadTheList() + .then(() => { vm.listLoaded = true; }); vm.approve = (approval) => { Rest.setUrl(`${GetBasePath('workflow_approval')}${approval.id}/approve`); @@ -66,6 +50,13 @@ function AtApprovalsDrawerController (strings, Rest, GetBasePath, $rootScope) { Rest.post() .then(() => loadTheList()); }; + + vm.onToolbarSort = (sort) => { + vm.toolbarSortValue = sort; + vm.queryset.page = 1; + vm.queryset.order_by = sort.value; + loadTheList(); + }; } AtApprovalsDrawerController.$inject = ['ComponentsStrings', 'Rest', 'GetBasePath', '$rootScope']; diff --git a/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.partial.html b/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.partial.html index 55e8a0ab2f..bd208c0f55 100644 --- a/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.partial.html +++ b/awx/ui/client/lib/components/approvalsDrawer/approvalsDrawer.partial.html @@ -1,79 +1,79 @@ -
-
-
-
- - NOTIFICATIONS - - - {{vm.count}} - -
-
- -
-
- - - - -
-
-
- - - -
-
-
- - - - - -
-
-
-
Continue workflow job?
- - -
-
+
+
+
+
+ + {{:: vm.strings.get('approvals.NOTIFICATIONS') }} + + + {{vm.count}} +
- - - - +
+ +
+
+ + + + +
+
+
+ + + +
+
+
+ + + + + +
+
+
+
{{:: vm.strings.get('approvals.CONTINUE') }}
+ + +
+
+
+ + + + +
\ No newline at end of file diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 772ce84f37..0360a4970e 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -121,7 +121,12 @@ function ComponentsStrings (BaseString) { }; ns.approvals = { - NONE: t.s('There are no jobs awaiting approval') + NONE: t.s('There are no jobs awaiting approval'), + APPROVE: t.s('APPROVE'), + DENY: t.s('DENY'), + CONTINUE: t.s('Continue workflow job?'), + NOTIFICATIONS: t.s('NOTIFICATIONS'), + WORKFLOW_TEMPLATE: t.s('Workflow Template') }; } diff --git a/awx/ui/client/src/shared/paginate/paginate.controller.js b/awx/ui/client/src/shared/paginate/paginate.controller.js index a16de19a7e..10a30bcaef 100644 --- a/awx/ui/client/src/shared/paginate/paginate.controller.js +++ b/awx/ui/client/src/shared/paginate/paginate.controller.js @@ -1,5 +1,5 @@ -export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'QuerySet', '$interpolate', - function($scope, $stateParams, $state, $filter, GetBasePath, qs, $interpolate) { +export default ['$scope', '$stateParams', '$state', 'GetBasePath', 'QuerySet', '$interpolate', + function($scope, $stateParams, $state, GetBasePath, qs, $interpolate) { let pageSize = $scope.querySet ? $scope.querySet.page_size || 20 : $stateParams[`${$scope.iterator}_search`].page_size || 20, queryset, path; diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.partial.html b/awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.partial.html index 089b24af5c..b01876a044 100644 --- a/awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.partial.html +++ b/awx/ui/client/src/templates/workflows/workflow-maker/forms/workflow-node-form.partial.html @@ -281,4 +281,4 @@
-
+ \ No newline at end of file diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js index e58c387e19..53cd0076a9 100644 --- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js +++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js @@ -226,7 +226,7 @@ export default ['$scope', 'TemplatesService', }).then(({data: approvalTemplateData}) => { // Make sure that this isn't overwriting everything on the node... editPromises.push(TemplatesService.editWorkflowNode({ - url: $scope.workflowJobTemplateObj.related.workflow_nodes, + id: node.originalNodeObject.id, data: { unified_job_template: approvalTemplateData.id } @@ -583,26 +583,31 @@ export default ['$scope', 'TemplatesService', $scope.formState.showNodeForm = true; }; - $scope.confirmNodeForm = (selectedTemplate, promptData, edgeType, pauseNode) => { + $scope.confirmNodeForm = (nodeFormData) => { + const { edgeType, selectedTemplate, promptData } = nodeFormData; + const isPauseNode = selectedTemplate.type === "workflow_approval" + || selectedTemplate.unified_job_type === "workflow_approval"; + // edgeType, selectedTemplate, promptData + // can determine pause node by looking at the type (?) or maybe unified_job_type $scope.workflowChangesUnsaved = true; const nodeId = $scope.nodeConfig.nodeId; if ($scope.nodeConfig.mode === "add") { - if (edgeType && edgeType.value) { - if (selectedTemplate) { + if (edgeType && edgeType.value && selectedTemplate) { + if (isPauseNode) { + nodeRef[$scope.nodeConfig.nodeId] = { + unifiedJobTemplate: { + name: selectedTemplate.name, + description: selectedTemplate.description, + unified_job_type: "workflow_approval" + }, + isNew: true + }; + } else { nodeRef[$scope.nodeConfig.nodeId] = { fullUnifiedJobTemplateObject: selectedTemplate, promptData, isNew: true }; - } else if (pauseNode && pauseNode.isPauseNode) { - nodeRef[$scope.nodeConfig.nodeId] = { - unifiedJobTemplate: { - name: pauseNode.name, - description: pauseNode.description, - unified_job_type: "workflow_approval" - }, - isNew: true - }; } $scope.graphState.nodeBeingAdded = null; @@ -629,12 +634,12 @@ export default ['$scope', 'TemplatesService', link.source.unifiedJobTemplate = selectedTemplate; } }); - } else if (pauseNode && pauseNode.isPauseNode) { + } else if (isPauseNode) { // If it's a _new_ pause node then we'll want to create the new ujt // If it's an existing pause node then we'll want to update the ujt nodeRef[$scope.nodeConfig.nodeId].unifiedJobTemplate = { - name: pauseNode.name, - description: pauseNode.description, + name: selectedTemplate.name, + description: selectedTemplate.description, unified_job_type: "workflow_approval" }; nodeRef[$scope.nodeConfig.nodeId].isEdited = true; @@ -643,11 +648,11 @@ export default ['$scope', 'TemplatesService', $scope.graphState.arrayOfNodesForChart.map( (node) => { if (node.id === nodeId) { - if (pauseNode && pauseNode.isPauseNode) { + if (isPauseNode) { node.unifiedJobTemplate = { unified_job_type: 'workflow_approval', - name: pauseNode.name, - description: pauseNode.description + name: selectedTemplate.name, + description: selectedTemplate.description }; } else { node.unifiedJobTemplate = selectedTemplate; diff --git a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html index d8685582fe..fabaa4c04c 100644 --- a/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html +++ b/awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html @@ -128,7 +128,7 @@
- +