From a435fefa61fcab8602cfd81aa475b7d669921429 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 00:16:07 -0500
Subject: [PATCH 1/6] Align card elements with list

---
 .../User/UserProfileCard/UserProfileCard.tsx  | 73 ++++++++++---------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index bdd0cd15f6..086979a0b4 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -20,7 +20,17 @@ import {
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
 import { entityRouteParams } from '@backstage/plugin-catalog-react';
-import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
+import {
+  Box,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Tooltip,
+  Typography,
+} 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';
@@ -80,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}
@@ -122,9 +127,9 @@ export const UserProfileCard = ({
                     entity={user}
                   />
                 ))}
-              </Box>
-            </Box>
-          </Typography>
+              </ListItemText>
+            </ListItem>
+          </List>
         </Grid>
       </Grid>
     </InfoCard>

From 8b7a19cbf278bfd0365b1143dd479d356701f2f8 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 00:16:29 -0500
Subject: [PATCH 2/6] Align card elements with List

---
 .../Group/GroupProfile/GroupProfileCard.tsx   | 98 +++++++++----------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 506a98d012..5ebce80c43 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -22,7 +22,16 @@ import {
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
 import { entityRouteParams } from '@backstage/plugin-catalog-react';
-import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
+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';
@@ -76,66 +85,57 @@ export const GroupProfileCard = ({
     ?.map(groupItem => groupItem.target.name)
     .toString();
 
-  const childrens = group?.relations
+  const childRelations = group?.relations
     ?.filter(r => r.type === RELATION_PARENT_OF)
     ?.map(groupItem => groupItem.target.name);
 
   const displayName = profile?.displayName ?? name;
+  const descriptionHeading = description ?? name;
 
   if (!group) return <Alert severity="error">User not found</Alert>;
 
   return (
     <InfoCard
-      title={<CardTitle title={displayName} />}
-      subheader={description}
+      title={<CardTitle title={descriptionHeading} />}
       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>
+          <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}
                       entity={group}
@@ -143,10 +143,10 @@ export const GroupProfileCard = ({
                       key={children}
                     />
                   ))}
-                </Box>
-              </Box>
-            </Typography>
-          ) : null}
+                </ListItemText>
+              </ListItem>
+            ) : null}
+          </List>
         </Grid>
       </Grid>
     </InfoCard>

From 14aef4b94278b7fa370adc2fef06a37eca1a2a1c Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 00:19:26 -0500
Subject: [PATCH 3/6] Add changeset

---
 .changeset/nine-trees-thank.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nine-trees-thank.md

diff --git a/.changeset/nine-trees-thank.md b/.changeset/nine-trees-thank.md
new file mode 100644
index 0000000000..08847093e9
--- /dev/null
+++ b/.changeset/nine-trees-thank.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Visual updates to User and Group pages

From afd496ec0155ae0d1befe3bef7cc3d84b0e386f8 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 00:35:00 -0500
Subject: [PATCH 4/6] Removed unused import

---
 .../components/Cards/User/UserProfileCard/UserProfileCard.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index 086979a0b4..95c5db7f21 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -29,7 +29,6 @@ import {
   ListItemIcon,
   ListItemText,
   Tooltip,
-  Typography,
 } from '@material-ui/core';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';

From e75932117f1f18a27d044fa12c859a40fb5119dd Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 09:54:19 -0500
Subject: [PATCH 5/6] Return AboutCard title to group name

---
 .../components/Cards/Group/GroupProfile/GroupProfileCard.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 5ebce80c43..c43f118b80 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -90,13 +90,13 @@ export const GroupProfileCard = ({
     ?.map(groupItem => groupItem.target.name);
 
   const displayName = profile?.displayName ?? name;
-  const descriptionHeading = description ?? name;
 
   if (!group) return <Alert severity="error">User not found</Alert>;
 
   return (
     <InfoCard
-      title={<CardTitle title={descriptionHeading} />}
+      title={<CardTitle title={displayName} />}
+      subheader={description}
       variant={variant}
     >
       <Grid container spacing={3}>

From 05fa2dcf98e67fa5e5db14e67d8b6b23a39e2599 Mon Sep 17 00:00:00 2001
From: Adam Harvey <adam.harvey@dxc.com>
Date: Fri, 5 Feb 2021 12:32:35 -0500
Subject: [PATCH 6/6] Refactor children to use shared function

---
 .../Cards/Group/GroupProfile/GroupProfileCard.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index c43f118b80..3d7d53d52a 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -21,7 +21,10 @@ import {
   RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog-react';
+import {
+  getEntityRelations,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import {
   Box,
   Grid,
@@ -85,9 +88,9 @@ export const GroupProfileCard = ({
     ?.map(groupItem => groupItem.target.name)
     .toString();
 
-  const childRelations = 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;
 
@@ -137,10 +140,9 @@ export const GroupProfileCard = ({
                 <ListItemText>
                   {childRelations.map((children, index) => (
                     <GroupLink
-                      groupName={children}
+                      groupName={children.name}
                       entity={group}
                       index={index}
-                      key={children}
                     />
                   ))}
                 </ListItemText>