Merge pull request #17098 from shubhamjajoo/Adjust_no_of_boxes_for_ownership_card

Adjust max no of boxes in ownership card

.changeset/shy-carpets-own.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Added `entityLimit` to change the limit of entities displayed in the ownership boxes.
+
+[StoryBook Example for Ownership Card](https://backstage.io/storybook/?path=/story/plugins-org-ownership-card--default)

plugins/org/api-report.md

@@ -28,6 +28,7 @@ export const EntityOwnershipCard: (props: {
   entityFilterKind?: string[] | undefined;
   hideRelationsToggle?: boolean | undefined;
   relationsType?: string | undefined;
+  entityLimit?: number | undefined;
 }) => JSX.Element;
 
 // @public (undocumented)
@@ -73,6 +74,7 @@ export const OwnershipCard: (props: {
   entityFilterKind?: string[];
   hideRelationsToggle?: boolean;
   relationsType?: string;
+  entityLimit?: number;
 }) => JSX.Element;
 
 // @public (undocumented)

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

@@ -110,11 +110,13 @@ export const ComponentsGrid = ({
   relationsType,
   isGroup,
   entityFilterKind,
+  entityLimit = 6,
 }: {
   entity: Entity;
   relationsType: string;
   isGroup: boolean;
   entityFilterKind?: string[];
+  entityLimit?: number;
 }) => {
   const catalogLink = useRouteRef(catalogIndexRouteRef);
   const { componentsWithCounters, loading, error } = useGetEntities(
@@ -122,6 +124,7 @@ export const ComponentsGrid = ({
     relationsType,
     isGroup,
     entityFilterKind,
+    entityLimit,
   );
 
   if (loading) {

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

@@ -79,12 +79,22 @@ const makeComponent = ({ type, name }: { type: string; name: string }) => ({
   ],
 });
 
-const serviceA = makeComponent({ type: 'service', name: 'service-a' });
-const serviceB = makeComponent({ type: 'service', name: 'service-a' });
-const websiteA = makeComponent({ type: 'website', name: 'website-a' });
+const types = [
+  'service',
+  'website',
+  'api',
+  'playlist',
+  'grpc',
+  'trpc',
+  'library',
+];
+
+const components = types.map((type, index) =>
+  makeComponent({ type, name: `${type}-${index}` }),
+);
 
 const catalogApi: Partial<CatalogApi> = {
-  getEntities: () => Promise.resolve({ items: [serviceA, serviceB, websiteA] }),
+  getEntities: () => Promise.resolve({ items: components }),
 };
 
 const apis = TestApiRegistry.from([catalogApiRef, catalogApi]);
@@ -138,3 +148,26 @@ export const Themed = () =>
       mountedRoutes: { '/catalog': catalogIndexRouteRef },
     },
   );
+
+export const WithVariableEntityList = {
+  argTypes: {
+    entityLimit: {
+      control: { type: 'number' },
+    },
+  },
+  render: ({ entityLimit }: { entityLimit: number }) =>
+    wrapInTestApp(
+      <ApiProvider apis={apis}>
+        <EntityProvider entity={defaultEntity}>
+          <Grid container spacing={4}>
+            <Grid item xs={12} md={6}>
+              <OwnershipCard entityLimit={entityLimit} />
+            </Grid>
+          </Grid>
+        </EntityProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: { '/catalog': catalogIndexRouteRef },
+      },
+    ),
+};

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

@@ -57,9 +57,15 @@ export const OwnershipCard = (props: {
   entityFilterKind?: string[];
   hideRelationsToggle?: boolean;
   relationsType?: string;
+  entityLimit?: number;
 }) => {
-  const { variant, entityFilterKind, hideRelationsToggle, relationsType } =
-    props;
+  const {
+    variant,
+    entityFilterKind,
+    hideRelationsToggle,
+    relationsType,
+    entityLimit = 6,
+  } = props;
   const relationsToggle =
     hideRelationsToggle === undefined ? false : hideRelationsToggle;
   const classes = useStyles();
@@ -106,6 +112,7 @@ export const OwnershipCard = (props: {
       )}
       <ComponentsGrid
         entity={entity}
+        entityLimit={entityLimit}
         relationsType={getRelationsType}
         isGroup={isGroup}
         entityFilterKind={entityFilterKind}

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

@@ -130,6 +130,7 @@ export function useGetEntities(
   relationsType: string,
   isGroup: boolean,
   entityFilterKind?: string[],
+  entityLimit = 6,
 ): {
   componentsWithCounters:
     | {
@@ -189,8 +190,8 @@ export function useGetEntities(
       [],
     );
 
-    // Return top N (six) entities to be displayed in ownership boxes
-    const topN = counts.sort((a, b) => b.count - a.count).slice(0, 6);
+    // Return top N (entityLimit) entities to be displayed in ownership boxes
+    const topN = counts.sort((a, b) => b.count - a.count).slice(0, entityLimit);
 
     return topN.map(topOwnedEntity => ({
       counter: topOwnedEntity.count,