From ce4abc1e02365b4fb54006fc5b2edf597cc95045 Mon Sep 17 00:00:00 2001
From: Jesse Bye <jbye@riskalyze.com>
Date: Thu, 17 Jun 2021 13:42:49 -0700
Subject: [PATCH 1/2] Add tooltips to org ownership card tiles

Signed-off-by: Jesse Bye <jbye@riskalyze.com>
---
 .changeset/violet-experts-design.md           |  5 ++
 .../Cards/OwnershipCard/OwnershipCard.tsx     | 70 ++++++++++++++-----
 2 files changed, 59 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/violet-experts-design.md

diff --git a/.changeset/violet-experts-design.md b/.changeset/violet-experts-design.md
new file mode 100644
index 0000000000..1db44aaf4b
--- /dev/null
+++ b/.changeset/violet-experts-design.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Display a tooltip for ownership cards listing the related entities
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index 0d320f182b..5de201835d 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
@@ -33,6 +33,7 @@ import {
   createStyles,
   Grid,
   makeStyles,
+  Tooltip,
   Typography,
 } from '@material-ui/core';
 import React from 'react';
@@ -94,39 +95,60 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
   }),
 );
 
-const countEntitiesBy = (
+const listEntitiesBy = (
   entities: Array<Entity>,
   kind: EntitiesKinds,
   type?: EntitiesTypes,
 ) =>
   entities.filter(
     e => e.kind === kind && (type ? e?.spec?.type === type : true),
-  ).length;
+  );
+
+const countEntitiesBy = (
+  entities: Array<Entity>,
+  kind: EntitiesKinds,
+  type?: EntitiesTypes,
+) => listEntitiesBy(entities, kind, type).length;
 
 const EntityCountTile = ({
   counter,
   className,
+  entities,
   name,
 }: {
   counter: number;
   className: EntitiesTypes;
+  entities: Entity[];
   name: string;
 }) => {
+  let entityNames;
   const classes = useStyles();
+
+  if (entities.length < 20) {
+    entityNames = entities.map(e => e.metadata.name).join(', ');
+  } else {
+    entityNames = `${entities
+      .map(e => e.metadata.name)
+      .slice(0, 20)
+      .join(', ')}, ...`;
+  }
+
   return (
-    <Box
-      className={`${classes.card} ${classes[className]}`}
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-    >
-      <Typography className={classes.bold} variant="h6">
-        {counter}
-      </Typography>
-      <Typography className={classes.bold} variant="h6">
-        {name}
-      </Typography>
-    </Box>
+    <Tooltip title={entityNames} arrow>
+      <Box
+        className={`${classes.card} ${classes[className]}`}
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <Typography className={classes.bold} variant="h6">
+          {counter}
+        </Typography>
+        <Typography className={classes.bold} variant="h6">
+          {name}
+        </Typography>
+      </Box>
+    </Tooltip>
   );
 };
 
@@ -166,6 +188,7 @@ export const OwnershipCard = ({
       {
         counter: countEntitiesBy(ownedEntitiesList, 'Component', 'service'),
         className: 'service',
+        entities: listEntitiesBy(ownedEntitiesList, 'Component', 'service'),
         name: 'Services',
       },
       {
@@ -175,29 +198,43 @@ export const OwnershipCard = ({
           'documentation',
         ),
         className: 'documentation',
+        entities: listEntitiesBy(
+          ownedEntitiesList,
+          'Component',
+          'documentation',
+        ),
         name: 'Documentation',
       },
       {
         counter: countEntitiesBy(ownedEntitiesList, 'API'),
         className: 'api',
+        entities: listEntitiesBy(ownedEntitiesList, 'API'),
         name: 'APIs',
       },
       {
         counter: countEntitiesBy(ownedEntitiesList, 'Component', 'library'),
         className: 'library',
+        entities: listEntitiesBy(ownedEntitiesList, 'Component', 'library'),
         name: 'Libraries',
       },
       {
         counter: countEntitiesBy(ownedEntitiesList, 'Component', 'website'),
         className: 'website',
+        entities: listEntitiesBy(ownedEntitiesList, 'Component', 'website'),
         name: 'Websites',
       },
       {
         counter: countEntitiesBy(ownedEntitiesList, 'Component', 'tool'),
         className: 'tool',
+        entities: listEntitiesBy(ownedEntitiesList, 'Component', 'tool'),
         name: 'Tools',
       },
-    ] as Array<{ counter: number; className: EntitiesTypes; name: string }>;
+    ] as Array<{
+      counter: number;
+      className: EntitiesTypes;
+      entities: string[];
+      name: string;
+    }>;
   }, [catalogApi, entity]);
 
   if (loading) {
@@ -214,6 +251,7 @@ export const OwnershipCard = ({
             <EntityCountTile
               counter={c.counter}
               className={c.className}
+              entities={c.entities}
               name={c.name}
             />
           </Grid>

From 5e8b591c866e8acaa3256c0ad6cf786d4b4cc03c Mon Sep 17 00:00:00 2001
From: Jesse Bye <jbye@riskalyze.com>
Date: Thu, 17 Jun 2021 13:55:10 -0700
Subject: [PATCH 2/2] Fix tsc issue

Signed-off-by: Jesse Bye <jbye@riskalyze.com>
---
 .../org/src/components/Cards/OwnershipCard/OwnershipCard.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index 5de201835d..c2535aa801 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
@@ -232,7 +232,7 @@ export const OwnershipCard = ({
     ] as Array<{
       counter: number;
       className: EntitiesTypes;
-      entities: string[];
+      entities: Entity[];
       name: string;
     }>;
   }, [catalogApi, entity]);