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/+apps-releases/release-details.scss

@@ -82,11 +82,11 @@
   }
 
   .values {
-    .AceEditor {
+    .MonacoEditor {
       min-height: 300px;
     }
 
-    .AceEditor + .Button {
+    .MonacoEditor + .Button {
       align-self: flex-start;
     }
   }

src/renderer/components/+apps-releases/release-details.tsx

@@ -35,7 +35,6 @@ import { cssNames, stopPropagation } from "../../utils";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Spinner } from "../spinner";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { releaseStore } from "./release.store";
 import { Notifications } from "../notifications";
@@ -47,6 +46,8 @@ import { secretsStore } from "../+config-secrets/secrets.store";
 import { Secret } from "../../../common/k8s-api/endpoints";
 import { getDetailsUrl } from "../kube-detail-params";
 import { Checkbox } from "../checkbox";
+import MonacoEditor from "react-monaco-editor";
+import { UserStore } from "../../../common/user-store";
 
 interface Props {
   release: HelmRelease;
@@ -158,15 +159,16 @@ export class ReleaseDetails extends Component<Props> {
             onChange={value => this.showOnlyUserSuppliedValues = value}
             disabled={valuesLoading}
           />
-          <AceEditor
-            mode="yaml"
+          <MonacoEditor
+            language="yaml"
             value={values}
             onChange={text => this.values = text}
-            className={cssNames({ loading: valuesLoading })}
-            readOnly={valuesLoading || this.showOnlyUserSuppliedValues}
+            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+            className={cssNames("MonacoEditor", {loading: valuesLoading})}
+            options={{readOnly: valuesLoading || this.showOnlyUserSuppliedValues, ...UserStore.getInstance().getEditorOptions()}}
           >
             {valuesLoading && <Spinner center />}
-          </AceEditor>
+          </MonacoEditor>
           <Button
             primary
             label="Save"