diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
index 92a9071332..a07b6feca5 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
+++ b/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}
diff --git a/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.jsx b/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.jsx
index f983907ec9..af1764299a 100644
--- a/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.jsx
+++ b/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`]}
/>
-
-
-
-
+
+
+
+
+
+
helpers.setValue(checked)}
aria-label={ariaLabel || config.label}
- ouiaId={ariaLabel || config.label}
/>
) : null;
@@ -242,11 +243,13 @@ const ObjectField = withI18n()(({ i18n, name, config, isRequired = false }) => {
>
{
helpers.setValue(value);
}}
- mode="javascript"
+ placeholder={JSON.stringify(config?.placeholder, null, 2)}
/>