Show placeholder for codemirror inputs and expand width of "DN" ldap fields

awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx

@@ -6,6 +6,7 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/yaml/yaml';
 import 'codemirror/mode/jinja2/jinja2';
 import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/display/placeholder';
 
 const LINE_HEIGHT = 24;
 const PADDING = 12;
@@ -55,6 +56,17 @@ const CodeMirror = styled(ReactCodeMirror)`
       background-color: var(--pf-c-form-control--disabled--BackgroundColor);
     }
   `}
+  ${props =>
+    props.options &&
+    props.options.placeholder &&
+    `
+    .CodeMirror-empty {
+      pre.CodeMirror-placeholder {
+        color: var(--pf-c-form-control--placeholder--Color);
+        height: 100% !important;
+      }
+    }
+  `}
 `;
 
 function CodeMirrorInput({
@@ -66,6 +78,7 @@ function CodeMirrorInput({
   rows,
   fullHeight,
   className,
+  placeholder,
 }) {
   // Workaround for CodeMirror bug: If CodeMirror renders in a modal on the
   // modal's initial render, it appears as an empty box due to mis-calculated
@@ -92,6 +105,7 @@ function CodeMirrorInput({
         smartIndent: false,
         lineNumbers: true,
         lineWrapping: true,
+        placeholder,
         readOnly,
       }}
       fullHeight={fullHeight}

awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.jsx

@@ -6,7 +6,10 @@ import { CardBody } from '../../../../components/Card';
 import ContentError from '../../../../components/ContentError';
 import ContentLoading from '../../../../components/ContentLoading';
 import { FormSubmitError } from '../../../../components/FormField';
-import { FormColumnLayout } from '../../../../components/FormLayout';
+import {
+  FormColumnLayout,
+  FormFullWidthLayout,
+} from '../../../../components/FormLayout';
 import { useSettings } from '../../../../contexts/Settings';
 import { RevertAllAlert, RevertFormActionGroup } from '../../shared';
 import {
@@ -165,26 +168,10 @@ function LDAPEdit() {
                   name={`${ldapCategory}SERVER_URI`}
                   config={ldap[`${ldapCategory}SERVER_URI`]}
                 />
-                <InputField
-                  name={`${ldapCategory}BIND_DN`}
-                  config={ldap[`${ldapCategory}BIND_DN`]}
-                />
                 <EncryptedField
                   name={`${ldapCategory}BIND_PASSWORD`}
                   config={ldap[`${ldapCategory}BIND_PASSWORD`]}
                 />
-                <InputField
-                  name={`${ldapCategory}USER_DN_TEMPLATE`}
-                  config={ldap[`${ldapCategory}USER_DN_TEMPLATE`]}
-                />
-                <InputField
-                  name={`${ldapCategory}REQUIRE_GROUP`}
-                  config={ldap[`${ldapCategory}REQUIRE_GROUP`]}
-                />
-                <InputField
-                  name={`${ldapCategory}DENY_GROUP`}
-                  config={ldap[`${ldapCategory}DENY_GROUP`]}
-                />
                 <ChoiceField
                   name={`${ldapCategory}GROUP_TYPE`}
                   config={ldap[`${ldapCategory}GROUP_TYPE`]}
@@ -193,6 +180,24 @@ function LDAPEdit() {
                   name={`${ldapCategory}START_TLS`}
                   config={ldap[`${ldapCategory}START_TLS`]}
                 />
+                <FormFullWidthLayout>
+                  <InputField
+                    name={`${ldapCategory}BIND_DN`}
+                    config={ldap[`${ldapCategory}BIND_DN`]}
+                  />
+                  <InputField
+                    name={`${ldapCategory}USER_DN_TEMPLATE`}
+                    config={ldap[`${ldapCategory}USER_DN_TEMPLATE`]}
+                  />
+                  <InputField
+                    name={`${ldapCategory}REQUIRE_GROUP`}
+                    config={ldap[`${ldapCategory}REQUIRE_GROUP`]}
+                  />
+                  <InputField
+                    name={`${ldapCategory}DENY_GROUP`}
+                    config={ldap[`${ldapCategory}DENY_GROUP`]}
+                  />
+                </FormFullWidthLayout>
                 <ObjectField
                   name={`${ldapCategory}USER_SEARCH`}
                   config={ldap[`${ldapCategory}USER_SEARCH`]}

awx/ui_next/src/screens/Setting/shared/SharedFields.jsx

@@ -17,10 +17,10 @@ import { FormFullWidthLayout } from '../../../components/FormLayout';
 import Popover from '../../../components/Popover';
 import {
   combine,
-  required,
-  url,
   integer,
   minMaxValue,
+  required,
+  url,
 } from '../../../util/validators';
 import RevertButton from './RevertButton';
 
@@ -51,6 +51,7 @@ const SettingGroup = withI18n()(
       isRequired={isRequired}
       label={label}
       validated={validated}
+      id={fieldId}
       labelIcon={
         <>
           <Popover
@@ -84,13 +85,13 @@ const BooleanField = withI18n()(
       >
         <Switch
           id={name}
+          ouiaId={name}
           isChecked={field.value}
           isDisabled={disabled}
           label={i18n._(t`On`)}
           labelOff={i18n._(t`Off`)}
           onChange={checked => helpers.setValue(checked)}
           aria-label={ariaLabel || config.label}
-          ouiaId={ariaLabel || config.label}
         />
       </SettingGroup>
     ) : null;
@@ -242,11 +243,13 @@ const ObjectField = withI18n()(({ i18n, name, config, isRequired = false }) => {
       >
         <CodeMirrorInput
           {...field}
+          fullHeight
           id={name}
+          mode="javascript"
           onChange={value => {
             helpers.setValue(value);
           }}
-          mode="javascript"
+          placeholder={JSON.stringify(config?.placeholder, null, 2)}
         />
       </SettingGroup>
     </FormFullWidthLayout>