Adding the vault preview to the job-launch-modal

in cases where "prompt-for-credential" is applied to the JT

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

@@ -176,6 +176,7 @@ export default
                     $scope.password_needed = data.passwords_needed_to_start && data.passwords_needed_to_start.length > 0;
                     $scope.has_default_inventory = data.defaults && data.defaults.inventory && data.defaults.inventory.id;
                     $scope.has_default_credential = data.defaults && data.defaults.credential && data.defaults.credential.id;
+                    $scope.has_default_vault_credential = data.defaults && data.defaults.vault_credential && data.defaults.vault_credential.id;
                     $scope.has_default_extra_credentials = data.defaults && data.defaults.extra_credentials && data.defaults.extra_credentials.length > 0;
 
                     $scope.other_prompt_data = {};
@@ -244,6 +245,10 @@ export default
                         $scope.selected_credentials.machine = angular.copy($scope.defaults.credential);
                     }
 
+                    if($scope.has_default_vault_credential) {
+                        $scope.selected_credentials.vault = angular.copy($scope.defaults.vault_credential);
+                    }
+
                     if($scope.has_default_extra_credentials) {
                         $scope.selected_credentials.extra = angular.copy($scope.defaults.extra_credentials);
                     }
@@ -374,6 +379,12 @@ export default
                 else {
                     $scope.selected_credentials.machine = null;
                 }
+                if($scope.has_default_vault_credential) {
+                    $scope.selected_credentials.vault = angular.copy($scope.defaults.vault_credential);
+                }
+                else {
+                    $scope.selected_credentials.vault = null;
+                }
                 if($scope.has_default_extra_credentials) {
                     $scope.selected_credentials.extra = angular.copy($scope.defaults.extra_credentials);
                 }

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

@@ -73,6 +73,12 @@
                                             <span><span class="JobSubmission-previewTagLabel">{{credential_types[extraCredential.credential_type].name | uppercase}}</span>:&nbsp;{{extraCredential.name}}</span>
                                         </div>
                                     </div>
+                                    <div class="JobSubmission-previewTagContainer JobSubmission-previewTagContainer--vault" ng-show="selected_credentials.vault">
+                                        <div class="JobSubmission-previewTag JobSubmission-previewTag--vault" ng-class="{'JobSubmission-previewTag--deletable': ask_credential_on_launch}">
+                                            <span>
+                                                <span class="JobSubmission-previewTagLabel">VAULT</span>:&nbsp;{{selected_credentials.vault.name}}</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="JobSubmission-previewTagRevert" ng-if="ask_credential_on_launch">
@@ -167,7 +173,7 @@
                     </div>
                     <div class="form-group Form-formGroup Form-formGroup--singleColumn" ng-if="ask_verbosity_on_launch">
                         <label for="verbosity">
-                            <span class="Form-inputLabel prepend-asterisk"> Verbosity</span>
+                            <span class="Form-inputLabel prepend-asterisk" translate> Verbosity</span>
                         </label>
                         <div>
                             <select
@@ -333,6 +339,10 @@
                         <span class="JobSubmission-previewItemSubTitle">{{credential_types[extraCredential.credential_type].name}}:&nbsp;</span>
                         <span>{{extraCredential.name}}</span>
                     </div>
+                    <div>
+                        <span ng-show="selected_credentials.vault" class="JobSubmission-previewItemSubTitle"><span translate>Vault</span>:&nbsp;</span>
+                        <span ng-show="selected_credentials.vault">{{selected_credentials.vault.name}}</span>
+                    </div>
                 </div>
             </div>
             <div class="JobSubmission-footerButtons">

awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js

@@ -182,7 +182,8 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
                 });
 
                 $scope.$watchGroup(['credentials',
-                    'selectedCredentials.machine'], () => {
+                    'selectedCredentials.machine',
+                    'selectedCredentials.vault'], () => {
                         if($scope.credentials &&
                             $scope.credentials.length > 0) {
                                 if($scope.selectedCredentials &&

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

@@ -85,3 +85,16 @@
 .LabelList-deleteContainer:hover > .LabelList-tagDelete, .JobSubmission-previewTagContainerDelete:hover > .JobSubmission-previewTagContainerTagDelete {
     color: @default-bg;
 }
+
+.JobSubmission-previewTagContainer--vault{
+    flex: 1 0 auto;
+}
+
+.JobSubmission-previewTag--vault{
+    // background-color: #337AB7;
+    border-radius: 5px;
+    // color: #FFFFFF;
+    // margin: 4px 0px;
+    // align-items: center;
+    // max-height: 21px;
+}