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/common/__tests__/search-store.test.ts

@@ -23,6 +23,8 @@ import { SearchStore } from "../search-store";
 import { Console } from "console";
 import { stdout, stderr } from "process";
 
+jest.mock("react-monaco-editor", () => null);
+
 jest.mock("electron", () => ({
   app: {
     getPath: () => "/foo",

src/common/routes/preferences.ts

@@ -38,6 +38,10 @@ export const kubernetesRoute: RouteProps = {
   path: `${preferencesRoute.path}/kubernetes`
 };
 
+export const editorRoute: RouteProps = {
+  path: `${preferencesRoute.path}/editor`
+};
+
 export const telemetryRoute: RouteProps = {
   path: `${preferencesRoute.path}/telemetry`
 };
@@ -50,5 +54,6 @@ export const preferencesURL = buildURL(preferencesRoute.path);
 export const appURL = buildURL(appRoute.path);
 export const proxyURL = buildURL(proxyRoute.path);
 export const kubernetesURL = buildURL(kubernetesRoute.path);
+export const editorURL = buildURL(editorRoute.path);
 export const telemetryURL = buildURL(telemetryRoute.path);
 export const extensionURL = buildURL(extensionRoute.path);

src/common/user-store/preferences-helpers.ts

@@ -24,6 +24,8 @@ import path from "path";
 import os from "os";
 import { ThemeStore } from "../../renderer/theme.store";
 import { ObservableToggleSet } from "../utils";
+import type {monaco} from "react-monaco-editor";
+import merge from "lodash/merge";
 
 export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
   filePath: string;
@@ -31,6 +33,20 @@ export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
 
 export interface KubeconfigSyncValue { }
 
+export interface EditorConfiguration {
+  miniMap?: monaco.editor.IEditorMinimapOptions;
+  lineNumbers?: monaco.editor.LineNumbersType;
+  tabSize?: number;
+}
+
+export const defaultEditorConfig: EditorConfiguration = {
+  lineNumbers: "on",
+  miniMap: {
+    enabled: true
+  },
+  tabSize: 2
+};
+
 interface PreferenceDescription<T, R = T> {
   fromStore(val: T | undefined): R;
   toStore(val: R): T | undefined;
@@ -222,6 +238,15 @@ const syncKubeconfigEntries: PreferenceDescription<KubeconfigSyncEntry[], Map<st
   },
 };
 
+const editorConfiguration: PreferenceDescription<EditorConfiguration, EditorConfiguration> = {
+  fromStore(val) {
+    return merge(defaultEditorConfig, val);
+  },
+  toStore(val) {
+    return val;
+  },
+};
+
 type PreferencesModelType<field extends keyof typeof DESCRIPTORS> = typeof DESCRIPTORS[field] extends PreferenceDescription<infer T, any> ? T : never;
 type UserStoreModelType<field extends keyof typeof DESCRIPTORS> = typeof DESCRIPTORS[field] extends PreferenceDescription<any, infer T> ? T : never;
 
@@ -248,4 +273,5 @@ export const DESCRIPTORS = {
   openAtLogin,
   hiddenTableColumns,
   syncKubeconfigEntries,
+  editorConfiguration,
 };

src/common/user-store/user-store.ts

@@ -30,8 +30,9 @@ import { appEventBus } from "../event-bus";
 import path from "path";
 import { fileNameMigration } from "../../migrations/user-store";
 import { ObservableToggleSet, toJS } from "../../renderer/utils";
-import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers";
+import { DESCRIPTORS, KubeconfigSyncValue, UserPreferencesModel, EditorConfiguration } from "./preferences-helpers";
 import logger from "../../main/logger";
+import type {monaco} from "react-monaco-editor";
 
 export interface UserStoreModel {
   lastSeenAppVersion: string;
@@ -68,7 +69,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   @observable shell?: string;
   @observable downloadBinariesPath?: string;
   @observable kubectlBinariesPath?: string;
-
+  
   /**
    * Download kubectl binaries matching cluster version
    */
@@ -81,6 +82,11 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
    */
   hiddenTableColumns = observable.map<string, ObservableToggleSet<string>>();
 
+  /**
+   * Monaco editor configs
+   */
+   @observable editorConfiguration:EditorConfiguration = {tabSize: null, miniMap: null, lineNumbers: null};
+  
   /**
    * The set of file/folder paths to be synced
    */
@@ -109,7 +115,29 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
       });
     }, {
       fireImmediately: true,
-    });
+    }); 
+  }
+
+  // Returns monaco editor options for selected editor type (the place, where a particular instance of the editor is mounted)
+  getEditorOptions(): monaco.editor.IStandaloneEditorConstructionOptions {
+    return {
+      automaticLayout: true,
+      tabSize: this.editorConfiguration.tabSize,
+      minimap: this.editorConfiguration.miniMap,
+      lineNumbers: this.editorConfiguration.lineNumbers
+    };
+  }
+
+  setEditorLineNumbers(lineNumbers: monaco.editor.LineNumbersType) {
+    this.editorConfiguration.lineNumbers = lineNumbers;
+  }
+
+  setEditorTabSize(tabSize: number) {
+    this.editorConfiguration.tabSize = tabSize;
+  }
+
+  enableEditorMinimap(miniMap: boolean ) {
+    this.editorConfiguration.miniMap.enabled = miniMap;
   }
 
   /**
@@ -182,6 +210,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     this.openAtLogin = DESCRIPTORS.openAtLogin.fromStore(preferences?.openAtLogin);
     this.hiddenTableColumns.replace(DESCRIPTORS.hiddenTableColumns.fromStore(preferences?.hiddenTableColumns));
     this.syncKubeconfigEntries.replace(DESCRIPTORS.syncKubeconfigEntries.fromStore(preferences?.syncKubeconfigEntries));
+    this.editorConfiguration = DESCRIPTORS.editorConfiguration.fromStore(preferences?.editorConfiguration);
   }
 
   toJSON(): UserStoreModel {
@@ -202,6 +231,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
         openAtLogin: DESCRIPTORS.openAtLogin.toStore(this.openAtLogin),
         hiddenTableColumns: DESCRIPTORS.hiddenTableColumns.toStore(this.hiddenTableColumns),
         syncKubeconfigEntries: DESCRIPTORS.syncKubeconfigEntries.toStore(this.syncKubeconfigEntries),
+        editorConfiguration: DESCRIPTORS.editorConfiguration.toStore(this.editorConfiguration),
       },
     };