From 7cb7d9573f121bbcca742853af2a01161359706c Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 29 Dec 2022 14:31:35 +0300 Subject: [PATCH 1/4] Fix .TabLayout .Tabs jumping (#6843) Signed-off-by: Alex Andreev Signed-off-by: Alex Andreev --- src/renderer/components/layout/tab-layout.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 { From 6422d8183f523068831d4cb1708c14fa7db44466 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 29 Dec 2022 14:33:59 +0300 Subject: [PATCH 2/4] Use Monaco editor in ConfigMap details (#6830) * Use monaco in config map details Signed-off-by: Alex Andreev * Add ability to set monaco initial height regarding to text lines Signed-off-by: Alex Andreev * Refactor get initialHeightClassName() Signed-off-by: Alex Andreev * Rename injectable to getEditorHeightFromLinesCountInjectable Signed-off-by: Alex Andreev * Lint fixes Signed-off-by: Alex Andreev * Better monaco editor view for the light theme Signed-off-by: Alex Andreev * Set initial height refactoring Signed-off-by: Alex Andreev * Linter fixes Signed-off-by: Alex Andreev * Clean up Signed-off-by: Alex Andreev Signed-off-by: Alex Andreev --- .../+config-maps/config-map-details.tsx | 25 +++++----- ...tor-height-from-lines-number.injectable.ts | 30 ++++++++++++ ...et-editor-height-from-lines-number.test.ts | 47 +++++++++++++++++++ .../monaco-editor/monaco-editor.tsx | 15 +++++- 4 files changed, 105 insertions(+), 12 deletions(-) create mode 100644 src/renderer/components/monaco-editor/get-editor-height-from-lines-number.injectable.ts create mode 100644 src/renderer/components/monaco-editor/get-editor-height-from-lines-number.test.ts 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/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 Date: Thu, 29 Dec 2022 13:36:51 +0200 Subject: [PATCH 3/4] Page refresh is broken in development mode, fixes #6818 (#6844) Signed-off-by: Roman Signed-off-by: Roman --- src/main/routes/files/development.injectable.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/routes/files/development.injectable.ts b/src/main/routes/files/development.injectable.ts index b632e9151d..6bad03f7b9 100644 --- a/src/main/routes/files/development.injectable.ts +++ b/src/main/routes/files/development.injectable.ts @@ -15,7 +15,7 @@ const devStaticFileRouteHandlerInjectable = getInjectable({ const proxyTarget = `http://127.0.0.1:${webpackDevServerPort}`; return async ({ raw: { req, res }}: LensApiRequest<"/{path*}">): Promise> => { - if (req.url === "/" || !req.url) { + if (req.url === "/" || !req.url || !req.url.startsWith(publicPath)) { req.url = `${publicPath}/index.html`; } else if (!req.url.startsWith("/build/")) { return { statusCode: 404 }; From d6531f23a8338a0fbf1d5ab9d27e31689f9b7966 Mon Sep 17 00:00:00 2001 From: Caleb Xu Date: Fri, 30 Dec 2022 03:57:36 -0500 Subject: [PATCH 4/4] Fix minor typo/grammar in extension install message (#6847) Signed-off-by: Caleb Xu Signed-off-by: Caleb Xu --- .../navigation-using-application-menu.test.ts.snap | 2 +- src/renderer/components/+extensions/install.tsx | 2 +- src/renderer/components/+extensions/installed-extensions.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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/+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.

); }