From 7892d76b5d9490640e5774b000425825374ec036 Mon Sep 17 00:00:00 2001 From: Iku-turso Date: Thu, 13 Apr 2023 17:20:40 +0300 Subject: [PATCH] feat: Introduce minimal dock tabs Signed-off-by: Iku-turso --- packages/business-features/dock/package.json | 6 ++- .../dock/src/__snapshots__/dock.test.tsx.snap | 54 +++++++++++-------- .../business-features/dock/src/dock-tab.ts | 11 ++++ .../business-features/dock/src/dock.test.tsx | 48 ++++++++++++++--- .../dock/src/dock/dock-host.tsx | 44 ++++++++++----- .../dock/src/dock/dock-tabs.injectable.ts | 15 ++++++ packages/open-lens/src/renderer/index.ts | 8 +-- 7 files changed, 140 insertions(+), 46 deletions(-) create mode 100644 packages/business-features/dock/src/dock-tab.ts create mode 100644 packages/business-features/dock/src/dock/dock-tabs.injectable.ts diff --git a/packages/business-features/dock/package.json b/packages/business-features/dock/package.json index cce4c43de3..b9c24b9b48 100644 --- a/packages/business-features/dock/package.json +++ b/packages/business-features/dock/package.json @@ -32,9 +32,13 @@ "peerDependencies": { "@k8slens/feature-core": "^6.5.0-alpha.0", "@k8slens/ui-components": "^1.0.0-alpha.0", + "@ogre-tools/fp": "^15.1.2", "@ogre-tools/injectable": "^15.1.2", "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2", - "@ogre-tools/fp": "^15.1.2", + "@ogre-tools/injectable-extension-for-mobx": "^15.1.2", + "@ogre-tools/injectable-react": "^15.1.2", + "mobx": "^6.8.0", + "mobx-react": "^7.6.0", "lodash": "^4.17.21", "react": "^17" }, 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 49ba3f6533..f129bf8814 100644 --- a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap +++ b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`dock when rendered renders 1`] = ` +exports[`DockHost, given rendered given implementations of dock tabs emerge renders 1`] = `
- - Some title - -
-
- -
-
-
- - Some other title - + Some content +
@@ -61,3 +44,30 @@ exports[`dock when rendered renders 1`] = ` `; + +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 new file mode 100644 index 0000000000..f3dda87fff --- /dev/null +++ b/packages/business-features/dock/src/dock-tab.ts @@ -0,0 +1,11 @@ +import type React from "react"; +import { getInjectionToken } from "@ogre-tools/injectable"; + +export type DockTab = { + id: string; + Component: React.ComponentType; +}; + +export const dockTabInjectionToken = getInjectionToken({ + id: "dock-tab-injection-token", +}); diff --git a/packages/business-features/dock/src/dock.test.tsx b/packages/business-features/dock/src/dock.test.tsx index 619acfdf14..0c724e6d4f 100644 --- a/packages/business-features/dock/src/dock.test.tsx +++ b/packages/business-features/dock/src/dock.test.tsx @@ -1,29 +1,63 @@ -import { createContainer, DiContainer } from "@ogre-tools/injectable"; +import { runInAction } from "mobx"; +import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable"; +import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx"; +import { registerInjectableReact } from "@ogre-tools/injectable-react"; import { renderFor } from "@k8slens/test-utils"; import { DockHost } from "./dock/dock-host"; import React from "react"; import type { RenderResult } from "@testing-library/react"; +import { dockTabInjectionToken } from "./dock-tab"; +import { Discover, discoverFor } from "@k8slens/react-testing-library-discovery"; +import { registerFeature } from "@k8slens/feature-core"; +import { dockFeature } from "./feature"; -describe("dock", () => { +describe("DockHost, given rendered", () => { let di: DiContainer; + let rendered: RenderResult; + let discover: Discover; beforeEach(() => { di = createContainer("some-container"); + registerMobX(di); + registerInjectableReact(di); + runInAction(() => { + registerFeature(di, dockFeature); + }); - // registerFeature(di, dockFeature); + const render = renderFor(di); + + rendered = render(); + discover = discoverFor(() => rendered); }); - describe("when rendered", () => { - let rendered: RenderResult; + it("given no implementations of dock tabs, renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + describe("given implementations of dock tabs emerge", () => { beforeEach(() => { - const render = renderFor(di); + const dockInjectable = getInjectable({ + id: "some-dock-tab", - rendered = render(); + instantiate: () => ({ + id: "some-dock-tab", + Component: () =>
Some content
, + }), + + injectionToken: dockTabInjectionToken, + }); + + runInAction(() => { + di.register(dockInjectable); + }); }); it("renders", () => { expect(rendered.baseElement).toMatchSnapshot(); }); + + it("renders the dock tab", () => { + discover.getSingleElement("some-dock-tab"); + }); }); }); diff --git a/packages/business-features/dock/src/dock/dock-host.tsx b/packages/business-features/dock/src/dock/dock-host.tsx index 477efd47f6..15dd240832 100644 --- a/packages/business-features/dock/src/dock/dock-host.tsx +++ b/packages/business-features/dock/src/dock/dock-host.tsx @@ -1,21 +1,24 @@ +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 { Div, Span } from "@k8slens/ui-components"; +import { Div, Map } from "@k8slens/ui-components"; +import dockTabsInjectable from "./dock-tabs.injectable"; +import type { DockTab } from "../dock-tab"; -export const DockHost = () => ( +const NonInjectedDockHost = observer(({ dockTabs }: Dependencies) => (
- -
- Some title -
- - - -
- Some other title -
- + + {({ Component }) => ( + +
+ +
+ + )} +
( Some content
+)); + +interface Dependencies { + dockTabs: IComputedValue; +} + +export const DockHost = withInjectables( + NonInjectedDockHost, + + { + getProps: (di, props) => ({ + dockTabs: di.inject(dockTabsInjectable), + ...props, + }), + }, ); diff --git a/packages/business-features/dock/src/dock/dock-tabs.injectable.ts b/packages/business-features/dock/src/dock/dock-tabs.injectable.ts new file mode 100644 index 0000000000..c7cc7eb939 --- /dev/null +++ b/packages/business-features/dock/src/dock/dock-tabs.injectable.ts @@ -0,0 +1,15 @@ +import { getInjectable } from "@ogre-tools/injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; +import { dockTabInjectionToken } from "../dock-tab"; + +const dockTabsInjectable = getInjectable({ + id: "dock-tabs", + + instantiate: (di) => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + + return computedInjectMany(dockTabInjectionToken); + }, +}); + +export default dockTabsInjectable; diff --git a/packages/open-lens/src/renderer/index.ts b/packages/open-lens/src/renderer/index.ts index 64c5810574..6a35217eb7 100644 --- a/packages/open-lens/src/renderer/index.ts +++ b/packages/open-lens/src/renderer/index.ts @@ -4,13 +4,13 @@ import { rendererExtensionApi as Renderer, commonExtensionApi as Common, registerLensCore, - metricsFeature + metricsFeature, } from "@k8slens/core/renderer"; import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration"; import { registerFeature } from "@k8slens/feature-core"; import { applicationFeature, - startApplicationInjectionToken + startApplicationInjectionToken, } from "@k8slens/application"; import { createContainer } from "@ogre-tools/injectable"; import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx"; @@ -18,6 +18,7 @@ import { registerInjectableReact } from "@ogre-tools/injectable-react"; import { messagingFeatureForRenderer } from "@k8slens/messaging-for-renderer"; import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts"; import { reactApplicationFeature } from "@k8slens/react-application"; +import { dockFeature } from "@k8slens/dock"; const environment = "renderer"; @@ -36,7 +37,8 @@ runInAction(() => { messagingFeatureForRenderer, keyboardShortcutsFeature, reactApplicationFeature, - metricsFeature + metricsFeature, + dockFeature, ); autoRegister({