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>

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;
@@ -85,7 +83,7 @@ export class AddCluster extends React.Component {
     const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
 
     this.kubeContexts.replace(getContexts(config));
-    
+
     if (error) {
       this.errors.push(error.toString());
     }
@@ -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;