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 { reactApplicationChildrenInjectionToken } from "./src/react-application/react-application-children-injection-token";
export type { ReactApplicationChildren } 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 { reactApplicationHigherOrderComponentInjectionToken } from "./src/react-application/react-application-higher-order-component-injection-token";
export type { ReactApplicationWrapper } from "./src/react-application/react-application-wrapper-injection-token"; export type { ReactApplicationHigherOrderComponent } from "./src/react-application/react-application-higher-order-component-injection-token";
export { reactApplicationRootFeature } from "./src/feature"; 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> </body>
`; `;
exports[`react-application when children is registered and enabled renders 1`] = ` exports[`react-application when content is registered and enabled renders 1`] = `
<body> <body>
<div> <div>
<div <div
data-some-children-test="true" data-some-content-test="true"
> >
Some children Some children
</div> </div>
@ -18,20 +18,20 @@ exports[`react-application when children is registered and enabled renders 1`] =
</body> </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> <body>
<div /> <div />
</body> </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> <body>
<div> <div>
<div <div
data-some-wrapper-test="true" data-some-higher-order-component-test="true"
> >
<div <div
data-some-children-test="true" data-some-content-test="true"
> >
Some children Some children
</div> </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 { reactApplicationChildrenInjectionToken } from "./react-application/react-application-children-injection-token";
import React from "react"; import React from "react";
import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery"; 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", () => { describe("react-application", () => {
let rendered: RenderResult; let rendered: RenderResult;
@ -46,18 +49,18 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
describe("when children is registered and enabled", () => { describe("when content is registered and enabled", () => {
let someObservable: IObservableValue<boolean>; let someObservable: IObservableValue<boolean>;
beforeEach(() => { beforeEach(() => {
someObservable = observable.box(true); someObservable = observable.box(true);
const someChildrenInjectable = getInjectable({ const someContentInjectable = getInjectable({
id: "some-children", id: "some-content",
instantiate: () => ({ instantiate: () => ({
id: "some-children", id: "some-content",
Component: SomeChildren, Component: SomeContent,
enabled: computed(() => someObservable.get()), enabled: computed(() => someObservable.get()),
}), }),
@ -65,7 +68,7 @@ describe("react-application", () => {
}); });
runInAction(() => { runInAction(() => {
di.register(someChildrenInjectable); di.register(someContentInjectable);
}); });
}); });
@ -73,29 +76,28 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("renders the children", () => { it("renders the content", () => {
const { discovered } = discover.getSingleElement("some-children"); const { discovered } = discover.getSingleElement("some-content");
expect(discovered).not.toBeNull(); expect(discovered).not.toBeNull();
}); });
describe("when wrapper is registered", () => { describe("when higher order component is registered", () => {
beforeEach(() => { beforeEach(() => {
const someWrapperInjectable = getInjectable({ const SomeHigherOrderComponent: ReactApplicationHigherOrderComponent = ({ children }) => (
id: "some-wrapper", <div data-some-higher-order-component-test>{children}</div>
);
instantiate: () => (Component) => () => const someHigherOrderComponentInjectable = getInjectable({
( id: "some-higher-order-component",
<div data-some-wrapper-test>
<Component />
</div>
),
injectionToken: reactApplicationWrapperInjectionToken, instantiate: () => SomeHigherOrderComponent,
injectionToken: reactApplicationHigherOrderComponentInjectionToken,
}); });
runInAction(() => { runInAction(() => {
di.register(someWrapperInjectable); di.register(someHigherOrderComponentInjectable);
}); });
}); });
@ -103,16 +105,16 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("renders the children inside the wrapper", () => { it("renders the content inside the higher order component", () => {
const { discovered } = discover const { discovered } = discover
.getSingleElement("some-wrapper") .getSingleElement("some-higher-order-component")
.getSingleElement("some-children"); .getSingleElement("some-content");
expect(discovered).not.toBeNull(); expect(discovered).not.toBeNull();
}); });
}); });
describe("when children is enabled", () => { describe("when content is disabled", () => {
beforeEach(() => { beforeEach(() => {
act(() => { act(() => {
runInAction(() => { runInAction(() => {
@ -125,8 +127,8 @@ describe("react-application", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("does not render the children", () => { it("does not render the content", () => {
const { discovered } = discover.querySingleElement("some-children"); const { discovered } = discover.querySingleElement("some-content");
expect(discovered).toBeNull(); 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 type { IComputedValue } from "mobx";
import { observer, Observer } from "mobx-react"; 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> <Observer key={child.id}>{() => (child.enabled.get() ? <child.Component /> : null)}</Observer>
))} ))}
</> </>
@ -23,7 +23,7 @@ export const ReactApplicationContent = withInjectables<Dependencies>(
{ {
getProps: (di) => ({ 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 type { DiContainerForInjection } from "@ogre-tools/injectable";
import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
import { DiContextProvider } from "@ogre-tools/injectable-react"; import { DiContextProvider } from "@ogre-tools/injectable-react";
import { flow, identity } from "lodash/fp";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import React from "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"; import { ReactApplicationContent } from "./react-application-content";
@ -16,16 +14,24 @@ interface ReactApplicationProps {
di: DiContainerForInjection; 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) => { export const ReactApplication = observer(({ di }: ReactApplicationProps) => {
const computedInjectMany = di.inject(computedInjectManyInjectable); const computedInjectMany = di.inject(computedInjectManyInjectable);
const wrappers = computedInjectMany(reactApplicationWrapperInjectionToken); const higherOrderComponents = computedInjectMany(
reactApplicationHigherOrderComponentInjectionToken,
const ContentWithWrappers = flow(identity, ...wrappers.get())(ReactApplicationContent);
return (
<DiContextProvider value={{ di }}>
<ContentWithWrappers />
</DiContextProvider>
); );
const Components = [...higherOrderComponents.get(), ReactApplicationContent];
return <DiContextProvider value={{ di }}>{render(Components)}</DiContextProvider>;
}); });