Merge pull request #2665 from mabashian/2624

Disabled System Tracking and Run Commands buttons

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

@@ -376,6 +376,18 @@ table, tbody {
     font-size: 13px;
 }
 
+.List-action--showTooltipOnDisabled {
+    display: inline-block;
+}
+
+.List-action--showTooltipOnDisabled .btn[disabled] {
+    pointer-events: none;
+}
+
+.List-action--showTooltipOnDisabled.disabled {
+    cursor: not-allowed;
+}
+
 @media (max-width: 991px) {
     .List-searchWidget + .List-searchWidget {
         margin-top: 20px;

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

@@ -62,7 +62,7 @@
             $scope.$parent.hostsSelected = selection.length > 0 ? true : false;
             $scope.$parent.hostsSelectedItems = selection.selectedItems;
             $scope.$parent.systemTrackingDisabled = selection.length > 0 && selection.length < 3 ? false : true;
-            $scope.$parent.systemTrackingTooltip = selection.length === 1 ? "Compare host facts over time" : "Compare hosts' facts";
+            $scope.$parent.systemTrackingTooltip = selection.length > 0 && selection.length < 3 ? "Compare host facts over time" : "Select one or two hosts by clicking the checkbox beside the host. System tracking offers the ability to compare the results of two scan runs from different dates on one host or the same date on two hosts.";
         });
         $scope.$on('PostRefresh', ()=>{
             _.forEach($scope.hosts, (host) => SetStatus({scope: $scope, host: host}));

awx/ui/client/src/inventories/manage/inventory-manage.controller.js

@@ -17,4 +17,7 @@
  				}).value().join(':');
  			$state.go('inventoryManage.adhoc', {pattern: pattern});
  		};
- 	}];
+        $scope.$watchGroup(['groupsSelected', 'hostsSelected'], function(newVals) {
+            $scope.adhocCommandTooltip = (newVals[0] || newVals[1]) ? "Run a command on the selected inventory" : "Select an inventory source by clicking the check box beside it. The inventory source can be a single group or host, a selection of multiple hosts, or a selection of multiple groups.";
+        });
+ 	}];

awx/ui/client/src/lists/InventoryGroups.js

@@ -135,11 +135,14 @@ export default
             launch: {
                 mode: 'all',
                 // $scope.$parent is governed by InventoryManageController,
-                ngShow: '$parent.groupsSelected || $parent.hostsSelected',
+                ngDisabled: '!$parent.groupsSelected && !$parent.hostsSelected',
                 ngClick: '$parent.setAdhocPattern()',
-                awToolTip: "Run a command on the selected inventory",
+                awToolTip: "Select an inventory source by clicking the check box beside it. The inventory source can be a single group or host, a selection of multiple hosts, or a selection of multiple groups.",
+                dataTipWatch: "adhocCommandTooltip",
                 actionClass: 'btn List-buttonDefault',
-                buttonContent: 'RUN COMMANDS'
+                buttonContent: 'RUN COMMANDS',
+                showTipWhenDisabled: true,
+                tooltipInnerClass: "Tooltip-wide"
                 // TODO: set up a tip watcher and change text based on when
                 // things are selected/not selected.  This is started and
                 // commented out in the inventory controller within the watchers.

awx/ui/client/src/lists/InventoryHosts.js

@@ -100,8 +100,9 @@ export default
                 dataPlacement: 'top',
                 awFeature: 'system_tracking',
                 actionClass: 'btn List-buttonDefault system-tracking',
-                ngShow: 'hostsSelected',
+                ngDisabled: 'systemTrackingDisabled || !hostsSelected',
-                ngDisabled: 'systemTrackingDisabled'
+                showTipWhenDisabled: true,
+                tooltipInnerClass: "Tooltip-wide"
             },
             refresh: {
                 mode: 'all',

awx/ui/client/src/shared/list-generator/list-actions.partial.html

@@ -1,23 +1,35 @@
 <span ng-repeat="(name, options) in list.actions" class="List-action" ng-hide="isHiddenByOptions(options) ||
             hiddenOnCurrentPage(options.basePaths) ||
             hiddenInCurrentMode(options.mode)">
-    <!-- TODO: Unfortunately, the data-tip-watch attribute is not loaded for
+    <div class="List-action--showTooltipOnDisabled" ng-if="options.showTipWhenDisabled" aw-tool-tip="{{options.awToolTip}}" data-tip-watch="{{options.dataTipWatch}}" data-placement="{{options.dataPlacement}}" data-container="{{options.dataContainer}}" data-title="{{options.dataTitle}}" data-tooltip-inner-class="{{options.tooltipInnerClass}}">
-    some reason -->
+        <button
-    <button
+            toolbar-button
-        toolbar-button
+            mode="options.mode"
-        mode="options.mode"
+            class="{{options.actionClass}}"
-        aw-tool-tip="{{options.awToolTip}}"
+            ng-disabled="{{options.ngDisabled}}"
-        data-tip-watch="{{options.dataTipWatch}}"
+            ng-click="$eval(options.ngClick)"
-        data-placement="{{options.dataPlacement}}"
+            toolbar="true"
-        data-container="{{options.dataContainer}}"
+            aw-feature="{{options.awFeature}}">
-        class="{{options.actionClass}}"
+            <span ng-bind-html="options.buttonContent"></span>
-        data-title="{{options.dataTitle}}"
+        </button>
-        ng-disabled="{{options.ngDisabled}}"
+    </div>
-        ng-click="$eval(options.ngClick)"
+    <span ng-if="!options.showTipWhenDisabled">
-        toolbar="true"
+        <button
-        aw-feature="{{options.awFeature}}">
+            toolbar-button
-        <span ng-bind-html="options.buttonContent"></span>
+            mode="options.mode"
-    </button>
+            aw-tool-tip="{{options.awToolTip}}"
+            data-tip-watch="{{options.dataTipWatch}}"
+            data-placement="{{options.dataPlacement}}"
+            data-container="{{options.dataContainer}}"
+            class="{{options.actionClass}}"
+            data-title="{{options.dataTitle}}"
+            ng-disabled="{{options.ngDisabled}}"
+            ng-click="$eval(options.ngClick)"
+            toolbar="true"
+            aw-feature="{{options.awFeature}}">
+            <span ng-bind-html="options.buttonContent"></span>
+        </button>
+    </span>
 
 </span>
 <button

awx/ui/client/src/tooltip/tooltip.block.less

@@ -5,3 +5,6 @@
     white-space: pre-wrap;
     word-break: break-word;
 }
+.Tooltip-wide {
+    max-width: 300px!important;
+}