Added description for each member in MembersListCard

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>

.changeset/rude-toes-compare.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Added the `metadata.description` to the bottom of each member on the MembersListCard

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx

@@ -31,11 +31,13 @@ const makeUser = ({
   name,
   uid,
   displayName,
+  description,
   email,
 }: {
   name: string;
   uid: string;
   displayName: string;
+  description: string;
   email: string;
 }) => ({
   apiVersion: 'backstage.io/v1alpha1',
@@ -43,6 +45,7 @@ const makeUser = ({
   metadata: {
     name,
     uid,
+    description,
   },
   spec: {
     profile: {
@@ -87,12 +90,14 @@ const alice = makeUser({
   name: 'alice',
   uid: '123',
   displayName: 'Alice Doe',
+  description: 'Developer',
   email: 'alice@example.com',
 });
 const bob = makeUser({
   name: 'bob',
   uid: '456',
   displayName: 'Bob Jones',
+  description: 'Developer',
   email: 'bob@example.com',
 });
 

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx

@@ -55,6 +55,7 @@ describe('MemberTab Test', () => {
               name: 'tara.macgovern',
               namespace: 'foo-bar',
               uid: 'a5gerth56',
+              description: 'Super Awesome Developer',
             },
             relations: [
               {
@@ -99,6 +100,8 @@ describe('MemberTab Test', () => {
       '/catalog/foo-bar/user/tara.macgovern',
     );
 
+    expect(rendered.getByText('Super Awesome Developer')).toBeInTheDocument();
+
     expect(rendered.getByText('Members (1)')).toBeInTheDocument();
   });
 

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme: Theme) =>
 const MemberComponent = (props: { member: UserEntity }) => {
   const classes = useStyles();
   const {
-    metadata: { name: metaName },
+    metadata: { name: metaName, description },
     spec: { profile },
   } = props.member;
   const displayName = profile?.displayName ?? metaName;
@@ -102,6 +102,9 @@ const MemberComponent = (props: { member: UserEntity }) => {
             {profile?.email && (
               <Link to={`mailto:${profile.email}`}>{profile.email}</Link>
             )}
+            {description && (
+              <Typography variant="subtitle2">{description}</Typography>
+            )}
           </Box>
         </Box>
       </Box>