add selected credential tray to input source lookup

awx/ui/client/features/_index.less

@@ -1,5 +1,6 @@
 @import 'portalMode/_index';
 @import 'output/_index';
+@import 'credentials/_index';
 
 /** @define Popup Modal after create new token and applicaiton and save form */
 .PopupModal {

awx/ui/client/features/credentials/_index.less

@@ -0,0 +1,21 @@
+.InputSourceLookup-selectedItem {
+    display: flex;
+    flex: 0 0 100%;
+    align-items: center;
+    min-height: 50px;
+    margin-top: 16px;
+    border-radius: 5px;
+    background-color: @default-no-items-bord;
+    border: 1px solid @default-border;
+}
+
+.InputSourceLookup-selectedItemLabel {
+    color: @default-interface-txt;
+    text-transform: uppercase;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.InputSourceLookup-selectedItemText {
+    font-style: italic;
+}

awx/ui/client/features/credentials/add-edit-credentials.controller.js

@@ -338,7 +338,7 @@ function AddEditCredentialsController (
         }
     };
 
-    vm.onInputSourceRowClick = ({ id, credential_type, name }) => {
+    vm.onInputSourceItemSelect = ({ id, credential_type, name }) => {
         vm.inputSources.credentialId = id;
         vm.inputSources.credentialName = name;
         vm.inputSources.credentialTypeId = credential_type;

awx/ui/client/features/credentials/add-edit-credentials.view.html

@@ -46,13 +46,14 @@
 <at-input-source-lookup
     ng-if="vm.inputSources.field"
     selected-id="vm.inputSources.credentialId"
+    selected-name="vm.inputSources.credentialName"
     tabs="vm.inputSources.tabs"
     form="vm.inputSources.form"
     on-close="vm.onInputSourceClose"
     on-next="vm.onInputSourceNext"
     on-select="vm.onInputSourceSelect"
     on-tab-select="vm.onInputSourceTabSelect"
-    on-row-click="vm.onInputSourceRowClick"
+    on-item-select="vm.onInputSourceItemSelect"
     on-test="vm.onInputSourceTest"
     results-filter="vm.filterInputSourceCredentialResults"
 />

awx/ui/client/features/credentials/credentials.strings.js

@@ -32,6 +32,8 @@ function CredentialsStrings (BaseString) {
         METADATA: t.s('METADATA'),
         NO_MATCH: t.s('No records matched your search.'),
         NO_RECORDS: t.s('No external credentials available.'),
+        SELECTED: t.s('selected'),
+        NONE_SELECTED: t.s('No credential selected'),
     };
 
     ns.add = {

awx/ui/client/features/credentials/input-source-lookup.component.js

@@ -29,9 +29,10 @@ export default {
         onNext: '=',
         onSelect: '=',
         onTabSelect: '=',
-        onRowClick: '=',
+        onItemSelect: '=',
         onTest: '=',
         selectedId: '=',
+        selectedName: '=',
         form: '=',
         resultsFilter: '=',
     },

awx/ui/client/features/credentials/input-source-lookup.partial.html

@@ -13,6 +13,24 @@
             {{::vm.strings.get('inputSources.METADATA')}}
         </at-tab>
     </at-tab-group>
+    <div class="InputSourceLookup-selectedItem" ng-show="vm.tabs.credential._active">
+        <div class="InputSourceLookup-selectedItemLabel">
+            {{::vm.strings.get('inputSources.SELECTED')}}
+        </div>
+        <span>
+            <at-tag
+                ng-show="vm.selectedName"
+                tag="vm.selectedName"
+                icon="external"
+            />
+            <div
+                class="InputSourceLookup-selectedItemText"
+                ng-show="!vm.selectedName"
+            >
+                {{::vm.strings.get('inputSources.NONE_SELECTED')}}
+            </div>
+        </span>
+    </div>
     <at-lookup-list
         ng-show="vm.tabs.credential._active"
         resource-name="credential"
@@ -24,8 +42,7 @@
         results-filter="vm.resultsFilter"
         selected-id="vm.selectedId"
         on-ready="vm.onReady"
-        on-select="vm.onSelect"
+        on-item-select="vm.onItemSelect"
-        on-row-click="vm.onRowClick"
     />
     <at-form state="vm.form" autocomplete="off" id="input_source_form">
         <at-input-group

awx/ui/client/lib/components/lookup-list/lookup-list.component.js

@@ -42,8 +42,7 @@ export default {
     controller: LookupListController,
     controllerAs: 'vm',
     bindings: {
-        onSelect: '=',
+        onItemSelect: '=',
-        onRowClick: '=',
         onReady: '=',
         selectedId: '=',
         resourceName: '@',

awx/ui/client/lib/components/lookup-list/lookup-list.partial.html

@@ -63,13 +63,13 @@
                         <input type="radio"
                             name="check_{{ vm.resourceName }}_{{ obj.id }}"
                             ng-checked="obj.id === vm.selectedId"
-                            ng-click="vm.onRowClick(obj)"
+                            ng-click="vm.onItemSelect(obj)"
                         >
                     </div>
                     <div class="d-flex h-100">
                         <div
                             class="List-tableCell name-column col-sm-12"
-                             ng-click="vm.onRowClick(obj)"
+                             ng-click="vm.onItemSelect(obj)"
                         >
                             {{ obj.name }}
                         </div>