Added description to UserProfileCard

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>
backstage · Feb 2, 2022 · 64cbca7 · 64cbca7
1 parent 9888ccb
commit 64cbca7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/ninety-brooms-lay.md b/.changeset/ninety-brooms-lay.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+The description from `metadata.description` will now show as the subheader on the UserProfileCard in the same way as the GroupProfileCard
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.stories.tsx
@@ -40,6 +40,7 @@ const defaultEntity: UserEntity = {
   kind: 'User',
   metadata: {
     name: 'guest',
+    description: 'Description for guest',
   },
   spec: {
     profile: {
@@ -70,6 +71,7 @@ const noImageEntity: UserEntity = {
   kind: 'User',
   metadata: {
     name: 'guest',
+    description: 'Description for guest',
   },
   spec: {
     profile: {

diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.test.tsx
@@ -29,6 +29,7 @@ describe('UserSummary Test', () => {
     kind: 'User',
     metadata: {
       name: 'calum.leavy',
+      description: 'Super awesome human',
     },
     spec: {
       profile: {
@@ -73,5 +74,6 @@ describe('UserSummary Test', () => {
       'href',
       '/catalog/default/group/ExampleGroup',
     );
+    expect(rendered.getByText('Super awesome human')).toBeInTheDocument();
   });
 });
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -61,7 +61,7 @@ export const UserProfileCard = ({
   }
 
   const {
-    metadata: { name: metaName },
+    metadata: { name: metaName, description },
     spec: { profile },
   } = user;
   const displayName = profile?.displayName ?? metaName;
@@ -71,7 +71,11 @@ export const UserProfileCard = ({
   });
 
   return (
-    <InfoCard title={<CardTitle title={displayName} />} variant={variant}>
+    <InfoCard
+      title={<CardTitle title={displayName} />}
+      subheader={description}
+      variant={variant}
+    >
       <Grid container spacing={3} alignItems="flex-start">
         <Grid item xs={12} sm={2} xl={1}>
           <Avatar displayName={displayName} picture={profile?.picture} />