From 6f13cbaec1339ea1f9271b73c1a2adee0cc1fe91 Mon Sep 17 00:00:00 2001
From: Lenin Alevski <alevsk.8772@gmail.com>
Date: Mon, 25 Oct 2021 20:09:30 -0700
Subject: [PATCH] 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>
---
 .../FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx | 7 ++++---
 portal-ui/src/screens/Console/Menu/Menu.tsx                | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
index 7aa051b6e..f69318dca 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
+++ b/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,
diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
index ac51f75f6..be9d164d3 100644
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/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) => {