diff --git a/src/renderer/components/monaco-editor/get-editor-height-from-lines-number.injectable.ts b/src/renderer/components/monaco-editor/get-editor-height-from-lines-number.injectable.ts new file mode 100644 index 0000000000..aab6de61ea --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/renderer/components/monaco-editor/get-editor-height-from-lines-number.test.ts b/src/renderer/components/monaco-editor/get-editor-height-from-lines-number.test.ts new file mode 100644 index 0000000000..0d76f81694 --- /dev/null +++ b/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"); + }); +}); \ No newline at end of file diff --git a/src/renderer/components/monaco-editor/monaco-editor.module.scss b/src/renderer/components/monaco-editor/monaco-editor.module.scss index 7603e0c388..da2b0f19b7 100644 --- a/src/renderer/components/monaco-editor/monaco-editor.module.scss +++ b/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; + } } diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx index 93aa3c70ce..676a8de37d 100644 --- a/src/renderer/components/monaco-editor/monaco-editor.tsx +++ b/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; + setInitialHeight?: boolean; } interface Dependencies { userStore: UserStore; activeTheme: IComputedValue; + getEditorHeightFromLinesNumber: (linesNumber: number) => "small" | "medium" | "large"; } export function createMonacoUri(id: MonacoEditorId): Uri { @@ -288,13 +291,23 @@ class NonInjectedMonacoEditor extends React.Component this.containerElem = elem} /> @@ -309,6 +322,7 @@ export const MonacoEditor = withInjectables