From 8baa9d8458ca7242d1157d8bbc93644f0d3bc34a Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 3 Apr 2020 11:47:06 -0700
Subject: [PATCH] clean up launch prompt credentials, display errors

---
 .../components/ContentError/ContentError.jsx  |   1 +
 .../LaunchPrompt/CredentialsStep.jsx          | 106 ++++++++++--------
 .../components/LaunchPrompt/InventoryStep.jsx |   6 +-
 .../components/LaunchPrompt/LaunchPrompt.jsx  |   3 +
 4 files changed, 66 insertions(+), 50 deletions(-)

diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx
index 7f766f7e91..f6fb2d825c 100644
--- a/awx/ui_next/src/components/ContentError/ContentError.jsx
+++ b/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;
diff --git a/awx/ui_next/src/components/LaunchPrompt/CredentialsStep.jsx b/awx/ui_next/src/components/LaunchPrompt/CredentialsStep.jsx
index 8d68995197..f86513a550 100644
--- a/awx/ui_next/src/components/LaunchPrompt/CredentialsStep.jsx
+++ b/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
-        value={field.value || []}
-        options={credentials}
-        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',
-          },
-        ]}
-        multiple={isVault}
-        header={i18n._(t`Credentials`)}
-        name="credentials"
-        qsConfig={QS_CONFIG}
-        readOnly={false}
-        selectItem={item => {
-          const hasSameVaultID = val =>
-            val?.inputs?.vault_id !== undefined &&
-            val?.inputs?.vault_id === item?.inputs?.vault_id;
-          const hasSameKind = val => val.kind === item.kind;
-          const newItems = selectedItems.filter(i =>
-            isVault ? !hasSameVaultID(i) : !hasSameKind(i)
-          );
-          newItems.push(item);
-          setSelectedItems(newItems);
-        }}
-        deselectItem={item => {
-          setSelectedItems(selectedItems.filter(i => i.id !== item.id));
-        }}
-        renderItemChip={renderChip}
-      />
-      )
+      {!isCredentialsLoading && (
+        <OptionsList
+          value={field.value || []}
+          options={credentials}
+          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',
+            },
+          ]}
+          multiple={isVault}
+          header={i18n._(t`Credentials`)}
+          name="credentials"
+          qsConfig={QS_CONFIG}
+          readOnly={false}
+          selectItem={item => {
+            const hasSameVaultID = val =>
+              val?.inputs?.vault_id !== undefined &&
+              val?.inputs?.vault_id === item?.inputs?.vault_id;
+            const hasSameKind = val => val.kind === item.kind;
+            const newItems = field.value.filter(i =>
+              isVault ? !hasSameVaultID(i) : !hasSameKind(i)
+            );
+            newItems.push(item);
+            helpers.setValue(newItems);
+          }}
+          deselectItem={item => {
+            helpers.setValue(field.value.filter(i => i.id !== item.id));
+          }}
+          renderItemChip={renderChip}
+        />
+      )}
     </>
   );
 }
diff --git a/awx/ui_next/src/components/LaunchPrompt/InventoryStep.jsx b/awx/ui_next/src/components/LaunchPrompt/InventoryStep.jsx
index b35a9f4090..e34dc40664 100644
--- a/awx/ui_next/src/components/LaunchPrompt/InventoryStep.jsx
+++ b/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
diff --git a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.jsx b/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.jsx
index e4685262ec..3743168953 100644
--- a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.jsx
+++ b/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);
   };