Monaco editor refactoring (#4225)

* monaco editor refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* clean up / responding to comments

Signed-off-by: Roman <ixrock@gmail.com>

* move custom monaco themes to own folder

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint

Signed-off-by: Roman <ixrock@gmail.com>

* removed unused rules from webpack's config (renderer)

Signed-off-by: Roman <ixrock@gmail.com>

integration/__tests__/cluster-pages.tests.ts

@@ -378,11 +378,12 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
     await kubeApiServerRow.click();
     await frame.waitForSelector(".Drawer", { state: "visible" });
 
-    const logButton = await frame.waitForSelector("ul.KubeObjectMenu li.MenuItem i.Icon span[data-icon-name='subject']");
+    const showPodLogsIcon = await frame.waitForSelector(".Drawer .drawer-title .Icon >> text=subject");
 
-    await logButton.click();
+    showPodLogsIcon.click();
 
     // Check if controls are available
+    await frame.waitForSelector(".Dock.isOpen");
     await frame.waitForSelector(".LogList .VirtualList");
     await frame.waitForSelector(".LogResourceSelector");
 
@@ -447,31 +448,31 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
       await frame.waitForTimeout(100_000);
     }
 
-    const inputField = await frame.waitForSelector(".CreateResource div.react-monaco-editor-container");
+    const testPodName = "nginx-create-pod-test";
+    const monacoEditor = await frame.waitForSelector(`.Dock.isOpen [data-test-component="monaco-editor"]`);
 
