From 38fd519fc10207de46c418c2cd16cafc22401792 Mon Sep 17 00:00:00 2001
From: Patrick Knight <pknight@redhat.com>
Date: Mon, 9 Jan 2023 14:36:31 -0500
Subject: [PATCH] add highlighting of legend item

Signed-off-by: Patrick Knight <pknight@redhat.com>
---
 .changeset/metal-ducks-promise.md                      |  5 +++++
 plugins/tech-radar/src/components/Radar/utils.ts       |  1 +
 .../src/components/RadarLegend/RadarLegend.tsx         |  8 ++++++++
 .../src/components/RadarLegend/RadarLegendLink.tsx     | 10 ++++++++--
 .../src/components/RadarLegend/RadarLegendRing.tsx     |  1 +
 5 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/metal-ducks-promise.md

diff --git a/.changeset/metal-ducks-promise.md b/.changeset/metal-ducks-promise.md
new file mode 100644
index 0000000000..7d39edff44
--- /dev/null
+++ b/.changeset/metal-ducks-promise.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': minor
+---
+
+Add highlighting of legend item and show bubble on hover within the Tech Radar
diff --git a/plugins/tech-radar/src/components/Radar/utils.ts b/plugins/tech-radar/src/components/Radar/utils.ts
index 7fff038023..5c32207268 100644
--- a/plugins/tech-radar/src/components/Radar/utils.ts
+++ b/plugins/tech-radar/src/components/Radar/utils.ts
@@ -141,6 +141,7 @@ export const adjustEntries = (
         activeEntry && entry.id === activeEntry?.id
           ? entry.ring.color
           : color(entry.ring.color).desaturate(0.5).lighten(0.1).string(),
+      active: activeEntry && entry.id === activeEntry?.id ? true : false,
     };
   });
 
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
index 6177041c70..4ca0350e7b 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
@@ -68,8 +68,16 @@ const useStyles = makeStyles<Theme>(theme => ({
     userSelect: 'none',
     fontSize: '11px',
   },
+  activeEntry: {
+    pointerEvents: 'visiblePainted',
+    userSelect: 'none',
+    fontSize: '11px',
+    background: '#6f6f6f',
+    color: '#FFF',
+  },
   entryLink: {
     pointerEvents: 'visiblePainted',
+    cursor: 'pointer',
   },
 }));
 
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx
index 3ed1b7574a..f75f23c12b 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendLink.tsx
@@ -23,6 +23,7 @@ type RadarLegendLinkProps = {
   description?: string;
   title?: string;
   classes: ClassNameMap<string>;
+  active?: boolean;
 };
 
 export const RadarLegendLink = ({
@@ -30,6 +31,7 @@ export const RadarLegendLink = ({
   description,
   title,
   classes,
+  active,
 }: RadarLegendLinkProps) => {
   const [open, setOpen] = React.useState(false);
 
@@ -55,7 +57,9 @@ export const RadarLegendLink = ({
           tabIndex={0}
           onKeyPress={toggle}
         >
-          <span className={classes.entry}>{title}</span>
+          <span className={active ? classes.activeEntry : classes.entry}>
+            {title}
+          </span>
         </span>
         {open && (
           <RadarDescription
@@ -71,7 +75,9 @@ export const RadarLegendLink = ({
   }
   return (
     <WithLink url={url} className={classes.entryLink}>
-      <span className={classes.entry}>{title}</span>
+      <span className={active ? classes.activeEntry : classes.entry}>
+        {title}
+      </span>
     </WithLink>
   );
 };
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
index f54e4ab3b3..9ad8126ac4 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegendRing.tsx
@@ -57,6 +57,7 @@ export const RadarLegendRing = ({
                 url={entry.url}
                 title={entry.title}
                 description={entry.description}
+                active={entry.active}
               />
             </li>
           ))}