Add tooltip for cluster name in sidebar (#4534)

src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx

@@ -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();
   });
 });
 

src/renderer/components/layout/sidebar-cluster.module.css

@@ -61,4 +61,51 @@
 .avatar {
   font-weight: 500;
   margin-right: 1.25rem;
-}
+}
+
+.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;
+  }
+}

src/renderer/components/layout/sidebar-cluster.tsx

@@ -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