Unverified Commit 541c00cf authored by Sebastian Malton's avatar Sebastian Malton Committed by GitHub
Browse files

Add tooltip for cluster name in sidebar (#4534)

parent 3dd6b432
Showing with 80 additions and 7 deletions
+80 -7
......@@ -57,18 +57,25 @@ describe("<SidebarCluster/>", () => {
});
it("renders cluster avatar and name", () => {
const { getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
const { getByText, getAllByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
expect(getByText("tc")).toBeInTheDocument();
expect(getByText("test-cluster")).toBeInTheDocument();
const v = getAllByText("test-cluster");
expect(v.length).toBeGreaterThan(0);
for (const e of v) {
expect(e).toBeInTheDocument();
}
});
it("renders cluster menu", async () => {
it("renders cluster menu", () => {
const { getByTestId, getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
const link = getByTestId("sidebar-cluster-dropdown");
fireEvent.click(link);
expect(await getByText("Add to Hotbar")).toBeInTheDocument();
expect(getByText("Add to Hotbar")).toBeInTheDocument();
});
});
......@@ -61,4 +61,51 @@
.avatar {
font-weight: 500;
margin-right: 1.25rem;
}
\ No newline at end of file
}
.loadingAvatar {
position: relative;
pointer-events: none;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: transparentize(white, .85);
animation: waiting 1.5s infinite linear;
}
}
.loadingClusterName {
position: relative;
pointer-events: none;
width: 80%;
height: 16px;
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: transparentize(white, .85);
animation: waiting 1.5s infinite linear;
}
}
@keyframes waiting {
0% {
left: 0;
width: 0;
}
50% {
left: 25%;
width: 75%;
}
75% {
left: 100%;
width: 0;
}
}
......@@ -31,6 +31,7 @@ import { Icon } from "../icon";
import { navigate } from "../../navigation";
import { Menu, MenuItem } from "../menu";
import { ConfirmDialog } from "../confirm-dialog";
import { Tooltip } from "../tooltip";
const contextMenu: CatalogEntityContextMenuContext = observable({
menuItems: [],
......@@ -60,11 +61,25 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
}
}
function renderLoadingSidebarCluster() {
return (
<div className={styles.SidebarCluster}>
<Avatar
title="??"
background="var(--halfGray)"
size={40}
className={styles.loadingAvatar}
/>
<div className={styles.loadingClusterName} />
</div>
);
}
export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity }) {
const [opened, setOpened] = useState(false);
if (!clusterEntity) {
return null;
return renderLoadingSidebarCluster();
}
const onMenuOpen = () => {
......@@ -95,6 +110,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
const { metadata, spec } = clusterEntity;
const id = `cluster-${metadata.uid}`;
const tooltipId = `tooltip-${id}`;
return (
<div
......@@ -112,9 +128,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
src={spec.icon?.src}
className={styles.avatar}
/>
<div className={styles.clusterName}>
<div className={styles.clusterName} id={tooltipId}>
{metadata.name}
</div>
<Tooltip targetId={tooltipId}>
{metadata.name}
</Tooltip>
<Icon material="arrow_drop_down" className={styles.dropdown}/>
<Menu
usePortal
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment