Add delete error handling on inventory detail view

This commit is contained in:
mabashian
2020-09-29 15:05:35 -04:00
parent 3f1434f0f5
commit ae1d27255b

View File

@@ -3,6 +3,7 @@ import { Link, useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Button, Chip } from '@patternfly/react-core'; import { Button, Chip } from '@patternfly/react-core';
import AlertModal from '../../../components/AlertModal';
import { CardBody, CardActionsRow } from '../../../components/Card'; import { CardBody, CardActionsRow } from '../../../components/Card';
import { import {
DetailList, DetailList,
@@ -11,11 +12,12 @@ import {
} from '../../../components/DetailList'; } from '../../../components/DetailList';
import { VariablesDetail } from '../../../components/CodeMirrorInput'; import { VariablesDetail } from '../../../components/CodeMirrorInput';
import DeleteButton from '../../../components/DeleteButton'; import DeleteButton from '../../../components/DeleteButton';
import ErrorDetail from '../../../components/ErrorDetail';
import ContentError from '../../../components/ContentError'; import ContentError from '../../../components/ContentError';
import ContentLoading from '../../../components/ContentLoading'; import ContentLoading from '../../../components/ContentLoading';
import ChipGroup from '../../../components/ChipGroup'; import ChipGroup from '../../../components/ChipGroup';
import { InventoriesAPI } from '../../../api'; import { InventoriesAPI } from '../../../api';
import useRequest from '../../../util/useRequest'; import useRequest, { useDismissableError } from '../../../util/useRequest';
import { Inventory } from '../../../types'; import { Inventory } from '../../../types';
function InventoryDetail({ inventory, i18n }) { function InventoryDetail({ inventory, i18n }) {
@@ -24,7 +26,7 @@ function InventoryDetail({ inventory, i18n }) {
const { const {
result: instanceGroups, result: instanceGroups,
isLoading, isLoading,
error, error: instanceGroupsError,
request: fetchInstanceGroups, request: fetchInstanceGroups,
} = useRequest( } = useRequest(
useCallback(async () => { useCallback(async () => {
@@ -38,10 +40,14 @@ function InventoryDetail({ inventory, i18n }) {
fetchInstanceGroups(); fetchInstanceGroups();
}, [fetchInstanceGroups]); }, [fetchInstanceGroups]);
const deleteInventory = async () => { const { request: deleteInventory, error: deleteError } = useRequest(
await InventoriesAPI.destroy(inventory.id); useCallback(async () => {
history.push(`/inventories`); await InventoriesAPI.destroy(inventory.id);
}; history.push(`/inventories`);
}, [inventory.id, history])
);
const { error, dismissError } = useDismissableError(deleteError);
const { const {
organization, organization,
@@ -52,8 +58,8 @@ function InventoryDetail({ inventory, i18n }) {
return <ContentLoading />; return <ContentLoading />;
} }
if (error) { if (instanceGroupsError) {
return <ContentError error={error} />; return <ContentError error={instanceGroupsError} />;
} }
return ( return (
@@ -123,6 +129,18 @@ function InventoryDetail({ inventory, i18n }) {
</DeleteButton> </DeleteButton>
)} )}
</CardActionsRow> </CardActionsRow>
{/* Update delete modal to show dependencies https://github.com/ansible/awx/issues/5546 */}
{error && (
<AlertModal
isOpen={error}
variant="error"
title={i18n._(t`Error!`)}
onClose={dismissError}
>
{i18n._(t`Failed to delete inventory.`)}
<ErrorDetail error={error} />
</AlertModal>
)}
</CardBody> </CardBody>
); );
} }