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

Styling subnamespace badge

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-02-01 10:02:22 +03:00
parent 270f7f839d
commit e6ab47f1eb
4 changed files with 56 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/core/src/renderer/components/+namespaces/__snapshots__/namespace-tree-view.test.tsx.snap
View File

@ -31,7 +31,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -72,7 +72,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -86,6 +86,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
> >
level-deep-child-a level-deep-child-a
</div> </div>
</div> </div>
<ul <ul
@ -117,7 +118,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -131,6 +132,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
> >
level-deep-child-b level-deep-child-b
</div> </div>
</div> </div>
<ul <ul
@ -158,7 +160,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -172,6 +174,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-18 MuiTypography-body1"
> >
level-deep-subchild-a level-deep-subchild-a
</div> </div>
</div> </div>
<ul <ul
@ -233,7 +236,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -274,7 +277,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -288,6 +291,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1"
> >
team-a team-a
</div> </div>
</div> </div>
<ul <ul
@ -318,7 +322,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -332,6 +336,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-6 MuiTypography-body1"
> >
team-b team-b
</div> </div>
</div> </div>
<ul <ul
@ -389,7 +394,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -430,7 +435,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -444,7 +449,9 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1"
> >
service-1 service-1
<span <span
class="subnamespaceBadge"
data-testid="subnamespace-badge-for-service-1-1" data-testid="subnamespace-badge-for-service-1-1"
> >
S S
@ -479,7 +486,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -493,6 +500,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1" class="MuiTypography-root MuiTreeItem-label Component-label-9 MuiTypography-body1"
> >
team-c team-c
</div> </div>
</div> </div>
<ul <ul
@ -555,7 +563,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders one namespace
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit" class="MuiSvgIcon-root close"
focusable="false" focusable="false"
style="width: 14px; height: 14px;" style="width: 14px; height: 14px;"
viewBox="0 0 24 24" viewBox="0 0 24 24"

14
packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx
View File

@ -1,4 +1,4 @@
import { alpha, SvgIcon, withStyles } from "@material-ui/core"; import { SvgIcon, withStyles } from "@material-ui/core";
import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab"; import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import React from "react"; import React from "react";
@ -9,6 +9,7 @@ import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.inject
import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable"; import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
import type { NamespaceStore } from "./store"; import type { NamespaceStore } from "./store";
import namespaceStoreInjectable from "./store.injectable"; import namespaceStoreInjectable from "./store.injectable";
import { SubnamespaceBadge } from "./subnamespace-badge";
interface NamespaceTreeViewProps { interface NamespaceTreeViewProps {
root: Namespace; root: Namespace;
@ -23,14 +24,6 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]); const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
const expandedItems = hierarchicalNamespaces.map(ns => `namespace-${ns.getId()}`); const expandedItems = hierarchicalNamespaces.map(ns => `namespace-${ns.getId()}`);
function renderBadge(namespace: Namespace) {
if (!namespace.getAnnotations().find(annotation => annotation.includes("hnc.x-k8s.io/subnamespace-of"))) {
return null;
}
return <span data-testid={`subnamespace-badge-for-${namespace.getId()}`}>S</span>;
}
function renderChildren(parent: Namespace) { function renderChildren(parent: Namespace) {
const children = hierarchicalNamespaces.filter(ns => const children = hierarchicalNamespaces.filter(ns =>
ns.getLabels().find(label => label === `${parent.getName()}.tree.hnc.x-k8s.io/depth=1`) ns.getLabels().find(label => label === `${parent.getName()}.tree.hnc.x-k8s.io/depth=1`)
@ -46,7 +39,8 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
<Link key={child.getId()} to={getDetailsUrl(child.selfLink)}> <Link key={child.getId()} to={getDetailsUrl(child.selfLink)}>
{child.getName()} {child.getName()}
</Link> </Link>
{renderBadge(child)} {" "}
<SubnamespaceBadge namespace={child} />
</> </>
)} )}
> >

9
packages/core/src/renderer/components/+namespaces/subnamespace-badge.module.scss Normal file
View File

@ -0,0 +1,9 @@
.subnamespaceBadge {
border-radius: 3px;
padding: 0px 6px;
background-color: var(--halfGray);
color: white;
display: inline-block;
font-size: 0.7rem;
font-weight: bold;
}

24
packages/core/src/renderer/components/+namespaces/subnamespace-badge.tsx Normal file
View File

@ -0,0 +1,24 @@
import styles from "./subnamespace-badge.module.scss";
import React from "react";
import type { Namespace } from "../../../common/k8s-api/endpoints";
interface SubnamespaceBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
namespace: Namespace;
}
export function SubnamespaceBadge({ namespace, ...other }: SubnamespaceBadgeProps) {
if (!namespace.getAnnotations().find(annotation => annotation.includes("hnc.x-k8s.io/subnamespace-of"))) {
return null;
}
return (
<span
className={styles.subnamespaceBadge}
data-testid={`subnamespace-badge-for-${namespace.getId()}`}
{...other}
>
S
</span>
);
}