add MultiCredentialsLookup select/deselect logic

awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx

@@ -92,7 +92,6 @@ function MultiCredentialsLookup(props) {
   }, []);
 
   useEffect(() => {
-    console.log('useEffect', selectedType);
     (async () => {
       if (!selectedType) {
         return;
@@ -111,21 +110,7 @@ function MultiCredentialsLookup(props) {
     })();
   }, [selectedType]);
 
-  // handleCredentialTypeSelect(value, type) {
-  //   const { credentialTypes } = this.state;
-  //   const selectedType = credentialTypes.filter(item => item.label === type);
-  //   this.setState({ selectedCredentialType: selectedType[0] }, () => {
-  //     this.loadCredentials();
-  //   });
-  // }
-
-  // const {
-  //   selectedCredentialType,
-  //   credentialTypes,
-  //   credentials,
-  //   credentialsCount,
-  // } = state;
-
+  const isMultiple = selectedType && selectedType.value === 'Vault';
   return (
     <FormGroup label={i18n._(t`Credentials`)} fieldId="multiCredential">
       {tooltip && <FieldTooltip content={tooltip} />}
@@ -134,15 +119,10 @@ function MultiCredentialsLookup(props) {
         onToggleItem={toggleCredentialSelection}
         id="multiCredential"
         lookupHeader={i18n._(t`Credentials`)}
-        // name="credentials"
         value={value}
         multiple
         onChange={onChange}
-        // items={credentials}
-        // count={credentialsCount}
         qsConfig={QS_CONFIG}
-        // columns={}
-        // TODO bind removeItem
         renderItemChip={({ item, removeItem, canDelete }) => (
           <CredentialChip
             key={item.id}
@@ -184,13 +164,25 @@ function MultiCredentialsLookup(props) {
                     isSearchable: true,
                   },
                 ]}
-                multiple={selectedType && selectedType.value === 'Vault'}
+                multiple={isMultiple}
                 header={i18n._(t`Credentials`)}
                 name="credentials"
                 qsConfig={QS_CONFIG}
                 readOnly={!canDelete}
-                selectItem={() => {}}
-                deselectItem={() => {}}
+                selectItem={item => {
+                  if (isMultiple) {
+                    return dispatch({ type: 'SELECT_ITEM', item });
+                  }
+                  const selectedItems = state.selectedItems.filter(
+                    i => i.kind !== item.kind
+                  );
+                  selectedItems.push(item);
+                  return dispatch({
+                    type: 'SET_SELECTED_ITEMS',
+                    selectedItems,
+                  });
+                }}
+                deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
               />
             </>
           );

awx/ui_next/src/components/Lookup/NewLookup.jsx

@@ -171,11 +171,7 @@ const Item = shape({
 
 Lookup.propTypes = {
   id: string,
-  // items: arrayOf(shape({})).isRequired,
-  // count: number.isRequired,
-  // TODO: change to `header`
   header: string,
-  // name: string,
   onChange: func.isRequired,
   value: oneOfType([Item, arrayOf(Item)]),
   multiple: bool,
@@ -189,7 +185,6 @@ Lookup.propTypes = {
 Lookup.defaultProps = {
   id: 'lookup-search',
   header: null,
-  // name: null,
   value: null,
   multiple: false,
   required: false,

awx/ui_next/src/components/Lookup/shared/reducer.js

@@ -15,6 +15,8 @@ export default function reducer(state, action) {
       return { ...state, multiple: action.value };
     case 'SET_VALUE':
       return { ...state, value: action.value };
+    case 'SET_SELECTED_ITEMS':
+      return { ...state, selectedItems: action.selectedItems };
     default:
       throw new Error(`Unrecognized action type: ${action.type}`);
   }