diff --git a/.changeset/pre.json b/.changeset/pre.json index 74f1480f09..391e8dbd8d 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,5 +1,5 @@ { - "mode": "pre", + "mode": "exit", "tag": "next", "initialVersions": { "example-app": "0.2.81", 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/ADOPTERS.md b/ADOPTERS.md index fdc64b72b6..a021f82e0c 100644 --- a/ADOPTERS.md +++ b/ADOPTERS.md @@ -240,3 +240,4 @@ _You can do this by using the [Adopter form](https://info.backstage.spotify.com/ | [B3](https://www.b3.com.br/) | [Marcos Rodrigues](https://www.linkedin.com/in/marcos-rodrigues-cloud/) | B3 (Brazilian Stock Exchange) will implement a self-service platform focused on software development based on Backstage. The tool will primarily focus on product development and software engineering teams, as well as professionals from other areas who are also involved in software delivery. The new platform will function as a portal where teams can access tools, codes, and templates that have already been tested and are available, serving as building blocks for the development of new solutions. | | [Porto](https://www.portoseguro.com.br/) | [Camilo Alessandro](https://www.linkedin.com/in/camilo-alessandro/) | Porto (Brazilian insurance company) Centralized developer portal with software catalog, application templates, maturity radar, component taxonomy standardization, and automation in the integration with DevSecOps processes. | | [Einride](https://github.com/einride) | [@odsod](https://github.com/odsod/) | We use Backstage to create a great developer experience across Einride's entire software stack - from autonomous and electric vehicles to cloud systems - and we've developed a [Backstage Go SDK](https://github.com/einride/backstage-go) for interfacing with Backstage from our Go tooling. +| [Chartboost](https://www.chartboost.com)| [@brucearctor](https://github.com/brucearctor), [@ArtemChekunov](https://github.com/ArtemChekunov) | We are building our internal develper portal on top of Backstage.| diff --git a/OWNERS.md b/OWNERS.md index a362a95e43..aa5cf0954b 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -96,6 +96,7 @@ Scope: The TechDocs plugin and related tooling | Carlos Esteban Lopez Jaramillo | VMWare | [luchillo17](https://github.com/luchillo17) | `luchillo17#8777` | | David Tuite | Roadie | [dtuite](https://github.com/dtuite) | `David Tuite (roadie.io)#1010` | | Himanshu Mishra | Harness.io | [OrkoHunter](https://github.com/OrkoHunter) | `OrkoHunter#1520` | +| Irma Solakovic | Roadie | [Irma12](https://github.com/Irma12) | `Irma#7629` | | Jamie Klassen | VMware | [jamieklassen](https://github.com/jamieklassen) | `jamieklassen#3047` | | Jussi Hallila | Roadie | [Xantier](https://github.com/Xantier) | `Xantier#0086` | | Mark Avery | Cvent | [webark](https://github.com/webark) | `webark#8471` | 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, diff --git a/yarn.lock b/yarn.lock index ce99fef081..52639f950c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -38910,12 +38910,12 @@ __metadata: linkType: hard "typescript@npm:~5.0.0": - version: 5.0.3 - resolution: "typescript@npm:5.0.3" + version: 5.0.4 + resolution: "typescript@npm:5.0.4" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 3cce0576d218cb4277ff8b6adfef1a706e9114a98b4261a38ad658a7642f1b274a8396394f6cbff8c0ba852996d7ed2e233e9b8431d5d55ac7c2f6fea645af02 + checksum: 82b94da3f4604a8946da585f7d6c3025fff8410779e5bde2855ab130d05e4fd08938b9e593b6ebed165bda6ad9292b230984f10952cf82f0a0ca07bbeaa08172 languageName: node linkType: hard @@ -38930,12 +38930,12 @@ __metadata: linkType: hard "typescript@patch:typescript@~5.0.0#~builtin": - version: 5.0.3 - resolution: "typescript@patch:typescript@npm%3A5.0.3#~builtin::version=5.0.3&hash=a1c5e5" + version: 5.0.4 + resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin::version=5.0.4&hash=a1c5e5" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 9ec0a8eed38d46cc2c8794555b7674e413604c56c159f71b8ff21ce7f17334a44127a68724cb2ef8221ff3b19369f8f05654e8a5266621d7d962aeed889bd630 + checksum: 6a1fe9a77bb9c5176ead919cc4a1499ee63e46b4e05bf667079f11bf3a8f7887f135aa72460a4c3b016e6e6bb65a822cb8689a6d86cbfe92d22cc9f501f09213 languageName: node linkType: hard