clean up launch prompt credentials, display errors

awx/ui_next/src/components/ContentError/ContentError.jsx

@@ -25,6 +25,7 @@ function ContentError({ error, children, isNotFound, i18n }) {
       return null;
     }
   }
+  console.error(error);
   const is404 =
     isNotFound || (error && error.response && error.response.status === 404);
   const is401 = error && error.response && error.response.status === 401;

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

@@ -9,6 +9,7 @@ import AnsibleSelect from '@components/AnsibleSelect';
 import OptionsList from '@components/OptionsList';
 import ContentLoading from '@components/ContentLoading';
 import CredentialChip from '@components/CredentialChip';
+import ContentError from '@components/ContentError';
 import { getQSConfig, parseQueryString } from '@util/qs';
 import useRequest from '@util/useRequest';
 
@@ -21,7 +22,6 @@ const QS_CONFIG = getQSConfig('inventory', {
 function CredentialsStep({ i18n }) {
   const [field, , helpers] = useField('credentials');
   const [selectedType, setSelectedType] = useState(null);
-  const [selectedItems, setSelectedItems] = useState([]);
   const history = useHistory();
 
   const isTypeSelected = !!selectedType;
@@ -54,10 +54,13 @@ function CredentialsStep({ i18n }) {
     request: fetchCredentials,
   } = useRequest(
     useCallback(async () => {
+      if (!selectedType) {
+        return { credentials: [], count: 0 };
+      }
       const params = parseQueryString(QS_CONFIG, history.location.search);
       const { data } = await CredentialsAPI.read({
         ...params,
-        credential_type: selectedType.id || 1,
+        credential_type: selectedType.id,
       });
       return {
         credentials: data.results,
@@ -75,6 +78,10 @@ function CredentialsStep({ i18n }) {
     return <ContentLoading />;
   }
 
+  if (typesError || credentialsError) {
+    return <ContentError error={typesError || credentialsError} />;
+  }
+
   const isVault = selectedType?.kind === 'vault';
 
   const renderChip = ({ item, removeItem, canDelete }) => (
@@ -110,53 +117,54 @@ function CredentialsStep({ i18n }) {
           />
         </ToolbarItem>
       )}
-      <OptionsList
+      {!isCredentialsLoading && (
-        value={field.value || []}
+        <OptionsList
-        options={credentials}
+          value={field.value || []}
-        optionCount={count}
+          options={credentials}
-        searchColumns={[
+          optionCount={count}
-          {
+          searchColumns={[
-            name: i18n._(t`Name`),
+            {
-            key: 'name',
+              name: i18n._(t`Name`),
-            isDefault: true,
+              key: 'name',
-          },
+              isDefault: true,
-          {
+            },
-            name: i18n._(t`Created By (Username)`),
+            {
-            key: 'created_by__username',
+              name: i18n._(t`Created By (Username)`),
-          },
+              key: 'created_by__username',
-          {
+            },
-            name: i18n._(t`Modified By (Username)`),
+            {
-            key: 'modified_by__username',
+              name: i18n._(t`Modified By (Username)`),
-          },
+              key: 'modified_by__username',
-        ]}
+            },
-        sortColumns={[
+          ]}
-          {
+          sortColumns={[
-            name: i18n._(t`Name`),
+            {
-            key: 'name',
+              name: i18n._(t`Name`),
-          },
+              key: 'name',
-        ]}
+            },
-        multiple={isVault}
+          ]}
-        header={i18n._(t`Credentials`)}
+          multiple={isVault}
-        name="credentials"
+          header={i18n._(t`Credentials`)}
-        qsConfig={QS_CONFIG}
+          name="credentials"
-        readOnly={false}
+          qsConfig={QS_CONFIG}
-        selectItem={item => {
+          readOnly={false}
-          const hasSameVaultID = val =>
+          selectItem={item => {
-            val?.inputs?.vault_id !== undefined &&
+            const hasSameVaultID = val =>
-            val?.inputs?.vault_id === item?.inputs?.vault_id;
+              val?.inputs?.vault_id !== undefined &&
-          const hasSameKind = val => val.kind === item.kind;
+              val?.inputs?.vault_id === item?.inputs?.vault_id;
-          const newItems = selectedItems.filter(i =>
+            const hasSameKind = val => val.kind === item.kind;
-            isVault ? !hasSameVaultID(i) : !hasSameKind(i)
+            const newItems = field.value.filter(i =>
-          );
+              isVault ? !hasSameVaultID(i) : !hasSameKind(i)
-          newItems.push(item);
+            );
-          setSelectedItems(newItems);
+            newItems.push(item);
-        }}
+            helpers.setValue(newItems);
-        deselectItem={item => {
+          }}
-          setSelectedItems(selectedItems.filter(i => i.id !== item.id));
+          deselectItem={item => {
-        }}
+            helpers.setValue(field.value.filter(i => i.id !== item.id));
-        renderItemChip={renderChip}
+          }}
-      />
+          renderItemChip={renderChip}
-      )
+        />
+      )}
     </>
   );
 }

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

@@ -8,6 +8,7 @@ import { getQSConfig, parseQueryString } from '@util/qs';
 import useRequest from '@util/useRequest';
 import OptionsList from '@components/OptionsList';
 import ContentLoading from '@components/ContentLoading';
+import ContentError from '@components/ContentError';
 
 const QS_CONFIG = getQSConfig('inventory', {
   page: 1,
@@ -21,7 +22,7 @@ function InventoryStep({ i18n }) {
 
   const {
     isLoading,
-    // error,
+    error,
     result: { inventories, count },
     request: fetchInventories,
   } = useRequest(
@@ -46,6 +47,9 @@ function InventoryStep({ i18n }) {
   if (isLoading) {
     return <ContentLoading />;
   }
+  if (error) {
+    return <ContentError error={error} />;
+  }
 
   return (
     <OptionsList

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

@@ -66,6 +66,9 @@ function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
     if (values.inventory) {
       postValues.inventory_id = values.inventory.id;
     }
+    if (values.credentials) {
+      postValues.credentials = values.credentials.map(c => c.id);
+    }
     onLaunch(postValues);
   };