fix: ensure org users always have a name displayed

backstage · Dec 13, 2020 · ab80586 · ab80586
1 parent 8af6897
commit ab80586
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 26 deletions.
diff --git a/.changeset/early-dots-drive.md 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
@@ -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
@@ -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
@@ -68,20 +68,22 @@ export const UserProfileCard = ({
   variant: string;
 }) => {
   const {
+    metadata: { name: metaName },
     spec: { profile },
   } = user;
   const groupNames =
     user?.relations
       ?.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}>