Add Code Highlight to YAML editor (#1149)

Signed-off-by: Lenin Alevski <alevsk.8772@gmail.com>

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx

@@ -23,9 +23,10 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import HelpIcon from "../../../../../icons/HelpIcon";
 import { fieldBasic } from "../common/styleLibrary";
-import "./ConsoleCodeMirror.css";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/material.css";
 
-require("codemirror/mode/javascript/javascript");
+require("codemirror/mode/yaml/yaml");
 
 interface ICodeWrapper {
   value: string;
@@ -47,7 +48,7 @@ const CodeMirrorWrapper = ({
   value,
   label = "",
   tooltip = "",
-  mode = "javascript",
+  mode = "yaml",
   classes,
   onChange = () => {},
   onBeforeChange,

portal-ui/src/screens/Console/Menu/Menu.tsx

@@ -562,7 +562,7 @@ const Menu = ({
             size="large"
           >
             {sidebarOpen ? <ChevronLeft /> : <MenuIcon />}
-          </IconButton> 
+          </IconButton>
         </div>
         <List className={classes.menuList}>
           {menuGroups.map((groupMember, index) => {