Merge pull request #6594 from mabashian/6571-selected-credentials-preview

Updated launch preview of selected inventory and credentials

awx/ui/client/src/job-submission/job-submission.block.less

@@ -177,7 +177,6 @@
 }
 
 .JobSubmission-revertLink {
-    padding-left:10px;
     font-size: 14px;
 }
 
@@ -190,6 +189,10 @@
 .JobSubmission-selectedItemInfo {
     display: flex;
     flex: 0 0 100%;
+    background-color: @default-no-items-bord;
+    border: 1px solid @default-border;
+    padding: 10px;
+    border-radius: 5px;
 }
 .JobSubmission-selectedItemRevert {
     display: flex;
@@ -200,10 +203,13 @@
     justify-content: flex-end;
     margin-bottom: 15px;
 }
-.JobSubmission-label {
+.JobSubmission-selectedItemLabel, .JobSubmission-label {
     color: @default-interface-txt;
     margin-right: 10px;
 }
+.JobSubmission-label {
+    line-height: 24px;
+}
 .JobSubmission-selectedItemNone {
     color: @default-icon;
 }
@@ -223,5 +229,25 @@
     margin-top: auto;
 }
 .JobSubmission-selectedItemLabel {
-    flex: 0 0 165px;
+    flex: 0 0 80px;
+    line-height: 29px;
+}
+.JobSubmission-previewTags--outer {
+    flex: 1 0 auto;
+    max-width: ~"calc(100% - 140px)";
+}
+.JobSubmission-previewTags--inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+.JobSubmission-previewTagLabel {
+    color: @default-list-header-bg;
+}
+.JobSubmission-previewTagRevert {
+    flex: 0 0 60px;
+    line-height: 29px;
+}
+.JobSubmission-previewTagContainer {
+    display: flex;
 }

awx/ui/client/src/job-submission/job-submission.controller.js

@@ -358,6 +358,9 @@ export default
                 if($scope.has_default_inventory) {
                     $scope.selected_inventory = angular.copy($scope.defaults.inventory);
                 }
+                else {
+                    $scope.selected_inventory = null;
+                }
             };
 
             $scope.revertToDefaultCredentials = function() {
@@ -556,5 +559,17 @@ export default
                 $scope.selected_inventory = _.cloneDeep(selectedRow);
             });
 
+            $scope.deleteMachineCred = function() {
+                $scope.selected_credentials.machine = null;
+            };
+
+            $scope.deleteExtraCred = function(index) {
+                $scope.selected_credentials.extra.splice(index, 1);
+            };
+
+            $scope.deleteSelectedInventory = function() {
+                $scope.selected_inventory = null;
+            };
+
         }
     ];

awx/ui/client/src/job-submission/job-submission.partial.html

@@ -24,13 +24,25 @@
             <div ng-if="ask_inventory_on_launch" ng-show="step === 'inventory'" class="JobSubmission-form">
                 <div class="JobSubmission-selectedItemContainer">
                     <div class="JobSubmission-selectedItem">
-                        <div class="JobSubmission-selectedItemInfo">
-                            <span class="JobSubmission-label" translate>SELECTED INVENTORY:</span>
-                            <span ng-show="selected_inventory" ng-bind="selected_inventory.name"></span>
-                            <span class="JobSubmission-selectedItemNone" ng-show="!selected_inventory" translate>None selected</span>
-                        </div>
-                        <div class="JobSubmission-selectedItemRevert" ng-if="ask_inventory_on_launch && has_default_inventory">
-                            <a class="Form-labelAction JobSubmission-revertLink" href="" ng-hide="selected_inventory.id === defaults.inventory.id" ng-click="revertToDefaultInventory()" translate>REVERT</a>
+                        <div class="JobSubmission-selectedItemInfo" ng-hide="!selected_inventory">
+                            <div class="JobSubmission-selectedItemLabel">
+                                <span translate>SELECTED:</span>
+                            </div>
+                            <div class="JobSubmission-previewTags--outer">
+                                <div class="JobSubmission-previewTags--inner">
+                                    <div class="JobSubmission-previewTagContainer">
+                                        <div class="JobSubmission-previewTagContainerDelete" ng-click="deleteSelectedInventory()">
+                                            <i class="fa fa-times JobSubmission-previewTagContainerTagDelete"></i>
+                                        </div>
+                                        <div class="JobSubmission-previewTag JobSubmission-previewTag--deletable">
+                                            <span>{{selected_inventory.name}}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="JobSubmission-previewTagRevert">
+                                <a class="JobSubmission-revertLink" href="" ng-hide="selected_inventory.id === defaults.inventory.id" ng-click="revertToDefaultInventory()" translate>REVERT</a>
+                            </div>
                         </div>
                     </div>
                     <job-sub-inv-list ng-if="includeInventoryList" selected-inventory="$parent.selected_inventory"></job-sub-inv-list>
