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/dock/__test__/dock-tabs.test.tsx

@@ -31,6 +31,14 @@ import { ThemeStore } from "../../../theme.store";
 import { TerminalStore } from "../terminal.store";
 import { UserStore } from "../../../../common/user-store";
 
+jest.mock("react-monaco-editor", () => ({
+  monaco: {
+    editor: {
+      getModel: jest.fn()
+    }
+  },
+}));
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/__test__/log-resource-selector.test.tsx

@@ -32,6 +32,8 @@ import { ThemeStore } from "../../../theme.store";
 import { UserStore } from "../../../../common/user-store";
 import mockFs from "mock-fs";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/__test__/log-tab.store.test.ts

@@ -29,6 +29,8 @@ import { TerminalStore } from "../terminal.store";
 import { deploymentPod1, deploymentPod2, deploymentPod3, dockerPod } from "./pod.mock";
 import fse from "fs-extra";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "tmp",

src/renderer/components/dock/create-resource.tsx

@@ -36,6 +36,7 @@ import { InfoPanel } from "./info-panel";
 import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api";
 import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { Notifications } from "../notifications";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 interface Props {
   className?: string;
@@ -88,7 +89,10 @@ export class CreateResource extends React.Component<Props> {
 
   onSelectTemplate = (item: SelectOption) => {
     this.currentTemplates.set(this.tabId, item);
-    fs.readFile(item.value,"utf8").then(v => createResourceStore.setData(this.tabId,v));
+    fs.readFile(item.value,"utf8").then(v => {
+      createResourceStore.setData(this.tabId,v);
+      monacoModelsManager.getModel(this.tabId).setValue(v ?? "");
+    });
   };
 
   create = async () => {

src/renderer/components/dock/dock.scss

@@ -82,7 +82,7 @@
     }
   }
 
-  .AceEditor {
+  .MonacoEditor {
     border: none;
   }
 }

src/renderer/components/dock/dock.store.ts

@@ -23,6 +23,7 @@ import * as uuid from "uuid";
 import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
 import { autoBind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
+import {monacoModelsManager} from "./monaco-model-manager";
 
 export type TabId = string;
 
@@ -157,6 +158,12 @@ export class DockStore implements DockStorageState {
   private init() {
     // adjust terminal height if window size changes
     window.addEventListener("resize", throttle(this.adjustHeight, 250));
+    // create monaco models
+    this.whenReady.then(() => {this.tabs.forEach(tab => {
+      if (this.usesMonacoEditor(tab)) {     
+        monacoModelsManager.addModel(tab.id);
+      }
+    });});
   }
 
   get maxHeight() {
@@ -186,6 +193,13 @@ export class DockStore implements DockStorageState {
     return this.tabs.length > 0;
   }
 
+  usesMonacoEditor(tab: DockTab): boolean {
+    return [TabKind.CREATE_RESOURCE,
+      TabKind.EDIT_RESOURCE,
+      TabKind.INSTALL_CHART,
+      TabKind.UPGRADE_CHART].includes(tab.kind);
+  }
+
   @action
   open(fullSize?: boolean) {
     this.isOpen = true;
@@ -260,6 +274,11 @@ export class DockStore implements DockStorageState {
       title
     };
 
+    // add monaco model 
+    if (this.usesMonacoEditor(tab)) {
+      monacoModelsManager.addModel(id);
+    }
+
     this.tabs.push(tab);
     this.selectTab(tab.id);
     this.open();
@@ -274,6 +293,12 @@ export class DockStore implements DockStorageState {
     if (!tab || tab.pinned) {
       return;
     }
+
+    // remove monaco model 
+    if (this.usesMonacoEditor(tab)) {
+      monacoModelsManager.removeModel(tabId);
+    }
+
     this.tabs = this.tabs.filter(tab => tab.id !== tabId);
 
     if (this.selectedTabId === tab.id) {

src/renderer/components/dock/edit-resource.store.ts

@@ -26,6 +26,7 @@ import { dockStore, DockTab, DockTabCreateSpecific, TabId, TabKind } from "./doc
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
+import {monacoModelsManager} from "./monaco-model-manager";
 
 export interface EditingResource {
   resource: string; // resource path, e.g. /api/v1/namespaces/default
@@ -61,6 +62,7 @@ export class EditResourceStore extends DockTabStore<EditingResource> {
             // preload resource for editing
             if (!obj && !store.isLoaded && !store.isLoading && isActiveTab) {
               store.loadFromPath(resource).catch(noop);
+              monacoModelsManager.getModel(tabId).setValue(resource);
             }
             // auto-close tab when resource removed from store
             else if (!obj && store.isLoaded) {

src/renderer/components/dock/editor-panel.tsx

@@ -19,29 +19,30 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import MonacoEditor, {monaco} from "react-monaco-editor";
 import React from "react";
 import jsYaml from "js-yaml";
 import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { cssNames } from "../../utils";
-import { AceEditor } from "../ace-editor";
 import { dockStore, TabId } from "./dock.store";
-import { DockTabStore } from "./dock-tab.store";
-import type { Ace } from "ace-builds";
+import { monacoModelsManager } from "./monaco-model-manager";
+import { ThemeStore } from "../../theme.store";
+import { UserStore } from "../../../common/user-store";
+
+import "monaco-editor";
 
 interface Props {
   className?: string;
   tabId: TabId;
-  value: string;
+  value?: string;
   onChange(value: string, error?: string): void;
 }
 
+
 @observer
 export class EditorPanel extends React.Component<Props> {
-  static cursorPos = new DockTabStore<Ace.Point>();
-
-  public editor: AceEditor;
-
+  model: monaco.editor.ITextModel;
+  public editor: monaco.editor.IStandaloneCodeEditor;
   @observable yamlError = "";
 
   constructor(props: Props) {
@@ -59,6 +60,14 @@ export class EditorPanel extends React.Component<Props> {
     ]);
   }
 
+  editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
+    this.editor = editor;
+    const model = monacoModelsManager.getModel(this.props.tabId);
+    
+    model.setValue(this.props.value ?? "");
+    this.editor.setModel(model);
+  };
+
   validate(value: string) {
     try {
       jsYaml.safeLoadAll(value);
@@ -70,17 +79,16 @@ export class EditorPanel extends React.Component<Props> {
 
   onTabChange = () => {
     this.editor.focus();
+    const model = monacoModelsManager.getModel(this.props.tabId);
+
+    model.setValue(this.props.value ?? "");
+    this.editor.setModel(model);
   };
 
   onResize = () => {
-    this.editor.resize();
     this.editor.focus();
   };
 
-  onCursorPosChange = (pos: Ace.Point) => {
-    EditorPanel.cursorPos.setData(this.props.tabId, pos);
-  };
-
   onChange = (value: string) => {
     this.validate(value);
 
@@ -90,21 +98,13 @@ export class EditorPanel extends React.Component<Props> {
   };
 
   render() {
-    const { value, tabId } = this.props;
-    let { className } = this.props;
-
-    className = cssNames("EditorPanel", className);
-    const cursorPos = EditorPanel.cursorPos.getData(tabId);
-
     return (
-      <AceEditor
-        autoFocus mode="yaml"
-        className={className}
-        value={value}
-        cursorPos={cursorPos}
-        onChange={this.onChange}
-        onCursorPosChange={this.onCursorPosChange}
-        ref={e => this.editor = e}
+      <MonacoEditor
+        options={{model: null, ...UserStore.getInstance().getEditorOptions()}}
+        theme={ThemeStore.getInstance().activeTheme.monacoTheme}
+        language = "yaml"
+        onChange = {this.onChange}
+        editorDidMount={this.editorDidMount}
       />
     );
   }

src/renderer/components/dock/install-chart.store.ts

@@ -25,6 +25,7 @@ import { DockTabStore } from "./dock-tab.store";
 import { getChartDetails, getChartValues, HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
 import type { IReleaseUpdateDetails } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { Notifications } from "../notifications";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 export interface IChartInstallData {
   name: string;
@@ -90,10 +91,15 @@ export class InstallChartStore extends DockTabStore<IChartInstallData> {
 
     if (values) {
       this.setData(tabId, { ...data, values });
+      monacoModelsManager.getModel(tabId).setValue(values);
     } else if (attempt < 4) {
       return this.loadValues(tabId, attempt + 1);
     }
   }
+
+  setData(tabId: TabId, data: IChartInstallData){
+    super.setData(tabId, data);
+  }
 }
 
 export const installChartStore = new InstallChartStore();

src/renderer/components/dock/monaco-model-manager.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import {monaco} from "react-monaco-editor";
+
+export type TabId = string;
+
+interface ModelEntry {
+    id?: TabId;
+    modelUri?: monaco.Uri;
+    lang?: string;
+  }
+
+export interface ModelsState {
+    models: ModelEntry[];
+  }
+
+export class MonacoModelsManager implements ModelsState {
+  models: ModelEntry[] = [];
+
+  addModel(tabId: string, { value = "", lang = "yaml" } = {}) {
+    const uri = this.getUri(tabId);
+    const model = monaco.editor.createModel(value, lang, uri); 
+
+    if(!uri) this.models = this.models.concat({ id: tabId, modelUri: model.uri, lang});
+  }
+
+  getModel(tabId: string): monaco.editor.ITextModel {
+    return monaco.editor.getModel(this.getUri(tabId));
+  }
+
+  getUri(tabId: string): monaco.Uri {
+    return this.models.find(model => model.id == tabId)?.modelUri;
+  }
+
+  removeModel(tabId: string) {
+    const uri = this.getUri(tabId);
+
+    this.models = this.models.filter(v => v.id != tabId);
+    monaco.editor.getModel(uri)?.dispose();
+  }
+}
+
+export const monacoModelsManager = new MonacoModelsManager();

src/renderer/components/dock/upgrade-chart.store.ts

@@ -25,6 +25,7 @@ import { DockTabStore } from "./dock-tab.store";
 import { getReleaseValues, HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
 import { releaseStore } from "../+apps-releases/release.store";
 import { iter } from "../../utils";
+import { monacoModelsManager } from "./monaco-model-manager";
 
 export interface IChartUpgradeData {
   releaseName: string;
@@ -118,6 +119,7 @@ export class UpgradeChartStore extends DockTabStore<IChartUpgradeData> {
     const values = await getReleaseValues(releaseName, releaseNamespace, true);
 
     this.values.setData(tabId, values);
+    monacoModelsManager.getModel(tabId).setValue(values);
   }
 
   getTabByRelease(releaseName: string): DockTab {