Merge pull request #1878 from jpuzz0/MTV-3523-isDarkTheme-error

[MTV-3523] [UI] Plan creation with Pre and Post hook fails with 'IsDarkTheme'

Author: solenoci

src/components/VersionedCodeEditor/VersionedCodeEditor.tsx

@@ -13,11 +13,13 @@ type VersionedCodeEditorProps = {
   value: string | undefined;
   onChange: (encodedValue: string) => void;
   minHeight?: string;
+  isDarkTheme?: boolean;
 };
 
 // VersionedCodeEditor component that uses the appropriate CodeEditor based on OCP version
 // https://issues.redhat.com/browse/MTV-2918
 const VersionedCodeEditor: FC<VersionedCodeEditorProps> = ({
+  isDarkTheme,
   minHeight = '20rem',
   onChange,
   value,
@@ -36,6 +38,7 @@ const VersionedCodeEditor: FC<VersionedCodeEditorProps> = ({
   if (isVersionGte(ocpVersion, OCP_VERSION_4_18)) {
     return (
       <PFCodeEditor
+        isDarkTheme={isDarkTheme}
         language={PFLanguage.yaml}
         code={decodedValue}
         onChange={(val) => {

src/plans/create/steps/migration-hooks/AnsiblePlaybookField.tsx

@@ -3,6 +3,7 @@ import { Controller } from 'react-hook-form';
 
 import VersionedCodeEditor from '@components/VersionedCodeEditor/VersionedCodeEditor';
 import { FormGroup, FormHelperText } from '@patternfly/react-core';
+import { useIsDarkTheme } from '@utils/hooks/useIsDarkTheme';
 import { useForkliftTranslation } from '@utils/i18n';
 
 import { useCreatePlanFormContext } from '../../hooks/useCreatePlanFormContext';
@@ -17,6 +18,7 @@ type AnsiblePlaybookFieldProps = {
 const AnsiblePlaybookField: FC<AnsiblePlaybookFieldProps> = ({ fieldId }) => {
   const { t } = useForkliftTranslation();
   const { control } = useCreatePlanFormContext();
+  const isDarkTheme = useIsDarkTheme();
   const subFieldId = getHooksSubFieldId(fieldId, MigrationHookFieldId.AnsiblePlaybook);
 
   return (

src/plans/details/tabs/Hooks/components/HooksCodeEditor.tsx

@@ -5,6 +5,7 @@ import { FormGroupWithHelpText } from '@components/common/FormGroupWithHelpText/
 import SectionHeading from '@components/headers/SectionHeading';
 import VersionedCodeEditor from '@components/VersionedCodeEditor/VersionedCodeEditor';
 import { Form, HelperText, HelperTextItem, Switch, TextInput } from '@patternfly/react-core';
+import { useIsDarkTheme } from '@utils/hooks/useIsDarkTheme';
 import { useForkliftTranslation } from '@utils/i18n';
 
 import { HOOK_FORM_FIELD_NAMES } from '../state/constants';
@@ -24,6 +25,7 @@ type HooksCodeEditorProps = {
 const HooksCodeEditor: FC<HooksCodeEditorProps> = ({ planEditable, type }) => {
   const { t } = useForkliftTranslation();
   const { control, register } = useFormContext<HookFormValues>();
+  const isDarkTheme = useIsDarkTheme();
   const hookTypeLowercase = HookTypeLabelLowercase[type];
   const fieldIdPrefix = `${hookTypeLowercase}-hook`;
   const isPreHook = type === hookTypes.PreHook;
@@ -96,7 +98,6 @@ const HooksCodeEditor: FC<HooksCodeEditorProps> = ({ planEditable, type }) => {
                     isDarkTheme={isDarkTheme}
                     value={value ?? ''}
                     onChange={onChange}
-                    isReadOnly={!planEditable}
                   />
                 )}
               />