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

migrate FormFullWidthLayout from var field to calling forms

Browse Source
This commit is contained in:
John Mitchell 2020-02-19 14:55:11 -05:00
parent cf3ed0dc88
commit 1a0d36a6fd
4 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
View File

@ -3,7 +3,6 @@ import { string, bool } from 'prop-types';
import { useField } from 'formik';
import { Split, SplitItem } from '@patternfly/react-core';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import { FormFullWidthLayout } from '@components/FormLayout';
import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle';
import { JSON_MODE, YAML_MODE } from './constants';
@ -13,7 +12,7 @@ function VariablesField({ id, name, label, readOnly }) {
const [mode, setMode] = useState(isJson(field.value) ? JSON_MODE : YAML_MODE);
return (
<FormFullWidthLayout>
<>
<Split gutter="sm">
<SplitItem>
<label htmlFor={id} className="pf-c-form__label">
@ -52,7 +51,7 @@ function VariablesField({ id, name, label, readOnly }) {
{meta.error}
</div>
) : null}
</FormFullWidthLayout>
</>
);
}
VariablesField.propTypes = {

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

@ -13,7 +13,7 @@ import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import { VariablesField } from '@components/CodeMirrorInput';
import { required } from '@util/validators';
import { InventoryLookup } from '@components/Lookup';
import { FormColumnLayout } from '@components/FormLayout';
import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function HostFormFields({ host, i18n }) {
const [inventory, setInventory] = useState(
@ -62,11 +62,13 @@ function HostFormFields({ host, i18n }) {
error={inventoryMeta.error}
/>
)}
<VariablesField
id="host-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
<FormFullWidthLayout>
<VariablesField
id="host-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
</FormFullWidthLayout>
</>
);
}

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

@ -12,7 +12,7 @@ import { required } from '@util/validators';
import InstanceGroupsLookup from '@components/Lookup/InstanceGroupsLookup';
import OrganizationLookup from '@components/Lookup/OrganizationLookup';
import CredentialLookup from '@components/Lookup/CredentialLookup';
import { FormColumnLayout } from '@components/FormLayout';
import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function InventoryFormFields({ i18n, credentialTypeId }) {
const [organizationField, organizationMeta, organizationHelpers] = useField({
@ -66,14 +66,16 @@ function InventoryFormFields({ i18n, credentialTypeId }) {
instanceGroupsHelpers.setValue(value);
}}
/>
<VariablesField
tooltip={i18n._(
t`Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two. Refer to the Ansible Tower documentation for example syntax`
)}
id="inventory-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
<FormFullWidthLayout>
<VariablesField
tooltip={i18n._(
t`Enter inventory variables using either JSON or YAML syntax. Use the radio button to toggle between the two. Refer to the Ansible Tower documentation for example syntax`
)}
id="inventory-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
</FormFullWidthLayout>
</>
);
}

14
awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
View File

@ -10,7 +10,7 @@ import FormField from '@components/FormField';
import FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import { VariablesField } from '@components/CodeMirrorInput';
import { required } from '@util/validators';
import { FormColumnLayout } from '@components/FormLayout';
import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function InventoryGroupForm({
i18n,
@ -46,11 +46,13 @@ function InventoryGroupForm({
type="text"
label={i18n._(t`Description`)}
/>
<VariablesField
id="host-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
<FormFullWidthLayout>
<VariablesField
id="host-variables"
name="variables"
label={i18n._(t`Variables`)}
/>
</FormFullWidthLayout>
<FormActionGroup
onCancel={handleCancel}
onSubmit={formik.handleSubmit}