Merge pull request #14414 from plukanek/ownership-card-adjustments

Ownership card adjustments

.changeset/stale-tools-yawn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Add entity kind to the Ownership Cards. Fix the query parameters for the links of the Ownership Cards so that the catalog page actually selects the right entity kind.

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -56,15 +56,17 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
 const EntityCountTile = ({
   counter,
   type,
-  name,
+  kind,
   url,
 }: {
   counter: number;
-  type: string;
-  name: string;
+  type?: string;
+  kind: string;
   url: string;
 }) => {
-  const classes = useStyles({ type });
+  const classes = useStyles({ type: type ?? kind });
+
+  const rawTitle = type ?? kind;
 
   return (
     <Link to={url} variant="body2">
@@ -78,8 +80,9 @@ const EntityCountTile = ({
           {counter}
         </Typography>
         <Typography className={classes.bold} variant="h6">
-          {pluralize(name, counter)}
+          {pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
         </Typography>
+        {type && <Typography variant="subtitle1">{kind}</Typography>}
       </Box>
     </Link>
   );
@@ -113,11 +116,11 @@ export const ComponentsGrid = ({
   return (
     <Grid container>
       {componentsWithCounters?.map(c => (
-        <Grid item xs={6} md={6} lg={4} key={c.name}>
+        <Grid item xs={6} md={6} lg={4} key={c.type ?? c.kind}>
           <EntityCountTile
             counter={c.counter}
+            kind={c.kind}
             type={c.type}
-            name={c.name}
             url={`${catalogLink()}/?${c.queryParams}`}
           />
         </Grid>

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx

@@ -217,10 +217,16 @@ describe('OwnershipCard', () => {
     expect(
       queryByText(getByText('SYSTEM').parentElement!, '1'),
     ).toBeInTheDocument();
+    expect(
+      queryByText(getByText('SYSTEM').parentElement!, 'System'),
+    ).not.toBeInTheDocument();
     expect(getByText('OPENAPI')).toBeInTheDocument();
     expect(
       queryByText(getByText('OPENAPI').parentElement!, '1'),
     ).toBeInTheDocument();
+    expect(
+      queryByText(getByText('OPENAPI').parentElement!, 'API'),
+    ).toBeInTheDocument();
     expect(() => getByText('LIBRARY')).toThrow();
   });
 
@@ -246,7 +252,7 @@ describe('OwnershipCard', () => {
 
     expect(getByText('OPENAPI').closest('a')).toHaveAttribute(
       'href',
-      '/create/?filters%5Bkind%5D=API&filters%5Btype%5D=openapi&filters%5Bowners%5D=my-team&filters%5Buser%5D=all',
+      '/create/?filters%5Bkind%5D=api&filters%5Btype%5D=openapi&filters%5Bowners%5D=my-team&filters%5Buser%5D=all',
     );
   });
 
@@ -292,7 +298,7 @@ describe('OwnershipCard', () => {
 
     expect(getByText('OPENAPI').closest('a')).toHaveAttribute(
       'href',
-      '/create/?filters%5Bkind%5D=API&filters%5Btype%5D=openapi&filters%5Bowners%5D=user%3Athe-user&filters%5Bowners%5D=my-team&filters%5Bowners%5D=custom%2Fsome-team&filters%5Buser%5D=all',
+      '/create/?filters%5Bkind%5D=api&filters%5Btype%5D=openapi&filters%5Bowners%5D=user%3Athe-user&filters%5Bowners%5D=my-team&filters%5Bowners%5D=custom%2Fsome-team&filters%5Buser%5D=all',
     );
   });
 

plugins/org/src/components/Cards/OwnershipCard/useGetEntities.ts

@@ -36,7 +36,7 @@ const limiter = limiterFactory(10);
 
 type EntityTypeProps = {
   kind: string;
-  type: string;
+  type?: string;
   count: number;
 };
 
@@ -49,7 +49,7 @@ const getQueryParams = (
     humanizeEntityRef(parseEntityRef(owner), { defaultKind: 'group' }),
   );
   const filters = {
-    kind,
+    kind: kind.toLocaleLowerCase('en-US'),
     type,
     owners,
     user: 'all',
@@ -135,7 +135,7 @@ export function useGetEntities(
     | {
         counter: number;
         type: string;
-        name: string;
+        kind: string;
         queryParams: string;
       }[]
     | undefined;
@@ -173,16 +173,14 @@ export function useGetEntities(
     const counts = ownedEntitiesList.items.reduce(
       (acc: EntityTypeProps[], ownedEntity) => {
         const match = acc.find(
-          x =>
-            x.kind === ownedEntity.kind &&
-            x.type === (ownedEntity.spec?.type ?? ownedEntity.kind),
+          x => x.kind === ownedEntity.kind && x.type === ownedEntity.spec?.type,
         );
         if (match) {
           match.count += 1;
         } else {
           acc.push({
             kind: ownedEntity.kind,
-            type: ownedEntity.spec?.type?.toString() ?? ownedEntity.kind,
+            type: ownedEntity.spec?.type?.toString(),
             count: 1,
           });
         }
@@ -197,12 +195,12 @@ export function useGetEntities(
     return topN.map(topOwnedEntity => ({
       counter: topOwnedEntity.count,
       type: topOwnedEntity.type,
-      name: topOwnedEntity.type.toLocaleUpperCase('en-US'),
+      kind: topOwnedEntity.kind,
       queryParams: getQueryParams(owners, topOwnedEntity),
     })) as Array<{
       counter: number;
       type: string;
-      name: string;
+      kind: string;
       queryParams: string;
     }>;
   }, [catalogApi, entity, relationsType]);