use css-modules

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

integration/__tests__/cluster-pages.tests.ts

@@ -432,7 +432,7 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
     }
 
     const testPodName = "nginx-create-pod-test";
-    const monacoEditor = await frame.waitForSelector(".DockTabContent .MonacoEditor");
+    const monacoEditor = await frame.waitForSelector(`.Dock.isOpen [data-test-component="monaco-editor"]`);
 
     await monacoEditor.click();
     await monacoEditor.type("apiVersion: v1", { delay: 10 });

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

@@ -23,7 +23,7 @@
   --flex-gap: #{$unit * 2};
   $spacing: $padding * 2;
 
-  .MonacoEditor {
+  [data-test-component="monaco-editor"] {
     min-height: 600px;
     max-height: 600px;
     border: 1px solid var(--colorVague);

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

@@ -87,12 +87,12 @@
   }
 
   .values {
-    .MonacoEditor {
+    [data-test-component="monaco-editor"] {
       min-height: 300px;
-    }
 
-    .MonacoEditor + .Button {
-      align-self: flex-start;
+      + .Button {
+        align-self: flex-start;
+      }
     }
   }
 }

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

@@ -45,7 +45,7 @@
     }
   }
 
-  .MonacoEditor {
+  [data-test-component="monaco-editor"] {
     height: 400px;
   }
 }

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

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

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

@@ -1,5 +1,2 @@
 .AddRoleDialog {
-  .MonacoEditor {
-    min-height: 200px;
-  }
 }

src/renderer/components/dock/dock-tab-content.module.css

@@ -23,4 +23,6 @@
   position: relative;
   flex: 1;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }

src/renderer/components/dock/dock-tab-content.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./dock-tab-content.scss";
+import styles from "./dock-tab-content.module.css";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
@@ -114,7 +114,11 @@ export class DockTabContent extends React.Component<DockTabContentProps> {
     const { InfoPanel, Content } = this.tabComponents;
 
     return (
-      <div className={cssNames("DockTabContent flex column", className)} ref={bindContainerRef}>
+      <div
+        data-test-component="dock-tab-content"
+        className={cssNames(styles.DockTabContent, className)}
+        ref={bindContainerRef}
+      >
         {InfoPanel && <InfoPanel tabId={this.tabId} error={this.error}/>}
         {Content && <Content {...this.props}/>}
         {this.renderEditor()}

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

@@ -21,7 +21,7 @@
 
 .KubeConfigDialog {
   .theme-light & {
-    .MonacoEditor {
+    [data-test-component="monaco-editor"] {
       border: 1px solid gainsboro;
       border-radius: $radius;
     }

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

@@ -19,12 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./monaco-editor.scss";
+import styles from "./monaco-editor.module.css";
 import React from "react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { editor, Uri } from "monaco-editor";
-import { registerCustomThemes } from "./monaco-themes";
+import { MonacoTheme, registerCustomThemes } from "./monaco-themes";
 import { MonacoValidator, monacoValidators } from "./monaco-validators";
 import { cssNames, disposer, toJS } from "../../utils";
 import { UserStore } from "../../../common/user-store";
@@ -39,7 +39,7 @@ export interface MonacoEditorProps {
   className?: string;
   autoFocus?: boolean;
   readOnly?: boolean;
-  theme?: "vs" /* default, light theme */ | "vs-dark" | "hc-black" | string;
+  theme?: MonacoTheme;
   language?: "yaml" | "json"; // configure bundled list of languages in via MonacoWebpackPlugin({languages: []})
   options?: Partial<editor.IStandaloneEditorConstructionOptions>; // customize editor's initialization options
   onChange?(value: string, evt: editor.IModelContentChangedEvent): void; // catch latest value updates
@@ -50,7 +50,7 @@ export interface MonacoEditorProps {
 
 export const defaultEditorProps: Partial<MonacoEditorProps> = {
   language: "yaml",
-  get theme(): MonacoEditorProps["theme"] {
+  get theme(): MonacoTheme {
     // theme for monaco-editor defined in `src/renderer/themes/lens-*.json`
     return ThemeStore.getInstance().activeTheme.monacoTheme;
   }
@@ -279,7 +279,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
 
     return (
       <div
-        className={cssNames("MonacoEditor", className)}
+        data-test-component="monaco-editor"
+        className={cssNames(styles.MonacoEditor, className)}
         ref={this.bindRef}
       />
     );

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

@@ -23,13 +23,16 @@
 import { editor } from "monaco-editor";
 import cloudsMidnight from "./monaco-theme.clouds-midnight.json";
 
-export interface MonacoCustomTheme extends editor.IStandaloneThemeData {
+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 = {
-  [cloudsMidnight.name]: cloudsMidnight as MonacoCustomTheme,
+export const customThemes: Partial<Record<MonacoTheme, MonacoThemeData>> = {
+  "clouds-midnight": cloudsMidnight as MonacoThemeData,
 };
 
 export function registerCustomThemes(): void {
@@ -38,6 +41,6 @@ export function registerCustomThemes(): void {
   });
 }
 
-export async function loadCustomTheme(name: string): Promise<MonacoCustomTheme> {
+export async function loadCustomTheme(name: string): Promise<MonacoThemeData> {
   return import(`./monaco-theme.${name}.json`);
 }