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

@@ -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"

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) =>