hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Switch to using more familiar pattern of higher order components for wrapping react application

Browse Source 
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2023-03-31 10:17:42 +03:00
parent 9241154e7d
commit 19ded006c0
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
7 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/technical-features/react-application-root/index.ts
View File

@ -4,7 +4,7 @@ export type { Render } from "./src/render-application/render.injectable";
export { reactApplicationChildrenInjectionToken } from "./src/react-application/react-application-children-injection-token";
export type { ReactApplicationChildren } from "./src/react-application/react-application-children-injection-token";
export { reactApplicationWrapperInjectionToken } from "./src/react-application/react-application-wrapper-injection-token";
export type { ReactApplicationWrapper } from "./src/react-application/react-application-wrapper-injection-token";
export { reactApplicationHigherOrderComponentInjectionToken } from "./src/react-application/react-application-higher-order-component-injection-token";
export type { ReactApplicationHigherOrderComponent } from "./src/react-application/react-application-higher-order-component-injection-token";
export { reactApplicationRootFeature } from "./src/feature";

12
packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap
View File

@ -6,11 +6,11 @@ exports[`react-application renders 1`] = `
</body>
`;
exports[`react-application when children is registered and enabled renders 1`] = `
exports[`react-application when content is registered and enabled renders 1`] = `
<body>
<div>
<div
data-some-children-test="true"
data-some-content-test="true"
>
Some children
</div>
@ -18,20 +18,20 @@ exports[`react-application when children is registered and enabled renders 1`] =
</body>
`;
exports[`react-application when children is registered and enabled when children is enabled renders 1`] = `
exports[`react-application when content is registered and enabled when content is disabled renders 1`] = `
<body>
<div />
</body>
`;
exports[`react-application when children is registered and enabled when wrapper is registered renders 1`] = `
exports[`react-application when content is registered and enabled when higher order component is registered renders 1`] = `
<body>
<div>
<div
data-some-wrapper-test="true"
data-some-higher-order-component-test="true"
>
<div
data-some-children-test="true"
data-some-content-test="true"
>
Some children
</div>

56
packages/technical-features/react-application-root/src/react-application.test.tsx
View File

