From a354f9b36b2b6f3dce9ace4e5b576fe038e65af8 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 31 Jul 2023 19:21:30 +1000
Subject: [PATCH] Use TagLink for parent/child tag badges (#3968)

* Use TagLink for parent/child tag badges
* Place hover on bottom
---
 .../components/Tags/TagDetails/TagDetailsPanel.tsx    | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
index 2f0df5ac80f..af5f588b6db 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { Badge } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { TagLink } from "src/components/Shared/TagLink";
 import { DetailItem } from "src/components/Shared/DetailItem";
 import * as GQL from "src/core/generated-graphql";
 
@@ -18,9 +17,7 @@ export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag, fullWidth }) => {
     return (
       <>
         {tag.parents.map((p) => (
-          <Badge key={p.id} className="tag-item" variant="secondary">
-            <Link to={`/tags/${p.id}`}>{p.name}</Link>
-          </Badge>
+          <TagLink key={p.id} tag={p} hoverPlacement="bottom" />
         ))}
       </>
     );
@@ -34,9 +31,7 @@ export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag, fullWidth }) => {
     return (
       <>
         {tag.children.map((c) => (
-          <Badge key={c.id} className="tag-item" variant="secondary">
-            <Link to={`/tags/${c.id}`}>{c.name}</Link>
-          </Badge>
+          <TagLink key={c.id} tag={c} hoverPlacement="bottom" />
         ))}
       </>
     );