Use the new group profile section in the group profile card

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

@@ -14,20 +14,21 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
-import { InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog';
 import {
   Entity,
   GroupEntity,
   RELATION_CHILD_OF,
   RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
+import { Avatar, InfoCard } from '@backstage/core';
+import { entityRouteParams } from '@backstage/plugin-catalog';
+import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
+import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
-import { Link as RouterLink, generatePath } from 'react-router-dom';
+import Alert from '@material-ui/lab/Alert';
+import React from 'react';
+import { generatePath, Link as RouterLink } from 'react-router-dom';
 
 const GroupLink = ({
   groupName,
@@ -68,6 +69,7 @@ export const GroupProfileCard = ({
 }) => {
   const {
     metadata: { name, description },
+    spec: { profile },
   } = group;
   const parent = group?.relations
     ?.filter(r => r.type === RELATION_CHILD_OF)
@@ -78,16 +80,42 @@ export const GroupProfileCard = ({
     ?.filter(r => r.type === RELATION_PARENT_OF)
     ?.map(group => group.target.name);
 
+  const displayName = profile?.displayName ?? name;
+
   if (!group) return <Alert severity="error">User not found</Alert>;
 
   return (
     <InfoCard
-      title={<CardTitle title={name} />}
+      title={<CardTitle title={displayName} />}
       subheader={description}
       variant={variant}
     >
       <Grid container spacing={3}>
-        <Grid item>
+        <Grid item xs={12} sm={2} xl={1}>
+          <Box
+            display="flex"
+            alignItems="flex-start"
+            justifyContent="center"
+            height="100%"
+            width="100%"
+          >
+            <Avatar displayName={displayName} picture={profile?.picture} />
+          </Box>
+        </Grid>
+        <Grid item md={10} xl={11}>
+          {profile?.email && (
+            <Typography variant="subtitle1">
+              <Box display="flex" alignItems="center">
+                <Tooltip title="Email">
+                  <EmailIcon fontSize="inherit" />
+                </Tooltip>
+
+                <Box ml={1} display="inline">
+                  {profile.email}
+                </Box>
+              </Box>
+            </Typography>
+          )}
           {parent ? (
             <Typography variant="subtitle1">
               <Box display="flex" alignItems="center">

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

@@ -18,12 +18,12 @@ import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
 import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
+import { Entity, GroupEntity } from '@backstage/catalog-model';
 import { MembersListCard } from './MembersListCard';
 
 describe('MemberTab Test', () => {
-  const groupEntity = {
-    apiVersion: 'v1',
+  const groupEntity: GroupEntity = {
+    apiVersion: 'backstage.io/v1alpha1',
     kind: 'Group',
     metadata: {
       name: 'team-d',
@@ -33,9 +33,7 @@ describe('MemberTab Test', () => {
     spec: {
       type: 'team',
       parent: 'boxoffice',
-      ancestors: ['boxoffice', 'acme-corp'],
       children: [],
-      descendants: [],
     },
   };
 

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

@@ -15,6 +15,7 @@
  */
 import {
   Entity,
+  GroupEntity,
   RELATION_MEMBER_OF,
   UserEntity,
 } from '@backstage/catalog-model';
@@ -42,7 +43,9 @@ const useStyles = makeStyles((theme: Theme) =>
       borderRadius: '4px',
       overflow: 'visible',
       position: 'relative',
-      margin: theme.spacing(3, 0, 0),
+      margin: theme.spacing(3, 0, 1),
+      flex: '1',
+      minWidth: '0px',
     },
   }),
 );
@@ -55,12 +58,14 @@ const MemberComponent = ({
   groupEntity: Entity;
 }) => {
   const classes = useStyles();
-  const { name: metaName } = member.metadata;
-  const { profile } = member.spec;
+  const {
+    metadata: { name: metaName },
+    spec: { profile },
+  } = member;
   const displayName = profile?.displayName ?? metaName;
 
   return (
-    <Grid item xs={12} sm={6} md={3} xl={2}>
+    <Grid item container xs={12} sm={6} md={3} xl={2}>
       <Box className={classes.card}>
         <Box
           display="flex"
@@ -100,13 +105,16 @@ const MemberComponent = ({
 export const MembersListCard = ({
   entity: groupEntity,
 }: {
-  entity: Entity;
+  entity: GroupEntity;
 }) => {
   const {
     metadata: { name: groupName },
+    spec: { profile },
   } = groupEntity;
   const catalogApi = useApi(catalogApiRef);
 
+  const displayName = profile?.displayName ?? groupName;
+
   const { loading, error, value: members } = useAsync(async () => {
     const membersList = await catalogApi.getEntities({
       filter: {
@@ -133,7 +141,7 @@ export const MembersListCard = ({
     <Grid item>
       <InfoCard
         title={`Members (${members?.length || 0})`}
-        subheader={`of ${groupName}`}
+        subheader={`of ${displayName}`}
       >
         <Grid container spacing={3}>
           {members && members.length ? (

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -74,7 +74,6 @@ export const UserProfileCard = ({
     user?.relations
       ?.filter(r => r.type === RELATION_MEMBER_OF)
       ?.map(group => group.target.name) || [];
-
   const displayName = profile?.displayName ?? metaName;
 
   if (!user) {
@@ -96,18 +95,19 @@ export const UserProfileCard = ({
           </Box>
         </Grid>
         <Grid item md={10} xl={11}>
-          <Typography variant="subtitle1">
-            <Box display="flex" alignItems="center">
-              <Tooltip title="Email">
-                <EmailIcon fontSize="inherit" />
-              </Tooltip>
-              {profile?.email && (
+          {profile?.email && (
+            <Typography variant="subtitle1">
+              <Box display="flex" alignItems="center">
+                <Tooltip title="Email">
+                  <EmailIcon fontSize="inherit" />
+                </Tooltip>
+
                 <Box ml={1} display="inline">
                   {profile.email}
                 </Box>
-              )}
-            </Box>
-          </Typography>
+              </Box>
+            </Typography>
+          )}
           <Typography variant="subtitle1">
             <Box display="flex" alignItems="center">
               <Tooltip title="Member of">