Add ability to set monaco initial height regarding to text lines

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

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 getEditorHeightFromLinesNumberInjectable = getInjectable({
+  id: "get-editor-height-from-lines-number",
+
+  instantiate: () => {
+    return (linesNumber: number) => {
+      if (typeof linesNumber !== "number") {
+        throw new Error("linesNumber must be a number");
+      }
+
+      if (linesNumber < 10) {
+        return "small";
+      }
+
+      if (linesNumber < 20) {
+        return "medium";
+      }
+
+      return "large";
+    };
+  }
+});
+
+export default getEditorHeightFromLinesNumberInjectable;

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 getEditorHeightFromLinesNumberInjectable from "./get-editor-height-from-lines-number.injectable";
+
+describe("get-editor-height-from-lines-number", () => {
+  let getEditorHeightFromLinesNumber: (linesNumber: number) => string;
+
+  beforeEach(() => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: false });
+
+    getEditorHeightFromLinesNumber = di.inject(getEditorHeightFromLinesNumberInjectable);
+  });
+
+  it("given linesNumber is less than 10, when called, returns small", () => {
+    const actual = getEditorHeightFromLinesNumber(9);
+
+    expect(actual).toBe("small");
+  });
+
+  it("given linesNumber is equal to 10, when called, returns medium", () => {
+    const actual = getEditorHeightFromLinesNumber(10);
+
+    expect(actual).toBe("medium");
+  });
+
+  it("given linesNumber is greater than 10 and less than 20, when called, returns medium", () => {
+    const actual = getEditorHeightFromLinesNumber(19);
+
+    expect(actual).toBe("medium");
+  });
+
+  it("given linesNumber is equal to 20, when called, returns large", () => {
+    const actual = getEditorHeightFromLinesNumber(20);
+
+    expect(actual).toBe("large");
+  });
+
+  it("given linesNumber is greater than 20, when called, returns large", () => {
+    const actual = getEditorHeightFromLinesNumber(21);
+
+    expect(actual).toBe("large");
+  });
+});

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

@@ -7,4 +7,16 @@
   width: 100%;
   height: 100%;
   flex: 1;
+
+  &.small {
+    height: 90px;
+  }
+
+  &.medium {
+    height: 180px;
+  }
+
+  &.large {
+    height: 360px;
+  }
 }

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 getEditorHeightFromLinesNumberInjectable 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>;
+  getEditorHeightFromLinesNumber: (linesNumber: number) => "small" | "medium" | "large";
 }
 
 export function createMonacoUri(id: MonacoEditorId): Uri {
@@ -288,13 +291,23 @@ class NonInjectedMonacoEditor extends React.Component<MonacoEditorProps & Depend
   // avoid excessive validations during typing
   validateLazy = debounce(this.validate, 250);
 
+  get initialHeightClassName() {
+    if (!this.props.setInitialHeight) {
+      return;
+    }
+
+    const lines = this.model.getLineCount();
+
+    return styles[this.props.getEditorHeightFromLinesNumber(lines)];
+  }
+
   render() {
     const { className, style } = this.props;
 
     return (
       <div
         data-test-id="monaco-editor"
-        className={cssNames(styles.MonacoEditor, className)}
+        className={cssNames(styles.MonacoEditor, className, this.initialHeightClassName)}
         style={style}
         ref={elem => this.containerElem = elem}
       />
@@ -309,6 +322,7 @@ export const MonacoEditor = withInjectables<Dependencies, MonacoEditorProps, Mon
       ...props,
       userStore: di.inject(userStoreInjectable),
       activeTheme: di.inject(activeThemeInjectable),
+      getEditorHeightFromLinesNumber: di.inject(getEditorHeightFromLinesNumberInjectable),
     }),
   },
 );