From 6d36220ef2c1f6b46fc628517b465d09f529b7d3 Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Fri, 17 Dec 2021 14:34:43 -0500
Subject: [PATCH] fix(WelcomeTitle): use non-deprecated IdentityApi methods

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/moody-scissors-yell.md             |  5 ++++
 .../WelcomeTitle/WelcomeTitle.tsx             | 29 +++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/moody-scissors-yell.md

diff --git a/.changeset/moody-scissors-yell.md b/.changeset/moody-scissors-yell.md
new file mode 100644
index 0000000000000..deb06b3c6fe01
--- /dev/null
+++ b/.changeset/moody-scissors-yell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Fix undefined identity bug in `WelcomeTitle` caused by using deprecated methods of the IdentityApi
diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
index 04ec7e16737bf..9cb18bd430959 100644
--- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
+++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
@@ -13,20 +13,39 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  alertApiRef,
+  identityApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
 import { Tooltip } from '@material-ui/core';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useAsync } from 'react-use';
 import { getTimeBasedGreeting } from './timeUtil';
 
 export const WelcomeTitle = () => {
   const identityApi = useApi(identityApiRef);
-  const profile = identityApi.getProfile();
-  const userId = identityApi.getUserId();
+  const alertApi = useApi(alertApiRef);
   const greeting = useMemo(() => getTimeBasedGreeting(), []);
 
+  const { value: profile, error } = useAsync(() =>
+    identityApi.getProfileInfo(),
+  );
+
+  useEffect(() => {
+    if (error) {
+      alertApi.post({
+        message: `Failed to load user identity: ${error}`,
+        severity: 'error',
+      });
+    }
+  }, [error, alertApi]);
+
   return (
     <Tooltip title={greeting.language}>
-      <span>{`${greeting.greeting}, ${profile.displayName || userId}!`}</span>
+      <span>{`${greeting.greeting}${
+        profile?.displayName ? `, ${profile?.displayName}` : ''
+      }!`}</span>
     </Tooltip>
   );
 };