@ -11,9 +11,12 @@ import renderInjectable from "./render-application/render.injectable";
import { reactApplicationChildrenInjectionToken } from "./react-application/react-application-children-injection-token";
import React from "react";
import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
import { reactApplicationWrapperInjectionToken } from "./react-application/react-application-wrapper-injection-token";
import {
ReactApplicationHigherOrderComponent,
reactApplicationHigherOrderComponentInjectionToken,
} from "./react-application/react-application-higher-order-component-injection-token";
const SomeChildren = () => <div data-some-children-test>Some children</div>;
const SomeContent = () => <div data-some-content-test>Some children</div>;
describe("react-application", () => {
let rendered: RenderResult;
@ -46,18 +49,18 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
describe("when children is registered and enabled", () => {
describe("when content is registered and enabled", () => {
let someObservable: IObservableValue<boolean>;
beforeEach(() => {
someObservable = observable.box(true);
const someChildrenInjectable = getInjectable({
id: "some-children",
const someContentInjectable = getInjectable({
id: "some-content",
instantiate: () => ({
id: "some-children",
Component: SomeChildren,
id: "some-content",
Component: SomeContent,
enabled: computed(() => someObservable.get()),
}),
@ -65,7 +68,7 @@ describe("react-application", () => {
});
runInAction(() => {
di.register(someChildrenInjectable);
di.register(someContentInjectable);
});
});
@ -73,29 +76,28 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("renders the children", () => {
const { discovered } = discover.getSingleElement("some-children");
it("renders the content", () => {
const { discovered } = discover.getSingleElement("some-content");
expect(discovered).not.toBeNull();
});
describe("when wrapper is registered", () => {
describe("when higher order component is registered", () => {
beforeEach(() => {
const someWrapperInjectable = getInjectable({
id: "some-wrapper",
const SomeHigherOrderComponent: ReactApplicationHigherOrderComponent = ({ children }) => (
<div data-some-higher-order-component-test>{children}</div>
);
instantiate: () => (Component) => () =>
(
<div data-some-wrapper-test>
<Component />
</div>
),
const someHigherOrderComponentInjectable = getInjectable({
id: "some-higher-order-component",
injectionToken: reactApplicationWrapperInjectionToken,
instantiate: () => SomeHigherOrderComponent,
injectionToken: reactApplicationHigherOrderComponentInjectionToken,
});
runInAction(() => {
di.register(someWrapperInjectable);
di.register(someHigherOrderComponentInjectable);
});
});
@ -103,16 +105,16 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("renders the children inside the wrapper", () => {
it("renders the content inside the higher order component", () => {
const { discovered } = discover
.getSingleElement("some-wrapper")
.getSingleElement("some-children");
.getSingleElement("some-higher-order-component")
.getSingleElement("some-content");
expect(discovered).not.toBeNull();
});
});
describe("when children is enabled", () => {
describe("when content is disabled", () => {
beforeEach(() => {
act(() => {
runInAction(() => {
@ -125,8 +127,8 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("does not render the children", () => {
const { discovered } = discover.querySingleElement("some-children");
it("does not render the content", () => {
const { discovered } = discover.querySingleElement("some-content");
expect(discovered).toBeNull();
});

8
packages/technical-features/react-application-root/src/react-application/react-application-content.tsx
View File

@ -8,11 +8,11 @@ import {
import type { IComputedValue } from "mobx";
import { observer, Observer } from "mobx-react";
type Dependencies = { children: IComputedValue<ReactApplicationChildren[]> };
type Dependencies = { contents: IComputedValue<ReactApplicationChildren[]> };
const NonInjectedContent = observer(({ children }: Dependencies) => (
const NonInjectedContent = observer(({ contents }: Dependencies) => (
<>
{children.get().map((child) => (
{contents.get().map((child) => (
<Observer key={child.id}>{() => (child.enabled.get() ? <child.Component /> : null)}</Observer>
))}
</>
@ -23,7 +23,7 @@ export const ReactApplicationContent = withInjectables<Dependencies>(
{
getProps: (di) => ({
children: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken),
contents: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken),
}),
},
);

11
packages/technical-features/react-application-root/src/react-application/react-application-higher-order-component-injection-token.ts Normal file
View File

@ -0,0 +1,11 @@
import { getInjectionToken } from "@ogre-tools/injectable";
import type React from "react";
export type ReactApplicationHigherOrderComponent = React.ComponentType<{
children: React.ReactNode;
}>;
export const reactApplicationHigherOrderComponentInjectionToken =
getInjectionToken<ReactApplicationHigherOrderComponent>({
id: "react-application-higher-order-component-injection-token",
});

8
packages/technical-features/react-application-root/src/react-application/react-application-wrapper-injection-token.ts
View File

@ -1,8 +0,0 @@
import { getInjectionToken } from "@ogre-tools/injectable";
import type React from "react";
export type ReactApplicationWrapper = (Component: React.ComponentType) => React.ComponentType;
export const reactApplicationWrapperInjectionToken = getInjectionToken<ReactApplicationWrapper>({
id: "react-application-wrapper-injection-token",
});

34
packages/technical-features/react-application-root/src/react-application/react-application.tsx
View File

@ -1,14 +1,12 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainerForInjection } from "@ogre-tools/injectable";
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
import { DiContextProvider } from "@ogre-tools/injectable-react";
import { flow, identity } from "lodash/fp";
import { observer } from "mobx-react";
import React from "react";
import { reactApplicationWrapperInjectionToken } from "./react-application-wrapper-injection-token";
import {
ReactApplicationHigherOrderComponent,
reactApplicationHigherOrderComponentInjectionToken,
} from "./react-application-higher-order-component-injection-token";
import { ReactApplicationContent } from "./react-application-content";
@ -16,16 +14,24 @@ interface ReactApplicationProps {
di: DiContainerForInjection;
}
const render = (components: ReactApplicationHigherOrderComponent[]) => {
const [Component, ...rest] = components;
if (!Component) {
return null;
}
return <Component>{render(rest)}</Component>;
};
export const ReactApplication = observer(({ di }: ReactApplicationProps) => {
const computedInjectMany = di.inject(computedInjectManyInjectable);
const wrappers = computedInjectMany(reactApplicationWrapperInjectionToken);
const ContentWithWrappers = flow(identity, ...wrappers.get())(ReactApplicationContent);
return (
<DiContextProvider value={{ di }}>
<ContentWithWrappers />
</DiContextProvider>
const higherOrderComponents = computedInjectMany(
reactApplicationHigherOrderComponentInjectionToken,
);
const Components = [...higherOrderComponents.get(), ReactApplicationContent];
return <DiContextProvider value={{ di }}>{render(Components)}</DiContextProvider>;
});