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

feat: Introduce minimal dock tabs

Browse Source 
Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso 2023-04-13 17:20:40 +03:00 committed by Janne Savolainen
parent b6e44424b7
commit 7892d76b5d
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
7 changed files with 140 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/business-features/dock/package.json
View File

@ -32,9 +32,13 @@
"peerDependencies": { "peerDependencies": {
"@k8slens/feature-core": "^6.5.0-alpha.0", "@k8slens/feature-core": "^6.5.0-alpha.0",
"@k8slens/ui-components": "^1.0.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": "^15.1.2",
"@ogre-tools/injectable-extension-for-auto-registration": "^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", "lodash": "^4.17.21",
"react": "^17" "react": "^17"
}, },

54
packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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`] = `
<body> <body>
<div> <div>
<div <div
@ -18,28 +18,11 @@ exports[`dock when rendered renders 1`] = `
<div <div
class="flex align-center" class="flex align-center"
> >
<span <div
class="overflow-hidden text-ellipsis" data-some-dock-tab-test="true"
> >
Some title Some content
</span> </div>
</div>
</div>
</div>
<div
class="Tab flex gaps align-center"
>
<div
class="label"
>
<div
class="flex align-center"
>
<span
class="overflow-hidden text-ellipsis"
>
Some other title
</span>
</div> </div>
</div> </div>
</div> </div>
@ -61,3 +44,30 @@ exports[`dock when rendered renders 1`] = `
</div> </div>
</body> </body>
`; `;
exports[`DockHost, given rendered given no implementations of dock tabs, renders 1`] = `
<body>
<div>
<div
class="Dock isOpen"
>
<div
class="flex align-center tabs-container"
/>
<div
class="flex align-center toolbar gaps box grow pl-0"
>
<div
class="dock-menu box grow"
/>
</div>
<div
class="tab-content"
style="flex-basis: 420px;"
>
Some content
</div>
</div>
</div>
</body>
`;

11
packages/business-features/dock/src/dock-tab.ts Normal file
View File

@ -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<DockTab>({
id: "dock-tab-injection-token",
});

48
packages/business-features/dock/src/dock.test.tsx
View File

@ -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 { renderFor } from "@k8slens/test-utils";
import { DockHost } from "./dock/dock-host"; import { DockHost } from "./dock/dock-host";
import React from "react"; import React from "react";
import type { RenderResult } from "@testing-library/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 di: DiContainer;
let rendered: RenderResult;
let discover: Discover;
beforeEach(() => { beforeEach(() => {
di = createContainer("some-container"); di = createContainer("some-container");
registerMobX(di);
registerInjectableReact(di);
runInAction(() => {
registerFeature(di, dockFeature);
});
// registerFeature(di, dockFeature); const render = renderFor(di);
rendered = render(<DockHost />);
discover = discoverFor(() => rendered);
}); });
describe("when rendered", () => { it("given no implementations of dock tabs, renders", () => {
let rendered: RenderResult; expect(rendered.baseElement).toMatchSnapshot();
});
describe("given implementations of dock tabs emerge", () => {
beforeEach(() => { beforeEach(() => {
const render = renderFor(di); const dockInjectable = getInjectable({
id: "some-dock-tab",
rendered = render(<DockHost />); instantiate: () => ({
id: "some-dock-tab",
Component: () => <div data-some-dock-tab-test>Some content</div>,
}),
injectionToken: dockTabInjectionToken,
});
runInAction(() => {
di.register(dockInjectable);
});
}); });
it("renders", () => { it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("renders the dock tab", () => {
discover.getSingleElement("some-dock-tab");
});
}); });
}); });

44
packages/business-features/dock/src/dock/dock-host.tsx
View File

@ -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 React from "react";
import { Tab } from "./tab"; 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) => (
<Div _className={["Dock", { isOpen: true }]}> <Div _className={["Dock", { isOpen: true }]}>
<Div _flexParent={{ centeredVertically: true }} className="tabs-container"> <Div _flexParent={{ centeredVertically: true }} className="tabs-container">
<Tab> <Map items={dockTabs.get()}>
<Div _flexParent={{ centeredVertically: true }}> {({ Component }) => (
<Span _wordWrap>Some title</Span> <Tab>
</Div> <Div _flexParent={{ centeredVertically: true }}>
</Tab> <Component />
</Div>
<Tab> </Tab>
<Div _flexParent={{ centeredVertically: true }}> )}
<Span _wordWrap>Some other title</Span> </Map>
</Div>
</Tab>
</Div> </Div>
<Div <Div
@ -34,4 +37,19 @@ export const DockHost = () => (
Some content Some content
</div> </div>
</Div> </Div>
));
interface Dependencies {
dockTabs: IComputedValue<DockTab[]>;
}
export const DockHost = withInjectables<Dependencies>(
NonInjectedDockHost,
{
getProps: (di, props) => ({
dockTabs: di.inject(dockTabsInjectable),
...props,
}),
},
); );

15
packages/business-features/dock/src/dock/dock-tabs.injectable.ts Normal file
View File

@ -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;

8
packages/open-lens/src/renderer/index.ts
View File

@ -4,13 +4,13 @@ import {
rendererExtensionApi as Renderer, rendererExtensionApi as Renderer,
commonExtensionApi as Common, commonExtensionApi as Common,
registerLensCore, registerLensCore,
metricsFeature metricsFeature,
} from "@k8slens/core/renderer"; } from "@k8slens/core/renderer";
import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration"; import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
import { registerFeature } from "@k8slens/feature-core"; import { registerFeature } from "@k8slens/feature-core";
import { import {
applicationFeature, applicationFeature,
startApplicationInjectionToken startApplicationInjectionToken,
} from "@k8slens/application"; } from "@k8slens/application";
import { createContainer } from "@ogre-tools/injectable"; import { createContainer } from "@ogre-tools/injectable";
import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx"; 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 { messagingFeatureForRenderer } from "@k8slens/messaging-for-renderer";
import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts"; import { keyboardShortcutsFeature } from "@k8slens/keyboard-shortcuts";
import { reactApplicationFeature } from "@k8slens/react-application"; import { reactApplicationFeature } from "@k8slens/react-application";
import { dockFeature } from "@k8slens/dock";
const environment = "renderer"; const environment = "renderer";
@ -36,7 +37,8 @@ runInAction(() => {
messagingFeatureForRenderer, messagingFeatureForRenderer,
keyboardShortcutsFeature, keyboardShortcutsFeature,
reactApplicationFeature, reactApplicationFeature,
metricsFeature metricsFeature,
dockFeature,
); );
autoRegister({ autoRegister({