@@ -39,24 +51,33 @@
             <div ng-if="ask_credential_on_launch || password_needed" ng-show="step === 'credential'" class="JobSubmission-form">
                 <div class="JobSubmission-selectedItemContainer">
                     <div class="JobSubmission-selectedItem">
-                        <div class="JobSubmission-selectedItemInfo">
+                        <div class="JobSubmission-selectedItemInfo" ng-hide="!selected_credentials.machine && selected_credentials.extra.length === 0">
                             <div class="JobSubmission-selectedItemLabel">
-                                <span class="JobSubmission-label" translate>SELECTED CREDENTIAL</span>
+                                <span translate>SELECTED:</span>
                             </div>
-                            <div>
-                                <span ng-show="selected_credentials.machine" class="JobSubmission-selectedItemInfoSubTitle"><span translate>Machine:</span>&nbsp;</span>
-                                <span ng-show="selected_credentials.machine">{{selected_credentials.machine.name}}</span>
-                                <span ng-show="selected_credentials.machine && selected_credentials.extra.length > 0">,&nbsp;</span>
-                                <span ng-repeat="extraCredential in selected_credentials.extra">
-                                    <span class="JobSubmission-previewItemSubTitle">{{credential_types[extraCredential.credential_type].name}}:&nbsp;</span>
-                                    <span>{{extraCredential.name}}{{$last ? '' : ',&nbsp;'}}</span>
-                                </span>
-                                <span class="JobSubmission-selectedItemNone" ng-show="!selected_credentials.machine && selected_credentials.extra.length === 0" translate>None selected</span>
-                                <span ng-if="ask_credential_on_launch">
-                                    <a class="JobSubmission-revertLink" href="" ng-show="showRevertCredentials()" ng-click="revertToDefaultCredentials()" translate>REVERT</a>
-                                </span>
+                            <div class="JobSubmission-previewTags--outer">
+                                <div class="JobSubmission-previewTags--inner">
+                                    <div class="JobSubmission-previewTagContainer" ng-show="selected_credentials.machine">
+                                        <div class="JobSubmission-previewTagContainerDelete" ng-click="deleteMachineCred()" ng-show="ask_credential_on_launch">
+                                            <i class="fa fa-times JobSubmission-previewTagContainerTagDelete"></i>
+                                        </div>
+                                        <div class="JobSubmission-previewTag" ng-class="{'JobSubmission-previewTag--deletable': ask_credential_on_launch}">
+                                            <span><span class="JobSubmission-previewTagLabel">MACHINE</span>:&nbsp;{{selected_credentials.machine.name}}</span>
+                                        </div>
+                                    </div>
+                                    <div class="JobSubmission-previewTagContainer" ng-repeat="extraCredential in selected_credentials.extra">
+                                        <div class="JobSubmission-previewTagContainerDelete" ng-click="deleteExtraCred($index)" ng-show="ask_credential_on_launch">
+                                            <i class="fa fa-times JobSubmission-previewTagContainerTagDelete"></i>
+                                        </div>
+                                        <div class="JobSubmission-previewTag" ng-class="{'JobSubmission-previewTag--deletable': ask_credential_on_launch}">
+                                            <span><span class="JobSubmission-previewTagLabel">{{credential_types[extraCredential.credential_type].name | uppercase}}</span>:&nbsp;{{extraCredential.name}}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="JobSubmission-previewTagRevert" ng-if="ask_credential_on_launch">
+                                <a class="JobSubmission-revertLink" href="" ng-show="showRevertCredentials()" ng-click="revertToDefaultCredentials()" translate>REVERT</a>
                             </div>
