add launch prompt inventory step

awx/ui_next/src/components/LaunchButton/LaunchButton.jsx

@@ -163,7 +163,12 @@ class LaunchButton extends React.Component {
             <ErrorDetail error={launchError} />
           </AlertModal>
         )}
-        {showLaunchPrompt && <LaunchPrompt config={launchConfig} />}
+        {showLaunchPrompt && (
+          <LaunchPrompt
+            config={launchConfig}
+            onCancel={() => this.setState({ showLaunchPrompt: false })}
+          />
+        )}
       </Fragment>
     );
   }

awx/ui_next/src/components/LaunchPrompt/InventoryStep.jsx

@@ -1,7 +1,90 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { useField } from 'formik';
+import { InventoriesAPI } from '@api';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import useRequest from '@util/useRequest';
+// TODO move OptionsList out of Lookup/shared
+import { OptionsList } from '@components/Lookup';
+import ContentLoading from '@components/ContentLoading';
 
-function InventoryStep() {
+const QS_CONFIG = getQSConfig('inventory', {
-  return <div>Choose an inventory</div>;
+  page: 1,
+  page_size: 5,
+  order_by: 'name',
+});
+
+function InventoryStep({ i18n }) {
+  const history = useHistory();
+  const [field, meta, helpers] = useField('inventory');
+
+  const {
+    isLoading,
+    error,
+    result: { inventories, count },
+    request: fetchInventories,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, history.location.search);
+      const { data } = await InventoriesAPI.read(params);
+      if (!field.value && data.results.length) {
+        helpers.setValue(data.results[0]);
+      }
+      return {
+        inventories: data.results,
+        count: data.count,
+      };
+    }, [history.location]),
+    {
+      count: 0,
+      inventories: [],
+    }
+  );
+
+  useEffect(() => {
+    fetchInventories();
+  }, [fetchInventories]);
+
+  if (isLoading) {
+    return <ContentLoading />;
+  }
+
+  return (
+    <OptionsList
+      value={field.value ? [field.value] : []}
+      options={inventories}
+      optionCount={count}
+      searchColumns={[
+        {
+          name: i18n._(t`Name`),
+          key: 'name',
+          isDefault: true,
+        },
+        {
+          name: i18n._(t`Created By (Username)`),
+          key: 'created_by__username',
+        },
+        {
+          name: i18n._(t`Modified By (Username)`),
+          key: 'modified_by__username',
+        },
+      ]}
+      sortColumns={[
+        {
+          name: i18n._(t`Name`),
+          key: 'name',
+        },
+      ]}
+      header={i18n._(t`Inventory`)}
+      name="inventory"
+      qsConfig={QS_CONFIG}
+      readOnly
+      selectItem={helpers.setValue}
+      deselectItem={() => field.onChange(null)}
+    />
+  );
 }
 
-export default InventoryStep;
+export default withI18n()(InventoryStep);

awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { Wizard } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { Formik } from 'formik';
 import InventoryStep from './InventoryStep';
 import CredentialsStep from './CredentialsStep';
 import OtherPromptsStep from './OtherPromptsStep';
 import SurveyStep from './SurveyStep';
 import PreviewStep from './PreviewStep';
 
-function LaunchPrompt({ config, i18n }) {
+function LaunchPrompt({ config, onCancel, i18n }) {
+  // CONFIG
   // can_start_without_user_input: false
   // passwords_needed_to_start: []
   // ask_scm_branch_on_launch: false
@@ -26,14 +28,17 @@ function LaunchPrompt({ config, i18n }) {
   // credential_needed_to_start: false
   // inventory_needed_to_start: false
   // job_template_data: {name: "JT with prompts", id: 25, description: ""
+
   const steps = [];
+  const initialValues = {};
   if (config.ask_inventory_on_launch) {
+    initialValues.inventory = null;
     steps.push({
       name: i18n._(t`Inventory`),
       component: <InventoryStep />,
     });
   }
-  // angular code was:
+  // TODO: match old UI Logic:
   // if (vm.promptDataClone.launchConf.ask_credential_on_launch ||
   //     (_.has(vm, 'promptDataClone.prompts.credentials.passwords.vault') &&
   //     vm.promptDataClone.prompts.credentials.passwords.vault.length > 0) ||
@@ -42,6 +47,7 @@ function LaunchPrompt({ config, i18n }) {
   //     _.has(vm, 'promptDataClone.prompts.credentials.passwords.ssh_password')
   // ) {
   if (config.ask_credential_on_launch) {
+    initialValues.credentials = [];
     steps.push({
       name: i18n._(t`Credential`),
       component: <CredentialsStep />,
@@ -73,17 +79,23 @@ function LaunchPrompt({ config, i18n }) {
     component: <PreviewStep />,
   });
 
-  const handleClose = x => {
+  const handleSubmit = x => {
-    console.log(x);
+    console.log('SUBMIT', x);
   };
 
   return (
-    <Wizard
+    <Formik
-      isOpen
+      initialValues={initialValues}
-      onClose={handleClose}
+      onSubmit={() => console.log('FORMIK SUBMIT ?!')}
-      title={i18n._(t`Prompts`)}
+    >
-      steps={steps}
+      <Wizard
-    />
+        isOpen
+        onClose={onCancel}
+        onSave={handleSubmit}
+        title={i18n._(t`Prompts`)}
+        steps={steps}
+      />
+    </Formik>
   );
 }
 

awx/ui_next/src/components/Lookup/index.js

@@ -3,3 +3,4 @@ export { default as InstanceGroupsLookup } from './InstanceGroupsLookup';
 export { default as InventoryLookup } from './InventoryLookup';
 export { default as ProjectLookup } from './ProjectLookup';
 export { default as MultiCredentialsLookup } from './MultiCredentialsLookup';
+export { default as OptionsList } from './shared/OptionsList';