From 1a0d36a6fd4dbb3db0d7fcbff6c41b7672eb7235 Mon Sep 17 00:00:00 2001
From: John Mitchell <jmitchel@Johns-MacBook-Pro-46.local>
Date: Wed, 19 Feb 2020 14:55:11 -0500
Subject: [PATCH] migrate FormFullWidthLayout from var field to calling forms

---
 .../CodeMirrorInput/VariablesField.jsx        |  5 ++---
 .../src/screens/Host/shared/HostForm.jsx      | 14 +++++++------
 .../Inventory/shared/InventoryForm.jsx        | 20 ++++++++++---------
 .../Inventory/shared/InventoryGroupForm.jsx   | 14 +++++++------
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 734b68b53a..91818e84c7 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
@@ -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 = {
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 66ffe6759f..af5fb0a2ec 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -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>
     </>
   );
 }
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
index 883b151044..42fd8379c6 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
@@ -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>
     </>
   );
 }
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
index 09b461a4be..daea537311 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
@@ -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}