From ab805860a1ee1f53953a2b2a9703f0c380b8b531 Mon Sep 17 00:00:00 2001
From: Andrew Thauer <6507159+andrewthauer@users.noreply.github.com>
Date: Sun, 13 Dec 2020 08:42:46 -0500
Subject: [PATCH] fix: ensure org users always have a name displayed

---
 .changeset/early-dots-drive.md                  |  6 ++++++
 .../Group/GroupProfile/GroupProfileCard.tsx     | 15 ---------------
 .../Cards/Group/MembersList/MembersListCard.tsx |  6 ++++--
 .../User/UserProfileCard/UserProfileCard.tsx    | 17 ++++++++---------
 4 files changed, 18 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/early-dots-drive.md

diff --git a/.changeset/early-dots-drive.md b/.changeset/early-dots-drive.md
new file mode 100644
index 0000000000..7a5eedec78
--- /dev/null
+++ b/.changeset/early-dots-drive.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Ensure a name is always displayed for user entities in the org plugin. This can happen when there is no profile
+displayName provided (e.g. a GitHub user that has not added a name to their profile)
diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index ce8829439c..a2582195b9 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -14,21 +14,6 @@
  * limitations under the License.
  */
 
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * 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';
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index cd39241ca8..cf40a5150c 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -58,6 +58,8 @@ const MemberComponent = ({
   const classes = useStyles();
   const { name: metaName } = member.metadata;
   const { profile } = member.spec;
+  const displayName = profile?.displayName ?? metaName;
+
   return (
     <Grid item xs={12} sm={6} md={3} xl={2}>
       <Box className={classes.card}>
@@ -69,7 +71,7 @@ const MemberComponent = ({
           justifyContent="center"
         >
           <Avatar
-            displayName={profile?.displayName}
+            displayName={displayName}
             picture={profile?.picture}
             customStyles={{
               position: 'absolute',
@@ -85,7 +87,7 @@ const MemberComponent = ({
                   entityRouteParams(groupEntity),
                 )}
               >
-                {profile?.displayName}
+                {displayName}
               </Link>
             </Typography>
             <Typography variant="caption">{profile?.email}</Typography>
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index 0f32835d70..31fd041a7c 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -68,6 +68,7 @@ export const UserProfileCard = ({
   variant: string;
 }) => {
   const {
+    metadata: { name: metaName },
     spec: { profile },
   } = user;
   const groupNames =
@@ -75,13 +76,14 @@ export const UserProfileCard = ({
       ?.filter(r => r.type === RELATION_MEMBER_OF)
       ?.map(group => group.target.name) || [];
 
-  if (!user) return <Alert severity="error">User not found</Alert>;
+  const displayName = profile?.displayName ?? metaName;
+
+  if (!user) {
+    return <Alert severity="error">User not found</Alert>;
+  }
 
   return (
-    <InfoCard
-      title={<CardTitle title={profile?.displayName} />}
-      variant={variant}
-    >
+    <InfoCard title={<CardTitle title={displayName} />} variant={variant}>
       <Grid container spacing={3}>
         <Grid item xs={12} sm={2} xl={1}>
           <Box
@@ -91,10 +93,7 @@ export const UserProfileCard = ({
             height="100%"
             width="100%"
           >
-            <Avatar
-              displayName={profile?.displayName}
-              picture={profile?.picture}
-            />
+            <Avatar displayName={displayName} picture={profile?.picture} />
           </Box>
         </Grid>
         <Grid item md={10} xl={11}>