From ac376f9c87aecd2b3ef7656879412f886858c131 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Wed, 5 Feb 2020 16:29:17 -0800 Subject: [PATCH] handle __all__ error message from server in FormSubmitError --- .../components/FormField/FormSubmitError.jsx | 9 ++++-- .../src/screens/Host/HostAdd/HostAdd.jsx | 29 +++++------------ .../src/screens/Host/HostEdit/HostEdit.jsx | 31 ++++++------------- .../src/screens/Host/shared/HostForm.jsx | 15 ++++----- 4 files changed, 29 insertions(+), 55 deletions(-) diff --git a/awx/ui_next/src/components/FormField/FormSubmitError.jsx b/awx/ui_next/src/components/FormField/FormSubmitError.jsx index f59b8a548a..3a85abfcd3 100644 --- a/awx/ui_next/src/components/FormField/FormSubmitError.jsx +++ b/awx/ui_next/src/components/FormField/FormSubmitError.jsx @@ -18,8 +18,13 @@ function FormSubmitError({ error }) { } // check for field-specific errors from API if (error.response?.data && typeof error.response.data === 'object') { - setErrors(error.response.data); - setFormError(null); + const errorMessages = error.response.data; + setErrors(errorMessages); + if (errorMessages.__all__) { + setFormError({ message: errorMessages.__all__ }); + } else { + setFormError(null); + } } else { /* eslint-disable-next-line no-console */ console.error(error); diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx index b1b1d5e277..422cabb721 100644 --- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx +++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.jsx @@ -1,14 +1,10 @@ import React, { useState } from 'react'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import { t } from '@lingui/macro'; -import { withI18n } from '@lingui/react'; import { CardBody } from '@components/Card'; -import ErrorDetail from '@components/ErrorDetail'; -import AlertModal from '@components/AlertModal'; import { HostsAPI } from '@api'; import HostForm from '../shared'; -function HostAdd({ i18n }) { +function HostAdd() { const [formError, setFormError] = useState(null); const history = useHistory(); const hostsMatch = useRouteMatch('/hosts'); @@ -27,10 +23,6 @@ function HostAdd({ i18n }) { const { data: response } = await HostsAPI.create(values); history.push(`${url}/${response.id}/details`); } catch (error) { - // check for field-specific errors from API - if (error.response?.data && typeof error.response.data === 'object') { - throw error.response.data; - } setFormError(error); } }; @@ -41,20 +33,13 @@ function HostAdd({ i18n }) { return ( - - {formError && ( - setFormError(null)} - > - {i18n._(t`An error occurred when saving Host`)} - - - )} + ); } -export default withI18n()(HostAdd); +export default HostAdd; diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx index d3fad5fb49..6b6e78313d 100644 --- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx +++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx @@ -1,15 +1,11 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useHistory, useRouteMatch } from 'react-router-dom'; -import { t } from '@lingui/macro'; -import { withI18n } from '@lingui/react'; import { CardBody } from '@components/Card'; -import ErrorDetail from '@components/ErrorDetail'; -import AlertModal from '@components/AlertModal'; import { HostsAPI } from '@api'; import HostForm from '../shared'; -function HostEdit({ host, i18n }) { +function HostEdit({ host }) { const [formError, setFormError] = useState(null); const hostsMatch = useRouteMatch('/hosts/:id/edit'); const inventoriesMatch = useRouteMatch( @@ -35,13 +31,15 @@ function HostEdit({ host, i18n }) { await HostsAPI.update(host.id, values); history.push(detailsUrl); } catch (error) { - // check for field-specific errors from API - if (error.response?.data && typeof error.response.data === 'object') { - throw error.response.data; - } + console.log('caught:', error); + // // check for field-specific errors from API + // if (error.response?.data && typeof error.response.data === 'object') { + // throw error.response.data; + // } setFormError(error); } }; + console.log('render:', formError); const handleCancel = () => { history.push(detailsUrl); @@ -53,18 +51,8 @@ function HostEdit({ host, i18n }) { host={host} handleSubmit={handleSubmit} handleCancel={handleCancel} + submitError={formError} /> - {formError && ( - setFormError(null)} - > - {i18n._(t`An error occurred when saving Host`)} - - - )} ); } @@ -73,5 +61,4 @@ HostEdit.propTypes = { host: PropTypes.shape().isRequired, }; -export { HostEdit as _HostEdit }; -export default withI18n()(HostEdit); +export default HostEdit; diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx index e8348dbfc1..7375040b5e 100644 --- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx +++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx @@ -9,13 +9,13 @@ import { t } from '@lingui/macro'; import { Form } from '@patternfly/react-core'; import FormRow from '@components/FormRow'; -import FormField from '@components/FormField'; +import FormField, { FormSubmitError } from '@components/FormField'; import FormActionGroup from '@components/FormActionGroup/FormActionGroup'; import { VariablesField } from '@components/CodeMirrorInput'; import { required } from '@util/validators'; import { InventoryLookup } from '@components/Lookup'; -function HostForm({ handleSubmit, handleCancel, host, i18n }) { +function HostForm({ handleSubmit, handleCancel, host, submitError, i18n }) { const [inventory, setInventory] = useState( host ? host.summary_fields.inventory : '' ); @@ -30,13 +30,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) { inventory: host.inventory || '', variables: host.variables, }} - onSubmit={async (values, formik) => { - try { - await handleSubmit(values); - } catch (errors) { - formik.setErrors(errors); - } - }} + onSubmit={handleSubmit} > {formik => (
@@ -94,6 +88,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) { } /> )} @@ -105,6 +100,7 @@ HostForm.propTypes = { handleSubmit: func.isRequired, handleCancel: func.isRequired, host: shape({}), + submitError: shape({}), }; HostForm.defaultProps = { @@ -117,6 +113,7 @@ HostForm.defaultProps = { inventory: null, }, }, + submitError: null, }; export { HostForm as _HostForm };