Merge pull request #8821 from djamaile/master

feat: give component EntityMembersListCard a memberType prop

.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
+<Grid item xs={12}>
+  <EntityMembersListCard memberDisplayTitle="Ninja's" />
+</Grid>
+```
+
+If left empty it will by default use 'Members'.

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)
 //

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(
+        <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+          <EntityProvider entity={groupEntity}>
+            <MembersListCard memberDisplayTitle="Testers" />
+          </EntityProvider>
+        </TestApiProvider>,
+      ),
+    );
+
+    expect(rendered.getByText('Testers (1)')).toBeInTheDocument();
+  });
 });

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<GroupEntity>();
+  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 (
     <Grid item>
       <InfoCard
-        title={`Members (${members?.length || 0}${paginationLabel})`}
+        title={`${memberDisplayTitle} (${
+          members?.length || 0
+        }${paginationLabel})`}
         subheader={`of ${displayName}`}
         {...(nbPages <= 1 ? {} : { actions: pagination })}
       >
@@ -186,7 +191,9 @@ export const MembersListCard = (_props: {
               ))
           ) : (
             <Box p={2}>
-              <Typography>This group has no members.</Typography>
+              <Typography>
+                This group has no ${memberDisplayTitle.toLocaleLowerCase()}.
+              </Typography>
             </Box>
           )}
         </Grid>