fix empty CodeMirror bug in modals

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { oneOf, bool, number, string, func } from 'prop-types';
 import { Controlled as ReactCodeMirror } from 'react-codemirror2';
 import styled from 'styled-components';
@@ -67,6 +67,20 @@ function CodeMirrorInput({
   fullHeight,
   className,
 }) {
+  // 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
+  // element height. Forcing an initial render before mounting <CodeMirror>
+  // fixes this.
+  const [isInitialized, setIsInitialized] = useState(false);
+  useEffect(() => {
+    if (!isInitialized) {
+      setIsInitialized(true);
+    }
+  }, [isInitialized]);
+  if (!isInitialized) {
+    return <div />;
+  }
+
   return (
     <CodeMirror
       className={`pf-c-form-control ${className}`}

awx/ui_next/src/components/LaunchPrompt/SurveyStep.jsx

@@ -58,9 +58,14 @@ function SurveyStep({ template, i18n }) {
   );
 }
 
+// This is a nested Formik form to perform validation on individual
+// survey questions. When changes to the inner form occur (onBlur), the
+// values for all questions are added to the outer form's `survey` field
+// as a single object.
 function SurveySubForm({ survey, initialValues, i18n }) {
   const [, , surveyFieldHelpers] = useField('survey');
   useEffect(() => {
+    // set survey initial values to parent form
     surveyFieldHelpers.setValue(initialValues);
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
@@ -74,10 +79,6 @@ function SurveySubForm({ survey, initialValues, i18n }) {
     integer: NumberField,
     float: NumberField,
   };
-  // This is a nested Formik form to perform validation on individual
-  // survey questions. When changes to the inner form occur (onBlur), the
-  // values for all questions are added to the outer form's `survey` field
-  // as a single object.
   return (
     <Formik initialValues={initialValues}>
       {({ values }) => (

awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -322,7 +322,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
               className="pf-c-backdrop"
             >
               <FocusTrap
-                _createFocusTrap={[Function]}
                 active={true}
                 className="pf-l-bullseye"
                 focusTrapOptions={
@@ -331,7 +330,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   }
                 }
                 paused={false}
-                tag="div"
               >
                 <div
                   className="pf-l-bullseye"