diff --git a/packages/technical-features/react-application-root/index.ts b/packages/technical-features/react-application-root/index.ts index 02b56ab9d8..f85fb3816d 100644 --- a/packages/technical-features/react-application-root/index.ts +++ b/packages/technical-features/react-application-root/index.ts @@ -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"; diff --git a/packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap b/packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap index 6b1b448294..a029ece5f9 100644 --- a/packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap +++ b/packages/technical-features/react-application-root/src/__snapshots__/react-application.test.tsx.snap @@ -6,11 +6,11 @@ exports[`react-application renders 1`] = ` `; -exports[`react-application when children is registered and enabled renders 1`] = ` +exports[`react-application when content is registered and enabled renders 1`] = `
Some children
@@ -18,20 +18,20 @@ exports[`react-application when children is registered and enabled renders 1`] = `; -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`] = `
`; -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`] = `
Some children
diff --git a/packages/technical-features/react-application-root/src/react-application.test.tsx b/packages/technical-features/react-application-root/src/react-application.test.tsx index 50b1d0614b..db55313745 100644 --- a/packages/technical-features/react-application-root/src/react-application.test.tsx +++ b/packages/technical-features/react-application-root/src/react-application.test.tsx @@ -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 = () =>
Some children
; +const SomeContent = () =>
Some children
; 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; 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 }) => ( +
{children}
+ ); - instantiate: () => (Component) => () => - ( -
- -
- ), + 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(); }); diff --git a/packages/technical-features/react-application-root/src/react-application/react-application-content.tsx b/packages/technical-features/react-application-root/src/react-application/react-application-content.tsx index a7b2400553..2307969542 100644 --- a/packages/technical-features/react-application-root/src/react-application/react-application-content.tsx +++ b/packages/technical-features/react-application-root/src/react-application/react-application-content.tsx @@ -8,11 +8,11 @@ import { import type { IComputedValue } from "mobx"; import { observer, Observer } from "mobx-react"; -type Dependencies = { children: IComputedValue }; +type Dependencies = { contents: IComputedValue }; -const NonInjectedContent = observer(({ children }: Dependencies) => ( +const NonInjectedContent = observer(({ contents }: Dependencies) => ( <> - {children.get().map((child) => ( + {contents.get().map((child) => ( {() => (child.enabled.get() ? : null)} ))} @@ -23,7 +23,7 @@ export const ReactApplicationContent = withInjectables( { getProps: (di) => ({ - children: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken), + contents: di.inject(computedInjectManyInjectable)(reactApplicationChildrenInjectionToken), }), }, ); diff --git a/packages/technical-features/react-application-root/src/react-application/react-application-higher-order-component-injection-token.ts b/packages/technical-features/react-application-root/src/react-application/react-application-higher-order-component-injection-token.ts new file mode 100644 index 0000000000..cae1a6b468 --- /dev/null +++ b/packages/technical-features/react-application-root/src/react-application/react-application-higher-order-component-injection-token.ts @@ -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({ + id: "react-application-higher-order-component-injection-token", + }); diff --git a/packages/technical-features/react-application-root/src/react-application/react-application-wrapper-injection-token.ts b/packages/technical-features/react-application-root/src/react-application/react-application-wrapper-injection-token.ts deleted file mode 100644 index 629c9b279d..0000000000 --- a/packages/technical-features/react-application-root/src/react-application/react-application-wrapper-injection-token.ts +++ /dev/null @@ -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({ - id: "react-application-wrapper-injection-token", -}); diff --git a/packages/technical-features/react-application-root/src/react-application/react-application.tsx b/packages/technical-features/react-application-root/src/react-application/react-application.tsx index 0d016d0f28..933d0ad389 100644 --- a/packages/technical-features/react-application-root/src/react-application/react-application.tsx +++ b/packages/technical-features/react-application-root/src/react-application/react-application.tsx @@ -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 {render(rest)}; +}; + export const ReactApplication = observer(({ di }: ReactApplicationProps) => { const computedInjectMany = di.inject(computedInjectManyInjectable); - const wrappers = computedInjectMany(reactApplicationWrapperInjectionToken); - - const ContentWithWrappers = flow(identity, ...wrappers.get())(ReactApplicationContent); - - return ( - - - + const higherOrderComponents = computedInjectMany( + reactApplicationHigherOrderComponentInjectionToken, ); + + const Components = [...higherOrderComponents.get(), ReactApplicationContent]; + + return {render(Components)}; });