External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 11:00:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

add FormSubmitError to existing forms

Browse Source
This commit is contained in:
Keith Grant 2020-02-07 09:57:46 -08:00
parent 94f21a3464
commit 352c8c3cb1
18 changed files with 47 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx
View File

@ -21,15 +21,8 @@ const ActionGroup = styled(PFActionGroup)`
}
`;
const FormActionGroup = ({
onSubmit,
submitDisabled,
onCancel,
errorMessage,
i18n,
}) => (
const FormActionGroup = ({ onSubmit, submitDisabled, onCancel, i18n }) => (
<ActionGroup>
{errorMessage}
<Button
aria-label={i18n._(t`Save`)}
variant="primary"
@ -54,12 +47,10 @@ FormActionGroup.propTypes = {
onCancel: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
submitDisabled: PropTypes.bool,
errorMessage: PropTypes.node,
};
FormActionGroup.defaultProps = {
submitDisabled: false,
errorMessage: null,
};
export default withI18n()(FormActionGroup);

10
awx/ui_next/src/components/FormField/FormSubmitError.jsx
View File

@ -1,12 +1,6 @@
import React, { useState, useEffect } from 'react';
import { useFormikContext } from 'formik';
import styled from 'styled-components';
const ErrorMessage = styled('div')`
color: var(--pf-global--danger-color--200);
font-weight: var(--pf-global--FontWeight--bold);
`;
ErrorMessage.displayName = 'ErrorMessage';
import { Alert } from '@patternfly/react-core';
function FormSubmitError({ error }) {
const [errorMessage, setErrorMessage] = useState(null);
@ -36,7 +30,7 @@ function FormSubmitError({ error }) {
return null;
}
return <ErrorMessage>{errorMessage}</ErrorMessage>;
return <Alert variant="danger" isInline title={errorMessage} />;
}
export default FormSubmitError;

6
awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
View File

@ -31,15 +31,9 @@ function HostEdit({ host }) {
await HostsAPI.update(host.id, values);
history.push(detailsUrl);
} catch (error) {
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);

2
awx/ui_next/src/screens/Host/shared/HostForm.jsx
View File

@ -85,10 +85,10 @@ function HostForm({ handleSubmit, handleCancel, host, submitError, i18n }) {
label={i18n._(t`Variables`)}
/>
</FormRow>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}
errorMessage={<FormSubmitError error={submitError} />}
/>
</Form>
)}

12
awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx
View File

@ -69,17 +69,6 @@ function InventoryAdd() {
}
};
if (error) {
return (
<PageSection>
<Card>
<CardBody>
<ContentError error={error} />
</CardBody>
</Card>
</PageSection>
);
}
if (isLoading) {
return <ContentLoading />;
}
@ -91,6 +80,7 @@ function InventoryAdd() {
onCancel={handleCancel}
onSubmit={handleSubmit}
credentialTypeId={credentialTypeId}
submitError={error}
/>
</CardBody>
</Card>

5
awx/ui_next/src/screens/Inventory/InventoryEdit/InventoryEdit.jsx
View File

@ -105,10 +105,6 @@ function InventoryEdit({ inventory }) {
return <ContentLoading />;
}
if (error) {
return <ContentError />;
}
return (
<CardBody>
<InventoryForm
@ -117,6 +113,7 @@ function InventoryEdit({ inventory }) {
inventory={inventory}
instanceGroups={associatedInstanceGroups}
credentialTypeId={credentialTypeId}
submitError={error}
/>
</CardBody>
);

6
awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
View File

@ -6,7 +6,7 @@ import { func, number, shape } from 'prop-types';
import { VariablesField } from '@components/CodeMirrorInput';
import { Form } from '@patternfly/react-core';
import FormField from '@components/FormField';
import FormField, { FormSubmitError } from '@components/FormField';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import FormRow from '@components/FormRow';
import { required } from '@util/validators';
@ -21,6 +21,7 @@ function InventoryForm({
onSubmit,
instanceGroups,
credentialTypeId,
submitError,
}) {
const initialValues = {
name: inventory.name || '',
@ -129,6 +130,7 @@ function InventoryForm({
/>
</FormRow>
<FormRow>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={onCancel}
onSubmit={formik.handleSubmit}
@ -146,11 +148,13 @@ InventoryForm.proptype = {
instanceGroups: shape(),
inventory: shape(),
credentialTypeId: number.isRequired,
submitError: shape(),
};
InventoryForm.defaultProps = {
inventory: {},
instanceGroups: [],
submitError: null,
};
export default withI18n()(InventoryForm);

2
awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx
View File

@ -40,10 +40,10 @@ function OrganizationAdd() {
onSubmit={handleSubmit}
onCancel={handleCancel}
me={me || {}}
submitError={formError}
/>
)}
</Config>
{formError ? <div>error</div> : ''}
</CardBody>
</Card>
</PageSection>

2
awx/ui_next/src/screens/Organization/OrganizationEdit/OrganizationEdit.jsx
View File

@ -48,10 +48,10 @@ function OrganizationEdit({ organization }) {
onSubmit={handleSubmit}
onCancel={handleCancel}
me={me || {}}
submitError={formError}
/>
)}
</Config>
{formError ? <div>error</div> : null}
</CardBody>
);
}

14
awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
View File

@ -13,13 +13,20 @@ import AnsibleSelect from '@components/AnsibleSelect';
import ContentError from '@components/ContentError';
import ContentLoading from '@components/ContentLoading';
import FormRow from '@components/FormRow';
import FormField from '@components/FormField';
import FormField, { FormSubmitError } from '@components/FormField';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import { InstanceGroupsLookup } from '@components/Lookup/';
import { getAddedAndRemoved } from '@util/lists';
import { required, minMaxValue } from '@util/validators';
function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
function OrganizationForm({
organization,
i18n,
me,
onCancel,
onSubmit,
submitError,
}) {
const defaultVenv = {
label: i18n._(t`Use Default Ansible Environment`),
value: '/venv/ansible/',
@ -161,6 +168,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
t`Select the Instance Groups for this Organization to run on.`
)}
/>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}
@ -179,6 +187,7 @@ OrganizationForm.propTypes = {
organization: PropTypes.shape(),
onSubmit: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
submitError: PropTypes.shape(),
};
OrganizationForm.defaultProps = {
@ -188,6 +197,7 @@ OrganizationForm.defaultProps = {
max_hosts: '0',
custom_virtualenv: '',
},
submitError: null,
};
OrganizationForm.contextTypes = {

2
awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
View File

@ -388,10 +388,10 @@ function ProjectForm({ project, submitError, ...props }) {
}
</Config>
</FormRow>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}
errorMessage={<FormSubmitError error={submitError} />}
/>
</Form>
)}

