YAML Editor props

Author: krishagarwal278

src/views/CronTabForm/CronTabForm.tsx

@@ -18,7 +18,7 @@ import {
   useK8sModel,
   k8sCreate,
   useActiveNamespace,
-  YAMLEditor,
+  CodeEditor,
 } from "@openshift-console/dynamic-plugin-sdk";
 import { useNavigate } from "react-router-dom-v5-compat";
 import { useCronTabTranslation } from "@crontab-utils/hooks/useCronTabTranslation";
@@ -136,7 +136,7 @@ export const CronTabForm: React.FC = () => {
   };
 
   return (
-    <PageSection>
+    <PageSection isFilled={true} height="sizeToFit">
       <Title headingLevel="h1" data-test="page-heading">
         {t("Create CronTab")}
       </Title>
@@ -146,12 +146,12 @@ export const CronTabForm: React.FC = () => {
 
       {showYaml ? (
         <>
-          <YAMLEditor
+          <CodeEditor
             value={yamlContent}
-            language="yaml"
-            onChange={(_e, val) => setYamlContent(val as string)}
-            minHeight="0"
+            onChange={(val) => setYamlContent(val)}
+            // @ts-expect-error TODO: fix this
             height="500px"
+            language="yaml"
             options={{
               wordWrap: "on",
               formatOnPaste: true,