Inventory File field and playbook field are both now type ahead.

awx/ui_next/src/screens/Inventory/shared/InventorySourceForm.jsx

@@ -161,7 +161,7 @@ const InventorySourceFormFields = ({ source, sourceOptions, i18n }) => {
           />
         </FormGroup>
       )}
-      {sourceField.value !== '' && (
+      {!['', 'custom'].includes(sourceField.value) && (
         <SubFormLayout>
           <Title size="md" headingLevel="h4">
             {i18n._(t`Source details`)}

awx/ui_next/src/screens/Inventory/shared/InventorySourceForm.test.jsx

@@ -93,7 +93,8 @@ describe('<InventorySourceForm />', () => {
           id: 2,
           name: 'mock proj',
         });
-        wrapper.find('AnsibleSelect#source_path').prop('onChange')(null, 'foo');
+        wrapper.find('Select#source_path').prop('onToggle')();
+        wrapper.find('Select#source_path').prop('onSelect')(null, 'foo');
         wrapper.find('AnsibleSelect#verbosity').prop('onChange')(null, '2');
         wrapper.find('button[aria-label="Save"]').simulate('click');
       });

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.jsx

@@ -1,13 +1,17 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { FormGroup } from '@patternfly/react-core';
+import {
+  FormGroup,
+  SelectVariant,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core';
 import { ProjectsAPI } from '../../../../api';
 import useRequest from '../../../../util/useRequest';
 import { required } from '../../../../util/validators';
 
-import AnsibleSelect from '../../../../components/AnsibleSelect';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import ProjectLookup from '../../../../components/Lookup/ProjectLookup';
 import Popover from '../../../../components/Popover';
@@ -21,6 +25,7 @@ import {
 } from './SharedFields';
 
 const SCMSubForm = ({ autoPopulateProject, i18n }) => {
+  const [isOpen, setIsOpen] = useState(false);
   const { setFieldValue, setFieldTouched } = useFormikContext();
   const [credentialField] = useField('credential');
   const [projectField, projectMeta, projectHelpers] = useField({
@@ -106,26 +111,25 @@ const SCMSubForm = ({ autoPopulateProject, i18n }) => {
           />
         }
       >
-        <AnsibleSelect
+        <Select
-          {...sourcePathField}
+          variant={SelectVariant.typeahead}
+          onToggle={setIsOpen}
+          isOpen={isOpen}
+          selections={sourcePathField.value}
           id="source_path"
           isValid={
             (!sourcePathMeta.error || !sourcePathMeta.touched) &&
             !sourcePathError?.message
           }
-          data={[
+          onSelect={(event, value) => {
-            {
-              value: '',
-              key: '',
-              label: i18n._(t`Choose an inventory file`),
-              isDisabled: true,
-            },
-            ...sourcePath.map(value => ({ value, label: value, key: value })),
-          ]}
-          onChange={(event, value) => {
             sourcePathHelpers.setValue(value);
           }}
-        />
+          isCreateable={false}
+        >
+          {sourcePath.map(path => (
+            <SelectOption key={path} value={path} />
+          ))}
+        </Select>
       </FormGroup>
       <VerbosityField />
       <HostFilterField />

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SCMSubForm.test.jsx

@@ -89,16 +89,16 @@ describe('<SCMSubForm />', () => {
   });
 
   test('changing source project should reset source path dropdown', async () => {
-    expect(wrapper.find('AnsibleSelect#source_path').prop('value')).toEqual('');
+    expect(wrapper.find('Select#source_path').prop('selections')).toEqual('');
-
     await act(async () => {
-      await wrapper.find('AnsibleSelect#source_path').prop('onChange')(
+      await wrapper.find('Select#source_path').prop('onToggle')();
-        null,
-        'bar'
-      );
     });
     wrapper.update();
-    expect(wrapper.find('AnsibleSelect#source_path').prop('value')).toEqual(
+    await act(async () => {
+      await wrapper.find('Select#source_path').prop('onSelect')(null, 'bar');
+    });
+    wrapper.update();
+    expect(wrapper.find('Select#source_path').prop('selections')).toEqual(
       'bar'
     );
 
@@ -109,6 +109,6 @@ describe('<SCMSubForm />', () => {
       });
     });
     wrapper.update();
-    expect(wrapper.find('AnsibleSelect#source_path').prop('value')).toEqual('');
+    expect(wrapper.find('Select#source_path').prop('selections')).toEqual('');
   });
 });

awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.test.jsx

@@ -145,12 +145,9 @@ describe('<JobTemplateAdd />', () => {
         summary_fields: { organization: { id: 1, name: 'Org Foo' } },
       });
       wrapper.update();
-      wrapper
+      wrapper.find('Select#template-playbook').prop('onToggle')();
-        .find('PlaybookSelect')
+      wrapper.update();
-        .prop('field')
+      wrapper.find('Select#template-playbook').prop('onSelect')(null, 'Baz');
-        .onChange({
-          target: { value: 'Baz', name: 'playbook' },
-        });
     });
     wrapper.update();
     act(() => {
@@ -207,12 +204,9 @@ describe('<JobTemplateAdd />', () => {
         summary_fields: { organization: { id: 1, name: 'Org Foo' } },
       });
       wrapper.update();
-      wrapper
+      wrapper.find('Select#template-playbook').prop('onToggle')();
-        .find('PlaybookSelect')
+      wrapper.update();
-        .prop('field')
+      wrapper.find('Select#template-playbook').prop('onSelect')(null, 'Bar');
-        .onChange({
-          target: { value: 'Bar', name: 'playbook' },
-        });
     });
     wrapper.update();
     act(() => {

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -307,9 +307,10 @@ function JobTemplateForm({
           }
         >
           <PlaybookSelect
+            onChange={playbookHelpers.setValue}
             projectId={projectField.value?.id}
             isValid={!playbookMeta.touched || !playbookMeta.error}
-            field={playbookField}
+            selected={playbookField.value}
             onBlur={() => playbookHelpers.setTouched()}
             onError={setContentError}
           />

awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx

@@ -200,9 +200,12 @@ describe('<JobTemplateForm />', () => {
         'devel'
       );
       wrapper.find('TextInputBase#template-limit').prop('onChange')(1234567890);
-      wrapper.find('AnsibleSelect[name="playbook"]').simulate('change', {
+      wrapper.find('Select#template-playbook').prop('onToggle')();
-        target: { value: 'new baz type', name: 'playbook' },
+      wrapper.update();
-      });
+      wrapper.find('Select#template-playbook').prop('onSelect')(
+        null,
+        'new baz type'
+      );
     });
 
     await act(async () => {
@@ -237,9 +240,9 @@ describe('<JobTemplateForm />', () => {
     expect(wrapper.find('input#template-limit').prop('value')).toEqual(
       1234567890
     );
-    expect(
+    expect(wrapper.find('Select#template-playbook').prop('selections')).toEqual(
-      wrapper.find('AnsibleSelect[name="playbook"]').prop('value')
+      'new baz type'
-    ).toEqual('new baz type');
+    );
     expect(wrapper.find('MultiCredentialsLookup').prop('value')).toEqual([
       {
         id: 2,

awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx

@@ -2,12 +2,21 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { number, string, oneOfType } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import AnsibleSelect from '../../../components/AnsibleSelect';
+import { SelectVariant, Select, SelectOption } from '@patternfly/react-core';
 import { ProjectsAPI } from '../../../api';
 import useRequest from '../../../util/useRequest';
 
-function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
+function PlaybookSelect({
+  projectId,
+  isValid,
+  selected,
+  onBlur,
+  onError,
+  onChange,
+  i18n,
+}) {
   const [isDisabled, setIsDisabled] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const {
     result: options,
     request: fetchOptions,
@@ -20,21 +29,8 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
       }
       const { data } = await ProjectsAPI.readPlaybooks(projectId);
 
-      const opts = (data || []).map(playbook => ({
+      return data;
-        value: playbook,
+    }, [projectId]),
-        key: playbook,
-        label: playbook,
-        isDisabled: false,
-      }));
-
-      opts.unshift({
-        value: '',
-        key: '',
-        label: i18n._(t`Choose a playbook`),
-        isDisabled: false,
-      });
-      return opts;
-    }, [projectId, i18n]),
     []
   );
 
@@ -52,23 +48,26 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
     }
   }, [error, onError]);
 
-  const isDisabledData = [
-    {
-      value: field.value || '',
-      label: field.value || '',
-      key: 1,
-      isDisabled: true,
-    },
-  ];
   return (
-    <AnsibleSelect
+    <Select
+      isOpen={isOpen}
+      variant={SelectVariant.typeahead}
+      selections={selected}
+      onToggle={setIsOpen}
+      placeholderText={i18n._(t`Select a playbook`)}
+      isCreateable={false}
+      onSelect={(event, value) => {
+        onChange(value);
+      }}
       id="template-playbook"
-      data={isDisabled ? isDisabledData : options}
       isValid={isValid}
-      {...field}
       onBlur={onBlur}
       isDisabled={isLoading || isDisabled}
-    />
+    >
+      {options.map(opt => (
+        <SelectOption key={opt} value={opt} />
+      ))}
+    </Select>
   );
 }
 PlaybookSelect.propTypes = {