External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-04 10:11:05 -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
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 { useField } from 'formik';
import { Split, SplitItem } from '@patternfly/react-core'; import { Split, SplitItem } from '@patternfly/react-core';
import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml';
import { FormFullWidthLayout } from '@components/FormLayout';
import CodeMirrorInput from './CodeMirrorInput'; import CodeMirrorInput from './CodeMirrorInput';
import YamlJsonToggle from './YamlJsonToggle'; import YamlJsonToggle from './YamlJsonToggle';
import { JSON_MODE, YAML_MODE } from './constants'; 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); const [mode, setMode] = useState(isJson(field.value) ? JSON_MODE : YAML_MODE);
return ( return (
<FormFullWidthLayout> <>
<Split gutter="sm"> <Split gutter="sm">
<SplitItem> <SplitItem>
<label htmlFor={id} className="pf-c-form__label"> <label htmlFor={id} className="pf-c-form__label">
@@ -52,7 +51,7 @@ function VariablesField({ id, name, label, readOnly }) {
{meta.error} {meta.error}
</div> </div>
) : null} ) : null}
</FormFullWidthLayout> </>
); );
} }
VariablesField.propTypes = { 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 { VariablesField } from '@components/CodeMirrorInput';
import { required } from '@util/validators'; import { required } from '@util/validators';
import { InventoryLookup } from '@components/Lookup'; import { InventoryLookup } from '@components/Lookup';
import { FormColumnLayout } from '@components/FormLayout'; import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function HostFormFields({ host, i18n }) { function HostFormFields({ host, i18n }) {
const [inventory, setInventory] = useState( const [inventory, setInventory] = useState(
@@ -62,11 +62,13 @@ function HostFormFields({ host, i18n }) {
error={inventoryMeta.error} error={inventoryMeta.error}
/> />
)} )}
<VariablesField <FormFullWidthLayout>
id="host-variables" <VariablesField
name="variables" id="host-variables"
label={i18n._(t`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 InstanceGroupsLookup from '@components/Lookup/InstanceGroupsLookup';
import OrganizationLookup from '@components/Lookup/OrganizationLookup'; import OrganizationLookup from '@components/Lookup/OrganizationLookup';
import CredentialLookup from '@components/Lookup/CredentialLookup'; import CredentialLookup from '@components/Lookup/CredentialLookup';
import { FormColumnLayout } from '@components/FormLayout'; import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function InventoryFormFields({ i18n, credentialTypeId }) { function InventoryFormFields({ i18n, credentialTypeId }) {
const [organizationField, organizationMeta, organizationHelpers] = useField({ const [organizationField, organizationMeta, organizationHelpers] = useField({
@@ -66,14 +66,16 @@ function InventoryFormFields({ i18n, credentialTypeId }) {
instanceGroupsHelpers.setValue(value); instanceGroupsHelpers.setValue(value);
}} }}
/> />
<VariablesField <FormFullWidthLayout>
tooltip={i18n._( <VariablesField
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` 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" id="inventory-variables"
label={i18n._(t`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 FormActionGroup from '@components/FormActionGroup/FormActionGroup';
import { VariablesField } from '@components/CodeMirrorInput'; import { VariablesField } from '@components/CodeMirrorInput';
import { required } from '@util/validators'; import { required } from '@util/validators';
import { FormColumnLayout } from '@components/FormLayout'; import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
function InventoryGroupForm({ function InventoryGroupForm({
i18n, i18n,
@@ -46,11 +46,13 @@ function InventoryGroupForm({
type="text" type="text"
label={i18n._(t`Description`)} label={i18n._(t`Description`)}
/> />
<VariablesField <FormFullWidthLayout>
id="host-variables" <VariablesField
name="variables" id="host-variables"
label={i18n._(t`Variables`)} name="variables"
/> label={i18n._(t`Variables`)}
/>
</FormFullWidthLayout>
<FormActionGroup <FormActionGroup
onCancel={handleCancel} onCancel={handleCancel}
onSubmit={formik.handleSubmit} onSubmit={formik.handleSubmit}