feat(cluster-link) rich chip (canonical#2013)

## Done

- Add clusterlink rich chip

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask @Kxiru
or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](https://github.com/canonical/lxd-ui/blob/main/CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
    - The rich chip exists in the following places
        - Replicators detail and list pages.
        - Replicator create/delete modal.
        - Replicator create/edit toast notification.
        - Image registry detail page.

## Screenshots
<img width="1139" height="687" alt="Screenshot from 2026-06-01 13-18-03"
src="https://github.com/user-attachments/assets/55636895-6764-4feb-8b6a-bf6aada65fac"
/>
<img width="1139" height="687" alt="Screenshot from 2026-06-01 13-17-55"
src="https://github.com/user-attachments/assets/9b9aecb6-ccd8-48bf-8668-dbe3e607d62e"
/>

Author: omarelkashef

src/pages/cluster/ClusterLinkAddresses.tsx

@@ -10,7 +10,7 @@ interface Props {
 const ClusterLinkAddresses: FC<Props> = ({ clusterLink }) => {
   const addresses = clusterLink.config["volatile.addresses"];
   if (!addresses || addresses === "") {
-    return null;
+    return "-";
   }
 
   return (

src/pages/cluster/ClusterLinkList.tsx

@@ -28,7 +28,7 @@ import EditClusterLinkPanel from "pages/cluster/panels/EditClusterLinkPanel";
 import { useClusterLinks } from "context/useClusterLinks";
 import ClusterLinkAddresses from "pages/cluster/ClusterLinkAddresses";
 import CreateClusterLink from "pages/cluster/CreateClusterLink";
-import { getLinkIdentity } from "util/clusterLinkStatus";
+import { getLinkIdentity } from "util/clusterLink";
 
 interface Props {
   variant?: "main" | "panel";

src/pages/cluster/ClusterLinkRichChip.tsx

@@ -0,0 +1,49 @@
+import type { FC } from "react";
+import { Tooltip } from "@canonical/react-components";
+import { useIsScreenBelow } from "context/useIsScreenBelow";
+import ResourceLink from "components/ResourceLink";
+import { SMALL_TOOLTIP_BREAKPOINT } from "components/RichTooltipTable";
+import ClusterLinkRichTooltip from "./ClusterLinkRichTooltip";
+import { ROOT_PATH } from "util/rootPath";
+
+interface Props {
+  clusterLink: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+const ClusterLinkRichChip: FC<Props> = ({
+  clusterLink,
+  className,
+  disabled,
+}) => {
+  const showTooltip = !useIsScreenBelow(SMALL_TOOLTIP_BREAKPOINT, "height");
+
+  const url = `${ROOT_PATH}/ui/cluster/links`;
+  const resourceLink = (
+    <ResourceLink
+      type="cluster-link"
+      value={clusterLink}
+      to={url}
+      hasTitle={!showTooltip}
+      className={className}
+      disabled={disabled}
+    />
+  );
+
+  if (!showTooltip) {
+    return <>{resourceLink}</>;
+  }
+
+  return (
+    <Tooltip
+      zIndex={1000}
+      position="right"
+      message={<ClusterLinkRichTooltip clusterLink={clusterLink} />}
+    >
+      {resourceLink}
+    </Tooltip>
+  );
+};
+
+export default ClusterLinkRichChip;

src/pages/cluster/ClusterLinkRichTooltip.tsx

@@ -0,0 +1,81 @@
+import { type FC } from "react";
+import { Spinner } from "@canonical/react-components";
+import { type TooltipRow } from "components/RichTooltipRow";
+import { RichTooltipTable } from "components/RichTooltipTable";
+import { Link } from "react-router-dom";
+import ItemName from "components/ItemName";
+import { useClusterLink } from "context/useClusterLinks";
+import ClusterLinkStatus from "./ClusterLinkStatus";
+import ResourceLabel from "components/ResourceLabel";
+import { ROOT_PATH } from "util/rootPath";
+import ClusterLinkAddresses from "./ClusterLinkAddresses";
+import { getLinkIdentity } from "util/clusterLink";
+import { useIdentities } from "context/useIdentities";
+
+interface Props {
+  clusterLink: string;
+}
+
+const ClusterLinkRichTooltip: FC<Props> = ({ clusterLink }) => {
+  const { data: link, isLoading: isLinkLoading } = useClusterLink(clusterLink);
+  const { data: identities = [] } = useIdentities();
+
+  if (!link && !isLinkLoading) {
+    return (
+      <>
+        Cluster link <ResourceLabel type="cluster-link" value={clusterLink} />{" "}
+        not found
+      </>
+    );
+  }
+
+  const identity = getLinkIdentity(identities, clusterLink);
+  const authGroupCount = identity?.groups?.length ?? 0;
+
+  const rows: TooltipRow[] = [
+    {
+      title: "Cluster link",
+      value: link ? (
+        <Link
+          to={`${ROOT_PATH}/ui/cluster/links`}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <ItemName item={{ name: clusterLink }} />
+        </Link>
+      ) : (
+        <Spinner />
+      ),
+      valueTitle: clusterLink,
+    },
+    {
+      title: "Status",
+      value: link ? <ClusterLinkStatus link={link} /> : "-",
+      className: "status-row",
+    },
+    {
+      title: "Description",
+      value: link?.description || "-",
+      valueTitle: link?.description || "",
+    },
+    {
+      title: "Type",
+      value: link?.type || "-",
+    },
+    {
+      title: "Addresses",
+      value: link ? <ClusterLinkAddresses clusterLink={link} /> : "-",
+    },
+    {
+      title: "Auth groups",
+      value: authGroupCount,
+    },
+  ];
+
+  return (
+    <RichTooltipTable rows={rows} className="cluster-link-rich-tooltip-table" />
+  );
+};
+
+export default ClusterLinkRichTooltip;

src/pages/cluster/ClusterLinkStatus.tsx

@@ -3,7 +3,7 @@ import { Icon, Spinner } from "@canonical/react-components";
 import type { LxdClusterLink, StatusCaption } from "types/cluster";
 import { useClusterLinkState } from "context/useClusterLinks";
 import { useIdentities } from "context/useIdentities";
-import { getClusterLinksStatus, getLinkIdentity } from "util/clusterLinkStatus";
+import { getClusterLinksStatus, getLinkIdentity } from "util/clusterLink";
 
 interface Props {
   link: LxdClusterLink;

src/pages/cluster/ReplicatorDetail.tsx

@@ -3,15 +3,14 @@ import { useParams } from "react-router-dom";
 import { Col, CustomLayout, Row, Spinner } from "@canonical/react-components";
 import NotFound from "components/NotFound";
 import NotificationRow from "components/NotificationRow";
-import ResourceLink from "components/ResourceLink";
 import { useClusterLink } from "context/useClusterLinks";
 import { useReplicator } from "context/useReplicators";
 import ClusterLinkStatus from "pages/cluster/ClusterLinkStatus";
 import ReplicatorDetailHeader from "pages/cluster/ReplicatorDetailHeader";
 import ReplicatorRunTime from "pages/cluster/ReplicatorRunTime";
 import ReplicatorStatus from "pages/cluster/ReplicatorStatus";
 import ProjectRichChip from "pages/projects/ProjectRichChip";
-import { ROOT_PATH } from "util/rootPath";
+import ClusterLinkRichChip from "./ClusterLinkRichChip";
 
 const ReplicatorDetail: FC = () => {
   const { project, name } = useParams<{
@@ -92,10 +91,8 @@ const ReplicatorDetail: FC = () => {
                     <td>
                       {replicator.config?.cluster ? (
                         <div className="u-flex">
-                          <ResourceLink
-                            type="cluster-link"
-                            value={replicator.config?.cluster}
-                            to={`${ROOT_PATH}/ui/cluster/links`}
+                          <ClusterLinkRichChip
+                            clusterLink={replicator.config?.cluster}
                           />
                         </div>
                       ) : (

src/pages/cluster/ReplicatorList.tsx

@@ -22,7 +22,7 @@ import ReplicatorStatus from "pages/cluster/ReplicatorStatus";
 import { useDocs } from "context/useDocs";
 import ProjectRichChip from "pages/projects/ProjectRichChip";
 import { ROOT_PATH } from "util/rootPath";
-import ResourceLink from "components/ResourceLink";
+import ClusterLinkRichChip from "./ClusterLinkRichChip";
 
 interface Props {
   variant?: "main" | "panel";
@@ -93,10 +93,8 @@ const ReplicatorList: FC<Props> = ({ variant = "main" }) => {
         },
         {
           content: (
-            <ResourceLink
-              type="cluster-link"
-              value={replicator.config?.cluster || "unknown"}
-              to={`${ROOT_PATH}/ui/cluster/links`}
+            <ClusterLinkRichChip
+              clusterLink={replicator.config?.cluster || "unknown"}
             />
           ),
           role: "cell",

src/pages/cluster/actions/DeleteClusterLinkBtn.tsx

@@ -8,11 +8,10 @@ import {
   useNotify,
   useToastNotification,
 } from "@canonical/react-components";
-import ResourceLink from "components/ResourceLink";
 import type { LxdClusterLink } from "types/cluster";
 import ResourceLabel from "components/ResourceLabel";
-import { ROOT_PATH } from "util/rootPath";
 import { useClusterLinkEntitlements } from "util/entitlements/cluster-links";
+import ClusterLinkRichChip from "pages/cluster/ClusterLinkRichChip";
 
 interface Props {
   clusterLink: LxdClusterLink;
@@ -34,11 +33,7 @@ const DeleteClusterLinkBtn: FC<Props> = ({ clusterLink }) => {
         toastNotify.success(
           <>
             Cluster link{" "}
-            <ResourceLink
-              type="cluster-link"
-              value={clusterLink.name}
-              to={`${ROOT_PATH}/ui/cluster/links`}
-            />{" "}
+            <ResourceLabel type="cluster-link" value={clusterLink.name} />{" "}
             deleted.
           </>,
         );
@@ -66,7 +61,7 @@ const DeleteClusterLinkBtn: FC<Props> = ({ clusterLink }) => {
         children: (
           <p>
             This will permanently delete cluster link{" "}
-            <ResourceLabel type="cluster-link" value={clusterLink.name} bold />.
+            <ClusterLinkRichChip clusterLink={clusterLink.name} />.
           </p>
         ),
         confirmButtonLabel: canDelete

src/pages/cluster/modals/CreateClusterLinkModal.tsx

@@ -7,9 +7,9 @@ import {
   Notification,
   Tabs,
 } from "@canonical/react-components";
-import ResourceLabel from "components/ResourceLabel";
 import CodeSnippetWithCopyButton from "components/CodeSnippetWithCopyButton";
 import ConfirmationCheckbox from "components/ConfirmationCheckbox";
+import ClusterLinkRichChip from "../ClusterLinkRichChip";
 
 interface Props {
   onClose: () => void;
@@ -26,9 +26,7 @@ const CreateClusterLinkModal: FC<Props> = ({ onClose, token, linkName }) => {
       className="create-cluster-link"
       title={
         <>
-          Cluster link{" "}
-          <ResourceLabel type="cluster-link" value={linkName} bold truncate />{" "}
-          created
+          Cluster link <ClusterLinkRichChip clusterLink={linkName} /> created
         </>
       }
       buttonRow={[
@@ -62,8 +60,8 @@ const CreateClusterLinkModal: FC<Props> = ({ onClose, token, linkName }) => {
           />
           <Notification severity="caution" title="Copy the trust token">
             The trust token can be used to establish the cluster link{" "}
-            <ResourceLabel type="cluster-link" value={linkName} bold /> on the
-            target cluster. <br />
+            <ClusterLinkRichChip clusterLink={linkName} /> on the target
+            cluster. <br />
             Make sure to copy it now as you will not be able to see this again.
           </Notification>
           <Accordion

src/pages/cluster/panels/CreateClusterLinkPanel.tsx

@@ -17,11 +17,10 @@ import { useFormik } from "formik";
 import { queryKeys } from "util/queryKeys";
 import { createClusterLink } from "api/cluster-links";
 import { base64EncodeObject, checkDuplicateName } from "util/helpers";
-import ResourceLink from "components/ResourceLink";
 import ClusterLinkForm, {
   type ClusterLinkFormValues,
 } from "pages/cluster/ClusterLinkForm";
-import { ROOT_PATH } from "util/rootPath";
+import ClusterLinkRichChip from "../ClusterLinkRichChip";
 
 interface Props {
   onSuccess: (identityName: string, token: string) => void;
@@ -83,12 +82,7 @@ const CreateClusterLinkPanel: FC<Props> = ({ onSuccess }) => {
           } else {
             toastNotify.success(
               <>
-                Cluster link{" "}
-                <ResourceLink
-                  type="cluster-link"
-                  value={values.name}
-                  to={`${ROOT_PATH}/ui/cluster/links`}
-                />{" "}
+                Cluster link <ClusterLinkRichChip clusterLink={values.name} />{" "}
                 created.
               </>,
             );