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/+preferences/editor.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { observer } from "mobx-react";
+import React from "react";
+import { UserStore } from "../../../common/user-store";
+import { FormSwitch, Switcher } from "../switch";
+import { SubTitle } from "../layout/sub-title";
+import { Input } from "../input";
+import { isNumber } from "../input/input_validators";
+import { Select, SelectOption } from "../select";
+
+enum EditorLineNumbersStyles {
+  on = "On",
+  off = "Off",
+  relative = "Relative",
+  interval = "Interval"
+}
+
+export const Editor = observer(() => {
+
+  return (
+    <section id="editor">
+      <h2 data-testid="editor-configuration-header">Editor configuration</h2>
+      <section>
+        <FormSwitch
+          control={
+            <Switcher
+              checked={UserStore.getInstance().editorConfiguration.miniMap.enabled}
+              onChange={v => UserStore.getInstance().enableEditorMinimap(v.target.checked)}
+              name="minimap"
+            />
+          }
+          label="Show minimap"
+        />
+      </section>
+      <section>
+        <SubTitle title="Line numbers"/>
+        <Select
+          options={Object.entries(EditorLineNumbersStyles).map(entry => ({label: entry[1], value: entry[0]}))}
+          value={UserStore.getInstance().editorConfiguration?.lineNumbers}
+          onChange={({ value }: SelectOption) => UserStore.getInstance().setEditorLineNumbers(value)}
+          themeName="lens"
+        />
+      </section>
+      <section>
+        <SubTitle title="Tab size"/>
+        <Input
+          theme="round-black"
+          min={1}
+          max={10}
+          validators={[isNumber]}
+          value={UserStore.getInstance().editorConfiguration.tabSize?.toString()}
+          onChange={(value) => {(Number(value) || value=="") && UserStore.getInstance().setEditorTabSize(Number(value));}}
+        />
+      </section>
+    </section>
+  );
+});
+    

src/renderer/components/+preferences/preferences.tsx

@@ -28,6 +28,7 @@ import { matchPath, Redirect, Route, RouteProps, Switch } from "react-router";
 import {
   appRoute,
   appURL,
+  editorURL,
   extensionRoute,
   extensionURL,
   kubernetesRoute,
@@ -35,6 +36,7 @@ import {
   preferencesURL,
   proxyRoute,
   proxyURL,
+  editorRoute,
   telemetryRoute,
   telemetryURL,
 } from "../../../common/routes";
@@ -45,6 +47,7 @@ import { SubTitle } from "../layout/sub-title";
 import { Tab, Tabs } from "../tabs";
 import { Application } from "./application";
 import { Kubernetes } from "./kubernetes";
+import { Editor } from "./editor";
 import { LensProxy } from "./proxy";
 import { Telemetry } from "./telemetry";
 import { Extensions } from "./extensions";
@@ -71,6 +74,7 @@ export class Preferences extends React.Component {
         <Tab value={appURL()} label="Application" data-testid="application-tab" active={isActive(appRoute)}/>
         <Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/>
         <Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/>
+        <Tab value={editorURL()} label="Editor" data-testid="editor-tab" active={isActive(editorRoute)}/>
         {telemetryExtensions.length > 0 || !!sentryDsn &&
           <Tab value={telemetryURL()} label="Telemetry" data-testid="telemetry-tab" active={isActive(telemetryRoute)}/>
         }
@@ -92,6 +96,7 @@ export class Preferences extends React.Component {
           <Route path={appURL()} component={Application}/>
           <Route path={proxyURL()} component={LensProxy}/>
           <Route path={kubernetesURL()} component={Kubernetes}/>
+          <Route path={editorURL()} component={Editor}/>
           <Route path={telemetryURL()} component={Telemetry}/>
           <Route path={extensionURL()} component={Extensions}/>
           <Redirect exact from={`${preferencesURL()}/`} to={appURL()}/>