Merge pull request #12361 from kialam/refresh-data-lookup-modal

Allow lookup modals to refresh when opened.

awx/ui/src/components/Lookup/ApplicationLookup.js

@@ -83,6 +83,7 @@ function ApplicationLookup({ onChange, value, label, fieldName, validate }) {
         header={t`Application`}
         value={value}
         onChange={onChange}
+        onUpdate={fetchApplications}
         onDebounce={checkApplicationName}
         fieldName={fieldName}
         validate={validate}

awx/ui/src/components/Lookup/CredentialLookup.js

@@ -168,6 +168,7 @@ function CredentialLookup({
         value={value}
         onBlur={onBlur}
         onChange={onChange}
+        onUpdate={fetchCredentials}
         onDebounce={checkCredentialName}
         fieldName={fieldName}
         validate={validate}

awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js

@@ -156,6 +156,7 @@ function ExecutionEnvironmentLookup({
       value={value}
       onBlur={onBlur}
       onChange={onChange}
+      onUpdate={fetchExecutionEnvironments}
       onDebounce={checkExecutionEnvironmentName}
       fieldName={fieldName}
       validate={validate}

awx/ui/src/components/Lookup/HostFilterLookup.js

@@ -271,6 +271,7 @@ function HostFilterLookup({
       pathname: `${location.pathname}`,
       search: queryString,
     });
+    fetchHosts(organizationId);
     toggleModal();
   };
 

awx/ui/src/components/Lookup/InstanceGroupsLookup.js

@@ -75,6 +75,7 @@ function InstanceGroupsLookup({
         header={t`Instance Groups`}
         value={value}
         onChange={onChange}
+        onUpdate={fetchInstanceGroups}
         fieldName={fieldName}
         validate={validate}
         qsConfig={QS_CONFIG}

awx/ui/src/components/Lookup/InventoryLookup.js

@@ -138,6 +138,7 @@ function InventoryLookup({
         header={t`Inventory`}
         value={value}
         onChange={onChange}
+        onUpdate={fetchInventories}
         onBlur={onBlur}
         required={required}
         onDebounce={checkInventoryName}

awx/ui/src/components/Lookup/Lookup.js

@@ -52,6 +52,7 @@ function Lookup(props) {
     fieldName,
     validate,
     modalDescription,
+    onUpdate,
   } = props;
   const [typedText, setTypedText] = useState('');
   const debounceRequest = useDebounce(onDebounce, 1000);
@@ -120,6 +121,11 @@ function Lookup(props) {
     dispatch({ type: 'CLOSE_MODAL' });
   };
 
+  const onClick = () => {
+    onUpdate();
+    dispatch({ type: 'TOGGLE_MODAL' });
+  };
+
   const { isModalOpen, selectedItems } = state;
   const canDelete =
     (!required || (multiple && value.length > 1)) && !isDisabled;
@@ -137,7 +143,7 @@ function Lookup(props) {
           aria-label={t`Search`}
           id={`${id}-open`}
           ouiaId={`${id}-open`}
-          onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
+          onClick={onClick}
           variant={ButtonVariant.control}
           isDisabled={isLoading || isDisabled}
         >
@@ -223,6 +229,7 @@ Lookup.propTypes = {
   header: string,
   modalDescription: oneOfType([string, node]),
   onChange: func.isRequired,
+  onUpdate: func,
   value: oneOfType([Item, arrayOf(Item), object]),
   multiple: bool,
   required: bool,
@@ -255,6 +262,7 @@ Lookup.defaultProps = {
   ),
   validate: () => undefined,
   onDebounce: () => undefined,
+  onUpdate: () => {},
   isDisabled: false,
 };
 

awx/ui/src/components/Lookup/MultiCredentialsLookup.js

@@ -141,6 +141,7 @@ function MultiCredentialsLookup({
       validate={validate}
       multiple
       onChange={onChange}
+      onUpdate={fetchCredentials}
       qsConfig={QS_CONFIG}
       isLoading={isTypesLoading || isCredentialsLoading}
       renderItemChip={renderChip}

awx/ui/src/components/Lookup/MultiCredentialsLookup.test.js

@@ -203,6 +203,7 @@ describe('<Formik><MultiCredentialsLookup /></Formik>', () => {
     await act(async () => {
       searchButton.invoke('onClick')();
     });
+    expect(CredentialsAPI.read).toHaveBeenCalledTimes(2);
     const select = await waitForElement(wrapper, 'AnsibleSelect');
     CredentialsAPI.read.mockResolvedValueOnce({
       data: {
@@ -212,12 +213,10 @@ describe('<Formik><MultiCredentialsLookup /></Formik>', () => {
         count: 1,
       },
     });
-    expect(CredentialsAPI.read).toHaveBeenCalledTimes(1);
     await act(async () => {
       select.invoke('onChange')({}, 500);
     });
     wrapper.update();
-    expect(CredentialsAPI.read).toHaveBeenCalledTimes(2);
     expect(wrapper.find('OptionsList').prop('options')).toEqual([
       {
         id: 1,

awx/ui/src/components/Lookup/OrganizationLookup.js

@@ -109,6 +109,7 @@ function OrganizationLookup({
         onBlur={onBlur}
         onChange={onChange}
         onDebounce={checkOrganizationName}
+        onUpdate={fetchOrganizations}
         fieldName={fieldName}
         validate={validate}
         qsConfig={QS_CONFIG}

awx/ui/src/components/Lookup/ProjectLookup.js

@@ -111,6 +111,7 @@ function ProjectLookup({
         value={value}
         onBlur={onBlur}
         onChange={onChange}
+        onUpdate={fetchProjects}
         onDebounce={checkProjectName}
         fieldName={fieldName}
         validate={validate}