Use Monaco editor in ConfigMap details (#6830)

* Use monaco in config map details

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add ability to set monaco initial height regarding to text lines

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Refactor get initialHeightClassName()

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Rename injectable to getEditorHeightFromLinesCountInjectable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Lint fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Better monaco editor view for the light theme

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set initial height refactoring

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Linter fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+config-maps/config-map-details.tsx

@@ -10,7 +10,6 @@ import { autorun, makeObservable, observable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerTitle } from "../drawer";
 import type { ShowNotification } from "../notifications";
-import { Input } from "../input";
 import { Button } from "../button";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { ConfigMap } from "../../../common/k8s-api/endpoints";
@@ -21,6 +20,7 @@ import configMapStoreInjectable from "./store.injectable";
 import showSuccessNotificationInjectable from "../notifications/show-success-notification.injectable";
 import showErrorNotificationInjectable from "../notifications/show-error-notification.injectable";
 import loggerInjectable from "../../../common/logger.injectable";
+import { MonacoEditor } from "../monaco-editor";
 
 export interface ConfigMapDetailsProps extends KubeObjectDetailsProps<ConfigMap> {
 }
@@ -99,19 +99,22 @@ class NonInjectedConfigMapDetails extends React.Component<ConfigMapDetailsProps
             <>
               <DrawerTitle>Data</DrawerTitle>
               {
-                data.map(([name, value]) => (
+                data.map(([name, value = ""]) => (
                   <div key={name} className="data">
                     <div className="name">{name}</div>
-                    <div className="flex gaps align-flex-start">
-                      <Input
-                        multiLine
-                        theme="round-black"
-                        className="box grow"
+                    <MonacoEditor
+                      id={`config-map-data-${name}`}
+                      style={{
+                        resize: "vertical",
+                        overflow: "hidden",
+                        border: "1px solid var(--borderFaintColor)",
+                        borderRadius: "4px",
+                      }}
                       value={value}
                       onChange={v => this.data.set(name, v)}
+                      setInitialHeight
                     />
                   </div>
-                  </div>
                 ))
               }
               <Button

src/renderer/components/monaco-editor/get-editor-height-from-lines-number.injectable.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectable } from "@ogre-tools/injectable";
+
+const getEditorHeightFromLinesCountInjectable = getInjectable({
+  id: "get-editor-height-from-lines-number",
+
+  instantiate: () => {
+    return (linesCount: number) => {
+      if (typeof linesCount !== "number") {
+        throw new Error("linesNumber must be a number");
+      }
+
+      if (linesCount < 10) {
+        return 90;
+      }
+
+      if (linesCount < 20) {
+        return 180;
+      }
+
+      return 360;
+    };
+  },
+});
+
+export default getEditorHeightFromLinesCountInjectable;

src/renderer/components/monaco-editor/get-editor-height-from-lines-number.test.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getDiForUnitTesting } from "../../getDiForUnitTesting";
+import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
+
+describe("get-editor-height-from-lines-number", () => {
+  let getEditorHeightFromLinesNumber: (linesCount: number) => number;
+
+  beforeEach(() => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: false });
+
+    getEditorHeightFromLinesNumber = di.inject(getEditorHeightFromLinesCountInjectable);
+  });
+
+  it("given linesCount is less than 10, when called, returns small number", () => {
+    const actual = getEditorHeightFromLinesNumber(9);
+
+    expect(actual).toBe(90);
+  });
+
+  it("given linesCount is equal to 10, when called, returns medium number", () => {
+    const actual = getEditorHeightFromLinesNumber(10);
+
+    expect(actual).toBe(180);
+  });
+
+  it("given linesCount is greater than 10 and less than 20, when called, returns medium number", () => {
+    const actual = getEditorHeightFromLinesNumber(19);
+
+    expect(actual).toBe(180);
+  });
+
+  it("given linesCount is equal to 20, when called, returns large number", () => {
+    const actual = getEditorHeightFromLinesNumber(20);
+
+    expect(actual).toBe(360);
+  });
+
+  it("given linesCount is greater than 20, when called, returns large number", () => {
+    const actual = getEditorHeightFromLinesNumber(21);
+
+    expect(actual).toBe(360);
+  });
+});

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

@@ -18,6 +18,7 @@ import type { LensTheme } from "../../themes/lens-theme";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import userStoreInjectable from "../../../common/user-store/user-store.injectable";
 import activeThemeInjectable from "../../themes/active.injectable";
+import getEditorHeightFromLinesCountInjectable from "./get-editor-height-from-lines-number.injectable";
 
 export type MonacoEditorId = string;
 
@@ -37,11 +38,13 @@ export interface MonacoEditorProps {
   onDidContentSizeChange?(evt: editor.IContentSizeChangedEvent): void;
   onModelChange?(model: editor.ITextModel, prev?: editor.ITextModel): void;
   innerRef?: React.ForwardedRef<MonacoEditorRef>;
+  setInitialHeight?: boolean;
 }
 
 interface Dependencies {
   userStore: UserStore;
   activeTheme: IComputedValue<LensTheme>;
+  getEditorHeightFromLinesCount: (linesCount: number) => number;
 }
 
 export function createMonacoUri(id: MonacoEditorId): Uri {
@@ -288,14 +291,23 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
   // avoid excessive validations during typing
   validateLazy = debounce(this.validate, 250);
 
+  get initialHeight() {
+    return this.props.getEditorHeightFromLinesCount(this.model.getLineCount());
+  }
+
   render() {
     const { className, style } = this.props;
 
+    const css: React.CSSProperties = {
+      ...style,
+      height: style?.height ?? this.initialHeight,
+    };
+
     return (
       <div
         data-test-id="monaco-editor"
         className={cssNames(styles.MonacoEditor, className)}
-        style={style}
+        style={css}
         ref={elem => this.containerElem = elem}
       />
     );
@@ -309,6 +321,7 @@ export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, Mon
       ...props,
       userStore: di.inject(userStoreInjectable),
       activeTheme: di.inject(activeThemeInjectable),
+      getEditorHeightFromLinesCount: di.inject(getEditorHeightFromLinesCountInjectable),
     }),
   },
 );