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, kind: EntitiesKinds, type?: EntitiesTypes, ) => entities.filter( e => e.kind === kind && (type ? e?.spec?.type === type : true), - ).length; + ); + +const countEntitiesBy = ( + entities: Array, + 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 ( - - - {counter} - - - {name} - - + + + + {counter} + + + {name} + + + ); }; @@ -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 = ({