Merge pull request #9310 from awanlin/topic/add-description-to-user-profile-card

Added description to UserProfileCard

.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

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: {

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();
   });
 });

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