From e547a8a3b8d8fc085ece3b52cb2173cb5c314237 Mon Sep 17 00:00:00 2001
From: Gaurav Pandey <36168816+grvpandey11@users.noreply.github.com>
Date: Sun, 9 Jul 2023 02:48:13 +0200
Subject: [PATCH] Update WelcomeTitle.tsx

Signed-off-by: Gaurav Pandey <36168816+grvpandey11@users.noreply.github.com>
---
 .../WelcomeTitle/WelcomeTitle.tsx             | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
index d4c39e2a29..d32ff42ea5 100644
--- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
+++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
@@ -13,33 +13,43 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
-import { WelcomeTitle } from './WelcomeTitle';
+import {
+  alertApiRef,
+  identityApiRef,
+  useApi,
+} from '@backstage/core-plugin-api';
+import { Tooltip, Typography } from '@material-ui/core';
+import React, { useEffect, useMemo } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import { getTimeBasedGreeting } from './timeUtil';
 
-describe('<WelcomeTitle>', () => {
-  afterEach(() => jest.resetAllMocks());
+interface WelcomeTitleLanguageProps {
+  language?: string[];
+}
 
-  test('should greet user with default greeting', async () => {
-    jest
-      .spyOn(global.Date, 'now')
-      .mockImplementation(() => new Date('1970-01-01T23:00:00').valueOf());
+export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => {
+  const identityApi = useApi(identityApiRef);
+  const alertApi = useApi(alertApiRef);
+  const greeting = useMemo(() => getTimeBasedGreeting(language), [language]);
 
-    const { getByText } = await renderInTestApp(<WelcomeTitle />);
+  const { value: profile, error } = useAsync(() =>
+    identityApi.getProfileInfo(),
+  );
 
-    expect(getByText(/Get some rest, Guest/)).toBeInTheDocument();
-  });
+  useEffect(() => {
+    if (error) {
+      alertApi.post({
+        message: `Failed to load user identity: ${error}`,
+        severity: 'error',
+      });
+    }
+  }, [error, alertApi]);
 
-  test('should greet user with multiple languages', async () => {
-    jest
-      .spyOn(global.Date, 'now')
-      .mockImplementation(() => new Date('2023-07-03T14:00:00').valueOf());
-
-    const languages = ['English', 'Spanish'];
-    const { getByText } = await renderInTestApp(
-      <WelcomeTitle language={languages} />,
-    );
-
-    expect(getByText(/Good afternoon, Guest/)).toBeInTheDocument();
-  });
-});
+  return (
+    <Tooltip title={greeting.language}>
+      <Typography component="span" variant="inherit">{`${greeting.greeting}${
+        profile?.displayName ? `, ${profile?.displayName}` : ''
+      }!`}</Typography>
+    </Tooltip>
+  );
+};