Update delete modals and fixed unit test failures

awx/ui/client/index.template.ejs

@@ -33,7 +33,10 @@
                 <div class="modal-dialog">
                     <div class="Modal-content modal-content">
                         <div class="Modal-header">
-                            <div class="Modal-title" ng-bind="promptHeader" id="prompt-header"></div>
+                            <div class="Modal-title" id="prompt-header">
+                                <span ng-bind="promptHeader"></span>
+                                <span class="Modal-titleResourceName" ng-bind="promptResourceName"></span>
+                            </div>
                             <div class="Modal-exitHolder">
                                 <button class="close Modal-exit" data-target="#prompt-modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle"></i></button>
                             </div>

awx/ui/client/src/credentials/list/credentials-list.controller.js

@@ -118,7 +118,7 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ProcessErrors', '
 
                     counts.forEach(countObj => {
                         if(countObj.count && countObj.count > 0) {
-                            invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                            invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
                         }
                     });
 
@@ -130,7 +130,8 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ProcessErrors', '
                     }
 
                     Prompt({
-                        hdr: i18n._('Delete') + ' ' + $filter('sanitize')(name),
+                        hdr: i18n._('Delete'),
+                        resourceName: $filter('sanitize')(name),
                         body: deleteModalBody,
                         action: action,
                         actionText: 'DELETE'

awx/ui/client/src/inventories-hosts/inventories/list/inventory-list.controller.js

@@ -103,7 +103,7 @@ function InventoriesList($scope,
 
                 counts.forEach(countObj => {
                     if(countObj.count && countObj.count > 0) {
-                        invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                        invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
                     }
                 });
 
@@ -117,7 +117,8 @@ function InventoriesList($scope,
                 deleteModalBody += '<div class="Prompt-bodyNote"><span class="Prompt-bodyNote--emphasis">Note:</span> ' + i18n._('The inventory will be in a pending status until the final delete is processed.') + '</div>';
 
                 Prompt({
-                    hdr: i18n._('Delete') + ' ' + $filter('sanitize')(name),
+                    hdr: i18n._('Delete'),
+                    resourceName: $filter('sanitize')(name),
                     body: deleteModalBody,
                     action: action,
                     actionText: 'DELETE'

awx/ui/client/src/inventories-hosts/inventories/related/sources/list/sources-list.controller.js

@@ -147,7 +147,7 @@
 
                     counts.forEach(countObj => {
                         if(countObj.count && countObj.count > 0) {
-                            invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                            invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
                         }
                     });
 
@@ -159,7 +159,8 @@
                     }
 
                     Prompt({
-                        hdr: i18n._('Delete Source') + ' ' + $filter('sanitize')(inventory_source.name),
+                        hdr: i18n._('Delete Source'),
+                        resourceName: $filter('sanitize')(inventory_source.name),
                         body: deleteModalBody,
                         action: action,
                         actionText: 'DELETE'

awx/ui/client/src/inventory-scripts/list/list.controller.js

@@ -84,7 +84,7 @@ export default ['$rootScope', '$scope', 'Wait', 'InventoryScriptsList',
 
                     counts.forEach(countObj => {
                         if(countObj.count && countObj.count > 0) {
-                            invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                            invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
                         }
                     });
 
@@ -96,7 +96,8 @@ export default ['$rootScope', '$scope', 'Wait', 'InventoryScriptsList',
                     }
 
                     Prompt({
-                        hdr: i18n._('Delete') + ' ' + $filter('sanitize')(name),
+                        hdr: i18n._('Delete'),
+                        resourceName: $filter('sanitize')(name),
                         body: deleteModalBody,
                         action: action,
                         actionText: 'DELETE'

awx/ui/client/src/job-results/job-results.service.js

@@ -91,11 +91,9 @@ function ($q, Prompt, $filter, Wait, Rest, $state, ProcessErrors, InitiatePlaybo
         deleteJob: function(job) {
             Prompt({
                 hdr: i18n._("Delete Job"),
+                resourceName: `#${job.id} ` + $filter('sanitize')(job.name),
                 body: `<div class='Prompt-bodyQuery'>
-                        ${i18n._("Are you sure you want to delete the job below?")}
+                        ${i18n._("Are you sure you want to delete this job?")}
-                    </div>
-                    <div class='Prompt-bodyTarget'>
-                        #${job.id} ${$filter('sanitize')(job.name)}
                     </div>`,
                 action: function() {
                     Wait('start');
@@ -140,11 +138,9 @@ function ($q, Prompt, $filter, Wait, Rest, $state, ProcessErrors, InitiatePlaybo
 
             Prompt({
                 hdr: i18n._('Cancel Job'),
+                resourceName: `#${job.id} ` + $filter('sanitize')(job.name),
                 body: `<div class='Prompt-bodyQuery' translate>
-                        ${i18n._("Are you sure you want to cancel the job below?")}
+                        ${i18n._("Are you sure you want to cancel this job?")}
-                    </div>
-                    <div class='Prompt-bodyTarget'>
-                        #${job.id} ${$filter('sanitize')(job.name)}
                     </div>`,
                 action: function() {
                     Wait('start');

awx/ui/client/src/jobs/factories/delete-job.factory.js

@@ -106,10 +106,11 @@
                 scope.removeCancelJob();
             }
             scope.removeCancelJob = scope.$on('CancelJob', function() {
-                var cancelBody = "<div class=\"Prompt-bodyQuery\">" + i18n._("Submit the request to cancel?") + "</div>";
+                var cancelBody = "<div class=\"Prompt-bodyQuery\">" + i18n._("Are you sure you want to submit the request to cancel this job?") + "</div>";
-                var deleteBody = "<div class=\"Prompt-bodyQuery\">" + i18n._("Are you sure you want to delete the job below?") + "</div><div class=\"Prompt-bodyTarget\" translate>#" + id + " " + $filter('sanitize')(job.name)  + "</div>";
+                var deleteBody = "<div class=\"Prompt-bodyQuery\">" + i18n._("Are you sure you want to delete this job?") + "</div>";
                 Prompt({
                     hdr: hdr,
+                    resourceName: `#${job.id} ` + $filter('sanitize')(job.name),
                     body: (action_label === 'cancel' || job.status === 'new') ? cancelBody : deleteBody,
                     action: action,
                     actionText: (action_label === 'cancel' || job.status === 'new') ? i18n._("OK") : i18n._("DELETE")

awx/ui/client/src/notifications/notification-templates-list/list.controller.js

@@ -193,10 +193,11 @@
                          });
                      });
              };
-             var bodyHtml = '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete the notification template below?') + '</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>';
+
              Prompt({
                  hdr: i18n._('Delete'),
-                 body: bodyHtml,
+                 resourceName: $filter('sanitize')(name),
+                 body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete this notification template?') + '</div>',
                  action: action,
                  actionText: i18n._('DELETE')
              });

awx/ui/client/src/organizations/list/organizations-list.controller.js

@@ -169,7 +169,8 @@ export default ['$stateParams', '$scope', '$rootScope',
 
             Prompt({
                 hdr: i18n._('Delete'),
-                body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete the organization below?  This makes everything in this organization unavailable.') + '</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>',
+                resourceName: $filter('sanitize')(name),
+                body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete this organization?  This makes everything in this organization unavailable.') + '</div>',
                 action: action,
                 actionText: i18n._('DELETE')
             });

awx/ui/client/src/projects/list/projects-list.controller.js

@@ -210,7 +210,7 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert',
 
                     counts.forEach(countObj => {
                         if(countObj.count && countObj.count > 0) {
-                            invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                            invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
                         }
                     });
 
@@ -222,7 +222,8 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert',
                     }
 
                     Prompt({
-                        hdr: i18n._('Delete') + ' ' + $filter('sanitize')(name),
+                        hdr: i18n._('Delete'),
+                        resourceName: $filter('sanitize')(name),
                         body: deleteModalBody,
                         action: action,
                         actionText: 'DELETE'

awx/ui/client/src/scheduler/factories/delete-schedule.factory.js

@@ -54,7 +54,8 @@ export default
 
             Prompt({
                 hdr: hdr,
-                body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the schedule below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(schedule.name) + '</div>',
+                resourceName: $filter('sanitize')(schedule.name),
+                body: '<div class="Prompt-bodyQuery">Are you sure you want to delete this schedule?</div>',
                 action: action,
                 actionText: 'DELETE',
                 backdrop: false

awx/ui/client/src/shared/modal/modal.less

@@ -123,3 +123,7 @@
 .Modal-footerButton + .Modal-footerButton {
     margin-left: 20px;
 }
+
+.Modal-titleResourceName {
+    color: @default-err;
+}

awx/ui/client/src/shared/prompt-dialog.js

@@ -39,6 +39,7 @@ angular.module('PromptDialog', ['Utilities'])
                     scope = dialog.scope(), cls, local_backdrop;
 
                 scope.promptHeader = params.hdr;
+                scope.promptResourceName = params.resourceName;
                 scope.promptBody = params.body;
                 scope.promptAction = params.action;
                 scope.promptActionText = (params.actionText === null || params.actionText === undefined || params.actionText === '') ? 'YES' : params.actionText;

awx/ui/client/src/shared/prompt/prompt.less

@@ -23,3 +23,7 @@
     font-weight: bold;
     text-transform: uppercase;
 }
+
+.Prompt-warningResourceTitle {
+    margin-right: 10px;
+}

awx/ui/client/src/teams/list/teams-list.controller.js

@@ -6,9 +6,9 @@
 
 export default ['$scope', 'Rest', 'TeamList', 'Prompt',
     'ProcessErrors', 'GetBasePath', 'Wait', '$state', '$filter',
-    'rbacUiControlService', 'Dataset',
+    'rbacUiControlService', 'Dataset', 'i18n',
     function($scope, Rest, TeamList, Prompt, ProcessErrors,
-    GetBasePath, Wait, $state, $filter, rbacUiControlService, Dataset) {
+    GetBasePath, Wait, $state, $filter, rbacUiControlService, Dataset, i18n) {
 
         var list = TeamList,
             defaultUrl = GetBasePath('teams');
@@ -77,7 +77,8 @@ export default ['$scope', 'Rest', 'TeamList', 'Prompt',
 
             Prompt({
                 hdr: 'Delete',
-                body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the team below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>',
+                resourceName: $filter('sanitize')(name),
+                body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete this team?') + '</div>',
                 action: action,
                 actionText: 'DELETE'
             });

awx/ui/client/src/templates/list/templates-list.controller.js

@@ -150,31 +150,44 @@ export default ['$scope', '$rootScope',
                    }
                };
 
-               jobTemplate.getDependentResourceCounts(template.id)
+               if(template.type && (template.type === 'Workflow Job Template' || template.type === 'workflow_job_template')) {
-                   .then((counts) => {
+                   Prompt({
-                       const invalidateRelatedLines = [];
+                       hdr: i18n._('Delete'),
-                       let deleteModalBody = `<div class="Prompt-bodyQuery">${TemplatesStrings.get('jobTemplates.deleteJobTemplate.CONFIRM')}</div>`;
+                       resourceName: $filter('sanitize')(template.name),
-
+                       body: TemplatesStrings.get('workflowJobTemplates.deleteWorkflowJobTemplate.CONFIRM'),
-                       counts.forEach(countObj => {
+                       action: action,
-                           if(countObj.count && countObj.count > 0) {
+                       actionText: 'DELETE'
-                               invalidateRelatedLines.push(`<div>${countObj.label} <span class="badge List-titleBadge">${countObj.count}</span></div>`);
-                           }
-                       });
-
-                       if (invalidateRelatedLines && invalidateRelatedLines.length > 0) {
-                           deleteModalBody = `<div class="Prompt-bodyQuery">${TemplatesStrings.get('jobTemplates.deleteJobTemplate.CONFIRM')}  ${TemplatesStrings.get('jobTemplates.deleteJobTemplate.INVALIDATE')}</div>`;
-                           invalidateRelatedLines.forEach(invalidateRelatedLine => {
-                               deleteModalBody += invalidateRelatedLine;
-                           });
-                       }
-
-                       Prompt({
-                           hdr: i18n._('Delete') + ' ' + $filter('sanitize')(template.name),
-                           body: deleteModalBody,
-                           action: action,
-                           actionText: 'DELETE'
-                       });
                    });
+               }
+               else if(template.type && (template.type === 'Job Template' || template.type === 'job_template')) {
+
+                   jobTemplate.getDependentResourceCounts(template.id)
+                       .then((counts) => {
+                           const invalidateRelatedLines = [];
+                           let deleteModalBody = `<div class="Prompt-bodyQuery">${TemplatesStrings.get('jobTemplates.deleteJobTemplate.CONFIRM')}</div>`;
+
+                           counts.forEach(countObj => {
+                               if(countObj.count && countObj.count > 0) {
+                                   invalidateRelatedLines.push(`<div><span class="Prompt-warningResourceTitle">${countObj.label}</span><span class="badge List-titleBadge">${countObj.count}</span></div>`);
+                               }
+                           });
+
+                           if (invalidateRelatedLines && invalidateRelatedLines.length > 0) {
+                               deleteModalBody = `<div class="Prompt-bodyQuery">${TemplatesStrings.get('jobTemplates.deleteJobTemplate.CONFIRM')}  ${TemplatesStrings.get('jobTemplates.deleteJobTemplate.INVALIDATE')}</div>`;
+                               invalidateRelatedLines.forEach(invalidateRelatedLine => {
+                                   deleteModalBody += invalidateRelatedLine;
+                               });
+                           }
+
+                           Prompt({
+                               hdr: i18n._('Delete'),
+                               resourceName: $filter('sanitize')(template.name),
+                               body: deleteModalBody,
+                               action: action,
+                               actionText: 'DELETE'
+                           });
+                       });
+                   }
             }
             else {
                 Alert('Error: Unable to delete template', 'Template parameter is missing');

awx/ui/client/src/templates/templates.strings.js

@@ -10,6 +10,12 @@ function TemplatesStrings (BaseString) {
             INVALIDATE: t.s('Doing so will invalidate the following:')
         }
     };
+
+    ns.workflowJobTemplates = {
+        deleteWorkflowJobTemplate: {
+            CONFIRM: t.s('Are you sure you want to delete this workflow job template?')
+        }
+    };
 }
 
 TemplatesStrings.$inject = ['BaseStringService'];

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

@@ -1,8 +1,12 @@
 <div id="workflow-modal-dialog" style="display: none;">
     <div class="WorkflowMaker-deleteOverlay" ng-show="deleteOverlayVisible">
+        <div class="modal-dialog">
             <div class="Modal-content modal-content">
                 <div class="Modal-header">
-                    <div class="Modal-title">REMOVE</div>
+                    <div class="Modal-title">
+                        <span>DELETE</span>
+                        <span class="Modal-titleResourceName" ng-bind="nodeToBeDeleted.unifiedJobTemplate.name"></span>
+                    </div>
                     <div class="Modal-exitHolder">
                         <button class="close Modal-exit" ng-click="cancelDeleteNode()">
                             <i class="fa fa-times-circle"></i>
@@ -10,14 +14,14 @@
                     </div>
                 </div>
                 <div class="Modal-body ng-binding">
-                    <div class="Prompt-bodyQuery">Are you sure you want to remove the template below?</div>
+                    <div class="Prompt-bodyQuery">Are you sure you want to delete this workflow node?</div>
-                    <div class="Prompt-bodyTarget">{{nodeToBeDeleted.unifiedJobTemplate.name}}</div>
                 </div>
                 <div class="Modal-footer">
                     <button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">CANCEL</a>
                     <button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">DELETE</a>
                 </div>
             </div>
+        </div>
     </div>
     <div class="WorkflowMaker-header">
         <div class="WorkflowMaker-title">

awx/ui/client/src/users/list/users-list.controller.js

@@ -87,7 +87,8 @@ export default ['$scope', '$rootScope', 'Rest', 'UserList', 'Prompt',
 
             Prompt({
                 hdr: i18n._('Delete'),
-                body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete the user below?') + '</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>',
+                resourceName: $filter('sanitize')(name),
+                body: '<div class="Prompt-bodyQuery">' + i18n._('Are you sure you want to delete this user?') + '</div>',
                 action: action,
                 actionText: i18n._('DELETE')
             });

awx/ui/client/src/workflow-results/workflow-results.service.js

@@ -35,11 +35,9 @@ export default ['$q', 'Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErr
         deleteJob: function(workflow) {
             Prompt({
                 hdr: 'Delete Job',
+                resourceName: `#${workflow.id} ` + $filter('sanitize')(workflow.name),
                 body: `<div class='Prompt-bodyQuery'>
-                        Are you sure you want to delete the workflow below?
+                        Are you sure you want to delete this workflow?
-                    </div>
-                    <div class='Prompt-bodyTarget'>
-                        #${workflow.id} ${$filter('sanitize')(workflow.name)}
                     </div>`,
                 action: function() {
                     Wait('start');
@@ -84,11 +82,9 @@ export default ['$q', 'Prompt', '$filter', 'Wait', 'Rest', '$state', 'ProcessErr
 
             Prompt({
                 hdr: 'Cancel Workflow',
+                resourceName: `#${workflow.id} ${$filter('sanitize')(workflow.name)}`,
                 body: `<div class='Prompt-bodyQuery'>
-                        Are you sure you want to cancel the workflow below?
+                        Are you sure you want to cancel this workflow job?
-                    </div>
-                    <div class='Prompt-bodyTarget'>
-                        #${workflow.id} ${$filter('sanitize')(workflow.name)}
                     </div>`,
                 action: function() {
                     Wait('start');

awx/ui/test/spec/templates/templates-list.controller-test.js

@@ -14,8 +14,10 @@ describe('Controller: TemplatesList', () => {
         canAddDeferred,
         q,
         TemplatesService,
+        JobTemplateModel,
         deleteWorkflowJobTemplateDeferred,
         deleteJobTemplateDeferred,
+        jobTemplateGetDepDeferred,
         Dataset;
 
     beforeEach(angular.mock.module('awApp'));
@@ -31,6 +33,14 @@ describe('Controller: TemplatesList', () => {
             id: 1
         };
 
+        // JobTemplateModel = {
+        //     prototype: {
+        //         getDependentResourceCounts: function(){
+        //             return angular.noop;
+        //         }
+        //     }
+        // };
+
         rbacUiControlService = {
             canAdd: function(){
                 return angular.noop;
@@ -78,11 +88,26 @@ describe('Controller: TemplatesList', () => {
         canAddDeferred = q.defer();
         deleteWorkflowJobTemplateDeferred = q.defer();
         deleteJobTemplateDeferred = q.defer();
+        jobTemplateGetDepDeferred = q.defer();
 
         rbacUiControlService.canAdd = jasmine.createSpy('canAdd').and.returnValue(canAddDeferred.promise);
 
         TemplatesService.deleteWorkflowJobTemplate = jasmine.createSpy('deleteWorkflowJobTemplate').and.returnValue(deleteWorkflowJobTemplateDeferred.promise);
         TemplatesService.deleteJobTemplate = jasmine.createSpy('deleteJobTemplate').and.returnValue(deleteJobTemplateDeferred.promise);
+        JobTemplateModel = function () {
+            this.getDependentResourceCounts = function() {
+                return jobTemplateGetDepDeferred.promise;
+            };
+        };
+
+        // JobTemplateModel.prototype.getDependentResourceCounts = jasmine.createSpy()
+        // spyOn(JobTemplateModel, 'getDependentResourceCounts').andCallThrough();
+
+        // JobTemplateModel.prototype.constructor = jasmine.createSpy('constructor').andPassThrough;
+        // JobTemplateModel.prototype.getDependentResourceCounts = jasmine.createSpy('getDependentResourceCounts').and.returnValue(jobTemplateGetDepDeferred.promise);
+        // spyOn(JobTemplate.prototype, "getDependentResourceCounts").and.returnValue(jobTemplateGetDepDeferred.promise);
+        // var mockGetDependentResourceCounts = jasmine.createStub(JobTemplate, ["getDependentResourceCounts"]);
+        // mockGetDependentResourceCounts.method.and.returnValue(jobTemplateGetDepDeferred.promise);
 
         TemplatesListController = $controller('TemplatesListController', {
             $scope: scope,
@@ -94,8 +119,11 @@ describe('Controller: TemplatesList', () => {
             InitiatePlaybookRun: InitiatePlaybookRun,
             rbacUiControlService: rbacUiControlService,
             TemplatesService: TemplatesService,
+            JobTemplateModel: JobTemplateModel,
             Dataset: Dataset
         });
+
+        rootScope.$apply();
     }));
 
     describe('scope.editJobTemplate()', () => {
@@ -155,6 +183,8 @@ describe('Controller: TemplatesList', () => {
             };
 
             scope.deleteJobTemplate(testTemplate);
+            jobTemplateGetDepDeferred.resolve([]);
+            rootScope.$apply();
             expect(Prompt).toHaveBeenCalled();
         });
 
@@ -169,6 +199,8 @@ describe('Controller: TemplatesList', () => {
             };
 
             scope.deleteJobTemplate(testTemplate);
+            jobTemplateGetDepDeferred.resolve([]);
+            rootScope.$apply();
             expect(TemplatesService.deleteWorkflowJobTemplate).toHaveBeenCalled();
         });
 
@@ -183,6 +215,8 @@ describe('Controller: TemplatesList', () => {
             };
 
             scope.deleteJobTemplate(testTemplate);
+            jobTemplateGetDepDeferred.resolve([]);
+            rootScope.$apply();
             expect(TemplatesService.deleteJobTemplate).toHaveBeenCalled();
         });