From c527014011eb1e87723de1861895d2ea97985cbb Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 4 Nov 2022 09:15:16 +0300 Subject: [PATCH] Expose a way to add cluster frame components in Extension API (#6385) * Add cluster modals registrator Signed-off-by: Alex Andreev * Add ClusterModal components and injection token Signed-off-by: Alex Andreev * Add clusterModals tests Signed-off-by: Alex Andreev * Update snapshots and use css modules Signed-off-by: Alex Andreev * Linter fixes Signed-off-by: Alex Andreev * Setting 0 height as an inline style Signed-off-by: Alex Andreev * Update snapshots Signed-off-by: Alex Andreev * Do not export clusterModalsInjectionToken to extensions Signed-off-by: Alex Andreev * Testing changing visibility flag Signed-off-by: Alex Andreev * Linter fix Signed-off-by: Alex Andreev * Refactor cluster modals registrator and injectable Signed-off-by: Alex Andreev * Linter fixes Signed-off-by: Alex Andreev * Harder linter fix Signed-off-by: Alex Andreev * Fix linter again Signed-off-by: Alex Andreev * Using clusterFrameChildComponentsInjectionToken for specific extension elements Signed-off-by: Alex Andreev * Removing unused files Signed-off-by: Alex Andreev * Removing unused modal registration Signed-off-by: Alex Andreev * Improving tests Signed-off-by: Alex Andreev * Fix linting Signed-off-by: Janne Savolainen * Update snapshots Signed-off-by: Janne Savolainen * Rename test suite for consistency Signed-off-by: Janne Savolainen Signed-off-by: Alex Andreev Signed-off-by: Janne Savolainen Co-authored-by: Janne Savolainen --- src/extensions/lens-renderer-extension.ts | 2 + ...ing-cluster-frame-components.test.tsx.snap | 514 ++++++++++++++++++ ...n-adding-cluster-frame-components.test.tsx | 78 +++ ...-frame-component-registrator.injectable.ts | 42 ++ .../frames/cluster-frame/cluster-frame.tsx | 22 +- 5 files changed, 650 insertions(+), 8 deletions(-) create mode 100644 src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap create mode 100644 src/features/cluster/legacy-extension-adding-cluster-frame-components.test.tsx create mode 100644 src/renderer/frames/cluster-frame/cluster-frame-component-registrator.injectable.ts diff --git a/src/extensions/lens-renderer-extension.ts b/src/extensions/lens-renderer-extension.ts index 12203cc932..d0a2a979e6 100644 --- a/src/extensions/lens-renderer-extension.ts +++ b/src/extensions/lens-renderer-extension.ts @@ -28,11 +28,13 @@ import type { LensRendererExtensionDependencies } from "./lens-extension-set-dep import type { KubeObjectHandlerRegistration } from "../renderer/kube-object/handler"; import type { AppPreferenceTabRegistration } from "../features/preferences/renderer/compliance-for-legacy-extension-api/app-preference-tab-registration"; import type { KubeObjectDetailRegistration } from "../renderer/components/kube-object-details/kube-object-detail-registration"; +import type { ClusterFrameChildComponent } from "../renderer/frames/cluster-frame/cluster-frame-child-component-injection-token"; export class LensRendererExtension extends LensExtension { globalPages: registries.PageRegistration[] = []; clusterPages: registries.PageRegistration[] = []; clusterPageMenus: registries.ClusterPageMenuRegistration[] = []; + clusterFrameComponents: ClusterFrameChildComponent[] = []; kubeObjectStatusTexts: KubeObjectStatusRegistration[] = []; appPreferences: AppPreferenceRegistration[] = []; appPreferenceTabs: AppPreferenceTabRegistration[] = []; diff --git a/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap b/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap new file mode 100644 index 0000000000..7d9748dcbd --- /dev/null +++ b/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap @@ -0,0 +1,514 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`legacy extension adding cluster frame components given custom components for cluster view available renders 1`] = ` +
+
+
+
+
+
+
+ ?? +
+
+
+
+
+ + + + + + Workloads + + + + keyboard_arrow_down + + + +
+
+ + + + list + + + + Config + + +
+
+ + + + device_hub + + + + Network + + + + keyboard_arrow_down + + + +
+
+ + + + storage + + + + Storage + + +
+
+ + + + + + Helm + + + + keyboard_arrow_down + + + +
+
+ + + + security + + + + Access Control + + +
+
+ + + + extension + + + + Custom Resources + + + + keyboard_arrow_down + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ Overview +
+
+
+ + +
+
+
+ All namespaces +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + add + + +
+ New tab +
+
+ + + fullscreen + + +
+ Fit to window +
+ + + keyboard_arrow_up + + +
+ Open +
+
+
+
+
+
+
+ test modal +
+
+`; diff --git a/src/features/cluster/legacy-extension-adding-cluster-frame-components.test.tsx b/src/features/cluster/legacy-extension-adding-cluster-frame-components.test.tsx new file mode 100644 index 0000000000..f837550f7a --- /dev/null +++ b/src/features/cluster/legacy-extension-adding-cluster-frame-components.test.tsx @@ -0,0 +1,78 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import type { RenderResult } from "@testing-library/react"; +import { act } from "@testing-library/react"; +import type { IObservableValue } from "mobx"; +import { computed, observable, runInAction } from "mobx"; +import React from "react"; +import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; +import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder"; + +describe("legacy extension adding cluster frame components", () => { + let builder: ApplicationBuilder; + let rendered: RenderResult; + + beforeEach(() => { + builder = getApplicationBuilder(); + builder.setEnvironmentToClusterFrame(); + }); + + describe("given custom components for cluster view available", () => { + let someObservable: IObservableValue; + + beforeEach(async () => { + someObservable = observable.box(false); + + const testExtension = { + id: "some-extension-id", + name: "some-extension-name", + + rendererOptions: { + clusterFrameComponents: [ + { + id: "test-modal-id", + Component: () =>
test modal
, + shouldRender: computed(() => true), + }, + { + id: "dialog-with-observable-visibility-id", + Component: () =>
dialog contents
, + shouldRender: computed(() => someObservable.get()), + }, + ], + }, + }; + + rendered = await builder.render(); + builder.extensions.enable(testExtension); + }); + + it("renders", () => { + expect(rendered.container).toMatchSnapshot(); + }); + + it("renders provided component html", () => { + const modal = rendered.getByTestId("test-modal"); + + expect(modal).toBeInTheDocument(); + }); + + it("doesn't render component which should be invisible", () => { + const dialog = rendered.queryByTestId("dialog-with-observable-visibility"); + + expect(dialog).not.toBeInTheDocument(); + }); + + it("when injectable component becomes visible, shows it", () => { + runInAction(() => { + act(() => someObservable.set(true)); + }); + + const dialog = rendered.getByTestId("dialog-with-observable-visibility"); + + expect(dialog).toBeInTheDocument(); + }); + }); +}); diff --git a/src/renderer/frames/cluster-frame/cluster-frame-component-registrator.injectable.ts b/src/renderer/frames/cluster-frame/cluster-frame-component-registrator.injectable.ts new file mode 100644 index 0000000000..31a2db819d --- /dev/null +++ b/src/renderer/frames/cluster-frame/cluster-frame-component-registrator.injectable.ts @@ -0,0 +1,42 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { pipeline } from "@ogre-tools/fp"; +import { getInjectable } from "@ogre-tools/injectable"; +import { map } from "lodash/fp"; +import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token"; +import type { ExtensionRegistrator } from "../../../extensions/extension-loader/extension-registrator-injection-token"; +import type { LensRendererExtension } from "../../../extensions/lens-renderer-extension"; +import { clusterFrameChildComponentInjectionToken } from "./cluster-frame-child-component-injection-token"; + +const clusterFrameComponentRegistratorInjectable = getInjectable({ + id: "cluster-frame-component-registrator", + + instantiate: (): ExtensionRegistrator => { + return (ext) => { + const extension = ext as LensRendererExtension; + + return pipeline( + extension.clusterFrameComponents, + + map((clusterFrameComponentRegistration) => { + const id = `${extension.sanitizedExtensionId}-${clusterFrameComponentRegistration.id}`; + + return getInjectable({ + id, + injectionToken: clusterFrameChildComponentInjectionToken, + instantiate: () => ({ + id, + shouldRender: clusterFrameComponentRegistration.shouldRender, + Component: clusterFrameComponentRegistration.Component, + }), + }); + }), + ); + }; + }, + injectionToken: extensionRegistratorInjectionToken, +}); + +export default clusterFrameComponentRegistratorInjectable; diff --git a/src/renderer/frames/cluster-frame/cluster-frame.tsx b/src/renderer/frames/cluster-frame/cluster-frame.tsx index d1ce64683f..8b88be3564 100755 --- a/src/renderer/frames/cluster-frame/cluster-frame.tsx +++ b/src/renderer/frames/cluster-frame/cluster-frame.tsx @@ -14,11 +14,13 @@ import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.inj import type { ClusterFrameChildComponent } from "./cluster-frame-child-component-injection-token"; import { clusterFrameChildComponentInjectionToken } from "./cluster-frame-child-component-injection-token"; import watchHistoryStateInjectable from "../../remote-helpers/watch-history-state.injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; +import type { IComputedValue } from "mobx"; interface Dependencies { namespaceStore: NamespaceStore; subscribeStores: SubscribeStores; - childComponents: ClusterFrameChildComponent[]; + childComponents: IComputedValue; watchHistoryState: () => () => void; } @@ -37,7 +39,7 @@ export const NonInjectedClusterFrame = observer(({ return ( - {childComponents + {childComponents.get() .map((child) => ( {() => (child.shouldRender.get() ? : null) } @@ -48,12 +50,16 @@ export const NonInjectedClusterFrame = observer(({ }); export const ClusterFrame = withInjectables(NonInjectedClusterFrame, { - getProps: di => ({ - namespaceStore: di.inject(namespaceStoreInjectable), - subscribeStores: di.inject(subscribeStoresInjectable), - childComponents: di.injectMany(clusterFrameChildComponentInjectionToken), - watchHistoryState: di.inject(watchHistoryStateInjectable), - }), + getProps: di => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + + return { + namespaceStore: di.inject(namespaceStoreInjectable), + subscribeStores: di.inject(subscribeStoresInjectable), + childComponents: computedInjectMany(clusterFrameChildComponentInjectionToken), + watchHistoryState: di.inject(watchHistoryStateInjectable), + }; + }, }); ClusterFrame.displayName = "ClusterFrame";