-    await inputField.click();
-    await inputField.type("apiVersion: v1", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("kind: Pod", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("metadata:", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("  name: nginx-create-pod-test", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type(`namespace: ${TEST_NAMESPACE}`, { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.press("Backspace", { delay: 10 });
-    await inputField.type("spec:", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("  containers:", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("- name: nginx-create-pod-test", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
-    await inputField.type("  image: nginx:alpine", { delay: 10 });
-    await inputField.press("Enter", { delay: 10 });
+    await monacoEditor.click();
+    await monacoEditor.type("apiVersion: v1", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type("kind: Pod", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type("metadata:", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type(`  name: ${testPodName}`, { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type(`namespace: ${TEST_NAMESPACE}`, { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.press("Backspace", { delay: 10 });
+    await monacoEditor.type("spec:", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type("  containers:", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type(`- name: ${testPodName}`, { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
+    await monacoEditor.type("  image: nginx:alpine", { delay: 10 });
+    await monacoEditor.press("Enter", { delay: 10 });
 
-    await frame.click("button.Button >> text='Create & Close'");
-    await frame.click("div.TableCell >> text=nginx-create-pod-test");
-    await frame.waitForSelector("div.drawer-title-text >> text='Pod: nginx-create-pod-test'");
+    await frame.click(".Dock .Button >> text='Create'");
+    await frame.waitForSelector(`.TableCell >> text=${testPodName}`);
   }, 10*60*1000);
 });

package.json

@@ -218,7 +218,8 @@
     "mock-fs": "^4.14.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
-    "monaco-editor": "^0.26.1",
+    "monaco-editor": "^0.29.1",
+    "monaco-editor-webpack-plugin": "^5.0.0",
     "node-fetch": "^2.6.6",
     "node-pty": "^0.10.1",
     "npm": "^6.14.15",
@@ -228,7 +229,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-material-ui-carousel": "^2.3.5",
-    "react-monaco-editor": "^0.44.0",
     "react-router": "^5.2.0",
     "react-virtualized-auto-sizer": "^1.0.6",
     "readable-stream": "^3.6.0",

src/common/__tests__/search-store.test.ts

@@ -23,8 +23,6 @@ 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/user-store/preferences-helpers.ts

@@ -24,7 +24,7 @@ import path from "path";
 import os from "os";
 import { ThemeStore } from "../../renderer/theme.store";
 import { getAppVersion, ObservableToggleSet } from "../utils";
-import type { monaco } from "react-monaco-editor";
+import type { editor } from "monaco-editor";
 import merge from "lodash/merge";
 import { SemVer } from "semver";
 
@@ -32,20 +32,19 @@ export interface KubeconfigSyncEntry extends KubeconfigSyncValue {
   filePath: string;
 }
 
-export interface KubeconfigSyncValue { }
-
-export interface EditorConfiguration {
-  miniMap?: monaco.editor.IEditorMinimapOptions;
-  lineNumbers?: monaco.editor.LineNumbersType;
-  tabSize?: number;
+export interface KubeconfigSyncValue {
 }
 
+export type EditorConfiguration = Pick<editor.IStandaloneEditorConstructionOptions,
+  "minimap" | "tabSize" | "lineNumbers">;
+
 export const defaultEditorConfig: EditorConfiguration = {
-  lineNumbers: "on",
-  miniMap: {
-    enabled: true,
-  },
   tabSize: 2,
+  lineNumbers: "on",
+  minimap: {
+    enabled: true,
+    side: "right",
+  },
 };
 
 interface PreferenceDescription<T, R = T> {

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

@@ -21,18 +21,16 @@
 
 import { app, ipcMain } from "electron";
 import semver, { SemVer } from "semver";
-import { action, computed, observable, reaction, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { BaseStore } from "../base-store";
-import migrations from "../../migrations/user-store";
+import migrations, { fileNameMigration } from "../../migrations/user-store";
 import { getAppVersion } from "../utils/app-version";
 import { kubeConfigDefaultPath } from "../kube-helpers";
 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, EditorConfiguration } from "./preferences-helpers";
+import { DESCRIPTORS, EditorConfiguration, KubeconfigSyncValue, UserPreferencesModel } from "./preferences-helpers";
 import logger from "../../main/logger";
-import type { monaco } from "react-monaco-editor";
 import { AppPaths } from "../app-paths";
 
 export interface UserStoreModel {
@@ -92,7 +90,7 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
   /**
    * Monaco editor configs
    */
-   @observable editorConfiguration:EditorConfiguration = { tabSize: null, miniMap: null, lineNumbers: null };
+  @observable editorConfiguration: EditorConfiguration;
 
   /**
    * The set of file/folder paths to be synced
@@ -129,28 +127,6 @@ export class UserStore extends BaseStore<UserStoreModel> /* implements UserStore
     });
   }
 
-  // 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;
-  }
-
   /**
    * Checks if a column (by ID) for a table (by ID) is configured to be hidden
    * @param tableId The ID of the table to be checked against

src/extensions/registries/__tests__/page-registry.test.ts

@@ -19,19 +19,18 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { jest } from "@jest/globals";
 import { ClusterPageRegistry, getExtensionPageUrl, GlobalPageRegistry, PageParams } from "../page-registry";
 import { LensExtension } from "../../lens-extension";
 import React from "react";
 import fse from "fs-extra";
 import { Console } from "console";
-import { stdout, stderr } from "process";
+import { stderr, stdout } from "process";
+import { TerminalStore } from "../../../renderer/components/dock/terminal.store";
 import { ThemeStore } from "../../../renderer/theme.store";
-import { TerminalStore } from "../../renderer-api/components";
 import { UserStore } from "../../../common/user-store";
 import { AppPaths } from "../../../common/app-paths";
 
-jest.mock("react-monaco-editor", () => null);
-
 jest.mock("electron", () => ({
   app: {
     getVersion: () => "99.99.99",

src/renderer/bootstrap.tsx

@@ -28,7 +28,6 @@ import * as ReactRouter from "react-router";
 import * as ReactRouterDom from "react-router-dom";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsRendererApi from "../extensions/renderer-api";
-import { monaco } from "react-monaco-editor";
 import { render } from "react-dom";
 import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
@@ -48,14 +47,15 @@ import { FilesystemProvisionerStore } from "../main/extension-filesystem";
 import { ThemeStore } from "./theme.store";
 import { SentryInit } from "../common/sentry";
 import { TerminalStore } from "./components/dock/terminal.store";
-import cloudsMidnight from "./monaco-themes/Clouds Midnight.json";
 import { AppPaths } from "../common/app-paths";
+import { registerCustomThemes } from "./components/monaco-editor";
 
 if (process.isMainFrame) {
   SentryInit();
 }
 
-configurePackages();
+configurePackages(); // global packages
+registerCustomThemes(); // monaco editor themes
 
 /**
  * If this is a development build, wait a second to attach
@@ -106,12 +106,6 @@ export async function bootstrap(comp: () => Promise<AppComponent>) {
   ExtensionsStore.createInstance();
   FilesystemProvisionerStore.createInstance();
 
-  // define Monaco Editor themes
-  const { base, ...params } = cloudsMidnight;
-  const baseTheme = base as monaco.editor.BuiltinTheme;
-
-  monaco.editor.defineTheme("clouds-midnight", { base: baseTheme, ...params });
-
   // ThemeStore depends on: UserStore
   ThemeStore.createInstance();
 

src/renderer/components/+add-cluster/add-cluster.module.css

@@ -20,38 +20,26 @@
  */
 
 .AddClusters {
-  --flex-gap: #{$unit * 2};
-  $spacing: $padding * 2;
-
-  .MonacoEditor {
-    min-height: 600px;
-    max-height: 600px;
-    border: 1px solid var(--colorVague);
-    border-radius: $radius;
-
-    .theme-light & {
-      border-color: var(--borderFaintColor);
-    }
-
-    .editor {
-      border-radius: $radius;
-    }
-  }
+  --flex-gap: calc(var(--unit) * 2);
 
   code {
-    color: $pink-400;
-  }
-
-  .text-primary {
-    color: var(--textColorAccent);
-  }
-
-  .hint {
-    display: block;
-    padding-top: 6px;
+    color: rgb(236, 64, 122);
   }
 
   a[href] {
     color: var(--colorInfo);
   }
 }
+
+.editor {
+  min-height: 600px;
+  max-height: 600px;
+  border: 1px solid var(--colorVague);
+  border-radius: var(--border-radius);
+}
+
+:global(.theme-light) {
+  .editor {
+    border-color: var(--borderFaintColor);
+  }
+}

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -19,12 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./add-cluster.scss";
+import styles from "./add-cluster.module.css";
 
 import type { KubeConfig } from "@kubernetes/client-node";
 import fse from "fs-extra";
 import { debounce } from "lodash";
-import { action, computed, observable, makeObservable } from "mobx";
+import { action, computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import path from "path";
 import React from "react";
@@ -34,13 +34,11 @@ import { appEventBus } from "../../../common/event-bus";
 import { loadConfigFromString, splitConfig } from "../../../common/kube-helpers";
 import { docsUrl } from "../../../common/vars";
 import { navigate } from "../../navigation";
-import { getCustomKubeConfigPath, cssNames, iter } from "../../utils";
+import { getCustomKubeConfigPath, iter } from "../../utils";
 import { Button } from "../button";
 import { Notifications } from "../notifications";
 import { SettingLayout } from "../layout/setting-layout";
-import MonacoEditor from "react-monaco-editor";
-import { ThemeStore } from "../../theme.store";
-import { UserStore } from "../../../common/user-store";
+import { MonacoEditor } from "../monaco-editor";
 
 interface Option {
   config: KubeConfig;
@@ -116,7 +114,7 @@ export class AddCluster extends React.Component {
 
   render() {
     return (
-      <SettingLayout className="AddClusters">
+      <SettingLayout className={styles.AddClusters}>
         <h2>Add Clusters from Kubeconfig</h2>
         <p>
           Clusters added here are <b>not</b> merged into the <code>~/.kube/config</code> file.{" "}
@@ -124,10 +122,8 @@ export class AddCluster extends React.Component {
         </p>
         <div className="flex column">
           <MonacoEditor
-            options={{ ...UserStore.getInstance().getEditorOptions() }}
-            className={cssNames("MonacoEditor")}
-            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-            language="yaml"
+            autoFocus
+            className={styles.editor}
             value={this.customConfig}
             onChange={value => {
               this.customConfig = value;

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

@@ -86,13 +86,7 @@
     font-size: small;
   }
 
-  .values {
-    .MonacoEditor {
-      min-height: 300px;
-    }
-
-    .MonacoEditor + .Button {
+  .values + .Button {
     align-self: flex-start;
   }
-  }
 }

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

@@ -24,7 +24,7 @@ import "./release-details.scss";
 import React, { Component } from "react";
 import groupBy from "lodash/groupBy";
 import isEqual from "lodash/isEqual";
-import { observable, reaction, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { Link } from "react-router-dom";
 import kebabCase from "lodash/kebabCase";
 import { getRelease, getReleaseValues, HelmRelease, IReleaseDetails } from "../../../common/k8s-api/endpoints/helm-releases.api";
@@ -46,8 +46,7 @@ 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";
+import { MonacoEditor } from "../monaco-editor";
 
 interface Props {
   release: HelmRelease;
@@ -165,14 +164,13 @@ export class ReleaseDetails extends Component<Props> {
             disabled={valuesLoading}
           />
           <MonacoEditor
-            language="yaml"
+            readOnly={valuesLoading}
+            className={cssNames({ loading: valuesLoading })}
+            style={{ minHeight: 300 }}
             value={values}
             onChange={text => this.values = text}
-            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-            className={cssNames("MonacoEditor", { loading: valuesLoading })}
-            options={{ readOnly: valuesLoading, ...UserStore.getInstance().getEditorOptions() }}
           >
-            {valuesLoading && <Spinner center />}
+            {valuesLoading && <Spinner center/>}
           </MonacoEditor>
           <Button
             primary

src/renderer/components/+custom-resources/crd-details.scss

@@ -44,8 +44,4 @@
       }
     }
   }
-
-  .validation {
-    height: 400px;
-  }
 }

src/renderer/components/+custom-resources/crd-details.tsx

@@ -25,16 +25,13 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { CustomResourceDefinition } from "../../../common/k8s-api/endpoints/crd.api";
-import { cssNames } from "../../utils";
-import { ThemeStore } from "../../theme.store";
 import { Badge } from "../badge";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { Input } from "../input";
 import { KubeObjectMeta } from "../kube-object-meta";
-import MonacoEditor from "react-monaco-editor";
-import { UserStore } from "../../../common/user-store";
+import { MonacoEditor } from "../monaco-editor";
 import logger from "../../../common/logger";
 
 interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
@@ -157,11 +154,9 @@ export class CRDDetails extends React.Component<Props> {
           <>
             <DrawerTitle title="Validation"/>
             <MonacoEditor
-            options={{ readOnly: true, ...UserStore.getInstance().getEditorOptions() }}
-            className={cssNames("MonacoEditor", "validation")}
-            theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-            language="yaml"
+              readOnly
               value={validation}
+              style={{ height: 400 }}
             />
           </>
         }

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

@@ -22,10 +22,10 @@ import { observer } from "mobx-react";
 import React from "react";
 import { UserStore } from "../../../common/user-store";
 import { FormSwitch, Switcher } from "../switch";
+import { Select } from "../select";
 import { SubTitle } from "../layout/sub-title";
-import { Input } from "../input";
-import { isNumber } from "../input/input_validators";
-import { Select, SelectOption } from "../select";
+import { SubHeader } from "../layout/sub-header";
+import { Input, InputValidators } from "../input";
 
 enum EditorLineNumbersStyles {
   on = "On",
@@ -35,47 +35,57 @@ enum EditorLineNumbersStyles {
 }
 
 export const Editor = observer(() => {
-  const userStore = UserStore.getInstance();
+  const editorConfiguration = UserStore.getInstance().editorConfiguration;
 
   return (
     <section id="editor">
       <h2 data-testid="editor-configuration-header">Editor configuration</h2>
+
+      <SubTitle title="Minimap"/>
       <section>
+        <div className="flex gaps justify-space-between">
+          <div className="flex gaps align-center">
             <FormSwitch
+              label={<SubHeader compact>Show minimap</SubHeader>}
               control={
                 <Switcher
-              checked={userStore.editorConfiguration.miniMap.enabled}
-              onChange={v => userStore.enableEditorMinimap(v.target.checked)}
-              name="minimap"
+                  checked={editorConfiguration.minimap.enabled}
+                  onChange={(evt, checked) => editorConfiguration.minimap.enabled = checked}
                 />
               }
-          label="Show minimap"
             />
+          </div>
+          <div className="flex gaps align-center">
+            <SubHeader compact>Position</SubHeader>
+            <Select
+              themeName="lens"
+              options={["left", "right"]}
+              value={editorConfiguration.minimap.side}
+              onChange={({ value }) => editorConfiguration.minimap.side = value}
+            />
+          </div>
+        </div>
       </section>
+
       <section>
         <SubTitle title="Line numbers"/>
         <Select
-          options={Object.entries(EditorLineNumbersStyles).map(entry => ({ label: entry[1], value: entry[0] }))}
-          value={userStore.editorConfiguration?.lineNumbers}
-          onChange={({ value }: SelectOption) => userStore.setEditorLineNumbers(value)}
+          options={Object.entries(EditorLineNumbersStyles).map(([value, label]) => ({ label, value }))}
+          value={editorConfiguration.lineNumbers}
+          onChange={({ value }) => editorConfiguration.lineNumbers = value}
           themeName="lens"
         />
       </section>
+
       <section>
         <SubTitle title="Tab size"/>
         <Input
           theme="round-black"
+          type="number"
           min={1}
-          max={10}
-          validators={[isNumber]}
-          value={userStore.editorConfiguration.tabSize?.toString()}
-          onChange={value => {
-            const n = Number(value);
-
-            if (!isNaN(n)) {
-              userStore.setEditorTabSize(n);
-            }
-          }}
+          validators={InputValidators.isNumber}
+          value={editorConfiguration.tabSize.toString()}
+          onChange={value => editorConfiguration.tabSize = Number(value)}
         />
       </section>
     </section>

src/renderer/components/+user-management/+cluster-roles/add-dialog.scss

@@ -20,7 +20,4 @@
  */
 
 .AddRoleDialog {
-  .MonacoEditor {
-    min-height: 200px;
-  }
 }

src/renderer/components/+workloads-pods/pod-details-affinities.tsx

@@ -19,15 +19,11 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./pod-details-affinities.scss";
 import React from "react";
 import yaml from "js-yaml";
-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";
+import { DrawerItem, DrawerParamToggler } from "../drawer";
+import type { DaemonSet, Deployment, Job, Pod, ReplicaSet, StatefulSet } from "../../../common/k8s-api/endpoints";
+import { MonacoEditor } from "../monaco-editor";
 
 interface Props {
   workload: Pod | Deployment | DaemonSet | StatefulSet | ReplicaSet | Job;
@@ -44,15 +40,11 @@ export class PodDetailsAffinities extends React.Component<Props> {
     return (
       <DrawerItem name="Affinities" className="PodDetailsAffinities">
         <DrawerParamToggler label={affinitiesNum}>
-          <div className="ace-container">
           <MonacoEditor
-              options={{ readOnly: true, ...UserStore.getInstance().getEditorOptions() }}
-              className={cssNames("MonacoEditor")}
-              theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-              language="yaml"
+            readOnly
+            style={{ height: 200 }}
             value={yaml.dump(affinities)}
           />
-          </div>
         </DrawerParamToggler>
       </DrawerItem>
     );

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -23,7 +23,6 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import fse from "fs-extra";
-
 import { DockTabs } from "../dock-tabs";
 import { dockStore, DockTab, TabKind } from "../dock.store";
 import { noop } from "../../../utils";
@@ -32,14 +31,6 @@ import { TerminalStore } from "../terminal.store";
 import { UserStore } from "../../../../common/user-store";
 import { AppPaths } from "../../../../common/app-paths";
 
-jest.mock("react-monaco-editor", () => ({
-  monaco: {
-    editor: {
-      getModel: jest.fn(),
-    },
-  },
-}));
-
 jest.mock("electron", () => ({
   app: {
     getVersion: () => "99.99.99",

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

@@ -33,8 +33,6 @@ import { UserStore } from "../../../../common/user-store";
 import mockFs from "mock-fs";
 import { AppPaths } from "../../../../common/app-paths";
 
-jest.mock("react-monaco-editor", () => null);
-
 jest.mock("electron", () => ({
   app: {
     getVersion: () => "99.99.99",

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

@@ -32,8 +32,6 @@ import { AppPaths } from "../../../../common/app-paths";
 
 mockWindow();
 
-jest.mock("react-monaco-editor", () => null);
-
 jest.mock("electron", () => ({
   app: {
     getVersion: () => "99.99.99",

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

@@ -24,30 +24,27 @@ import "./create-resource.scss";
 import React from "react";
 import path from "path";
 import fs from "fs-extra";
-import { Select, GroupSelectOption, SelectOption } from "../select";
+import { GroupSelectOption, Select, SelectOption } from "../select";
 import yaml from "js-yaml";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
 import { createResourceStore } from "./create-resource.store";
 import type { DockTab } from "./dock.store";
 import { EditorPanel } from "./editor-panel";
 import { InfoPanel } from "./info-panel";
 import * as resourceApplierApi from "../../../common/k8s-api/endpoints/resource-applier.api";
 import { Notifications } from "../notifications";
-import { monacoModelsManager } from "./monaco-model-manager";
 import logger from "../../../common/logger";
 
 interface Props {
-  className?: string;
   tab: DockTab;
 }
 
 @observer
 export class CreateResource extends React.Component<Props> {
-  @observable currentTemplates:Map<string, SelectOption> = new Map();
+  @observable currentTemplates: Map<string, SelectOption> = new Map();
   @observable error = "";
-  @observable templates:GroupSelectOption<SelectOption>[] = [];
+  @observable templates: GroupSelectOption<SelectOption>[] = [];
 
   constructor(props: Props) {
     super(props);
@@ -59,12 +56,12 @@ export class CreateResource extends React.Component<Props> {
     createResourceStore.watchUserTemplates(() => createResourceStore.getMergedTemplates().then(v => this.updateGroupSelectOptions(v)));
   }
 
-  updateGroupSelectOptions(templates :Record<string, string[]>) {
+  updateGroupSelectOptions(templates: Record<string, string[]>) {
     this.templates = Object.entries(templates)
       .map(([name, grouping]) => this.convertToGroup(name, grouping));
   }
 
-  convertToGroup(group:string, items:string[]):GroupSelectOption {
+  convertToGroup(group: string, items: string[]): GroupSelectOption {
     const options = items.map(v => ({ label: path.parse(v).name, value: v }));
 
     return { label: group, options };
@@ -82,16 +79,19 @@ export class CreateResource extends React.Component<Props> {
     return this.currentTemplates.get(this.tabId) ?? null;
   }
 
-  onChange = (value: string, error?: string) => {
+  onChange = (value: string) => {
+    this.error = ""; // reset first, validation goes later
     createResourceStore.setData(this.tabId, value);
-    this.error = error;
+  };
+
+  onError = (error: Error | string) => {
+    this.error = error.toString();
   };
 
   onSelectTemplate = (item: SelectOption) => {
     this.currentTemplates.set(this.tabId, item);
     fs.readFile(item.value, "utf8").then(v => {
       createResourceStore.setData(this.tabId, v);
-      monacoModelsManager.getModel(this.tabId).setValue(v ?? "");
     });
   };
 
@@ -129,42 +129,42 @@ export class CreateResource extends React.Component<Props> {
     return undefined;
   };
 
-  renderControls(){
+  renderControls() {
     return (
       <div className="flex gaps align-center">
         <Select
-          autoConvertOptions = {false}
+          autoConvertOptions={false}
+          controlShouldRenderValue={false} // always keep initial placeholder
           className="TemplateSelect"
           placeholder="Select Template ..."
           options={this.templates}
           menuPlacement="top"
           themeName="outlined"
           onChange={v => this.onSelectTemplate(v)}
-          value = {this.currentTemplate}
+          value={this.currentTemplate}
         />
       </div>
     );
   }
 
-
   render() {
-    const { tabId, data, error, create, onChange } = this;
-    const { className } = this.props;
+    const { tabId, data, error } = this;
 
     return (
-      <div className={cssNames("CreateResource flex column", className)}>
+      <div className="CreateResource flex column">
         <InfoPanel
           tabId={tabId}
           error={error}
           controls={this.renderControls()}
-          submit={create}
+          submit={this.create}
           submitLabel="Create"
           showNotifications={false}
         />
         <EditorPanel
           tabId={tabId}
           value={data}
-          onChange={onChange}
+          onChange={this.onChange}
+          onError={this.onError}
         />
       </div>
     );

src/renderer/components/dock/dock.scss

@@ -81,7 +81,7 @@
     background: $terminalBackground;
     flex: 1;
     overflow: hidden;
-    transition: flex 60ms ease-in-out;
+    transition: flex-basis 25ms ease-in;
 
     > *:not(.Spinner) {
       position: absolute;
@@ -91,8 +91,4 @@
       bottom: 0;
     }
   }
-
-  .MonacoEditor {
-    border: none;
-  }
 }

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

@@ -20,10 +20,9 @@
  */
 
 import * as uuid from "uuid";
-import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
+import { action, comparer, computed, IReactionOptions, makeObservable, observable, reaction, runInAction } from "mobx";
 import { autoBind, createStorage } from "../../utils";
 import throttle from "lodash/throttle";
-import { monacoModelsManager } from "./monaco-model-manager";
 
 export type TabId = string;
 
@@ -89,6 +88,27 @@ export interface DockStorageState {
   isOpen?: boolean;
 }
 
+export interface DockTabChangeEvent {
+  tab: DockTab;
+  tabId: TabId;
+  prevTab?: DockTab;
+}
+
+export interface DockTabChangeEventOptions extends IReactionOptions {
+  /**
+   * filter: by dockStore.selectedTab.kind == tabKind
+   */
+  tabKind?: TabKind;
+  /**
+   * filter: dock and selected tab should be visible (default: true)
+   */
+  dockIsVisible?: boolean;
+}
+
+export interface DockTabCloseEvent {
+  tabId: TabId; // closed tab id
+}
+
 export class DockStore implements DockStorageState {
   constructor() {
     makeObservable(this);
@@ -158,12 +178,6 @@ 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() {
@@ -185,21 +199,44 @@ export class DockStore implements DockStorageState {
     return reaction(() => [this.height, this.fullSize], callback, options);
   }
 
-  onTabChange(callback: (tabId: TabId) => void, options?: IReactionOptions) {
-    return reaction(() => this.selectedTabId, callback, options);
+  onTabClose(callback: (evt: DockTabCloseEvent) => void, options: IReactionOptions = {}) {
+    return reaction(() => dockStore.tabs.map(tab => tab.id), (tabs: TabId[], prevTabs?: TabId[]) => {
+      if (!Array.isArray(prevTabs)) {
+        return; // tabs not yet modified
+      }
+
+      const closedTabs: TabId[] = prevTabs.filter(id => !tabs.includes(id));
+
+      if (closedTabs.length > 0) {
+        runInAction(() => {
+          closedTabs.forEach(tabId => callback({ tabId }));
+        });
+      }
+    }, {
+      equals: comparer.structural,
+      ...options,
+    });
+  }
+
+  onTabChange(callback: (evt: DockTabChangeEvent) => void, options: DockTabChangeEventOptions = {}) {
+    const { tabKind, dockIsVisible = true, ...reactionOpts } = options;
+
+    return reaction(() => this.selectedTab, ((tab, prevTab) => {
+      if (!tab) return; // skip when dock is empty
+      if (tabKind && tabKind !== tab.kind) return; // handle specific tab.kind only
+      if (dockIsVisible && !this.isOpen) return;
+
+      callback({
+        tab, prevTab,
+        tabId: tab.id,
+      });
+    }), reactionOpts);
   }
 
   hasTabs() {
     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;
@@ -274,11 +311,6 @@ 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();
@@ -294,11 +326,6 @@ export class DockStore implements DockStorageState {
       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,7 +26,6 @@ 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
@@ -63,7 +62,6 @@ 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/edit-resource.tsx

@@ -26,7 +26,6 @@ import { action, computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import yaml from "js-yaml";
 import type { DockTab } from "./dock.store";
-import { cssNames } from "../../utils";
 import { editResourceStore } from "./edit-resource.store";
 import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
@@ -36,7 +35,6 @@ import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { createPatch } from "rfc6902";
 
 interface Props {
-  className?: string;
   tab: DockTab;
 }
 
@@ -88,11 +86,15 @@ export class EditResource extends React.Component<Props> {
     });
   }
 
-  onChange = (draft: string, error?: string) => {
-    this.error = error;
+  onChange = (draft: string) => {
+    this.error = ""; // reset first
     this.saveDraft(draft);
   };
 
+  onError = (error?: Error | string) => {
+    this.error = error.toString();
+  };
+
   save = async () => {
     if (this.error) {
       return null;
@@ -114,14 +116,14 @@ export class EditResource extends React.Component<Props> {
   };
 
   render() {
-    const { tabId, error, onChange, save, draft, isReadyForEditing, resource } = this;
+    const { tabId, error, onChange, onError, save, draft, isReadyForEditing, resource } = this;
 
     if (!isReadyForEditing) {
       return <Spinner center/>;
     }
 
     return (
-      <div className={cssNames("EditResource flex column", this.props.className)}>
+      <div className="EditResource flex column">
         <InfoPanel
           tabId={tabId}
           error={error}
@@ -140,6 +142,7 @@ export class EditResource extends React.Component<Props> {
           tabId={tabId}
           value={draft}
           onChange={onChange}
+          onError={onError}
         />
       </div>
     );

src/renderer/components/dock/editor-panel.module.css

@@ -19,8 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.PodDetailsAffinities {
-  .ace-container {
-    height: 200px
-  }
+.EditorPanel {
+  position: relative;
+  flex: 1;
+  height: 100%;
 }

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

@@ -19,89 +19,65 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import MonacoEditor, { monaco } from "react-monaco-editor";
+import styles from "./editor-panel.module.css";
+import throttle from "lodash/throttle";
 import React from "react";
-import yaml from "js-yaml";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { dockStore, TabId } from "./dock.store";
-import { monacoModelsManager } from "./monaco-model-manager";
-import { ThemeStore } from "../../theme.store";
-import { UserStore } from "../../../common/user-store";
+import { cssNames } from "../../utils";
+import { MonacoEditor, MonacoEditorProps } from "../monaco-editor";
 
-import "monaco-editor";
-
-interface Props {
-  className?: string;
+export interface EditorPanelProps {
   tabId: TabId;
-  value?: string;
-  onChange(value: string, error?: string): void;
+  value: string;
+  className?: string;
+  autoFocus?: boolean; // default: true
+  onChange: MonacoEditorProps["onChange"];
+  onError?: MonacoEditorProps["onError"];
 }
 
+const defaultProps: Partial<EditorPanelProps> = {
+  autoFocus: true,
+};
 
 @observer
-export class EditorPanel extends React.Component<Props> {
-  model: monaco.editor.ITextModel;
-  public editor: monaco.editor.IStandaloneCodeEditor;
-  @observable yamlError = "";
+export class EditorPanel extends React.Component<EditorPanelProps> {
+  static defaultProps = defaultProps as object;
 
-  constructor(props: Props) {
+  @observable.ref editor?: MonacoEditor;
+
+  constructor(props: EditorPanelProps) {
     super(props);
     makeObservable(this);
   }
 
   componentDidMount() {
-    // validate and run callback with optional error
-    this.onChange(this.props.value || "");
-
     disposeOnUnmount(this, [
-      dockStore.onTabChange(this.onTabChange, { delay: 250 }),
-      dockStore.onResize(this.onResize, { delay: 250 }),
+      // keep focus on editor's area when <Dock/> just opened
+      reaction(() => dockStore.isOpen, isOpen => isOpen && this.editor?.focus(), {
+        fireImmediately: true,
+      }),
+
+      // focus to editor on dock's resize or turning into fullscreen mode
+      dockStore.onResize(throttle(() => this.editor?.focus(), 250)),
     ]);
   }
 
-  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 {
-      yaml.loadAll(value);
-      this.yamlError = "";
-    } catch (err) {
-      this.yamlError = err.toString();
-    }
-  }
-
-  onTabChange = () => {
-    this.editor.focus();
-    const model = monacoModelsManager.getModel(this.props.tabId);
-
-    model.setValue(this.props.value ?? "");
-    this.editor.setModel(model);
-  };
-
-  onResize = () => {
-    this.editor.focus();
-  };
-
-  onChange = (value: string) => {
-    this.validate(value);
-    this.props.onChange?.(value, this.yamlError);
-  };
-
   render() {
+    const { className, autoFocus, tabId, value, onChange, onError } = this.props;
+
+    if (!tabId) return null;
+
     return (
       <MonacoEditor
-        options={{ model: null, ...UserStore.getInstance().getEditorOptions() }}
-        theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-        language = "yaml"
-        onChange = {this.onChange}
-        editorDidMount={this.editorDidMount}
+        autoFocus={autoFocus}
+        id={tabId}
+        value={value}
+        className={cssNames(styles.EditorPanel, className)}
+        onChange={onChange}
+        onError={onError}
+        ref={monaco => this.editor = monaco}
       />
     );
   }

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

@@ -25,7 +25,6 @@ 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;
@@ -91,7 +90,6 @@ 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);
     }

src/renderer/components/dock/install-chart.tsx

@@ -22,13 +22,13 @@
 import "./install-chart.scss";
 
 import React, { Component } from "react";
-import { observable, makeObservable } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { dockStore, DockTab } from "./dock.store";
 import { InfoPanel } from "./info-panel";
 import { Badge } from "../badge";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
-import { boundMethod, prevDefault } from "../../utils";
+import { prevDefault } from "../../utils";
 import { IChartInstallData, installChartStore } from "./install-chart.store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
@@ -75,8 +75,7 @@ export class InstallChart extends Component<Props> {
     return installChartStore.details.getData(this.tabId);
   }
 
-  @boundMethod
-  viewRelease() {
+  viewRelease = () => {
     const { release } = this.releaseDetails;
 
     navigate(releaseURL({
@@ -86,38 +85,39 @@ export class InstallChart extends Component<Props> {
       },
     }));
     dockStore.closeTab(this.tabId);
-  }
+  };
 
-  @boundMethod
   save(data: Partial<IChartInstallData>) {
     const chart = { ...this.chartData, ...data };
 
     installChartStore.setData(this.tabId, chart);
   }
 
-  @boundMethod
-  onVersionChange(option: SelectOption) {
+  onVersionChange = (option: SelectOption) => {
     const version = option.value;
 
     this.save({ version, values: "" });
     installChartStore.loadValues(this.tabId);
-  }
+  };
 
-  @boundMethod
-  onValuesChange(values: string, error?: string) {
-    this.error = error;
+  @action
+  onChange = (values: string) => {
+    this.error = "";
     this.save({ values });
-  }
+  };
 
-  @boundMethod
-  onNamespaceChange(opt: SelectOption) {
+  @action
+  onError = (error: Error | string) => {
+    this.error = error.toString();
+  };
+
+  onNamespaceChange = (opt: SelectOption) => {
     this.save({ namespace: opt.value });
-  }
+  };
 
-  @boundMethod
-  onReleaseNameChange(name: string) {
+  onReleaseNameChange = (name: string) => {
     this.save({ releaseName: name });
-  }
+  };
 
   install = async () => {
     const { repo, name, version, namespace, values, releaseName } = this.chartData;
@@ -138,14 +138,14 @@ export class InstallChart extends Component<Props> {
     const { tabId, chartData, values, versions, install } = this;
 
     if (chartData?.values === undefined || !versions) {
-      return <Spinner center />;
+      return <Spinner center/>;
     }
 
     if (this.releaseDetails) {
       return (
         <div className="InstallChartDone flex column gaps align-center justify-center">
           <p>
-            <Icon material="check" big sticker />
+            <Icon material="check" big sticker/>
           </p>
           <p>Installation complete!</p>
           <div className="flex gaps align-center">
@@ -174,7 +174,7 @@ export class InstallChart extends Component<Props> {
     const panelControls = (
       <div className="install-controls flex gaps align-center">
         <span>Chart</span>
-        <Badge label={`${repo}/${name}`} title="Repo/Name" />
+        <Badge label={`${repo}/${name}`} title="Repo/Name"/>
         <span>Version</span>
         <Select
           className="chart-version"
@@ -216,7 +216,8 @@ export class InstallChart extends Component<Props> {
         <EditorPanel
           tabId={tabId}
           value={values}
-          onChange={this.onValuesChange}
+          onChange={this.onChange}
+          onError={this.onError}
         />
       </div>
     );

src/renderer/components/dock/terminal-window.scss

@@ -22,11 +22,11 @@
 @import "~xterm";
 
 .TerminalWindow {
-  margin: $padding;
-  margin-left: $padding * 2;
-  margin-top: $padding * 2;
+  --spacing: calc(var(--unit) * 2);
 
-  > .xterm {
+  flex: 1;
   overflow: hidden;
-  }
+  left: var(--spacing) !important;
+  top: var(--spacing) !important;
+  bottom: var(--spacing) !important;
 }

src/renderer/components/dock/terminal-window.tsx

@@ -22,16 +22,14 @@
 import "./terminal-window.scss";
 
 import React from "react";
-import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
-import type { DockTab } from "./dock.store";
 import type { Terminal } from "./terminal";
-import { terminalStore } from "./terminal.store";
+import { TerminalStore } from "./terminal.store";
 import { ThemeStore } from "../../theme.store";
+import { dockStore, DockTab, TabKind, TabId } from "./dock.store";
 
 interface Props {
-  className?: string;
   tab: DockTab;
 }
 
@@ -42,25 +40,29 @@ export class TerminalWindow extends React.Component<Props> {
 
   componentDidMount() {
     disposeOnUnmount(this, [
-      reaction(() => this.props.tab.id, tabId => this.activate(tabId), {
+      dockStore.onTabChange(({ tabId }) => this.activate(tabId), {
+        tabKind: TabKind.TERMINAL,
+        fireImmediately: true,
+      }),
+
+      // refresh terminal available space (cols/rows) when <Dock/> resized
+      dockStore.onResize(() => this.terminal?.fitLazy(), {
         fireImmediately: true,
       }),
     ]);
   }
 
-  activate(tabId = this.props.tab.id) {
+  activate(tabId: TabId) {
     if (this.terminal) this.terminal.detach(); // detach previous
-    this.terminal = terminalStore.getTerminal(tabId);
+    this.terminal = TerminalStore.getInstance().getTerminal(tabId);
     this.terminal.attachTo(this.elem);
   }
 
   render() {
-    const { className } = this.props;
-
     return (
       <div
-        className={cssNames("TerminalWindow", className, ThemeStore.getInstance().activeTheme.type)}
-        ref={e => this.elem = e}
+        className={cssNames("TerminalWindow", ThemeStore.getInstance().activeTheme.type)}
+        ref={elem => this.elem = elem}
       />
     );
   }

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

@@ -25,7 +25,6 @@ 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;
@@ -119,7 +118,6 @@ 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 {

src/renderer/components/dock/upgrade-chart.tsx

@@ -22,7 +22,7 @@
 import "./upgrade-chart.scss";
 
 import React from "react";
-import { observable, reaction, makeObservable } from "mobx";
+import { action, makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import type { DockTab } from "./dock.store";
@@ -86,9 +86,15 @@ export class UpgradeChart extends React.Component<Props> {
     this.version = this.versions[0];
   }
 
-  onChange = (value: string, error?: string) => {
+  @action
+  onChange = (value: string) => {
+    this.error = "";
     upgradeChartStore.values.setData(this.tabId, value);
-    this.error = error;
+  };
+
+  @action
+  onError = (error: Error | string) => {
+    this.error = error.toString();
   };
 
   upgrade = async () => {
@@ -118,7 +124,7 @@ export class UpgradeChart extends React.Component<Props> {
   };
 
   render() {
-    const { tabId, release, value, error, onChange, upgrade, versions, version } = this;
+    const { tabId, release, value, error, onChange, onError, upgrade, versions, version } = this;
     const { className } = this.props;
 
     if (!release || upgradeChartStore.isLoading() || !version) {
@@ -157,6 +163,7 @@ export class UpgradeChart extends React.Component<Props> {
           tabId={tabId}
           value={value}
           onChange={onChange}
+          onError={onError}
         />
       </div>
     );

src/renderer/components/input/input.scss

@@ -63,6 +63,10 @@
     }
   }
 
+  input[type=number]::-webkit-inner-spin-button {
+    -webkit-appearance: none; // hide browser controls (top/bottom arrows)
+  }
+
   input, textarea {
     background: none;
     color: inherit;

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.module.css

@@ -20,22 +20,22 @@
  */
 
 .KubeConfigDialog {
-  .theme-light & {
-    .MonacoEditor {
-      border: 1px solid gainsboro;
-      border-radius: $radius;
-    }
-  }
-
-  .Wizard {
+  :global(.Wizard) {
     width: 50vw;
     min-width: 600px;
     --wizard-content-height: 600px;
   }
 
-  .config-copy {
+  .configCopy {
     position: absolute;
     opacity: 0;
     pointer-events: none;
   }
 }
+
+:global(.theme-light) {
+  .editor {
+    border: 1px solid gainsboro;
+    border-radius: var(--border-radius);
+  }
+}

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -19,23 +19,20 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./kubeconfig-dialog.scss";
-
+import styles from "./kubeconfig-dialog.module.css";
 import React from "react";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import yaml from "js-yaml";
 import type { ServiceAccount } from "../../../common/k8s-api/endpoints";
-import { copyToClipboard, cssNames, saveFileDialog } from "../../utils";
+import { copyToClipboard, saveFileDialog } from "../../utils";
 import { Button } from "../button";
 import { Dialog, DialogProps } from "../dialog";
 import { Icon } from "../icon";
 import { Notifications } from "../notifications";
 import { Wizard, WizardStep } from "../wizard";
 import { apiBase } from "../../api";
-import MonacoEditor from "react-monaco-editor";
-import { ThemeStore } from "../../theme.store";
-import { UserStore } from "../../../common/user-store";
+import { MonacoEditor } from "../monaco-editor";
 
 interface IKubeconfigDialogData {
   title?: React.ReactNode;
@@ -122,7 +119,7 @@ export class KubeConfigDialog extends React.Component<Props> {
     return (
       <Dialog
         {...dialogProps}
-        className={cssNames("KubeConfigDialog")}
+        className={styles.KubeConfigDialog}
         isOpen={dialogState.isOpen}
         onOpen={this.onOpen}
         close={this.close}
@@ -130,14 +127,12 @@ export class KubeConfigDialog extends React.Component<Props> {
         <Wizard header={header}>
           <WizardStep customButtons={buttons} prev={this.close}>
             <MonacoEditor
-              language="yaml"
+              readOnly
+              className={styles.editor}
               value={yamlConfig}
-              theme={ThemeStore.getInstance().activeTheme.monacoTheme}
-              className={cssNames( "MonacoEditor")}
-              options={{ readOnly: true, ...UserStore.getInstance().getEditorOptions() }}
             />
             <textarea
-              className="config-copy"
+              className={styles.configCopy}
               readOnly defaultValue={yamlConfig}
               ref={e => this.configTextArea = e}
             />

src/renderer/components/monaco-editor/index.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+export * from "./monaco-editor";
+export * from "./monaco-validators";
+export * from "./monaco-themes";

src/renderer/components/monaco-editor/monaco-editor.module.css

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+
+.MonacoEditor {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+}

src/renderer/components/monaco-editor/monaco-editor.tsx

@@ -0,0 +1,299 @@
+/**
+ * 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 styles from "./monaco-editor.module.css";
+import React from "react";
+import { observer } from "mobx-react";
+import { action, computed, makeObservable, observable, reaction } from "mobx";
+import { editor, Uri } from "monaco-editor";
+import { MonacoTheme, MonacoValidator, monacoValidators } from "./index";
+import { debounce, merge } from "lodash";
+import { cssNames, disposer } from "../../utils";
+import { UserStore } from "../../../common/user-store";
+import { ThemeStore } from "../../theme.store";
+
+export type MonacoEditorId = string;
+
+export interface MonacoEditorProps {
+  id?: MonacoEditorId; // associating editor's ID with created model.uri
+  className?: string;
+  style?: React.CSSProperties;
+  autoFocus?: boolean;
+  readOnly?: boolean;
+  theme?: MonacoTheme;
+  language?: "yaml" | "json"; // supported list of languages, configure in `webpack.renderer.ts`
+  options?: Partial<editor.IStandaloneEditorConstructionOptions>; // customize editor's initialization options
+  value?: string;
+  onChange?(value: string, evt: editor.IModelContentChangedEvent): void; // catch latest value updates
+  onError?(error?: Error | unknown): void; // provide syntax validation error, etc.
+  onDidLayoutChange?(info: editor.EditorLayoutInfo): void;
+  onDidContentSizeChange?(evt: editor.IContentSizeChangedEvent): void;
+  onModelChange?(model: editor.ITextModel, prev?: editor.ITextModel): void;
+}
+
+export const defaultEditorProps: Partial<MonacoEditorProps> = {
+  language: "yaml",
+  get theme(): MonacoTheme {
+    // theme for monaco-editor defined in `src/renderer/themes/lens-*.json`
+    return ThemeStore.getInstance().activeTheme.monacoTheme;
+  },
+};
+
+@observer
+export class MonacoEditor extends React.Component<MonacoEditorProps> {
+  static defaultProps = defaultEditorProps as object;
+  static viewStates = new WeakMap<Uri, editor.ICodeEditorViewState>();
+
+  static createUri(id: MonacoEditorId): Uri {
+    return Uri.file(`/monaco-editor/${id}`);
+  }
+
+  public staticId = `editor-id#${Math.round(1e7 * Math.random())}`;
+  public dispose = disposer();
+
+  // TODO: investigate how to replace with "common/logger"
+  //  currently leads for stucking UI forever & infinite loop.
+  //  e.g. happens on tab change/create, maybe some other cases too.
+  logger = console;
+
+  @observable.ref containerElem: HTMLElement;
+  @observable.ref editor: editor.IStandaloneCodeEditor;
+  @observable dimensions: { width?: number, height?: number } = {};
+  @observable unmounting = false;
+
+  constructor(props: MonacoEditorProps) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get id() {
+    return this.props.id ?? this.staticId;
+  }
+
+  @computed get model(): editor.ITextModel {
+    const uri = MonacoEditor.createUri(this.id);
+    const model = editor.getModel(uri);
+
+    if (model) {
+      return model; // already exists
+    }
+
+    const { language, value } = this.props;
+
+    return editor.createModel(value, language, uri);
+  }
+
+  @computed get options(): editor.IStandaloneEditorConstructionOptions {
+    return merge({},
+      UserStore.getInstance().editorConfiguration,
+      this.props.options,
+    );
+  }
+
+  @computed get logMetadata() {
+    return {
+      editorId: this.id,
+      model: this.model,
+    };
+  }
+
+  /**
+   * Monitor editor's dom container element box-size and sync with monaco's dimensions
+   * @private
+   */
+  private bindResizeObserver() {
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+
+        this.setDimensions(width, height);
+      }
+    });
+
+    const containerElem = this.editor.getContainerDomNode();
+
+    resizeObserver.observe(containerElem);
+
+    return () => resizeObserver.unobserve(containerElem);
+  }
+
+  onModelChange = (model: editor.ITextModel, oldModel?: editor.ITextModel) => {
+    this.logger?.info("[MONACO]: model change", { model, oldModel }, this.logMetadata);
+
+    if (oldModel) {
+      this.saveViewState(oldModel);
+    }
+
+    this.editor.setModel(model);
+    this.restoreViewState(model);
+    this.editor.layout();
+    this.editor.focus(); // keep focus in editor, e.g. when clicking between dock-tabs
+    this.props.onModelChange?.(model, oldModel);
+    this.validateLazy();
+  };
+
+  /**
+   * Save current view-model state in the editor.
+   * This will allow restore cursor position, selected text, etc.
+   * @param {editor.ITextModel} model
+   */
+  private saveViewState(model: editor.ITextModel) {
+    MonacoEditor.viewStates.set(model.uri, this.editor.saveViewState());
+  }
+
+  private restoreViewState(model: editor.ITextModel) {
+    const viewState = MonacoEditor.viewStates.get(model.uri);
+
+    if (viewState) {
+      this.editor.restoreViewState(viewState);
+    }
+  }
+
+  componentDidMount() {
+    try {
+      this.createEditor();
+      this.logger?.info(`[MONACO]: editor did mount`, this.logMetadata);
+    } catch (error) {
+      this.logger?.error(`[MONACO]: mounting failed: ${error}`, this.logMetadata);
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounting = true;
+    this.saveViewState(this.model);
+    this.destroy();
+  }
+
+  private createEditor() {
+    if (!this.containerElem || this.editor || this.unmounting) {
+      return;
+    }
+    const { language, theme, readOnly, value: defaultValue } = this.props;
+
+    this.editor = editor.create(this.containerElem, {
+      model: this.model,
+      detectIndentation: false, // allow `option.tabSize` to use custom number of spaces for [Tab]
+      value: defaultValue,
+      language,
+      theme,
+      readOnly,
+      ...this.options,
+    });
+
+    this.logger?.info(`[MONACO]: editor created for language=${language}, theme=${theme}`, this.logMetadata);
+    this.validateLazy(); // validate initial value
+    this.restoreViewState(this.model); // restore previous state if any
+
+    if (this.props.autoFocus) {
+      this.editor.focus();
+    }
+
+    const onDidLayoutChangeDisposer = this.editor.onDidLayoutChange(layoutInfo => {
+      this.props.onDidLayoutChange?.(layoutInfo);
+    });
+
+    const onValueChangeDisposer = this.editor.onDidChangeModelContent(event => {
+      const value = this.editor.getValue();
+
+      this.props.onChange?.(value, event);
+      this.validateLazy(value);
+    });
+
+    const onContentSizeChangeDisposer = this.editor.onDidContentSizeChange((params) => {
+      this.props.onDidContentSizeChange?.(params);
+    });
+
+    this.dispose.push(
+      reaction(() => this.model, this.onModelChange),
+      reaction(() => this.props.theme, editor.setTheme),
+      reaction(() => this.props.value, value => this.setValue(value)),
+      reaction(() => this.options, opts => this.editor.updateOptions(opts)),
+
+      () => onDidLayoutChangeDisposer.dispose(),
+      () => onValueChangeDisposer.dispose(),
+      () => onContentSizeChangeDisposer.dispose(),
+      this.bindResizeObserver(),
+    );
+  }
+
+  destroy(): void {
+    if (!this.editor) return;
+
+    this.dispose();
+    this.editor.dispose();
+    this.editor = null;
+  }
+
+  @action
+  setDimensions(width: number, height: number) {
+    this.dimensions.width = width;
+    this.dimensions.height = height;
+    this.editor?.layout({ width, height });
+  }
+
+  setValue(value = ""): void {
+    if (value == this.getValue()) return;
+
+    this.editor.setValue(value);
+    this.validate(value);
+  }
+
+  getValue(opts?: { preserveBOM: boolean; lineEnding: string; }): string {
+    return this.editor?.getValue(opts) ?? "";
+  }
+
+  focus() {
+    this.editor?.focus();
+  }
+
+  @action
+  validate = (value = this.getValue()) => {
+    const validators: MonacoValidator[] = [
+      monacoValidators[this.props.language], // parsing syntax check
+    ].filter(Boolean);
+
+    for (const validate of validators) {
+      try {
+        validate(value);
+      } catch (error) {
+        this.props.onError?.(error); // emit error outside
+      }
+    }
+  };
+
+  // avoid excessive validations during typing
+  validateLazy = debounce(this.validate, 250);
+
+  bindRef = (elem: HTMLElement) => this.containerElem = elem;
+
+  render() {
+    const { className, style } = this.props;
+
+    return (
+      <div
+        data-test-component="monaco-editor"
+        className={cssNames(styles.MonacoEditor, className)}
+        style={style}
+        ref={this.bindRef}
+      />
+    );
+  }
+}

src/renderer/components/monaco-editor/monaco-themes.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+// Monaco editor themes customization
+import { editor } from "monaco-editor";
+import cloudsMidnight from "./monaco-themes/clouds-midnight.json";
+
+export type MonacoTheme = "vs" | "vs-dark" | "hc-black" | MonacoCustomTheme;
+export type MonacoCustomTheme = "clouds-midnight";
+
+export interface MonacoThemeData extends editor.IStandaloneThemeData {
+  name?: string;
+}
+
+// Registered names could be then used in "themes/*.json" in "{monacoTheme: [name]}"
+export const customThemes: Partial<Record<MonacoCustomTheme, MonacoThemeData>> = {
+  "clouds-midnight": cloudsMidnight as MonacoThemeData,
+};
+
+export function registerCustomThemes(): void {
+  Object.entries(customThemes).forEach(([name, theme]) => {
+    editor.defineTheme(name, theme);
+  });
+}
+
+export async function loadCustomTheme(name: string): Promise<MonacoThemeData> {
+  return import(`./monaco-themes/${name}.json`);
+}

src/renderer/components/monaco-editor/monaco-themes/clouds-midnight.json

@@ -1,4 +1,5 @@
 {
+  "name": "clouds-midnight",
   "base": "vs-dark",
   "inherit": true,
   "rules": [

src/renderer/components/monaco-editor/monaco-validators.ts

@@ -18,44 +18,29 @@
  * 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";
+import yaml, { YAMLException } from "js-yaml";
 
-export type TabId = string;
+export interface MonacoValidator {
+  (value: string): void;
+}
 
-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 function yamlValidator(value: string) {
+  try {
+    yaml.load(value);
+  } catch (error) {
+    throw String(error as YAMLException);
   }
 }
 
-export const monacoModelsManager = new MonacoModelsManager();
+export function jsonValidator(value: string) {
+  try {
+    JSON.parse(value);
+  } catch (error) {
+    throw String(error);
+  }
+}
+
+export const monacoValidators = {
+  yaml: yamlValidator,
+  json: jsonValidator,
+};

src/renderer/theme.store.ts

@@ -19,37 +19,24 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { computed, observable, reaction, makeObservable } from "mobx";
-import { autoBind, iter, Singleton } from "./utils";
+import { computed, makeObservable, observable, reaction } from "mobx";
+import { autoBind, Singleton } from "./utils";
 import { UserStore } from "../common/user-store";
 import logger from "../main/logger";
-import darkTheme from "./themes/lens-dark.json";
-import lightTheme from "./themes/lens-light.json";
+import lensDarkThemeJson from "./themes/lens-dark.json";
+import lensLightThemeJson from "./themes/lens-light.json";
 import type { SelectOption } from "./components/select";
+import type { MonacoEditorProps } from "./components/monaco-editor";
 
 export type ThemeId = string;
 
-export enum MonacoTheme {
-  DARK = "clouds-midnight",
-  LIGHT = "vs",
-}
-
-export enum ThemeType {
-  DARK = "dark",
-  LIGHT = "light",
-}
-
 export interface Theme {
-  type: ThemeType;
   name: string;
+  type: "dark" | "light";
   colors: Record<string, string>;
   description: string;
   author: string;
-  monacoTheme: string;
-}
-
-export interface ThemeItems extends Theme {
-  id: string;
+  monacoTheme: MonacoEditorProps["theme"];
 }
 
 export class ThemeStore extends Singleton {
@@ -57,27 +44,23 @@ export class ThemeStore extends Singleton {
   protected styles: HTMLStyleElement;
 
   // bundled themes from `themes/${themeId}.json`
-  private allThemes = observable.map<string, Theme>([
-    ["lens-dark", { ...darkTheme, type: ThemeType.DARK, monacoTheme: MonacoTheme.DARK }],
-    ["lens-light", { ...lightTheme, type: ThemeType.LIGHT, monacoTheme: MonacoTheme.LIGHT }],
-  ]);
-
-  @computed get themes(): ThemeItems[] {
-    return Array.from(iter.map(this.allThemes, ([id, theme]) => ({ id, ...theme })));
-  }
+  private themes = observable.map<ThemeId, Theme>({
+    "lens-dark": lensDarkThemeJson as Theme,
+    "lens-light": lensLightThemeJson as Theme,
+  });
 
   @computed get activeThemeId(): string {
     return UserStore.getInstance().colorTheme;
   }
 
   @computed get activeTheme(): Theme {
-    return this.allThemes.get(this.activeThemeId) ?? this.allThemes.get("lens-dark");
+    return this.themes.get(this.activeThemeId) ?? this.themes.get(ThemeStore.defaultTheme);
   }
 
   @computed get themeOptions(): SelectOption<string>[] {
-    return this.themes.map(theme => ({
+    return Array.from(this.themes).map(([themeId, theme]) => ({
       label: theme.name,
-      value: theme.id,
+      value: themeId,
     }));
   }
 
@@ -101,7 +84,7 @@ export class ThemeStore extends Singleton {
   }
 
   getThemeById(themeId: ThemeId): Theme {
-    return this.allThemes.get(themeId);
+    return this.themes.get(themeId);
   }
 
   protected applyTheme(theme: Theme) {
@@ -118,6 +101,6 @@ export class ThemeStore extends Singleton {
     // Adding universal theme flag which can be used in component styles
     const body = document.querySelector("body");
 
-    body.classList.toggle("theme-light", theme.type === ThemeType.LIGHT);
+    body.classList.toggle("theme-light", theme.type === "light");
   }
 }

webpack.renderer.ts

@@ -19,6 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import * as vars from "./src/common/vars";
 import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
 import path from "path";
 import webpack from "webpack";
@@ -27,7 +28,7 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
 import ProgressBarPlugin from "progress-bar-webpack-plugin";
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
-import * as vars from "./src/common/vars";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 import getTSLoader from "./src/common/getTSLoader";
 
 export default [
@@ -42,7 +43,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
   return {
     context: __dirname,
     target: "electron-renderer",
-    devtool: "source-map", // todo: optimize in dev-mode with webpack.SourceMapDevToolPlugin
+    devtool: isDevelopment ? "cheap-source-map" : "source-map",
     devServer: {
       contentBase: buildDir,
       port: webpackDevServerPort,
@@ -149,6 +150,14 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
       new ProgressBarPlugin(),
       new ForkTsCheckerPlugin(),
 
+      // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      new MonacoWebpackPlugin({
+        // publicPath: "/",
+        // filename: "[name].worker.js",
+        languages: ["json", "yaml"],
+        globalAPI: isDevelopment,
+      }),
+
       // todo: fix remain warnings about circular dependencies
       // new CircularDependencyPlugin({
       //   cwd: __dirname,

yarn.lock

@@ -9589,10 +9589,17 @@ moment-timezone@^0.5.33:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-monaco-editor@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.26.1.tgz#62bb5f658bc95379f8abb64b147632bd1c019d73"
-  integrity sha512-mm45nUrBDk0DgZKgbD7+bhDOtcAFNGPJJRAdS6Su1kTGl6XEgC7U3xOmDUW/0RrLf+jlvCGaqLvD4p2VjwuwwQ==
+monaco-editor-webpack-plugin@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-5.0.0.tgz#796c50fb4ce3f75f45bf18dfa3c31f85dc9a05da"
+  integrity sha512-KrUUTmMO3lDCNK4honZ6rrrKjOI7FFLeyCktPetIo5HlRqr5dfE6ewaA9qNLH96XY7CekE3Z+v/+I6ufAs3ObA==
+  dependencies:
+    loader-utils "^2.0.0"
+
+monaco-editor@^0.29.1:
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.29.1.tgz#6ee93d8a5320704d48fd7058204deed72429c020"
+  integrity sha512-rguaEG/zrPQSaKzQB7IfX/PpNa0qxF1FY8ZXRkN4WIl8qZdTQRSRJCtRto7IMcSgrU6H53RXI+fTcywOBC4aVw==
 
 moo-color@^1.0.2:
   version "1.0.2"
@@ -11505,14 +11512,6 @@ react-material-ui-carousel@^2.3.5:
     auto-bind "^2.1.1"
     react-swipeable "^6.1.0"
 
-react-monaco-editor@^0.44.0:
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.44.0.tgz#9f966fd00b6c30e8be8873a3fbc86f14a0da2ba4"
-  integrity sha512-GPheXTIpBXpwv857H7/jA8HX5yae4TJ7vFwDJ5iTvy05LxIQTsD3oofXznXGi66lVA93ST/G7wRptEf4CJ9dOg==
-  dependencies:
-    monaco-editor "^0.26.1"
-    prop-types "^15.7.2"
-
 react-redux@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.3.tgz#4c084618600bb199012687da9e42123cca3f0be9"