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 content for dock tab

Browse Source 
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 2023-04-14 10:44:41 +03:00 committed by Janne Savolainen
parent 08489e4ab7
commit e216c15512
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
7 changed files with 95 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,42 +3,24 @@
exports[`DockHost, given rendered given implementations of dock tabs emerge renders 1`] = ` exports[`DockHost, given rendered given implementations of dock tabs emerge renders 1`] = `
<body> <body>
<div> <div>
<div <div>
class="Dock isOpen"
>
<div <div
class="flex align-center tabs-container" class="flex align-center"
> >
<div <div>
class="Tab flex gaps align-center"
>
<div <div
class="label" data-some-dock-tab-title-test="true"
> >
<div Some title
class="flex align-center"
>
<div
data-some-dock-tab-test="true"
>
Some content
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div <div>
class="flex align-center toolbar gaps box grow pl-0"
>
<div <div
class="dock-menu box grow" data-some-dock-tab-content-test="true"
/> >
</div> Some content
<div </div>
class="tab-content"
style="flex-basis: 420px;"
>
Some content
</div> </div>
</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`] = ` exports[`DockHost, given rendered given no implementations of dock tabs, renders 1`] = `
<body> <body>
<div> <div>
<div <div>
class="Dock isOpen"
>
<div <div
class="flex align-center tabs-container" class="flex align-center"
/> />
<div <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> </div>
</body> </body>

3
packages/business-features/dock/src/dock-tab.ts
View File

@ -3,7 +3,8 @@ import { getInjectionToken } from "@ogre-tools/injectable";
export type DockTab = { export type DockTab = {
id: string; id: string;
Component: React.ComponentType; TitleComponent: React.ComponentType;
ContentComponent: React.ComponentType;
}; };
export const dockTabInjectionToken = getInjectionToken<DockTab>({ export const dockTabInjectionToken = getInjectionToken<DockTab>({

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

@ -31,19 +31,20 @@ describe("DockHost, given rendered", () => {
describe("given implementations of dock tabs emerge", () => { describe("given implementations of dock tabs emerge", () => {
beforeEach(() => { beforeEach(() => {
const dockInjectable = getInjectable({ const dockTabInjectable = getInjectable({
id: "some-dock-tab", id: "some-dock-tab",
instantiate: () => ({ instantiate: () => ({
id: "some-dock-tab", 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, injectionToken: dockTabInjectionToken,
}); });
runInAction(() => { runInAction(() => {
di.register(dockInjectable); di.register(dockTabInjectable);
}); });
}); });
@ -51,8 +52,12 @@ describe("DockHost, given rendered", () => {
expect(rendered.baseElement).toMatchSnapshot(); expect(rendered.baseElement).toMatchSnapshot();
}); });
it("renders the dock tab", () => { it("renders the title of dock tab", () => {
discover.getSingleElement("some-dock-tab"); discover.getSingleElement("some-dock-tab-title");
});
it("renders the content of the dock tab", () => {
discover.getSingleElement("some-dock-tab-content");
}); });
}); });
}); });

25
packages/business-features/dock/src/dock/active-dock-tab.injectable.ts Normal file
View File

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

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

@ -2,54 +2,46 @@ import type { IComputedValue } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import React from "react"; import React from "react";
import { Tab } from "./tab"; import { Tabs } from "./tabs";
import { Div, Map } from "@k8slens/ui-components"; import { Div, Map } from "@k8slens/ui-components";
import dockTabsInjectable from "./dock-tabs.injectable"; import dockTabsInjectable from "./dock-tabs.injectable";
import type { DockTab } from "../dock-tab"; import type { DockTab } from "../dock-tab";
import activeDockTabInjectable from "./active-dock-tab.injectable";
const NonInjectedDockHost = observer(({ dockTabs }: Dependencies) => ( const NonInjectedDockHost = observer(({ dockTabs, activeDockTab }: Dependencies) => {
<Div _className={["Dock", { isOpen: true }]}> const { ContentComponent: DockTabContent } = activeDockTab.get();
<Div _flexParent={{ centeredVertically: true }} className="tabs-container">
<Map items={dockTabs.get()}> return (
{({ Component }) => ( <Div>
<Tab> <Tabs>
<Div _flexParent={{ centeredVertically: true }}> <Map items={dockTabs.get()}>
<Component /> {({ TitleComponent }) => (
</Div> <Tabs.Tab>
</Tab> <TitleComponent />
)} </Tabs.Tab>
</Map> )}
</Map>
</Tabs>
<Div>
<DockTabContent />
</Div>
</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 { interface Dependencies {
dockTabs: IComputedValue<DockTab[]>; dockTabs: IComputedValue<DockTab[]>;
activeDockTab: IComputedValue<DockTab>;
} }
export const DockHost = withInjectables<Dependencies>( export const DockHost = withInjectables<Dependencies>(
NonInjectedDockHost, NonInjectedDockHost,
{ {
getProps: (di, props) => ({ getProps: (di) => ({
dockTabs: di.inject(dockTabsInjectable), dockTabs: di.inject(dockTabsInjectable),
...props, activeDockTab: di.inject(activeDockTabInjectable),
}), }),
}, },
); );

14
packages/business-features/dock/src/dock/tab.tsx
View File

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