`;
-exports[`DockHost, given rendered given no implementations of dock tabs, renders 1`] = `
+exports[`DockHost, given rendered given implementations of dock tab types emerge when dock tab of one of the types is created renders 1`] = `
+
+
+
+`;
+
+exports[`DockHost, given rendered given no implementations of dock tab types, renders 1`] = `
diff --git a/packages/business-features/dock/src/dock-tab.ts b/packages/business-features/dock/src/dock-tab-type.ts
similarity index 58%
rename from packages/business-features/dock/src/dock-tab.ts
rename to packages/business-features/dock/src/dock-tab-type.ts
index 617bd115b2..c17951eb60 100644
--- a/packages/business-features/dock/src/dock-tab.ts
+++ b/packages/business-features/dock/src/dock-tab-type.ts
@@ -1,12 +1,12 @@
import type React from "react";
import { getInjectionToken } from "@ogre-tools/injectable";
-export type DockTab = {
+export type DockTabType = {
id: string;
TitleComponent: React.ComponentType;
ContentComponent: React.ComponentType;
};
-export const dockTabInjectionToken = getInjectionToken
({
- id: "dock-tab-injection-token",
+export const dockTabTypeInjectionToken = getInjectionToken({
+ id: "dock-tab-type-injection-token",
});
diff --git a/packages/business-features/dock/src/dock.test.tsx b/packages/business-features/dock/src/dock.test.tsx
index d54c85663b..296071d59f 100644
--- a/packages/business-features/dock/src/dock.test.tsx
+++ b/packages/business-features/dock/src/dock.test.tsx
@@ -5,10 +5,38 @@ import { DockHost } from "./dock/dock-host";
import React from "react";
import type { RenderResult } from "@testing-library/react";
import { act } from "@testing-library/react";
-import { dockTabInjectionToken } from "./dock-tab";
+import { dockTabTypeInjectionToken } from "./dock-tab-type";
import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery";
import { registerFeature } from "@k8slens/feature-core";
import { dockFeature } from "./feature";
+import { createDockTabInjectionToken } from "./dock/create-dock-tab.injectable";
+import { getRandomIdInjectionToken } from "./dock/get-random-id.injectable";
+
+const dockTabTypeInjectable1 = getInjectable({
+ id: "some-dock-tab-type-1",
+
+ instantiate: () => ({
+ id: "some-dock-tab-type-1",
+ TitleComponent: () => Some title 1
,
+
+ ContentComponent: () => Some content 1
,
+ }),
+
+ injectionToken: dockTabTypeInjectionToken,
+});
+
+const dockTabTypeInjectable2 = getInjectable({
+ id: "some-dock-tab-type-2",
+
+ instantiate: () => ({
+ id: "some-dock-tab-type-2",
+ TitleComponent: () => Some title 2
,
+
+ ContentComponent: () => Some content 2
,
+ }),
+
+ injectionToken: dockTabTypeInjectionToken,
+});
describe("DockHost, given rendered", () => {
let di: DiContainer;
@@ -20,50 +48,26 @@ describe("DockHost, given rendered", () => {
registerFeature(di, dockFeature);
+ di.override(getRandomIdInjectionToken, () => {
+ let index = 0;
+
+ return () => `some-random-id-${index++}`;
+ });
+
const render = renderFor(di);
rendered = render();
discover = discoverFor(() => rendered);
});
- it("given no implementations of dock tabs, renders", () => {
+ it("given no implementations of dock tab types, renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
- describe("given implementations of dock tabs emerge", () => {
+ describe("given implementations of dock tab types emerge", () => {
beforeEach(() => {
- const dockTabInjectable1 = getInjectable({
- id: "some-dock-tab-1",
-
- instantiate: () => ({
- id: "some-dock-tab-1",
- TitleComponent: () => Some title 1
,
-
- ContentComponent: () => (
- Some content 1
- ),
- }),
-
- injectionToken: dockTabInjectionToken,
- });
-
- const dockTabInjectable2 = getInjectable({
- id: "some-dock-tab-2",
-
- instantiate: () => ({
- id: "some-dock-tab-2",
- TitleComponent: () => Some title 2
,
-
- ContentComponent: () => (
- Some content 2
- ),
- }),
-
- injectionToken: dockTabInjectionToken,
- });
-
runInAction(() => {
- di.register(dockTabInjectable1, dockTabInjectable2);
+ di.register(dockTabTypeInjectable1, dockTabTypeInjectable2);
});
});
@@ -71,35 +75,83 @@ describe("DockHost, given rendered", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
- it("renders the titles of all the dock tabs in order", () => {
- expect(discover.queryAllElements("dock-tab-title").attributeValues).toEqual([
- "some-title-1",
- "some-title-2",
- ]);
+ it("renders no tabs", () => {
+ const { discovered } = discover.querySingleElement("dock-tab");
+
+ expect(discovered).toBeNull();
});
- it("renders only the content of the first dock tab", () => {
- expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([
- "some-content-1",
- ]);
+ it("renders no content", () => {
+ const { discovered } = discover.querySingleElement("dock-tab-content");
+
+ expect(discovered).toBeNull();
});
- describe("when the second dock tab is clicked", () => {
+ describe("when dock tab of one of the types is created", () => {
beforeEach(() => {
- act(() => {
- discover.getSingleElement("dock-tab", "some-dock-tab-2").click();
- });
+ const dockTabType1 = di.inject(dockTabTypeInjectable1);
+
+ const createDockTab = di.inject(createDockTabInjectionToken);
+
+ createDockTab({ type: dockTabType1 });
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
- it("renders only the content of the second dock tab", () => {
- expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([
- "some-content-2",
+ it("renders the title for the dock tab", () => {
+ expect(discover.queryAllElements("dock-tab-title").attributeValues).toEqual([
+ "some-title-1",
]);
});
+
+ it("renders the content of the first dock tab", () => {
+ expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([
+ "some-content-1",
+ ]);
+ });
+
+ describe("given another dock tab is created", () => {
+ beforeEach(() => {
+ const dockTabType2 = di.inject(dockTabTypeInjectable2);
+
+ const createDockTab = di.inject(createDockTabInjectionToken);
+
+ createDockTab({ type: dockTabType2 });
+ });
+
+ it("renders the titles of all the dock tabs in order of creating", () => {
+ expect(discover.queryAllElements("dock-tab-title").attributeValues).toEqual([
+ "some-title-1",
+ "some-title-2",
+ ]);
+ });
+
+ it("renders only the content of the just created dock tab", () => {
+ expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([
+ "some-content-2",
+ ]);
+ });
+
+ describe("when the second dock tab is clicked", () => {
+ beforeEach(() => {
+ act(() => {
+ discover.getSingleElement("dock-tab", "some-random-id-1").click();
+ });
+ });
+
+ it("renders", () => {
+ expect(rendered.baseElement).toMatchSnapshot();
+ });
+
+ it("renders only the content of the second dock tab", () => {
+ expect(discover.queryAllElements("dock-tab-content").attributeValues).toEqual([
+ "some-content-2",
+ ]);
+ });
+ });
+ });
});
});
});
diff --git a/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts
index 80d68e103a..eedac4d5a3 100644
--- a/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts
+++ b/packages/business-features/dock/src/dock/activate-dock-tab.injectable.ts
@@ -1,19 +1,15 @@
-import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
+import { getInjectable } from "@ogre-tools/injectable";
import { action } from "mobx";
import activeDockTabIdInjectable from "./active-dock-tab-id.injectable";
const activateDockTabInjectable = getInjectable({
id: "activate-dock-tab",
- instantiate: (di, tabId) => {
+ instantiate: (di) => {
const activeDockTabId = di.inject(activeDockTabIdInjectable);
- return action(() => activeDockTabId.set(tabId));
+ return action((tabId: string) => activeDockTabId.set(tabId));
},
-
- lifecycle: lifecycleEnum.keyedSingleton({
- getInstanceKey: (di, tabId: string) => tabId,
- }),
});
export default activateDockTabInjectable;
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
index 02d634eabf..b17078e0ce 100644
--- a/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts
+++ b/packages/business-features/dock/src/dock/active-dock-tab.injectable.ts
@@ -3,24 +3,29 @@ import { computed } from "mobx";
import activeDockTabIdInjectable from "./active-dock-tab-id.injectable";
import { pipeline } from "@ogre-tools/fp";
import { defaults, find, first } from "lodash/fp";
-import type { DockTab } from "../dock-tab";
-import dockTabTypesInjectable from "./dock-tabs-types.injectable";
+import dockTabsInjectable, { DockTabViewModel } from "./dock-tabs.injectable";
-const nullTab: DockTab = {
+const nullTab: DockTabViewModel = {
id: "no-active-dock-tab",
- TitleComponent: () => null,
- ContentComponent: () => null,
+
+ type: {
+ id: "no-active-dock-tab-type",
+ TitleComponent: () => null,
+ ContentComponent: () => null,
+ },
+
+ activate: () => {},
};
const activeDockTabInjectable = getInjectable({
id: "active-dock-tab",
instantiate: (di) => {
- const dockTabTypes = di.inject(dockTabTypesInjectable);
+ const dockTabs = di.inject(dockTabsInjectable);
const activeDockTabId = di.inject(activeDockTabIdInjectable);
return computed(() => {
- const tabs = dockTabTypes.get();
+ const tabs = dockTabs.get();
return pipeline(
tabs,
diff --git a/packages/business-features/dock/src/dock/create-dock-tab.injectable.ts b/packages/business-features/dock/src/dock/create-dock-tab.injectable.ts
new file mode 100644
index 0000000000..239c16e408
--- /dev/null
+++ b/packages/business-features/dock/src/dock/create-dock-tab.injectable.ts
@@ -0,0 +1,43 @@
+import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
+import { runInAction } from "mobx";
+import type { DockTabType } from "../dock-tab-type";
+import { dockTabStateInjectable } from "./dock-tab-state.injectable";
+import { getRandomIdInjectionToken } from "./get-random-id.injectable";
+import activateDockTabInjectable from "./activate-dock-tab.injectable";
+
+export interface CreateDockTabParams {
+ type: DockTabType;
+}
+
+export type CreateDockTab = ({ type }: CreateDockTabParams) => void;
+
+export const createDockTabInjectionToken = getInjectionToken({
+ id: "create-dock-tab-injection-token",
+});
+
+const createDockTabInjectable = getInjectable({
+ id: "create-dock-tab",
+
+ instantiate: (di) => {
+ const dockTabState = di.inject(dockTabStateInjectable);
+ const getRandomId = di.inject(getRandomIdInjectionToken);
+ const activateDockTab = di.inject(activateDockTabInjectable);
+
+ return ({ type }) => {
+ runInAction(() => {
+ const newTabId = getRandomId();
+
+ dockTabState.add({
+ id: newTabId,
+ typeId: type.id,
+ });
+
+ activateDockTab(newTabId);
+ });
+ };
+ },
+
+ injectionToken: createDockTabInjectionToken,
+});
+
+export default createDockTabInjectable;
diff --git a/packages/business-features/dock/src/dock/dock-host.tsx b/packages/business-features/dock/src/dock/dock-host.tsx
index 47709e5800..783a716398 100644
--- a/packages/business-features/dock/src/dock/dock-host.tsx
+++ b/packages/business-features/dock/src/dock/dock-host.tsx
@@ -4,18 +4,19 @@ import { withInjectables } from "@ogre-tools/injectable-react";
import React from "react";
import { Tabs } from "./tabs";
import { Div, Map } from "@k8slens/ui-components";
-import dockTabsInjectable, { ActivatableDockTab } from "./dock-tabs.injectable";
-import type { DockTab } from "../dock-tab";
+import dockTabsInjectable, { DockTabViewModel } from "./dock-tabs.injectable";
import activeDockTabInjectable from "./active-dock-tab.injectable";
const NonInjectedDockHost = observer(({ dockTabs, activeDockTab }: Dependencies) => {
- const { ContentComponent: DockTabContent } = activeDockTab.get();
+ const {
+ type: { ContentComponent: DockTabContent },
+ } = activeDockTab.get();
return (