diff --git a/.changeset/gold-birds-happen.md b/.changeset/gold-birds-happen.md new file mode 100644 index 0000000000..7a47a45fab --- /dev/null +++ b/.changeset/gold-birds-happen.md @@ -0,0 +1,13 @@ +--- +'@backstage/plugin-org': patch +--- + +For the component `EntityMembersListCard` you can now specify the type of members you have in a group. For example: + +```tsx + + + +``` + +If left empty it will by default use 'Members'. diff --git a/plugins/org/api-report.md b/plugins/org/api-report.md index 60caa45134..c042ae38af 100644 --- a/plugins/org/api-report.md +++ b/plugins/org/api-report.md @@ -26,6 +26,7 @@ export const EntityGroupProfileCard: ({ // @public (undocumented) export const EntityMembersListCard: (_props: { entity?: GroupEntity | undefined; + memberDisplayTitle?: string | undefined; }) => JSX.Element; // Warning: (ae-missing-release-tag) "EntityOwnershipCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -63,7 +64,10 @@ export const GroupProfileCard: ({ // Warning: (ae-missing-release-tag) "MembersListCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const MembersListCard: (_props: { entity?: GroupEntity }) => JSX.Element; +export const MembersListCard: (_props: { + entity?: GroupEntity; + memberDisplayTitle?: string; +}) => JSX.Element; // Warning: (ae-missing-release-tag) "orgPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx index b0c68d9a83..5ef4079bf4 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx @@ -132,4 +132,18 @@ describe('MemberTab Test', () => { expect(rendered.getByText('Members (1)')).toBeInTheDocument(); }); + + it('Can render different member display title', async () => { + const rendered = await renderWithEffects( + wrapInTestApp( + + + + + , + ), + ); + + expect(rendered.getByText('Testers (1)')).toBeInTheDocument(); + }); }); diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index f27fd52515..ac2e1e0e8f 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -111,8 +111,10 @@ const MemberComponent = ({ member }: { member: UserEntity }) => { export const MembersListCard = (_props: { /** @deprecated The entity is now grabbed from context instead */ entity?: GroupEntity; + memberDisplayTitle?: string; }) => { const { entity: groupEntity } = useEntity(); + let { memberDisplayTitle } = _props; const { metadata: { name: groupName, namespace: grpNamespace }, spec: { profile }, @@ -128,6 +130,7 @@ export const MembersListCard = (_props: { setPage(pageIndex); }; const pageSize = 50; + memberDisplayTitle = memberDisplayTitle ? memberDisplayTitle : 'Members'; const { loading, @@ -173,7 +176,9 @@ export const MembersListCard = (_props: { return ( @@ -186,7 +191,9 @@ export const MembersListCard = (_props: { )) ) : ( - This group has no members. + + This group has no ${memberDisplayTitle.toLocaleLowerCase()}. + )}