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/+workloads-pods/pod-details-affinities.tsx

@@ -22,9 +22,12 @@
 import "./pod-details-affinities.scss";
 import React from "react";
 import jsYaml from "js-yaml";
-import { AceEditor } from "../ace-editor";
 import { DrawerParamToggler, DrawerItem } from "../drawer";
 import type { Pod, Deployment, DaemonSet, StatefulSet, ReplicaSet, Job } from "../../../common/k8s-api/endpoints";
+import MonacoEditor from "react-monaco-editor";
+import { cssNames } from "../../utils";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
 
 interface Props {
   workload: Pod | Deployment | DaemonSet | StatefulSet | ReplicaSet | Job;
@@ -42,11 +45,12 @@ export class PodDetailsAffinities extends React.Component<Props> {
       <DrawerItem name="Affinities" className="PodDetailsAffinities">
         <DrawerParamToggler label={affinitiesNum}>
           <div className="ace-container">
-            <AceEditor
-              mode="yaml"
+            <MonacoEditor
+              options={{readOnly: true, ...UserStore.getInstance().getEditorOptions()}}
+              className={cssNames("MonacoEditor")}
+              theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+              language="yaml"
               value={jsYaml.dump(affinities)}
-              showGutter={false}
-              readOnly
             />
           </div>
         </DrawerParamToggler>