mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Styling subnamespace badge
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
270f7f839d
commit
e6ab47f1eb
@ -31,7 +31,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
@ -72,7 +72,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
level-deep-child-a
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -117,7 +118,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
level-deep-child-b
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -158,7 +160,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders 2 levels deep
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
level-deep-subchild-a
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -233,7 +236,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
@ -274,7 +277,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
team-a
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -318,7 +322,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
team-b
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -389,7 +394,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
@ -430,7 +435,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
service-1
|
||||
|
||||
<span
|
||||
class="subnamespaceBadge"
|
||||
data-testid="subnamespace-badge-for-service-1-1"
|
||||
>
|
||||
S
|
||||
@ -479,7 +486,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders namespace wit
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
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"
|
||||
>
|
||||
team-c
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
@ -555,7 +563,7 @@ exports[`<NamespaceTreeView /> once the subscribe resolves renders one namespace
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root close MuiSvgIcon-fontSizeInherit"
|
||||
class="MuiSvgIcon-root close"
|
||||
focusable="false"
|
||||
style="width: 14px; height: 14px;"
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@ -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 { withInjectables } from "@ogre-tools/injectable-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 type { NamespaceStore } from "./store";
|
||||
import namespaceStoreInjectable from "./store.injectable";
|
||||
import { SubnamespaceBadge } from "./subnamespace-badge";
|
||||
|
||||
interface NamespaceTreeViewProps {
|
||||
root: Namespace;
|
||||
@ -23,14 +24,6 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
|
||||
const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
|
||||
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) {
|
||||
const children = hierarchicalNamespaces.filter(ns =>
|
||||
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)}>
|
||||
{child.getName()}
|
||||
</Link>
|
||||
{renderBadge(child)}
|
||||
{" "}
|
||||
<SubnamespaceBadge namespace={child} />
|
||||
</>
|
||||
)}
|
||||
>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user