if the title is set use it in the group profile

Signed-off-by: Brian Fletcher <brian@roadie.io>

.changeset/curvy-rocks-guess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+allow the title of the card to use the title of the entity, if it is set.

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.stories.tsx

@@ -128,3 +128,33 @@ export const ExtraDetails = () => (
     </Grid>
   </EntityProvider>
 );
+
+const groupWithTitle: GroupEntity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Group',
+  metadata: {
+    name: 'team-a',
+    description: 'Team A description',
+    title: 'Team A title',
+  },
+  spec: {
+    profile: {
+      email: 'team-a@example.com',
+      picture:
+        'https://avatars.dicebear.com/api/identicon/team-a@example.com.svg?background=%23fff&margin=25',
+    },
+    type: 'group',
+    children: [],
+  },
+  relations: [dummyDepartment],
+};
+
+export const UseGroupTitle = () => (
+  <EntityProvider entity={groupWithTitle}>
+    <Grid container spacing={4}>
+      <Grid item xs={12} md={4}>
+        <GroupProfileCard variant="gridItem" showLinks />
+      </Grid>
+    </Grid>
+  </EntityProvider>
+);

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx

@@ -81,7 +81,7 @@ export const GroupProfileCard = (props: {
   }
 
   const {
-    metadata: { name, description, annotations, links },
+    metadata: { name, description, title, annotations, links },
     spec: { profile },
   } = group;
 
@@ -99,7 +99,7 @@ export const GroupProfileCard = (props: {
   const entityMetadataEditUrl =
     group.metadata.annotations?.[ANNOTATION_EDIT_URL];
 
-  const displayName = profile?.displayName ?? name;
+  const displayName = profile?.displayName ?? title ?? name;
   const emailHref = profile?.email ? `mailto:${profile.email}` : '#';
   const infoCardAction = entityMetadataEditUrl ? (
     <IconButton