Merge pull request #4399 from adamdmharvey/update-org-cards

org: Update visual display on User and Group cards

.changeset/nine-trees-thank.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Visual updates to User and Group pages

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

@@ -21,8 +21,21 @@ import {
   RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { useEntity, entityRouteParams } from '@backstage/plugin-catalog-react';
-import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
+import {
+  getEntityRelations,
+  entityRouteParams,
+  useEntity,
+} from '@backstage/plugin-catalog-react';
+import {
+  Box,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+} 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';
@@ -80,9 +93,9 @@ export const GroupProfileCard = ({
     ?.map(groupItem => groupItem.target.name)
     .toString();
 
-  const childrens = group?.relations
-    ?.filter(r => r.type === RELATION_PARENT_OF)
-    ?.map(groupItem => groupItem.target.name);
+  const childRelations = getEntityRelations(group, RELATION_PARENT_OF, {
+    kind: 'group',
+  });
 
   const displayName = profile?.displayName ?? name;
 
@@ -96,61 +109,51 @@ export const GroupProfileCard = ({
     >
       <Grid container spacing={3}>
         <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>
+          <Avatar displayName={displayName} picture={profile?.picture} />
         </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">
-                <Tooltip title="Group Parent">
-                  <AccountTreeIcon fontSize="inherit" />
-                </Tooltip>
-                <Box ml={1} display="inline">
+          <List>
+            {profile?.email && (
+              <ListItem>
+                <ListItemIcon>
+                  <Tooltip title="Email">
+                    <EmailIcon fontSize="inherit" />
+                  </Tooltip>
+                </ListItemIcon>
+                <ListItemText>{profile.email}</ListItemText>
+              </ListItem>
+            )}
+            {parent ? (
+              <ListItem>
+                <ListItemIcon>
+                  <Tooltip title="Parent Group">
+                    <AccountTreeIcon />
+                  </Tooltip>
+                </ListItemIcon>
+                <ListItemText>
                   <GroupLink groupName={parent} entity={group} />
-                </Box>
-              </Box>
-            </Typography>
-          ) : null}
-          {childrens?.length ? (
-            <Typography variant="subtitle1">
-              <Box display="flex" alignItems="center">
-                <Tooltip title="Parent of">
-                  <GroupIcon fontSize="inherit" />
-                </Tooltip>
-                <Box ml={1} display="inline">
-                  {childrens.map((children, index) => (
+                </ListItemText>
+              </ListItem>
+            ) : null}
+            {childRelations?.length ? (
+              <ListItem>
+                <ListItemIcon>
+                  <Tooltip title="Child Groups">
+                    <GroupIcon />
+                  </Tooltip>
+                </ListItemIcon>
+                <ListItemText>
+                  {childRelations.map((children, index) => (
                     <GroupLink
-                      groupName={children}
+                      groupName={children.name}
                       entity={group}
                       index={index}
-                      key={children}
                     />
                   ))}
-                </Box>
-              </Box>
-            </Typography>
-          ) : null}
+                </ListItemText>
+              </ListItem>
+            ) : null}
+          </List>
         </Grid>
       </Grid>
     </InfoCard>

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

@@ -19,8 +19,17 @@ import {
   UserEntity,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { useEntity, entityRouteParams } from '@backstage/plugin-catalog-react';
-import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
+import { entityRouteParams, useEntity } from '@backstage/plugin-catalog-react';
+import {
+  Box,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+} from '@material-ui/core';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
 import PersonIcon from '@material-ui/icons/Person';
@@ -81,40 +90,35 @@ export const UserProfileCard = ({
     return <Alert severity="error">User not found</Alert>;
   }
 
+  const emailHref = profile?.email ? `mailto:${profile.email}` : '';
+
   return (
     <InfoCard title={<CardTitle title={displayName} />} variant={variant}>
-      <Grid container spacing={3}>
-        <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 container spacing={3} alignItems="flex-start">
+        <Grid item md={2} lg={1}>
+          <Avatar displayName={displayName} picture={profile?.picture} />
         </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>
-          )}
-          <Typography variant="subtitle1">
-            <Box display="flex" alignItems="center">
-              <Tooltip title="Member of">
-                <GroupIcon />
-              </Tooltip>
-              <Box ml={1} display="inline">
+        <Grid item md={10} lg={11}>
+          <List>
+            {profile?.email && (
+              <ListItem>
+                <ListItemIcon>
+                  <EmailIcon />
+                </ListItemIcon>
+                <ListItemText>
+                  <Link href={emailHref}>{profile.email}</Link>
+                </ListItemText>
+              </ListItem>
+            )}
+
+            <ListItem>
+              <ListItemIcon>
+                <Tooltip title="Member of">
+                  <GroupIcon />
+                </Tooltip>
+              </ListItemIcon>
+              <ListItemText>
                 {groupNames.map((groupName, index) => (
                   <GroupLink
                     groupName={groupName}
@@ -123,9 +127,9 @@ export const UserProfileCard = ({
                     entity={user}
                   />
                 ))}
-              </Box>
-            </Box>
-          </Typography>
+              </ListItemText>
+            </ListItem>
+          </List>
         </Grid>
       </Grid>
     </InfoCard>