Merge pull request #6704 from marshmalien/fix/pendingInvDeleteState

Add Pending Delete flag to Inventories during pending_deletion state

awx/ui/client/legacy-styles/lists.less

@@ -80,6 +80,28 @@ table, tbody {
     padding-left: 10px;
 }
 
+.List-tableRow--disabled {
+    .List-tableCell, .List-tableCell * {
+        color: @b7grey;
+        cursor: not-allowed;
+    }
+}
+
+.List-tableRow--disabled {
+    .List-actionButton:hover {
+        color: @list-action-icon;
+        background-color: @list-actn-bg !important;
+    }
+}
+
+.List-tableRow--disabled {
+    .List-actionButtonCell * {
+        color: @default-err;
+        font-size: 11px;
+        text-transform: uppercase;
+    }
+}
+
 .List-tableCell {
     padding: 7px 15px;
     border-top:0px!important;

awx/ui/client/src/inventories-hosts/inventories/inventories.route.js

@@ -9,7 +9,12 @@ export default {
     },
     data: {
         activityStream: true,
-        activityStreamTarget: 'inventory'
+        activityStreamTarget: 'inventory',
+        socket: {
+            "groups": {
+                "inventories": ["status_changed"]
+            }
+        }
     },
     views: {
         '@': {

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

@@ -18,6 +18,7 @@ export default ['i18n', function(i18n) {
         hover: true,
         basePath: 'inventory',
         title: false,
+        disableRow: "{{ inventory.pending_deletion }}",
 
         fields: {
             status: {
@@ -27,7 +28,7 @@ export default ['i18n', function(i18n) {
                 ngClick: "null",
                 iconOnly: true,
                 excludeModal: true,
-                template: `<source-summary-popover inventory="inventory" ng-if="inventory.kind === ''"></source-summary-popover><host-summary-popover inventory="inventory" ng-class="{'HostSummaryPopover-noSourceSummary': inventory.kind !== ''}"></host-summary-popover>`,
+                template: `<source-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-if="inventory.kind === ''"></source-summary-popover><host-summary-popover inventory="inventory" ng-hide="inventory.pending_deletion" ng-class="{'HostSummaryPopover-noSourceSummary': inventory.kind !== ''}"></host-summary-popover>`,
                 icons: [{
                     icon: "{{ 'icon-cloud-' + inventory.syncStatus }}",
                     awToolTip: "{{ inventory.syncTip }}",
@@ -97,7 +98,8 @@ export default ['i18n', function(i18n) {
                 ngClick: 'editInventory(inventory)',
                 awToolTip: i18n._('Edit inventory'),
                 dataPlacement: 'top',
-                ngShow: 'inventory.summary_fields.user_capabilities.edit'
+                ngShow: 'inventory.summary_fields.user_capabilities.edit',
+                ngHide: 'inventory.pending_deletion'
             },
             view: {
                 label: i18n._('View'),
@@ -111,7 +113,12 @@ export default ['i18n', function(i18n) {
                 ngClick: "deleteInventory(inventory.id, inventory.name)",
                 awToolTip: i18n._('Delete inventory'),
                 dataPlacement: 'top',
-                ngShow: 'inventory.summary_fields.user_capabilities.delete'
+                ngShow: 'inventory.summary_fields.user_capabilities.delete',
+                ngHide: 'inventory.pending_deletion'
+
+            },
+            pending_deletion: {
+                label: i18n._('Pending Delete'),
             }
         }
     };}];

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

@@ -102,11 +102,19 @@ function InventoriesList($scope,
 
         Prompt({
             hdr: 'Delete',
-            body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the inventory below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>',
+            body: '<div class="Prompt-bodyQuery">Are you sure you want to delete the inventory below?</div><div class="Prompt-bodyTarget">' + $filter('sanitize')(name) + '</div>' +
+                    '<div class="Prompt-bodyNote"><span class="Prompt-bodyNote--emphasis">Note:</span> The inventory will be in a pending status until the final delete is processed.</div>',
             action: action,
             actionText: 'DELETE'
         });
     };
+
+    $scope.$on(`ws-inventories`, function(e, data){
+        let inventory = $scope.inventories.find((inventory) => inventory.id === data.inventory_id);
+        if (data.status === 'pending_deletion') {
+            inventory.pending_deletion = true;
+        }
+    });
 }
 
 export default ['$scope',

awx/ui/client/src/shared/directives.js

@@ -272,6 +272,21 @@ function(ConfigurationUtils, i18n, $rootScope) {
     };
 })
 
+// the disableRow directive disables table row click events
+.directive('disableRow', function() {
+    return {
+        restrict: 'A',
+        link: function(scope, element, attrs) {
+            element.bind('click', function(event) {
+                if (attrs.disableRow) {
+                    event.preventDefault();
+                }
+                return;
+            });
+        }
+    };
+})
+
 
 .directive('awSurveyQuestion', function() {
     return {

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -292,6 +292,7 @@ export default ['$compile', 'Attr', 'Icon',
                 innerTable += options.mode === 'lookup' ? `<tbody ng-init="selection.${list.iterator} = {id: $parent.${list.iterator}, name: $parent.${list.iterator}_name}">` : `"<tbody>\n"`;
                 innerTable += "<tr ng-class=\"[" + list.iterator;
                 innerTable += (options.mode === 'lookup' || options.mode === 'select') ? ".success_class" : ".active_class";
+                innerTable += (list.disableRow) ? `, {true: 'List-tableRow--disabled'}[${list.iterator}.pending_deletion]` : "";
 
                 if (list.multiSelect) {
                     innerTable += ", " + list.iterator + ".isSelected ? 'is-selected-row' : ''";
@@ -300,7 +301,8 @@ export default ['$compile', 'Attr', 'Icon',
                 innerTable += "]\" ";
                 innerTable += "id=\"{{ " + list.iterator + ".id }}\" ";
                 innerTable += "class=\"List-tableRow " + list.iterator + "_class\" ";
-                innerTable += "ng-repeat=\"" + list.iterator + " in " + list.name;
+                innerTable += "ng-repeat=\"" + list.iterator + " in " + list.name + "\"";
+                innerTable += (list.disableRow) ? " disable-row=" + list.disableRow + " " : "";
                 innerTable += (list.trackBy) ? " track by " + list.trackBy : "";
                 innerTable += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : "";
                 innerTable += (list.filterBy) ? " | filter: " + list.filterBy : "";
@@ -379,7 +381,11 @@ export default ['$compile', 'Attr', 'Icon',
                                     type: 'fieldActions',
                                     td: false
                                 });
-                            } else {
+                            }
+                            if (field_action === 'pending_deletion') {
+                                innerTable += `<a ng-if='${list.iterator}.pending_deletion'>Pending Delete</a>`;
+                            }
+                            else {
                                 fAction = list.fieldActions[field_action];
                                 innerTable += "<button id=\"";
                                 innerTable += (fAction.id) ? fAction.id : field_action + "-action";
@@ -402,6 +408,7 @@ export default ['$compile', 'Attr', 'Icon',
                                         innerTable += `ng-class="{'List-editButton--selected' : $stateParams['${list.iterator}_id'] == ${list.iterator}.id}"`;
                                     }
                                 }
+                                innerTable += (fAction.ngDisabled) ? "ng-disabled=\"" + fAction.ngDisabled + "\"" : "";
                                 innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
                                 innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
                                 innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
@@ -430,7 +437,6 @@ export default ['$compile', 'Attr', 'Icon',
                 }
 
                 innerTable += "</tr>\n";
-
                 // End List
                 innerTable += "</tbody>\n";
 

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

@@ -11,6 +11,16 @@
     word-break: break-word;
 }
 
+.Prompt-bodyNote {
+    margin: 20px 0;
+    color: @default-interface-txt;
+}
+
+.Prompt-bodyNote--emphasis {
+    text-transform: uppercase;
+    color: @default-err;
+}
+
 .Prompt-emphasis {
     font-weight: bold;
     text-transform: uppercase;