mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Render namespace children
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
0e9a6fbbe4
commit
2d2f2888cd
@ -1,5 +1,133 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace with 2 children namespaces 1`] = `
|
||||
<body>
|
||||
<div>
|
||||
<div
|
||||
data-testid="namespace-tree-view"
|
||||
>
|
||||
<div
|
||||
class="DrawerTitle title"
|
||||
>
|
||||
Tree View
|
||||
</div>
|
||||
<ul
|
||||
aria-multiselectable="false"
|
||||
class="MuiTreeView-root"
|
||||
role="tree"
|
||||
>
|
||||
<li
|
||||
aria-expanded="true"
|
||||
class="MuiTreeItem-root Mui-expanded"
|
||||
data-testid="namespace-acme-org-1"
|
||||
role="treeitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-content"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-iconContainer Component-iconContainer-3"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
|
||||
>
|
||||
acme-org
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="MuiCollapse-root MuiTreeItem-group Component-group-4 MuiCollapse-entered"
|
||||
role="group"
|
||||
style="min-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapper"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapperInner"
|
||||
>
|
||||
<li
|
||||
class="MuiTreeItem-root"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-content"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-iconContainer Component-iconContainer-3"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
|
||||
>
|
||||
team-a
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="MuiTreeItem-root"
|
||||
role="treeitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-content"
|
||||
>
|
||||
<div
|
||||
class="MuiTreeItem-iconContainer Component-iconContainer-3"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
|
||||
>
|
||||
team-b
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
exports[`<NamespaceTreeView /> once the subscribe resolves renders null with regular namespace 1`] = `
|
||||
<body>
|
||||
<div />
|
||||
@ -23,9 +151,8 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders one namespace
|
||||
role="tree"
|
||||
>
|
||||
<li
|
||||
aria-expanded="false"
|
||||
class="MuiTreeItem-root"
|
||||
data-testid="namespace-acme-group-1"
|
||||
class="MuiTreeItem-root Mui-expanded"
|
||||
data-testid="namespace-single-root-1"
|
||||
role="treeitem"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -37,22 +164,35 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders one namespace
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z"
|
||||
d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
|
||||
>
|
||||
acme-group
|
||||
single-root
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="MuiCollapse-root MuiTreeItem-group Component-group-2 MuiCollapse-entered"
|
||||
role="group"
|
||||
style="min-height: 0px;"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapper"
|
||||
>
|
||||
<div
|
||||
class="MuiCollapse-wrapperInner"
|
||||
/>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import type { AsyncFnMock } from "@async-fn/jest";
|
||||
import asyncFn from "@async-fn/jest";
|
||||
import type { DiContainer } from "@ogre-tools/injectable";
|
||||
import _ from "lodash";
|
||||
import React from "react";
|
||||
import directoryForKubeConfigsInjectable from "../../../common/app-paths/directory-for-kube-configs/directory-for-kube-configs.injectable";
|
||||
import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
|
||||
@ -20,7 +21,7 @@ import { NamespaceTreeView } from "./namespace-tree-view";
|
||||
import type { NamespaceStore } from "./store";
|
||||
import namespaceStoreInjectable from "./store.injectable";
|
||||
|
||||
function createNamespace(name: string): Namespace {
|
||||
function createNamespace(name: string, labels?: Record<string, string>): Namespace {
|
||||
return new Namespace({
|
||||
apiVersion: "v1",
|
||||
kind: "Namespace",
|
||||
@ -29,10 +30,35 @@ function createNamespace(name: string): Namespace {
|
||||
resourceVersion: "1",
|
||||
selfLink: `/api/v1/namespaces/${name}`,
|
||||
uid: `${name}-1`,
|
||||
labels: {
|
||||
...labels
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const singleRoot = createNamespace("single-root", {
|
||||
"hnc.x-k8s.io/included-namespace": "true",
|
||||
});
|
||||
|
||||
const acmeGroup = createNamespace("acme-org", {
|
||||
"hnc.x-k8s.io/included-namespace": "true",
|
||||
});
|
||||
|
||||
const teamA = createNamespace("team-a", {
|
||||
"hnc.x-k8s.io/included-namespace": "true",
|
||||
"acme-org.tree.hnc.x-k8s.io/depth": "1",
|
||||
"kubernetes.io/metadata.name": "team-a",
|
||||
"team-a.tree.hnc.x-k8s.io/depth": "0",
|
||||
});
|
||||
|
||||
const teamB = createNamespace("team-b", {
|
||||
"hnc.x-k8s.io/included-namespace": "true",
|
||||
"acme-org.tree.hnc.x-k8s.io/depth": "1",
|
||||
"kubernetes.io/metadata.name": "team-b",
|
||||
"team-b.tree.hnc.x-k8s.io/depth": "0",
|
||||
});
|
||||
|
||||
describe("<NamespaceTreeView />", () => {
|
||||
let di: DiContainer;
|
||||
let render: DiRender;
|
||||
@ -87,14 +113,9 @@ describe("<NamespaceTreeView />", () => {
|
||||
createNamespace("test-3"),
|
||||
createNamespace("test-4"),
|
||||
createNamespace("test-5"),
|
||||
createNamespace("test-6"),
|
||||
createNamespace("test-7"),
|
||||
createNamespace("test-8"),
|
||||
createNamespace("test-9"),
|
||||
createNamespace("test-10"),
|
||||
createNamespace("test-11"),
|
||||
createNamespace("test-12"),
|
||||
createNamespace("test-13"),
|
||||
acmeGroup,
|
||||
teamA,
|
||||
teamB,
|
||||
],
|
||||
})));
|
||||
});
|
||||
@ -106,22 +127,15 @@ describe("<NamespaceTreeView />", () => {
|
||||
});
|
||||
|
||||
it("renders one namespace without children", () => {
|
||||
const ns = new Namespace({
|
||||
apiVersion: "v1",
|
||||
kind: "Namespace",
|
||||
metadata: {
|
||||
name: "acme-group",
|
||||
resourceVersion: "1",
|
||||
selfLink: `/api/v1/namespaces/acme-group`,
|
||||
uid: `acme-group-1`,
|
||||
labels: {
|
||||
"hnc.x-k8s.io/included-namespace": "true",
|
||||
}
|
||||
},
|
||||
});
|
||||
const result = render(<NamespaceTreeView root={ns} />);
|
||||
const result = render(<NamespaceTreeView root={singleRoot} />);
|
||||
|
||||
expect(result.baseElement).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders namespace with 2 children namespaces", () => {
|
||||
const result = render(<NamespaceTreeView root={acmeGroup} />);
|
||||
|
||||
expect(result.baseElement).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
});
|
||||
@ -15,11 +15,19 @@ interface Dependencies {
|
||||
namespaceStore: NamespaceStore;
|
||||
}
|
||||
|
||||
function NonInjectableNamespaceTreeView({ root }: Dependencies & NamespaceTreeViewProps) {
|
||||
function NonInjectableNamespaceTreeView({ root, namespaceStore }: Dependencies & NamespaceTreeViewProps) {
|
||||
const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
|
||||
|
||||
function renderChildren(parent: Namespace) {
|
||||
return (
|
||||
<div>no children</div>
|
||||
const children = hierarchicalNamespaces.filter(ns =>
|
||||
ns.getLabels().find(label => label === `${parent.getName()}.tree.hnc.x-k8s.io/depth=1`)
|
||||
);
|
||||
|
||||
return children.map(child => (
|
||||
<StyledTreeItem key={`namespace-${child.getId()}`} nodeId={`namespace-${child.getId()}`} label={child.getName()}>
|
||||
{renderChildren(child)}
|
||||
</StyledTreeItem>
|
||||
));
|
||||
}
|
||||
|
||||
if (!root.getLabels().find(label => label === "hnc.x-k8s.io/included-namespace=true")) {
|
||||
@ -30,6 +38,7 @@ function NonInjectableNamespaceTreeView({ root }: Dependencies & NamespaceTreeVi
|
||||
<div data-testid="namespace-tree-view">
|
||||
<DrawerTitle>Tree View</DrawerTitle>
|
||||
<TreeView
|
||||
defaultExpanded={[`namespace-${root.getId()}`]}
|
||||
defaultCollapseIcon={<MinusSquare />}
|
||||
defaultExpandIcon={<PlusSquare />}
|
||||
defaultEndIcon={<CloseSquare />}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user