diff --git a/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap index e2225e6b7a..615e539054 100644 --- a/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap +++ b/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap @@ -420,7 +420,7 @@ exports[`extensions - navigation using application menu when navigating to exten Pro-Tip - : you can drag-n-drop tarball-file to this area + : you can drag and drop a tarball file to this area
diff --git a/src/renderer/components/+config-maps/config-map-details.tsx b/src/renderer/components/+config-maps/config-map-details.tsx index f5b4007281..b03cdda2c9 100644 --- a/src/renderer/components/+config-maps/config-map-details.tsx +++ b/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 { } @@ -99,18 +99,21 @@ class NonInjectedConfigMapDetails extends React.Component Data { - data.map(([name, value]) => ( + data.map(([name, value = ""]) => (
{name}
-
- this.data.set(name, v)} - /> -
+ this.data.set(name, v)} + setInitialHeight + />
)) } diff --git a/src/renderer/components/+extensions/install.tsx b/src/renderer/components/+extensions/install.tsx index 607ed74aaa..7572063796 100644 --- a/src/renderer/components/+extensions/install.tsx +++ b/src/renderer/components/+extensions/install.tsx @@ -89,7 +89,7 @@ const NonInjectedInstall: React.FC = ({
Pro-Tip - : you can drag-n-drop tarball-file to this area + : you can drag and drop a tarball file to this area ); diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx index a7fe14f35c..60579ca3ec 100644 --- a/src/renderer/components/+extensions/installed-extensions.tsx +++ b/src/renderer/components/+extensions/installed-extensions.tsx @@ -152,7 +152,7 @@ const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extension

There are no extensions installed.

-

Please use the form above to install or drag tarbar-file here.

+

Please use the form above to install or drag a tarball file here.

); } diff --git a/src/renderer/components/layout/tab-layout.scss b/src/renderer/components/layout/tab-layout.scss index 7ab3395e15..5753129a60 100755 --- a/src/renderer/components/layout/tab-layout.scss +++ b/src/renderer/components/layout/tab-layout.scss @@ -11,7 +11,8 @@ > .Tabs { background: var(--layoutTabsBackground); - min-height: 36px; + flex-shrink: 0; + height: 34px; } main { 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..b093640e7c --- /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 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; 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..28a8f32016 --- /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 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); + }); +}); diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx index 93aa3c70ce..b5cf17d0a4 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 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; + setInitialHeight?: boolean; } interface Dependencies { userStore: UserStore; activeTheme: IComputedValue; + getEditorHeightFromLinesCount: (linesCount: number) => number; } export function createMonacoUri(id: MonacoEditorId): Uri { @@ -288,14 +291,23 @@ class NonInjectedMonacoEditor extends React.Component this.containerElem = elem} /> ); @@ -309,6 +321,7 @@ export const MonacoEditor = withInjectables