Replace Ace Editor with monaco (#2949)

Signed-off-by: Pavel Ashevskii <pashevskii@mirantis.com>

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+add-cluster/add-cluster.scss

@@ -23,7 +23,7 @@
   --flex-gap: #{$unit * 2};
   $spacing: $padding * 2;
 
-  .AceEditor {
+  .MonacoEditor {
     min-height: 600px;
     max-height: 600px;
     border: 1px solid var(--colorVague);

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -34,11 +34,13 @@ import { appEventBus } from "../../../common/event-bus";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { navigate } from "../../navigation";
-import { getCustomKubeConfigPath, iter } from "../../utils";
-import { AceEditor } from "../ace-editor";
+import { getCustomKubeConfigPath, cssNames, iter } from "../../utils";
 import { Button } from "../button";
 import { Notifications } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
+import MonacoEditor from "react-monaco-editor";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
 
 interface Option {
   config: KubeConfig;
@@ -114,10 +116,11 @@ export class AddCluster extends React.Component {
           Read more about adding clusters <a href={`${docsUrl}/catalog/add-clusters/`} rel="noreferrer" target="_blank">here</a>.
         </p>
         <div className="flex column">
-          <AceEditor
-            autoFocus
-            showGutter={false}
-            mode="yaml"
+          <MonacoEditor
+            options={{...UserStore.getInstance().getEditorOptions()}}
+            className={cssNames("MonacoEditor")}
+            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+            language="yaml"
             value={this.customConfig}
             onChange={value => {
               this.customConfig = value;