Merge pull request backstage#10580 from awanlin/topic/add-description…

…-to-memberslistcard Added description for each member in MembersListCard
RoadieHQ · Apr 4, 2022 · 5a968c2 · 5a968c2
2 parents f067305 + 0bada4f
commit 5a968c2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/rude-toes-compare.md b/.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
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.stories.tsx
@@ -31,18 +31,21 @@ const makeUser = ({
   name,
   uid,
   displayName,
+  description,
   email,
 }: {
   name: string;
   uid: string;
   displayName: string;
+  description: string;
   email: string;
 }) => ({
   apiVersion: 'backstage.io/v1alpha1',
   kind: 'User',
   metadata: {
     name,
     uid,
+    description,
   },
   spec: {
     profile: {
@@ -87,12 +90,14 @@ const alice = makeUser({
   name: 'alice',
   uid: '123',
   displayName: 'Alice Doe',
+  description: 'Developer',
   email: '[email protected]',
 });
 const bob = makeUser({
   name: 'bob',
   uid: '456',
   displayName: 'Bob Jones',
+  description: 'Developer',
   email: '[email protected]',
 });
 

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/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();
   });
 

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/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>