2
awx/ui_next/src/screens/Team/TeamAdd/TeamAdd.jsx
View File

@ -43,10 +43,10 @@ class TeamAdd extends React.Component {
handleSubmit={this.handleSubmit}
handleCancel={this.handleCancel}
me={me || {}}
submitError={error}
/>
)}
</Config>
{error ? <div>error</div> : ''}
</CardBody>
</Card>
</PageSection>

2
awx/ui_next/src/screens/Team/TeamEdit/TeamEdit.jsx
View File

@ -34,10 +34,10 @@ function TeamEdit({ team }) {
handleSubmit={handleSubmit}
handleCancel={handleCancel}
me={me || {}}
submitError={error}
/>
)}
</Config>
{error ? <div>error</div> : null}
</CardBody>
);
}

7
awx/ui_next/src/screens/Team/shared/TeamForm.jsx
View File

@ -5,13 +5,13 @@ import { t } from '@lingui/macro';
import { Formik, Field } from 'formik';
import { Form } from '@patternfly/react-core';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import FormField from '@components/FormField';
import FormField, { FormSubmitError } from '@components/FormField';
import FormRow from '@components/FormRow';
import OrganizationLookup from '@components/Lookup/OrganizationLookup';
import { required } from '@util/validators';
function TeamForm(props) {
const { team, handleCancel, handleSubmit, i18n } = props;
const { team, handleCancel, handleSubmit, submitError, i18n } = props;
const [organization, setOrganization] = useState(
team.summary_fields ? team.summary_fields.organization : null
);
@ -70,6 +70,7 @@ function TeamForm(props) {
)}
</Field>
</FormRow>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}
@ -84,10 +85,12 @@ TeamForm.propTypes = {
handleCancel: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
team: PropTypes.shape({}),
submitError: PropTypes.shape(),
};
TeamForm.defaultProps = {
team: {},
submitError: null,
};
export default withI18n()(TeamForm);

7
awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
View File

@ -593,11 +593,8 @@ class JobTemplateForm extends Component {
</FormRow>
</div>
</AdvancedFieldsWrapper>
<FormActionGroup
onCancel={handleCancel}
onSubmit={handleSubmit}
errorMessage={<FormSubmitError error={submitError} />}
/>
<FormSubmitError error={submitError} />
<FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
</Form>
);
}

11
awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx
View File

@ -35,13 +35,12 @@ function UserAdd() {
<PageSection>
<Card>
<CardBody>
<UserForm handleCancel={handleCancel} handleSubmit={handleSubmit} />
<UserForm
handleCancel={handleCancel}
handleSubmit={handleSubmit}
submitError={formSubmitError}
/>
</CardBody>
{formSubmitError ? (
<div className="formSubmitError">formSubmitError</div>
) : (
''
)}
</Card>
</PageSection>
);

2
awx/ui_next/src/screens/User/UserEdit/UserEdit.jsx
View File

@ -27,8 +27,8 @@ function UserEdit({ user, history }) {
user={user}
handleCancel={handleCancel}
handleSubmit={handleSubmit}
submitError={formSubmitError}
/>
{formSubmitError ? <div> error </div> : null}
</CardBody>
);
}

9
awx/ui_next/src/screens/User/shared/UserForm.jsx
View File

@ -6,13 +6,15 @@ import { Formik, Field } from 'formik';
import { Form, FormGroup } from '@patternfly/react-core';
import AnsibleSelect from '@components/AnsibleSelect';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import FormField, { PasswordField } from '@components/FormField';
import FormField, {
PasswordField,
FormSubmitError,
} from '@components/FormField';
import FormRow from '@components/FormRow';
import OrganizationLookup from '@components/Lookup/OrganizationLookup';
import { required, requiredEmail } from '@util/validators';
function UserForm(props) {
const { user, handleCancel, handleSubmit, i18n } = props;
function UserForm({ user, handleCancel, handleSubmit, submitError, i18n }) {
const [organization, setOrganization] = useState(null);
const userTypeOptions = [
@ -183,6 +185,7 @@ function UserForm(props) {
}}
</Field>
</FormRow>
<FormSubmitError error={submitError} />
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}