UX service account and settings (#1374)

* UX service account and settings * Update icon and color
2022-01-12 17:53:47 +00:00
parent 2e7d8d3642
commit 6448a8e821
21 changed files with 763 additions and 672 deletions
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -4,6 +4,9 @@
    "homepage": ".",
    "private": true,
    "dependencies": {
+        "@codemirror/lang-json": "^0.19.1",
+        "@codemirror/legacy-modes": "^0.19.0",
+        "@codemirror/stream-parser": "^0.19.3",
        "@date-io/moment": "1.x",
        "@emotion/react": "^11.4.1",
        "@emotion/styled": "^11.3.0",
@@ -28,6 +31,7 @@
        "@types/superagent": "^4.1.12",
        "@types/webpack-env": "^1.14.1",
        "@types/websocket": "^1.0.0",
+        "@uiw/react-codemirror": "^4.3.2",
        "ansi-to-react": "^6.0.5",
        "chart.js": "^2.9.3",
        "codemirror": "^5.52.2",
@@ -38,7 +42,6 @@
        "react": "^17.0.2",
        "react-async-hook": "^3.6.1",
        "react-chartjs-2": "^2.9.0",
-        "react-codemirror2": "^7.1.0",
        "react-copy-to-clipboard": "^5.0.2",
        "react-dom": "17.0.1",
        "react-dropzone": "^11.4.2",
--- a/portal-ui/src/icons/EditorThemeSwitchIcon.tsx
+++ b/portal-ui/src/icons/EditorThemeSwitchIcon.tsx
@@ -0,0 +1,39 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, { SVGProps } from "react";
+
+const EditorThemeSwitchIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`min-icon`}
+      fill={"currentcolor"}
+      viewBox="0 0 10.906 10.906"
+      {...props}
+    >
+      <path
+        id="Trazado_7002"
+        data-name="Trazado 7002"
+        d="M8.577,3a5.447,5.447,0,1,0,5.144,4.037,8.109,8.109,0,0,1-.951.783,6.211,6.211,0,0,1-2.174,1,2.252,2.252,0,0,1-2.143-.373,2.252,2.252,0,0,1-.373-2.143,6.234,6.234,0,0,1,1-2.174,8.085,8.085,0,0,1,.783-.951A5.483,5.483,0,0,0,8.577,3Zm2.961,8.536a4.343,4.343,0,0,0,1.228-2.42c-1.934,1.115-3.964,1.225-5.083.106s-1.009-3.149.106-5.083a4.362,4.362,0,1,0,3.75,7.4Z"
+        transform="translate(-3.001 -3.001)"
+        fill="#969fa8"
+      />
+    </svg>
+  );
+};
+
+export default EditorThemeSwitchIcon;
--- a/portal-ui/src/icons/PasswordKeyIcon.tsx
+++ b/portal-ui/src/icons/PasswordKeyIcon.tsx
@@ -0,0 +1,47 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// 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, { SVGProps } from "react";
+
+const PasswordKeyIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={`min-icon`}
+      fill={"currentcolor"}
+      viewBox="0 0 14 14"
+      {...props}
+    >
+      <path
+        id="Trazado_7179"
+        data-name="Trazado 7179"
+        d="M141.421,148.182a4.5,4.5,0,0,0-4.3,5.805l-5.188,5.195v3h3l5.187-5.2a4.5,4.5,0,0,0,5.8-3.936,4.39,4.39,0,0,0-.823-3A4.492,4.492,0,0,0,141.421,148.182Zm.5,5a1,1,0,1,1,1-1A1,1,0,0,1,141.92,153.182Z"
+        transform="translate(-131.934 -148.182)"
+        fill="#5e5e5e"
+      />
+      <rect
+        id="Rectángulo_1090"
+        data-name="Rectángulo 1090"
+        width="13.764"
+        height="13.764"
+        transform="translate(0.118 0.118)"
+        fill="none"
+      />
+    </svg>
+  );
+};
+
+export default PasswordKeyIcon;
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -155,3 +155,5 @@ export { default as GoogleTierIcon } from "./GoogleTierIcon";
 export { default as GoogleTierIconXs } from "./GoogleTierIconXs";
 export { default as S3TierIcon } from "./S3TierIcon";
 export { default as S3TierIconXs } from "./S3TierIconXs";
