mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Feat: Introduce minimal content for dock tab
Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
This commit is contained in:
Iku-turso
Janne Savolainen
parent
08489e4ab7
commit
e216c15512
@ -3,42 +3,24 @@
|
||||
exports[`DockHost, given rendered given implementations of dock tabs emerge renders 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="Dock isOpen"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="flex align-center tabs-container"
|
||||
class="flex align-center"
|
||||
>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="label"
|
||||
data-some-dock-tab-title-test="true"
|
||||
>
|
||||
<div
|
||||
class="flex align-center"
|
||||
>
|
||||
<div
|
||||
data-some-dock-tab-test="true"
|
||||
>
|
||||
Some content
|
||||
</div>
|
||||
</div>
|
||||
Some title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex align-center toolbar gaps box grow pl-0"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="dock-menu box grow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="tab-content"
|
||||
style="flex-basis: 420px;"
|
||||
>
|
||||
Some content
|
||||
data-some-dock-tab-content-test="true"
|
||||
>
|
||||
Some content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
class="Dock isOpen"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="flex align-center tabs-container"
|
||||
class="flex align-center"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -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<DockTab>({
|
||||
|
||||
@ -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: () => <div data-some-dock-tab-test>Some content</div>,
|
||||
TitleComponent: () => <div data-some-dock-tab-title-test>Some title</div>,
|
||||
ContentComponent: () => <div data-some-dock-tab-content-test>Some content</div>,
|
||||
}),
|
||||
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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;
|
||||
@ -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) => (
|
||||
<Div _className={["Dock", { isOpen: true }]}>
|
||||
<Div _flexParent={{ centeredVertically: true }} className="tabs-container">
|
||||
<Map items={dockTabs.get()}>
|
||||
{({ Component }) => (
|
||||
<Tab>
|
||||
<Div _flexParent={{ centeredVertically: true }}>
|
||||
<Component />
|
||||
</Div>
|
||||
</Tab>
|
||||
)}
|
||||
</Map>
|
||||
const NonInjectedDockHost = observer(({ dockTabs, activeDockTab }: Dependencies) => {
|
||||
const { ContentComponent: DockTabContent } = activeDockTab.get();
|
||||
|
||||
return (
|
||||
<Div>
|
||||
<Tabs>
|
||||
<Map items={dockTabs.get()}>
|
||||
{({ TitleComponent }) => (
|
||||
<Tabs.Tab>
|
||||
<TitleComponent />
|
||||
</Tabs.Tab>
|
||||
)}
|
||||
</Map>
|
||||
</Tabs>
|
||||
|
||||
<Div>
|
||||
<DockTabContent />
|
||||
</Div>
|
||||
</Div>
|
||||
|
||||
<Div
|
||||
_flexParent={{ centeredVertically: true }}
|
||||
_className={[
|
||||
"toolbar gaps box grow",
|
||||
{
|
||||
"pl-0": true,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div className="dock-menu box grow"></div>
|
||||
</Div>
|
||||
|
||||
<div className={`tab-content`} style={{ flexBasis: 420 }}>
|
||||
Some content
|
||||
</div>
|
||||
</Div>
|
||||
));
|
||||
);
|
||||
});
|
||||
|
||||
interface Dependencies {
|
||||
dockTabs: IComputedValue<DockTab[]>;
|
||||
activeDockTab: IComputedValue<DockTab>;
|
||||
}
|
||||
|
||||
export const DockHost = withInjectables<Dependencies>(
|
||||
NonInjectedDockHost,
|
||||
|
||||
{
|
||||
getProps: (di, props) => ({
|
||||
getProps: (di) => ({
|
||||
dockTabs: di.inject(dockTabsInjectable),
|
||||
...props,
|
||||
activeDockTab: di.inject(activeDockTabInjectable),
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
@ -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 (
|
||||
<Div _className="Tab flex gaps align-center">
|
||||
<div className="label">{children}</div>
|
||||
</Div>
|
||||
);
|
||||
};
|
||||
20
packages/business-features/dock/src/dock/tabs.tsx
Normal file
20
packages/business-features/dock/src/dock/tabs.tsx
Normal file
@ -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) => (
|
||||
<Div _flexParent={{ centeredVertically: true }}>{children}</Div>
|
||||
);
|
||||
|
||||
export interface TabProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const Tab = ({ children }: TabProps) => (
|
||||
<Div>{children}</Div>
|
||||
);
|
||||
|
||||
Tabs.Tab = Tab;
|
||||
Loading…
Reference in New Issue
Block a user