-
                         </div>
                     </div>
                     <div class="JobSubmission-credentialSubSection" ng-show="ask_credential_on_launch">

awx/ui/client/src/job-submission/lists/credential/job-sub-cred-list.controller.js

@@ -106,27 +106,15 @@ export default
 
             $scope.toggle_row = function(selectedRow) {
                 if(parseInt($scope.credentialKind) === 1) {
-                    if($scope.selectedCredentials.machine && $scope.selectedCredentials.machine.id === selectedRow.id) {
-                        $scope.selectedCredentials.machine = null;
-                    }
-                    else {
-                        $scope.selectedCredentials.machine = _.cloneDeep(selectedRow);
-                    }
+                    $scope.selectedCredentials.machine = _.cloneDeep(selectedRow);
                 }
                 else {
-                    let rowDeselected = false;
                     for (let i = $scope.selectedCredentials.extra.length - 1; i >= 0; i--) {
-                        if($scope.selectedCredentials.extra[i].id === selectedRow.id) {
-                            $scope.selectedCredentials.extra.splice(i, 1);
-                            rowDeselected = true;
-                        }
-                        else if(selectedRow.credential_type === $scope.selectedCredentials.extra[i].credential_type) {
+                        if(selectedRow.credential_type === $scope.selectedCredentials.extra[i].credential_type) {
                             $scope.selectedCredentials.extra.splice(i, 1);
                         }
                     }
-                    if(!rowDeselected) {
-                        $scope.selectedCredentials.extra.push(_.cloneDeep(selectedRow));
-                    }
+                    $scope.selectedCredentials.extra.push(_.cloneDeep(selectedRow));
                 }
             };
 

awx/ui/client/src/job-submission/lists/inventory/job-sub-inv-list.controller.js

@@ -7,6 +7,37 @@
 export default
     [   '$scope',
         function($scope) {
+
+            let updateInventoryList = function() {
+                $scope.inventories.forEach((row, i) => {
+                    $scope.inventories[i].checked = 0;
+                    if (row.id === $scope.selectedInventory.id) {
+                        $scope.inventories[i].checked = 1;
+                    }
+                });
+            };
+
+            let uncheckAllInventories = function() {
+                $scope.inventories.forEach((row, i) => {
+                    $scope.inventories[i].checked = 0;
+                });
+            };
+
+            let init = function() {
+                $scope.$watch('selectedInventory', () => {
+                    if($scope.inventories && $scope.inventories.length > 0) {
+                        if($scope.selectedInventory) {
+                            updateInventoryList();
+                        }
+                        else {
+                            uncheckAllInventories();
+                        }
+                    }
+                });
+            };
+
+            init();
+
             $scope.toggle_row = function(selectedRow) {
                 let list = $scope.list;
                 let count = 0;

awx/ui/client/src/templates/labels/labelsList.block.less

@@ -14,7 +14,7 @@
     max-width: 200px;
 }
 
-.LabelList-tag {
+.LabelList-tag, .JobSubmission-previewTag {
     border-radius: 5px;
     padding: 2px 10px;
     margin: 4px 0px;
@@ -40,7 +40,7 @@
     color: @default-link-hov;
 }
 
-.LabelList-tag--deletable {
+.LabelList-tag--deletable, .JobSubmission-previewTag--deletable {
     color: @default-bg;
     background-color: @default-link;
     margin-right: 0px;
@@ -51,7 +51,7 @@
     margin-right: 5px;
 }
 
-.LabelList-deleteContainer {
+.LabelList-deleteContainer, .JobSubmission-previewTagContainerDelete {
     background-color: @default-link;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -77,11 +77,11 @@
     max-width: ~"calc(100% - 23px)";
 }
 
-.LabelList-deleteContainer:hover, {
+.LabelList-deleteContainer:hover, .JobSubmission-previewTagContainerDelete:hover {
     border-color: @default-err;
     background-color: @default-err;
 }
 
-.LabelList-deleteContainer:hover > .LabelList-tagDelete {
+.LabelList-deleteContainer:hover > .LabelList-tagDelete, .JobSubmission-previewTagContainerDelete:hover > .JobSubmission-previewTagContainerTagDelete {
     color: @default-bg;
 }