diff --git a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap index f129bf8814..856251be46 100644 --- a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap +++ b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap @@ -3,42 +3,24 @@ exports[`DockHost, given rendered given implementations of dock tabs emerge renders 1`] = `
-
+
-
+
-
-
- Some content -
-
+ Some title
-
+
-
-
- Some content + data-some-dock-tab-content-test="true" + > + Some content +
@@ -48,25 +30,11 @@ exports[`DockHost, given rendered given implementations of dock tabs emerge rend exports[`DockHost, given rendered given no implementations of dock tabs, renders 1`] = `
-
+
-
-
-
-
- Some content -
+
diff --git a/packages/business-features/dock/src/dock-tab.ts b/packages/business-features/dock/src/dock-tab.ts index f3dda87fff..617bd115b2 100644 --- a/packages/business-features/dock/src/dock-tab.ts +++ b/packages/business-features/dock/src/dock-tab.ts @@ -3,7 +3,8 @@ import { getInjectionToken } from "@ogre-tools/injectable"; export type DockTab = { id: string; - Component: React.ComponentType; + TitleComponent: React.ComponentType; + ContentComponent: React.ComponentType; }; export const dockTabInjectionToken = getInjectionToken({ diff --git a/packages/business-features/dock/src/dock.test.tsx b/packages/business-features/dock/src/dock.test.tsx index a857c2c18f..01e81f138d 100644 --- a/packages/business-features/dock/src/dock.test.tsx +++ b/packages/business-features/dock/src/dock.test.tsx @@ -31,19 +31,20 @@ describe("DockHost, given rendered", () => { describe("given implementations of dock tabs emerge", () => { beforeEach(() => { - const dockInjectable = getInjectable({ + const dockTabInjectable = getInjectable({ id: "some-dock-tab", instantiate: () => ({ id: "some-dock-tab", - Component: () =>
Some content
, + TitleComponent: () =>
Some title
, + ContentComponent: () =>
Some content
, }), injectionToken: dockTabInjectionToken, }); runInAction(() => { - di.register(dockInjectable); + di.register(dockTabInjectable); }); }); @@ -51,8 +52,12 @@ describe("DockHost, given rendered", () => { expect(rendered.baseElement).toMatchSnapshot(); }); - it("renders the dock tab", () => { - discover.getSingleElement("some-dock-tab"); + it("renders the title of dock tab", () => { + discover.getSingleElement("some-dock-tab-title"); + }); + + it("renders the content of the dock tab", () => { + discover.getSingleElement("some-dock-tab-content"); }); }); }); diff --git a/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts new file mode 100644 index 0000000000..fd1fc5f517 --- /dev/null +++ b/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts @@ -0,0 +1,25 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import { computed } from "mobx"; +import dockTabsInjectable from "./dock-tabs.injectable"; + +const activeDockTabInjectable = getInjectable({ + id: "active-dock-tab", + + instantiate: (di) => { + const dockTabs = di.inject(dockTabsInjectable); + + return computed(() => { + const [ + activeDockTab = { + id: "no-active-dock-tab", + TitleComponent: () => null, + ContentComponent: () => null, + }, + ] = dockTabs.get(); + + return activeDockTab; + }); + }, +}); + +export default activeDockTabInjectable; diff --git a/packages/business-features/dock/src/dock/dock-host.tsx b/packages/business-features/dock/src/dock/dock-host.tsx index 15dd240832..f2250c2c9d 100644 --- a/packages/business-features/dock/src/dock/dock-host.tsx +++ b/packages/business-features/dock/src/dock/dock-host.tsx @@ -2,54 +2,46 @@ import type { IComputedValue } from "mobx"; import { observer } from "mobx-react"; import { withInjectables } from "@ogre-tools/injectable-react"; import React from "react"; -import { Tab } from "./tab"; +import { Tabs } from "./tabs"; import { Div, Map } from "@k8slens/ui-components"; import dockTabsInjectable from "./dock-tabs.injectable"; import type { DockTab } from "../dock-tab"; +import activeDockTabInjectable from "./active-dock-tab.injectable"; -const NonInjectedDockHost = observer(({ dockTabs }: Dependencies) => ( -
-
- - {({ Component }) => ( - -
- -
- - )} - +const NonInjectedDockHost = observer(({ dockTabs, activeDockTab }: Dependencies) => { + const { ContentComponent: DockTabContent } = activeDockTab.get(); + + return ( +
+ + + {({ TitleComponent }) => ( + + + + )} + + + +
+ +
- -
-
-
- -
- Some content -
-
-)); + ); +}); interface Dependencies { dockTabs: IComputedValue; + activeDockTab: IComputedValue; } export const DockHost = withInjectables( NonInjectedDockHost, { - getProps: (di, props) => ({ + getProps: (di) => ({ dockTabs: di.inject(dockTabsInjectable), - ...props, + activeDockTab: di.inject(activeDockTabInjectable), }), }, ); diff --git a/packages/business-features/dock/src/dock/tab.tsx b/packages/business-features/dock/src/dock/tab.tsx deleted file mode 100644 index faa9e2d2a9..0000000000 --- a/packages/business-features/dock/src/dock/tab.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Div } from "@k8slens/ui-components"; -import React from "react"; - -export interface TabProps { - children: React.ReactNode; -} - -export const Tab = ({ children }: TabProps) => { - return ( -
-
{children}
-
- ); -}; diff --git a/packages/business-features/dock/src/dock/tabs.tsx b/packages/business-features/dock/src/dock/tabs.tsx new file mode 100644 index 0000000000..3c70383c6a --- /dev/null +++ b/packages/business-features/dock/src/dock/tabs.tsx @@ -0,0 +1,20 @@ +import { Div } from "@k8slens/ui-components"; +import React from "react"; + +export interface TabsProps { + children: React.ReactNode; +} + +export const Tabs = ({ children }: TabsProps) => ( +
{children}
+); + +export interface TabProps { + children: React.ReactNode; +} + +const Tab = ({ children }: TabProps) => ( +
{children}
+); + +Tabs.Tab = Tab;