clean up launch prompt credentials, display errors

This commit is contained in:
Keith Grant 2020-04-03 11:47:06 -07:00
parent 0b9c5c410a
commit 8baa9d8458
4 changed files with 66 additions and 50 deletions

View File

@ -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;

View File

@ -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}
/>
)}
</>
);
}

View File

@ -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

View File

@ -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);
};