+export { default as EditorThemeSwitchIcon } from "./EditorThemeSwitchIcon";
+export { default as PasswordKeyIcon } from "./PasswordKeyIcon";
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -21,11 +21,10 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import api from "../../../common/api";
-import { Button, IconButton, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import { setErrorSnackMessage } from "../../../actions";
-
-import { AccountIcon, AddIcon, LockIcon } from "../../../icons";
+import { AccountIcon, AddIcon, PasswordKeyIcon } from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -46,6 +45,7 @@ import {
  IAM_SCOPES,
 } from "../../../common/SecureComponent/permissions";
 import SecureComponent from "../../../common/SecureComponent/SecureComponent";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";

 const AddServiceAccount = withSuspense(
  React.lazy(() => import("./AddServiceAccount"))
@@ -190,52 +190,48 @@ const Account = ({ classes, displayErrorMessage }: IServiceAccountsProps) => {
        open={changePasswordModalOpen}
        closeModal={() => setChangePasswordModalOpen(false)}
      />
-      <PageHeader
-        label="Service Accounts"
-        actions={
-          <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_CREATE_USER]}
-            resource={CONSOLE_UI_RESOURCE}
-            matchAll
-            errorProps={{ disabled: true }}
-          >
-            <Tooltip title="Change Password">
-              <IconButton
-                color="primary"
-                aria-label="Change Password"
-                component="span"
-                onClick={() => setChangePasswordModalOpen(true)}
-                size="large"
-              >
-                <LockIcon />
-              </IconButton>
-            </Tooltip>
-          </SecureComponent>
-        }
-      />
+      <PageHeader label="Service Accounts" />
      <PageLayout>
-        <Grid item xs={12} className={classes.actionsTray}>
+        <Grid item={true} xs={12} className={classes.actionsTray}>
          <SearchBox
            placeholder={"Search Service Accounts"}
            onChange={setFilter}
            overrideClass={classes.searchField}
          />

-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
-            onClick={() => {
-              setAddScreenOpen(true);
-              setSelectedServiceAccount(null);
+          <Box
+            sx={{
+              display: "flex",
            }}
          >
-            Create service account
-          </Button>
-        </Grid>
-        <Grid item xs={12}>
-          <br />
+            <SecureComponent
+              scopes={[IAM_SCOPES.ADMIN_CREATE_USER]}
+              resource={CONSOLE_UI_RESOURCE}
+              matchAll
+              errorProps={{ disabled: true }}
+            >
+              <RBIconButton
+                onClick={() => setChangePasswordModalOpen(true)}
+                text={`Change Password`}
+                icon={<PasswordKeyIcon />}
+                color={"primary"}
+                variant={"outlined"}
+              />
+            </SecureComponent>
+
+            <RBIconButton
+              onClick={() => {
+                setAddScreenOpen(true);
+                setSelectedServiceAccount(null);
+              }}
+              text={`Create service account`}
+              icon={<AddIcon />}
+              color={"primary"}
+              variant={"contained"}
+            />
+          </Box>
        </Grid>
+
        <Grid item xs={12} className={classes.tableBlock}>
          <TableWrapper
            isLoading={loading}
@@ -246,7 +242,7 @@ const Account = ({ classes, displayErrorMessage }: IServiceAccountsProps) => {
            itemActions={tableActions}
          />
        </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} marginTop={"15px"}>
          <HelpBox
            title={"Learn more about SERVICE ACCOUNTS"}
            iconComponent={<AccountIcon />}
--- a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
@@ -17,7 +17,7 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -33,6 +33,7 @@ import api from "../../../common/api";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { AccountIcon } from "../../../icons";

 const styles = (theme: Theme) =>
  createStyles({
@@ -120,6 +121,7 @@ const AddServiceAccount = ({
        closeModalAndRefresh(null);
      }}
      title={`Create Service Account`}
+      titleIcon={<AccountIcon />}
    >
      <form
        noValidate
@@ -128,6 +130,11 @@ const AddServiceAccount = ({
          addServiceAccount(e);
        }}
      >
+        {addSending && (
+          <Grid item xs={12}>
+            <LinearProgress />
+          </Grid>
+        )}
        <Grid container className={classes.modalFormScrollable}>
          <Grid item xs={12}>
            <div className={classes.infoDetails}>
@@ -136,8 +143,11 @@ const AddServiceAccount = ({
              parent user has membership. You can specify an optional
              JSON-formatted policy below to restrict the Service Account access
              to a subset of actions and resources explicitly allowed for the
-              parent user. You cannot modify the Service Account optional policy
-              after saving.
+              parent user.
+              <Box sx={{ paddingTop: "15px", paddingBottom: "15px" }}>
+                You cannot modify the Service Account optional policy after
+                saving.
+              </Box>
            </div>
          </Grid>
          <Grid item xs={12}>
@@ -223,11 +233,6 @@ const AddServiceAccount = ({
              Create
            </Button>
          </Grid>
-          {addSending && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
        </Grid>
      </form>
    </ModalWrapper>
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
@@ -38,9 +38,6 @@ const styles = (theme: Theme) =>
    codeMirrorContainer: {
      marginBottom: 20,
      paddingLeft: 15,
-      "&:nth-child(2) .MuiGrid-root:nth-child(3)": {
-        border: "1px solid #EAEAEA",
-      },
      "& label": {
        marginBottom: ".5rem",
      },
@@ -150,6 +147,7 @@ const SetAccessPolicy = ({
                  onBeforeChange={(editor, data, value) => {
                    setPolicyDefinition(value);
                  }}
+                  editorHeight={"350px"}
                />
              </Grid>
            )}
--- a/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
+++ b/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
@@ -24,7 +24,6 @@ import { Button } from "@mui/material";
 import ModalWrapper from "../ModalWrapper/ModalWrapper";
 import Grid from "@mui/material/Grid";
 import CredentialItem from "./CredentialItem";
-import NewAccountIcon from "../../../../icons/NewAccountIcon";
 import WarnIcon from "../../../../icons/WarnIcon";
 import { DownloadIcon, ServiceAccountCredentialsIcon } from "../../../../icons";

@@ -117,9 +116,6 @@ const CredentialsPrompt = ({
      }}
      title={
        <div className={classes.promptTitle}>
-          <div className={classes.promptIcon}>
-            <NewAccountIcon />
-          </div>{" "}
          <div>New {entity} Created</div>
        </div>
      }
--- a/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx
@@ -44,8 +44,8 @@ interface ICSVMultiSelector {
  onChange: (elements: string) => void;
 }

-const styles = (theme: Theme) =>
-  createStyles({
+const styles = (theme: Theme) => {
+  return createStyles({
    ...fieldBasic,
    ...tooltipHelper,
    inputWithBorder: {
@@ -55,11 +55,19 @@ const styles = (theme: Theme) =>
      overflowY: "auto",
      position: "relative",
      marginTop: 15,
+      flex: 1,
    },
    inputBoxSpacer: {
      marginBottom: 7,
    },
+    inputLabel: {
+      margin: 0,
+      alignItems: "flex-start",
+      paddingTop: "20px",
+      minWidth: 170,
+    },
  });
+};

 const CSVMultiSelector = ({
  elements,
--- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
@@ -14,19 +14,26 @@
 // 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 from "react";
+import React, { useState } from "react";
 import Grid from "@mui/material/Grid";
-import { Controlled as CodeMirror } from "react-codemirror2";
-import { InputLabel, Tooltip } from "@mui/material";
+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 "codemirror/lib/codemirror.css";
-import "codemirror/theme/material.css";
-
-require("codemirror/mode/yaml/yaml");
+import { CopyIcon, EditorThemeSwitchIcon } from "../../../../../icons";
+import RBIconButton from "../../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { EditorView } from "@codemirror/view";

 interface ICodeWrapper {
  value: string;
@@ -37,6 +44,7 @@ interface ICodeWrapper {
  onChange?: (editor: any, data: any, value: string) => any;
  onBeforeChange: (editor: any, data: any, value: string) => any;
  readOnly?: boolean;
+  editorHeight?: string;
 }

 const styles = (theme: Theme) =>
@@ -44,16 +52,122 @@ const styles = (theme: Theme) =>
    ...fieldBasic,
  });

+const langHighlight: Record<string, any> = {
+  json,
+  yaml: () => StreamLanguage.define(yaml),
+};
+
+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 = "",
  tooltip = "",
-  mode = "yaml",
+  mode = "json",
  classes,
-  onChange = () => {},
  onBeforeChange,
  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}>
@@ -71,17 +185,74 @@ const CodeMirrorWrapper = ({
      <Grid item xs={12}>
        <br />
      </Grid>
-      <Grid item xs={12}>
-        <CodeMirror
-          value={value}
-          options={{
-            mode: mode,
-            lineNumbers: true,
-            readOnly,
+
+      <Grid
+        item
+        xs={12}
+        sx={{
+          border: "1px solid #eaeaea",
+        }}
+      >
+        <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}
+          sx={{
+            borderTop: "1px solid #eaeaea",
+            background: isDarkTheme ? "#282c34" : "#f7f7f7",
          }}
-          onBeforeChange={onBeforeChange}
-          onChange={onChange}
-        />
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              padding: "2px",
+              paddingRight: "5px",
+              justifyContent: "flex-end",
+              "& button": {
+                height: "26px",
+                width: "26px",
+                padding: "2px",
+                " .min-icon": {
+                  marginLeft: "0",
+                },
+              },
+            }}
+          >
+            <RBIconButton
+              tooltip={"Change theme"}
+              onClick={() => {
+                setIsDarkTheme(!isDarkTheme);
+              }}
+              text={""}
+              icon={<EditorThemeSwitchIcon />}
+              color={"primary"}
+              variant={"outlined"}
+            />
+            <CopyToClipboard text={value}>
+              <RBIconButton
+                tooltip={"Copy to Clipboard"}
+                onClick={() => {}}
+                text={""}
+                icon={<CopyIcon />}
+                color={"primary"}
+                variant={"outlined"}
+              />
+            </CopyToClipboard>
+          </Box>
+        </Grid>
      </Grid>
    </React.Fragment>
  );
--- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/ConsoleCodeMirror.css
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/ConsoleCodeMirror.css
@@ -1,496 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
-  color: #fff;
-  background: #081c42;
-  direction: ltr;
-  font-size: 13px;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  background-color: rgba(
-    255,
-    255,
-    255,
-    0.8
-  ); /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #ffffff80;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {
-}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  white-space: nowrap;
-  color: #000;
-  font-size: 10px;
-  height: 18px;
-  line-height: 18px;
-  text-align: center;
-}
-
-.CodeMirror-guttermarker {
-  color: black;
-}
-.CodeMirror-guttermarker-subtle {
-  color: #999;
-}
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  border-left: 1px solid white;
-  border-right: none;
-  width: 0;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-.cm-fat-cursor-mark {
-  background-color: rgba(20, 255, 20, 0.5);
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-}
-.cm-animate-fat-cursor {
-  width: auto;
-  border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-  background-color: #7e7;
-}
-@-moz-keyframes blink {
-  0% {
-  }
-  50% {
-    background-color: transparent;
-  }
-  100% {
-  }
-}
-@-webkit-keyframes blink {
-  0% {
-  }
-  50% {
-    background-color: transparent;
-  }
-  100% {
-  }
-}
-@keyframes blink {
-  0% {
-  }
-  50% {
-    background-color: transparent;
-  }
-  100% {
-  }
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {
-}
-
-.cm-tab {
-  display: inline-block;
-  text-decoration: inherit;
-}
-
-.CodeMirror-rulers {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -50px;
-  bottom: 0;
-  overflow: hidden;
-}
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-header {
-  color: #fff;
-}
-.cm-s-default .cm-quote {
-  color: #fff;
-}
-.cm-negative {
-  color: #fff;
-}
-.cm-positive {
-  color: #fff;
-}
-.cm-header,
-.cm-strong {
-  font-weight: bold;
-}
-.cm-em {
-  font-style: italic;
-}
-.cm-link {
-  text-decoration: underline;
-}
-.cm-strikethrough {
-  text-decoration: line-through;
-}
-
-.cm-s-default .cm-keyword {
-  color: #fff;
-}
-.cm-s-default .cm-atom {
-  color: #fff;
-}
-.cm-s-default .cm-number {
-  color: #fff;
-}
-.cm-s-default .cm-def {
-  color: #fff;
-}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {
-}
-.cm-s-default .cm-variable-2 {
-  color: #fff;
-}
-.cm-s-default .cm-variable-3,
-.cm-s-default .cm-type {
-  color: #fff;
-}
-.cm-s-default .cm-comment {
-  color: #fff;
-}
-.cm-s-default .cm-string {
-  color: #fff;
-}
-.cm-s-default .cm-string-2 {
-  color: #fff;
-}
-.cm-s-default .cm-meta {
-  color: #fff;
-}
-.cm-s-default .cm-qualifier {
-  color: #fff;
-}
-.cm-s-default .cm-builtin {
-  color: #fff;
-}
-.cm-s-default .cm-bracket {
-  color: #fff;
-}
-.cm-s-default .cm-tag {
-  color: #fff;
-}
-.cm-s-default .cm-attribute {
-  color: #fff;
-}
-.cm-s-default .cm-hr {
-  color: #fff;
-}
-.cm-s-default .cm-link {
-  color: #fff;
-}
-
-.cm-s-default .cm-error {
-  color: #fff;
-}
-.cm-invalidchar {
-  color: #fff;
-}
-
-.CodeMirror-composing {
-  border-bottom: 2px solid;
-}
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #fff;
-}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #fff;
-}
-.CodeMirror-matchingtag {
-  background: rgba(255, 150, 0, 0.3);
-}
-.CodeMirror-activeline-background {
-  background: #e8f2ff;
-}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-}
-
-.CodeMirror-scroll {
-  overflow: scroll !important; /* Things will break if this is overridden */
-  /* 50px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -50px;
-  margin-right: -50px;
-  padding-bottom: 50px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-}
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 50px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar,
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0;
-  top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0;
-  left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0;
-  bottom: 0;
-}
-.CodeMirror-gutter-filler {
-  left: 0;
-  bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute;
-  left: 0;
-  top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -50px;
-}
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-.CodeMirror-gutter-wrapper ::selection {
-  background-color: transparent;
-}
-.CodeMirror-gutter-wrapper ::-moz-selection {
-  background-color: transparent;
-}
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-widget {
-}
-
-.CodeMirror-rtl pre {
-  direction: rtl;
-}
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-.CodeMirror-measure pre {
-  position: static;
-}
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected {
-  background: #d9d9d9;
-}
-.CodeMirror-focused .CodeMirror-selected {
-  background: #d7d4f0;
-}
-.CodeMirror-crosshair {
-  cursor: crosshair;
-}
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
-  background: #d7d4f0;
-}
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
-  background: #d7d4f0;
-}
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgba(255, 255, 0, 0.4);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border {
-  padding-right: 0.1px;
-}
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after {
-  content: "";
-}
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext {
-  background: none;
-}
--- a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
@@ -42,8 +42,12 @@ const styles = (theme: Theme) =>
    ...tooltipHelper,
    inputLabel: {
      ...fieldBasic.inputLabel,
-      marginBottom: 16,
      fontSize: 14,
+      margin: 0,
+      alignItems: "flex-start",
+      paddingTop: "20px",
+      flexWrap: "wrap",
+      display: "flex",
    },
    textBoxContainer: {
      flexGrow: 1,
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -30,7 +30,7 @@ const inputLabelBase = {
  display: "flex",
 };

-export const fieldBasic = {
+export const fieldBasic: any = {
  inputLabel: {
    ...inputLabelBase,
    minWidth: 160,
@@ -45,6 +45,7 @@ export const fieldBasic = {
    marginBottom: 20,
    position: "relative" as const,
    display: "flex" as const,
+    flexWrap: "wrap",
  },
  tooltipContainer: {
    marginLeft: 5,
@@ -1048,9 +1049,6 @@ export const serviceAccountStyles: any = {
  codeMirrorContainer: {
    marginBottom: 20,
    paddingLeft: 15,
-    "&:nth-child(2) .MuiGrid-root:nth-child(3)": {
-      border: "1px solid #EAEAEA",
-    },
    "& label": {
      marginBottom: ".5rem",
    },
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationForm.tsx
@@ -37,7 +37,20 @@ const ConfigurationsList = ({ match, history }: IConfigurationForm) => {
  );
  const containerClassName = `${configName}`;
  return (
-    <Grid item xs={12}>
+    <Grid
+      item
+      xs={12}
+      sx={{
+        height: "100%",
+        //LDAP and api forms have longer labels
+        "& .identity_ldap, .api": {
+          "& label": {
+            minWidth: 220,
+            marginRight: 0,
+          },
+        },
+      }}
+    >
      {validActiveConfig && (
        <EditConfiguration
          className={`${containerClassName}`}
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
@@ -80,50 +80,45 @@ const ConfigurationOptions = ({ classes, match }: IConfigurationOptions) => {

      <PageLayout>
        <Grid item xs={12}>
-          <Grid item xs={12}>
-            <div className={classes.settingsOptionsContainer}>
-              <ScreenTitle icon={<SettingsIcon />} title={"Configuration:"} />
-              <VerticalTabs
-                selectedTab={selConfigTab}
-                isRouteTabs
-                routes={
-                  <div className={classes.contentSpacer}>
-                    <Router history={history}>
-                      <Switch>
-                        {configurationElements.map((element) => (
-                          <Route
-                            exact
-                            key={`configItem-${element.configuration_label}`}
-                            path={`/settings/${element.configuration_id}`}
-                            component={ConfigurationForm}
-                          />
-                        ))}
-                        <Route exact path="/settings">
-                          <Redirect to="/settings/region" />
-                        </Route>
-                      </Switch>
-                    </Router>
-                  </div>
-                }
-              >
-                {configurationElements.map((element) => {
-                  const { configuration_id, configuration_label, icon } =
-                    element;
-                  return {
-                    tabConfig: {
-                      label: configuration_label,
-                      value: configuration_id,
-                      icon: icon,
-                      component: Link,
-                      to: getRoutePath(configuration_id),
-                    },
-                  };
-                })}
-              </VerticalTabs>
-            </div>
-          </Grid>
+          <div className={classes.settingsOptionsContainer}>
+            <ScreenTitle icon={<SettingsIcon />} title={"Configuration:"} />
+            <VerticalTabs
+              selectedTab={selConfigTab}
+              isRouteTabs
+              routes={
+                <Router history={history}>
+                  <Switch>
+                    {configurationElements.map((element) => (
+                      <Route
+                        exact
+                        key={`configItem-${element.configuration_label}`}
+                        path={`/settings/${element.configuration_id}`}
+                        component={ConfigurationForm}
+                      />
+                    ))}
+                    <Route exact path="/settings">
+                      <Redirect to="/settings/region" />
+                    </Route>
+                  </Switch>
+                </Router>
+              }
+            >
+              {configurationElements.map((element) => {
+                const { configuration_id, configuration_label, icon } = element;
+                return {
+                  tabConfig: {
+                    label: configuration_label,
+                    value: configuration_id,
+                    icon: icon,
+                    component: Link,
+                    to: getRoutePath(configuration_id),
+                  },
+                };
+              })}
+            </VerticalTabs>
+          </div>
        </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} sx={{ paddingTop: "15px" }}>
          <HelpBox
            title={"Learn more about SETTINGS"}
            iconComponent={<SettingsIcon />}
--- a/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/CustomForms/EditConfiguration.tsx
@@ -20,7 +20,7 @@ import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import ConfTargetGeneric from "../ConfTargetGeneric";
@@ -44,6 +44,11 @@ const styles = (theme: Theme) =>
  createStyles({
    ...fieldBasic,
    ...settingsCommon,
+    settingsFormContainer: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gridGap: "10px",
+    },
  });

 interface IAddNotificationEndpointProps {
@@ -155,44 +160,68 @@ const EditConfiguration = ({
          resetOpen={resetConfigurationOpen}
        />
      )}
-
-      <form noValidate onSubmit={submitForm} className={className}>
-        <Grid item xs={12} className={classes.settingsFormContainer}>
-          {loadingConfig && (
-            <Grid item xs={12}>
-              <LinearProgress />
-            </Grid>
-          )}
-          <ConfTargetGeneric
-            fields={
-              fieldsConfigurations[selectedConfiguration.configuration_id]
-            }
-            onChange={onValueChange}
-            defaultVals={configValues}
-          />
+      {loadingConfig ? (
+        <Grid item xs={12}>
+          <LinearProgress />
        </Grid>
-        <Grid item xs={12} className={classes.settingsButtonContainer}>
-          <Button
-            type="button"
-            variant="outlined"
-            color="secondary"
-            onClick={() => {
-              setResetConfigurationOpen(true);
+      ) : (
+        <Box
+          sx={{
+            padding: "15px",
+            height: "100%",
+          }}
+        >
+          <form
+            noValidate
+            onSubmit={submitForm}
+            className={className}
+            style={{
+              height: "100%",
+              display: "flex",
+              flexFlow: "column",
            }}
          >
-            Restore Defaults
-          </Button>
-          &nbsp; &nbsp;
-          <Button
-            type="submit"
-            variant="contained"
-            color="primary"
-            disabled={saving}
-          >
-            Save
-          </Button>
-        </Grid>
-      </form>
+            <Grid item xs={12} className={classes.settingsFormContainer}>
+              <ConfTargetGeneric
+                fields={
+                  fieldsConfigurations[selectedConfiguration.configuration_id]
+                }
+                onChange={onValueChange}
+                defaultVals={configValues}
+              />
+            </Grid>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                paddingTop: "15px ",
+                textAlign: "right" as const,
+                maxHeight: "60px",
+              }}
+            >
+              <Button
+                type="button"
+                variant="outlined"
+                color="secondary"
+                onClick={() => {
+                  setResetConfigurationOpen(true);
+                }}
+              >
+                Restore Defaults
+              </Button>
+              &nbsp; &nbsp;
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={saving}
+              >
+                Save
+              </Button>
+            </Grid>
+          </form>
+        </Box>
+      )}
    </Fragment>
  );
 };
--- a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
@@ -42,9 +42,6 @@ const styles = (theme: Theme) =>
    codeMirrorContainer: {
      marginBottom: 20,
      marginTop: 20,
-      "&:nth-child(2) .MuiGrid-root:nth-child(3)": {
-        border: "1px solid #EAEAEA",
-      },
      "& label": {
        marginBottom: ".5rem",
      },
@@ -153,6 +150,7 @@ const AddPolicy = ({
                onBeforeChange={(editor, data, value) => {
                  setPolicyDefinition(value);
                }}
+                editorHeight={"350px"}
              />
            </Grid>
          </Grid>
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -571,6 +571,7 @@ const PolicyDetails = ({
                          onBeforeChange={(editor, data, value) => {
                            setPolicyDefinition(value);
                          }}
+                          editorHeight={"350px"}
                        />
                      </Grid>
                      <Grid item xs={12} className={classes.buttonContainer}>
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantYAML.tsx
@@ -45,9 +45,6 @@ const styles = (theme: Theme) =>
    codeMirrorContainer: {
      marginBottom: 20,
      paddingLeft: 15,
-      "&:nth-child(2) .MuiGrid-root:nth-child(3)": {
-        border: "1px solid #EAEAEA",
-      },
      "& label": {
        marginBottom: ".5rem",
      },
@@ -161,6 +158,7 @@ const TenantYAML = ({
                onBeforeChange={(editor, data, value) => {
                  setTenantYaml(value);
                }}
+                editorHeight={"550px"}
              />
            </Grid>
            <Grid item xs={12} className={classes.modalButtonBar}>
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccount.tsx
@@ -17,7 +17,7 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -139,8 +139,11 @@ const AddUserServiceAccount = ({
              parent user has membership. You can specify an optional
              JSON-formatted policy below to restrict the Service Account access
              to a subset of actions and resources explicitly allowed for the
-              parent user. You cannot modify the Service Account optional policy
-              after saving.
+              parent user.
+              <Box sx={{ paddingTop: "15px", paddingBottom: "15px" }}>
+                You cannot modify the Service Account optional policy after
+                saving.
+              </Box>
            </div>
          </Grid>
          <Grid item xs={12}>
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -1060,6 +1060,249 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

+"@codemirror/autocomplete@^0.19.0":
+  version "0.19.10"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-0.19.10.tgz#d8f7079da99cf0bfa7f33ffe10a590f2ff226f36"
+  integrity sha512-8mgT+cSVxIoV/AbfJ36+r06xykxpACmXoD8bbTNwnkrttTwLkugxUP2oFAxL7I+TGMwxkX3ZquroyWX0HFO9nQ==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.4"
+    "@codemirror/text" "^0.19.2"
+    "@codemirror/tooltip" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/basic-setup@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/basic-setup/-/basic-setup-0.19.1.tgz#17b27d02f15c628eb62a85d01e3e1b1958933eb4"
+  integrity sha512-gLjD7YgZU/we6BzS/ecCmD3viw83dsgv5ZUaSydYbYx9X4w4w9RqYnckcJ+0GDyHfNr5Jtfv2Z5ZtFQnBj0UDA==
+  dependencies:
+    "@codemirror/autocomplete" "^0.19.0"
+    "@codemirror/closebrackets" "^0.19.0"
+    "@codemirror/commands" "^0.19.0"
+    "@codemirror/comment" "^0.19.0"
+    "@codemirror/fold" "^0.19.0"
+    "@codemirror/gutter" "^0.19.0"
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/history" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/lint" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/rectangular-selection" "^0.19.0"
+    "@codemirror/search" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.31"
+
+"@codemirror/closebrackets@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.0.tgz#69fdcee85779d638a00a42becd9f53a33a26d77f"
+  integrity sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/commands@^0.19.0":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.19.6.tgz#1568cf2c45a05864c1a4229575c5ac367ebbad9f"
+  integrity sha512-Mjc3ZfTifOn0h5499xI3MfCVIZvO2I0ochgzxfRtPOFwfXX/k7HTgnK0/KzuGDINyxUVeDaFCkf53TyyWjdxMQ==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/matchbrackets" "^0.19.0"
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.22"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/comment@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/comment/-/comment-0.19.0.tgz#4f23497924e9346898c2e0123011acc535a0bea6"
+  integrity sha512-3hqAd0548fxqOBm4khFMcXVIivX8p0bSlbAuZJ6PNoUn/0wXhxkxowPp0FmFzU2+y37Z+ZQF5cRB5EREWPRIiQ==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/fold@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/fold/-/fold-0.19.2.tgz#9d4e0c0f9f3bb2fcded7d82bea14ce39310e8e2a"
+  integrity sha512-FLi6RBhHPBnSbKZEu1S98z+VYSP5678cMdYVqhR58OWWTkEiLRVPeCTj8FhRKNL9B8Gx+lBQhGq3uwr3KtSs8w==
+  dependencies:
+    "@codemirror/gutter" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.22"
+
+"@codemirror/gutter@^0.19.0", "@codemirror/gutter@^0.19.4":
+  version "0.19.9"
+  resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.19.9.tgz#bbb69f4d49570d9c1b3f3df5d134980c516cd42b"
+  integrity sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.23"
+
+"@codemirror/highlight@^0.19.0":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
+  integrity sha512-3W32hBCY0pbbv/xidismw+RDMKuIag+fo4kZIbD7WoRj+Ttcaxjf+vP6RttRHXLaaqbWh031lTeON8kMlDhMYw==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    style-mod "^4.0.0"
+
+"@codemirror/history@^0.19.0":
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.19.2.tgz#25e3fda755f77ac1223a6ae6e9d7899f5919265e"
+  integrity sha512-unhP4t3N2smzmHoo/Yio6ueWi+il8gm9VKrvi6wlcdGH5fOfVDNkmjHQ495SiR+EdOG35+3iNebSPYww0vN7ow==
+  dependencies:
+    "@codemirror/state" "^0.19.2"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/lang-json@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-json/-/lang-json-0.19.1.tgz#616588d1422529965243c10af6c44ad0b9134fb0"
+  integrity sha512-66K5TT9HO0ODtpjY+3Ub6t3r0OB1d27P+Kl5oygk4tDavHUBpsyHTJRFw/CdeRM2VwjbpBfctGm/cTrSthFDZg==
+  dependencies:
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@lezer/json" "^0.15.0"
+
+"@codemirror/language@^0.19.0":
+  version "0.19.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.7.tgz#9eef8e827692d93a701b18db9d46a42be34ecca6"
+  integrity sha512-pNNUtYWMIMG0lUSKyUXJr8U0rFiCKsKFXbA2Oj17PC+S1FY99hV0z1vcntW67ekAIZw9DMEUQnLsKBuIbAUX7Q==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.5"
+    "@lezer/lr" "^0.15.0"
+
+"@codemirror/legacy-modes@^0.19.0":
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/legacy-modes/-/legacy-modes-0.19.0.tgz#df2f1023f79513d27eabb279b29d253f8b194b02"
+  integrity sha512-GSPdBNUeyF3nxJ2lztXGp2UoQjn+ggK5z+Kd4tflziecCG1+8mcdudDgFvxDuaTGWyM34S7Ldb4Xv7/XodZtBA==
+  dependencies:
+    "@codemirror/stream-parser" "^0.19.0"
+
+"@codemirror/lint@^0.19.0":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-0.19.3.tgz#84101d0967fea8df114a8f0f79965c22ccd3b3cc"
+  integrity sha512-+c39s05ybD2NjghxkPFsUbH/qBL0cdzKmtHbzUm0RVspeL2OiP7uHYJ6J5+Qr9RjMIPWzcqSauRqxfmCrctUfg==
+  dependencies:
+    "@codemirror/gutter" "^0.19.4"
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.1"
+    "@codemirror/state" "^0.19.4"
+    "@codemirror/tooltip" "^0.19.5"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/matchbrackets@^0.19.0":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/matchbrackets/-/matchbrackets-0.19.3.tgz#1f430ada6fa21af2205280ff344ef57bb95dd3cb"
+  integrity sha512-ljkrBxaLgh8jesroUiBa57pdEwqJamxkukXrJpL9LdyFZVJaF+9TldhztRaMsMZO1XnCSSHQ9sg32iuHo7Sc2g==
+  dependencies:
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+
+"@codemirror/panel@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/panel/-/panel-0.19.1.tgz#bf77d27b962cf16357139e50864d0eb69d634441"
+  integrity sha512-sYeOCMA3KRYxZYJYn5PNlt9yNsjy3zTNTrbYSfVgjgL9QomIVgOJWPO5hZ2sTN8lufO6lw0vTBsIPL9MSidmBg==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/rangeset@^0.19.0", "@codemirror/rangeset@^0.19.1", "@codemirror/rangeset@^0.19.5":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/rangeset/-/rangeset-0.19.6.tgz#2562850cb4ce7dd30088f4d13a13860b67e7d384"
+  integrity sha512-wYtgGnW2Jtrh2nj7vpcBoEZib+jfyilrLN6w7YMTzzSRN8xXhYRorOUg4VQIa1JwFcMQrjSCkIdqXsDqOX1cYg==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+
+"@codemirror/rectangular-selection@^0.19.0":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/rectangular-selection/-/rectangular-selection-0.19.1.tgz#5a88ece4fb68ce5682539497db8a64fc015aae63"
+  integrity sha512-9ElnqOg3mpZIWe0prPRd1SZ48Q9QB3bR8Aocq8UtjboJSUG8ABhRrbuTZMW/rMqpBPSjVpCe9xkCCkEQMYQVmw==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.4"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/search@^0.19.0":
+  version "0.19.5"
+  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-0.19.5.tgz#cae88292a6b4a6d6e6a8b6218fe62355cf7f6055"
+  integrity sha512-9kbtCBpMDlzcj7AptMRBx9BZpC5wz+/tG8nIe4vdpOszP08ZY2AcxN5nlhCoUSZu+pd0b6fYiwjLXOf000rRpw==
+  dependencies:
+    "@codemirror/panel" "^0.19.0"
+    "@codemirror/rangeset" "^0.19.0"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/text" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^0.19.0", "@codemirror/state@^0.19.2", "@codemirror/state@^0.19.3", "@codemirror/state@^0.19.4", "@codemirror/state@^0.19.5":
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.19.6.tgz#d631f041d39ce41b7891b099fca26cb1fdb9763e"
+  integrity sha512-sqIQZE9VqwQj7D4c2oz9mfLhlT1ElAzGB5lO1lE33BPyrdNy1cJyCIOecT4cn4VeJOFrnjOeu+IftZ3zqdFETw==
+  dependencies:
+    "@codemirror/text" "^0.19.0"
+
+"@codemirror/stream-parser@^0.19.0", "@codemirror/stream-parser@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/stream-parser/-/stream-parser-0.19.3.tgz#33a9358e9ea98549d98d4e90d02d0c4c280a8287"
+  integrity sha512-9fV6GgcZSLVvvPCd/SUt00G/Sqt91r0ojEQsgH7koWn4McTFvSujhOs0LHJlQGQRazuuWW1j3eqrv19+E9t40g==
+  dependencies:
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/language" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/text" "^0.19.0"
+    "@lezer/common" "^0.15.0"
+    "@lezer/lr" "^0.15.0"
+
+"@codemirror/text@^0.19.0", "@codemirror/text@^0.19.2", "@codemirror/text@^0.19.4":
+  version "0.19.5"
+  resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.19.5.tgz#75033af2476214e79eae22b81ada618815441c18"
+  integrity sha512-Syu5Xc7tZzeUAM/y4fETkT0zgGr48rDG+w4U38bPwSIUr+L9S/7w2wDE1WGNzjaZPz12F6gb1gxWiSTg9ocLow==
+
+"@codemirror/theme-one-dark@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-0.19.1.tgz#648b9cbe37186a2b7bd2a83fb483dc7aa18ce218"
+  integrity sha512-8gc4c2k2o/EhyHoWkghCxp5vyDT96JaFGtRy35PHwIom0LZdx7aU4AbDUnITvwiFB+0+i54VO+WQjBqgTyJvqg==
+  dependencies:
+    "@codemirror/highlight" "^0.19.0"
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/tooltip@^0.19.0", "@codemirror/tooltip@^0.19.5":
+  version "0.19.10"
+  resolved "https://registry.yarnpkg.com/@codemirror/tooltip/-/tooltip-0.19.10.tgz#c9ce5f8844ef28ab24d4a5adab0fc7ed85c44b4a"
+  integrity sha512-xqIhCHr+IYoamdNLvBnU/oDh92zPnsbT1zLaFtKTFi9GI9SxOfBhWY3jfMENlK0j1C9rk8+AvwpXblPGvY/O6w==
+  dependencies:
+    "@codemirror/state" "^0.19.0"
+    "@codemirror/view" "^0.19.0"
+
+"@codemirror/view@^0.19.0", "@codemirror/view@^0.19.15", "@codemirror/view@^0.19.22", "@codemirror/view@^0.19.23", "@codemirror/view@^0.19.31":
+  version "0.19.39"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.39.tgz#016c49c5aa0e7f8aa50f5456fb866b75d65febf9"
+  integrity sha512-ol4smHAwhWkW8p1diPZiZkLZVmKybKhQigwyrgdF7k1UFNY+/KDH4w2xic8JQXxX+v0ppMsoNf11C+afKJze5g==
+  dependencies:
+    "@codemirror/rangeset" "^0.19.5"
+    "@codemirror/state" "^0.19.3"
+    "@codemirror/text" "^0.19.0"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@csstools/normalize.css@*":
  version "12.0.0"
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@@ -1460,6 +1703,25 @@
    "@types/yargs" "^16.0.0"
    chalk "^4.0.0"

+"@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
+  version "0.15.11"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.11.tgz#965b5067036305f12e8a3efc344076850be1d3a8"
+  integrity sha512-vv0nSdIaVCRcJ8rPuDdsrNVfBOYe/4Szr/LhF929XyDmBndLDuWiCCHooGlGlJfzELyO608AyDhVsuX/ZG36NA==
+
+"@lezer/json@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@lezer/json/-/json-0.15.0.tgz#b96c1161eb8514e05f4eaaec95c68376e76e539f"
+  integrity sha512-OsMjjBkTkeQ15iMCu5U1OiBubRC4V9Wm03zdIlUgNZ20aUPx5DWDRqUc5wG41JXVSj7Lxmo+idlFCfBBdxB8sw==
+  dependencies:
+    "@lezer/lr" "^0.15.0"
+
+"@lezer/lr@^0.15.0":
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.5.tgz#4bce44169c441d9dda7be398f5202ea65c5f1138"
+  integrity sha512-DEcLyhdmBxD1foQe7RegLrSlfS/XaTMGLkO5evkzHWAQKh/JnFWp7j7iNB7s2EpxzRrBCh0U+W7JDCeFhv2mng==
+  dependencies:
+    "@lezer/common" "^0.15.0"
+
 "@mui/base@5.0.0-alpha.63":
  version "5.0.0-alpha.63"
  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.63.tgz#8646b9b91dae128a474feadac74748c532ffef2c"
@@ -2385,6 +2647,17 @@
    "@typescript-eslint/types" "5.9.1"
    eslint-visitor-keys "^3.0.0"

+"@uiw/react-codemirror@^4.3.2":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.3.3.tgz#c74deb63e6da06d077493cee99e8685914d122af"
+  integrity sha512-lh0Wpg+YZi9/jGnHcdZuTM3i1UfqdmQzyNtWSziH0N7D/uZIP375r7I22qd3/h/st0jQXN6HiuCG3HZ/pLQriQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@codemirror/basic-setup" "^0.19.0"
+    "@codemirror/state" "^0.19.5"
+    "@codemirror/theme-one-dark" "^0.19.1"
+    "@codemirror/view" "^0.19.15"
+
 "@webassemblyjs/ast@1.11.1":
  version "1.11.1"
  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -3541,6 +3814,11 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
    path-type "^4.0.0"
    yaml "^1.10.0"

+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
 cross-spawn@^7.0.2, cross-spawn@^7.0.3:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -7822,11 +8100,6 @@ react-chartjs-2@^2.9.0:
    lodash "^4.17.19"
    prop-types "^15.7.2"

-react-codemirror2@^7.1.0:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-7.2.1.tgz#38dab492fcbe5fb8ebf5630e5bb7922db8d3a10c"
-  integrity sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==
-
 react-copy-to-clipboard@^5.0.2:
  version "5.0.4"
  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz#42ec519b03eb9413b118af92d1780c403a5f19bf"
@@ -8880,6 +9153,11 @@ style-loader@^3.3.1:
  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==

+style-mod@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.0.tgz#97e7c2d68b592975f2ca7a63d0dd6fcacfe35a01"
+  integrity sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==
+
 styled-components@^5.3.1:
  version "5.3.3"
  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
@@ -9416,6 +9694,11 @@ w3c-hr-time@^1.0.2:
  dependencies:
    browser-process-hrtime "^1.0.0"

+w3c-keyname@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
+  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+
 w3c-xmlserializer@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"