diff --git a/.changeset/shy-carpets-own.md b/.changeset/shy-carpets-own.md new file mode 100644 index 0000000000..95c907d117 --- /dev/null +++ b/.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) diff --git a/plugins/org/api-report.md b/plugins/org/api-report.md index e950b1bc8b..1111253119 100644 --- a/plugins/org/api-report.md +++ b/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) diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index dbd569abff..b0b4abc1a5 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx +++ b/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) { diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx index fc050feb2a..67cd512d72 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx +++ b/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 = { - 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( + + + + + + + + + , + { + mountedRoutes: { '/catalog': catalogIndexRouteRef }, + }, + ), +}; diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx index 1cb52a4762..d104eb032d 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/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: { )} 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,