From 2b114fde44793a93e09311b11233e6be2cc1b2ac Mon Sep 17 00:00:00 2001
From: Esteban Barrios <esteban.barrios@trivago.com>
Date: Mon, 7 Sep 2020 13:53:30 +0200
Subject: [PATCH] Show Display name in catalog instead of userId (#2310)

* Use display name instead of userid if this exists in the user profile for the catalog welcome banner

* Rename variable for clarity

* Updated test for CatalogPage to include getProfile function
---
 plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx | 3 ++-
 .../catalog/src/components/CatalogPage/CatalogPage.test.tsx  | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
index 39b3c66013..92f51ace06 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
@@ -31,12 +31,13 @@ type Props = {
 
 const CatalogLayout = ({ children }: Props) => {
   const greeting = getTimeBasedGreeting();
+  const profile = useApi(identityApiRef).getProfile();
   const userId = useApi(identityApiRef).getUserId();
 
   return (
     <Page theme={pageTheme.home}>
       <Header
-        title={`${greeting.greeting}, ${userId}!`}
+        title={`${greeting.greeting}, ${profile.displayName || userId}!`}
         subtitle="Backstage Service Catalog"
         tooltip={greeting.language}
         pageTitleOverride="Home"
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
index b4dcc2cb20..5752e58215 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
@@ -21,6 +21,7 @@ import {
   IdentityApi,
   identityApiRef,
   storageApiRef,
+  ProfileInfo,
 } from '@backstage/core';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render } from '@testing-library/react';
@@ -60,8 +61,12 @@ describe('CatalogPage', () => {
     getLocationByEntity: () =>
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
+  const testProfile: Partial<ProfileInfo> = {
+    displayName: 'Display Name',
+  };
   const indentityApi: Partial<IdentityApi> = {
     getUserId: () => 'tools@example.com',
+    getProfile: () => testProfile,
   };
 
   const renderWrapped = (children: React.ReactNode) =>