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
master asdasd better-release-script bundled-extensions-update catalog-entity-detail-registry consolidate-running-of-setups-on-application-start dependabot/npm_and_yarn/react-select-5.3.2 dependabot/npm_and_yarn/react-window-1.8.7 dependabot/npm_and_yarn/types/node-14.18.16 dependabot/npm_and_yarn/types/webpack-env-1.16.4 di-stores docs/api-all-exported enhancement-node-vertical-metric-bars enhancement/group-app-preferences-by-extension entity-settings extension-auto-update extension-dir extension-discovery-changes extension-startup extensions/lens-version-check feature/auto-update feature/context-providers fix-change-os-theme-crash fix-linter-errors fix-optimise-update-events-from-buffer fix-reload-list-items-on-mount fix-remove-watch-flush-headers fix-reseting-select-value fix-resource-applier fix/consistent-inputs fix/log-store-loading fix/ns-selector-performance-issue fix/pod-logs-storage fix/search_input_autofocus front-end-routes-ocp front-end-routes-ocp-2 front-end-routes-ocp-3 helm-repo-manager helm-repo-manager-removal helm-routes issue-1909 issue-3498 issue-3797 issue-4633 issue-4766 issue-4829 issue-4997 issue-5141 issue-5165 issue-5173 issue-5177 issue-5238 more-places-to-check-for-updates prometheus/victoria-metrics-single release/v5.4 remove-unused-telemetry show-extension-preferences-in-separate-page single-logger squashed-update-injectable testing/virtual-select top-bar-registry turn-on-strict ui-table-empty-state-lines update-bundled-extensions update-electon-builder-to-3-0-8 validate-cluster-model websocket-catalog-sync welcome-menu-registry v5.5.0-beta.0 v5.4.6 v5.4.5 v5.4.4 v5.4.3 v5.4.2 v5.4.1 v5.4.0 v5.4.0-beta.5 v5.4.0-beta.4 v5.4.0-beta.3 v5.4.0-beta.2 v5.4.0-beta.1 v5.4.0-beta.0 v5.4.0-alpha.1 v5.4.0-alpha.0
No related merge requests found
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