Change editor to react-textarea-code-editor. Tenant YAML a page. (#2084)

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

Author: dvaldivia

portal-ui/package.json

@@ -4,9 +4,6 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@codemirror/lang-json": "^0.20.0",
-    "@codemirror/legacy-modes": "^0.20.0",
-    "@codemirror/stream-parser": "^0.19.9",
     "@date-io/moment": "1.x",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -33,9 +30,8 @@
     "@types/superagent": "^4.1.12",
     "@types/webpack-env": "^1.14.1",
     "@types/websocket": "^1.0.0",
-    "@uiw/react-codemirror": "^4.7.0",
+    "@uiw/react-textarea-code-editor": "^2.0.2",
     "chart.js": "^2.9.3",
-    "codemirror": "^5.65.4",
     "history": "^4.10.1",
     "kbar": "^0.1.0-beta.34",
     "local-storage-fallback": "^4.1.1",

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

@@ -14,26 +14,18 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import React from "react";
 import Grid from "@mui/material/Grid";
-import "codemirror/theme/dracula.css";
-/** Code mirror */
-import CodeMirror, { Extension } from "@uiw/react-codemirror";
-import { StreamLanguage } from "@codemirror/stream-parser";
-import { json } from "@codemirror/lang-json";
-import { yaml } from "@codemirror/legacy-modes/mode/yaml";
-
-/** Code mirror */
 import { Box, InputLabel, Tooltip } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import HelpIcon from "../../../../../icons/HelpIcon";
 import { fieldBasic } from "../common/styleLibrary";
-import { CopyIcon, EditorThemeSwitchIcon } from "../../../../../icons";
+import { CopyIcon } from "../../../../../icons";
 import RBIconButton from "../../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import CopyToClipboard from "react-copy-to-clipboard";
-import { EditorView } from "@codemirror/view";
+import CodeEditor from "@uiw/react-textarea-code-editor";
 
 interface ICodeWrapper {
   value: string;
@@ -52,104 +44,6 @@ const styles = (theme: Theme) =>
     ...fieldBasic,
   });
 
-const langHighlight: Record<string, any> = {
-  json,
-  yaml: () => StreamLanguage.define(yaml as any),
-};
-
-const lightTheme = EditorView.theme(
-  {
-    "&": {
-      backgroundColor: "#FBFAFA",
-    },
-    ".cm-content": {
-      caretColor: "#05122B",
-    },
-    "&.cm-focused .cm-cursor": {
-      borderLeftColor: "#05122B",
-    },
-    ".cm-gutters": {
-      backgroundColor: "#FBFAFA",
-      color: "#000000",
-      border: "none",
-    },
-    ".cm-gutter.cm-foldGutter": {
-      borderRight: "1px solid #eaeaea",
-    },
-    ".cm-gutterElement": {
-      fontSize: "13px",
-    },
-    ".cm-line": {
-      fontSize: "13px",
-      color: "#2781B0",
-      "& .ͼc": {
-        color: "#C83B51",
-      },
-    },
-    "& .ͼb": {
-      color: "#2781B0",
-    },
-    ".cm-activeLine": {
-      backgroundColor: "#dde1f1",
-    },
-    ".cm-matchingBracket": {
-      backgroundColor: "#05122B",
-      color: "#ffffff",
-    },
-    ".cm-selectionMatch": {
-      backgroundColor: "#ebe7f1",
-    },
-    ".cm-selectionLayer": {
-      fontWeight: 500,
-    },
-    " .cm-selectionBackground": {
-      backgroundColor: "#a180c7",
-      color: "#ffffff",
-    },
-  },
-  {
-    dark: false,
-  }
-);
-
-const darkTheme = EditorView.theme(
-  {
-    "&": {
-      backgroundColor: "#282a36",
-      color: "#ffb86c",
-    },
-
-    ".cm-gutter.cm-foldGutter": {
-      borderRight: "1px solid #eaeaea",
-    },
-    ".cm-gutterElement": {
-      fontSize: "13px",
-    },
-    ".cm-line": {
-      fontSize: "13px",
-      "& .ͼd, & .ͼc": {
-        color: "#8e6cef",
-      },
-    },
-    "& .ͼb": {
-      color: "#2781B0",
-    },
-    ".cm-activeLine": {
-      backgroundColor: "#44475a",
-    },
-    ".cm-matchingBracket": {
-      backgroundColor: "#842de5",
-      color: "#ff79c6",
-    },
-    ".cm-selectionLayer .cm-selectionBackground": {
-      backgroundColor: "green",
-    },
-  },
-  {
-    dark: true,
-  }
-);
-
 const CodeMirrorWrapper = ({
   value,
   label = "",
@@ -160,104 +54,75 @@ const CodeMirrorWrapper = ({
   readOnly = false,
   editorHeight = "250px",
 }: ICodeWrapper) => {
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false);
-
-  //based on the language mode pick . default to json
-  let extensionList: Extension[] = [];
-  if (langHighlight[mode]) {
-    extensionList = [...extensionList, langHighlight[mode]()];
-  }
-
   return (
     <React.Fragment>
-      <InputLabel className={classes.inputLabel}>
-        <span>{label}</span>
-        {tooltip !== "" && (
-          <div className={classes.tooltipContainer}>
-            <Tooltip title={tooltip} placement="top-start">
-              <div className={classes.tooltip}>
-                <HelpIcon />
-              </div>
-            </Tooltip>
-          </div>
-        )}
-      </InputLabel>
       <Grid item xs={12}>
-        <br />
+        <InputLabel className={classes.inputLabel}>
+          <span>{label}</span>
+          {tooltip !== "" && (
+            <div className={classes.tooltipContainer}>
+              <Tooltip title={tooltip} placement="top-start">
+                <div className={classes.tooltip}>
+                  <HelpIcon />
+                </div>
+              </Tooltip>
+            </div>
+          )}
+        </InputLabel>
       </Grid>
 
+      <Grid item xs={12} style={{ maxHeight: editorHeight, overflow: "auto" }}>
+        <CodeEditor
+          value={value}
+          language={mode}
+          onChange={(evn) => {
+            onBeforeChange(null, null, evn.target.value);
+          }}
+          padding={15}
+          style={{
+            fontSize: 12,
+            backgroundColor: "#fefefe",
+            fontFamily:
+              "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+          }}
+        />
+      </Grid>
       <Grid
         item
         xs={12}
         sx={{
-          border: "1px solid #eaeaea",
+          borderTop: "1px solid #eaeaea",
+          background: "#f7f7f7",
         }}
       >
-        <Grid item xs={12}>
-          <CodeMirror
-            value={value}
-            theme={isDarkTheme ? darkTheme : lightTheme}
-            extensions={extensionList}
-            editable={!readOnly}
-            basicSetup={true}
-            height={editorHeight}
-            onChange={(v: string, vu: any) => {
-              onBeforeChange(null, null, v);
-            }}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
+        <Box
           sx={{
-            borderTop: "1px solid #eaeaea",
-            background: isDarkTheme ? "#282c34" : "#f7f7f7",
-          }}
-        >
-          <Box
-            className={isDarkTheme ? "dark-theme" : ""}
-            sx={{
-              display: "flex",
-              alignItems: "center",
+            display: "flex",
+            alignItems: "center",
+            padding: "2px",
+            paddingRight: "5px",
+            justifyContent: "flex-end",
+            "& button": {
+              height: "26px",
+              width: "26px",
               padding: "2px",
-              paddingRight: "5px",
-              justifyContent: "flex-end",
-              "& button": {
-                height: "26px",
-                width: "26px",
-                padding: "2px",
-                " .min-icon": {
-                  marginLeft: "0",
-                },
+              " .min-icon": {
+                marginLeft: "0",
               },
-
-              "&.dark-theme button": {
-                background: "#FFFFFF",
-              },
-            }}
-          >
+            },
+          }}
+        >
+          <CopyToClipboard text={value}>
             <RBIconButton
-              tooltip={"Change theme"}
-              onClick={() => {
-                setIsDarkTheme(!isDarkTheme);
-              }}
+              tooltip={"Copy to Clipboard"}
+              onClick={() => {}}
               text={""}
-              icon={<EditorThemeSwitchIcon />}
+              icon={<CopyIcon />}
               color={"primary"}
               variant={"outlined"}
             />
-            <CopyToClipboard text={value}>
-              <RBIconButton
-                tooltip={"Copy to Clipboard"}
-                onClick={() => {}}
-                text={""}
-                icon={<CopyIcon />}
-                color={"primary"}
-                variant={"outlined"}
-              />
-            </CopyToClipboard>
-          </Box>
-        </Grid>
+          </CopyToClipboard>
+        </Box>
       </Grid>
     </React.Fragment>
   );

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

@@ -481,6 +481,11 @@ const Console = ({ classes }: IConsoleProps) => {
       path: IAM_PAGES.NAMESPACE_TENANT_PVCS,
       forceDisplay: true,
     },
+    {
+      component: TenantDetails,
+      path: `${IAM_PAGES.NAMESPACE_TENANT_SUMMARY}/yaml`,
+      forceDisplay: true,
+    },
     {
       component: TenantDetails,
       path: IAM_PAGES.NAMESPACE_TENANT_SUMMARY,