Add greetings message to home

frontend/package.json

@@ -21,6 +21,7 @@
     "typescript": "^3.7.5"
   },
   "dependencies": {
-    "@types/classnames": "^2.2.9"
+    "@types/classnames": "^2.2.9",
+    "moment": "^2.24.0"
   }
 }

frontend/packages/core/src/api/time/locales/goodMorning.locales.json

@@ -8,7 +8,7 @@
   "Bengali": "shuprobhat",
   "Bulgarian": "Dobro utro",
   "Catalan": "Bon dia",
-  "Chinese": "zǎoān",
+  "Chinese": "早安",
   "Croatian": "Dobro jutro",
   "Czech": "Dobré ráno",
   "Danish": "God morgen",
@@ -56,7 +56,6 @@
   "Uzbek": "Hayirli tong",
   "Vietnamese": "Chào buổi sáng",
   "Welsh": "Bore da",
-  "Chinese": "早安",
   "Latvian": "Labrīt",
   "Valyrian": "Sȳz ñāqes"
 }

frontend/packages/core/src/api/time/timeUtil.js

@@ -44,7 +44,7 @@ export function getTimeBasedGreeting() {
     if (hour < 17) return 'goodAfternoon';
     if (hour < 23) return 'goodEvening';
   };
-  const greetings = require(`shared/apis/time/locales/${timeOfDay(hour)}.locales.json`);
+  const greetings = require(`./locales/${timeOfDay(hour)}.locales.json`);
   const greetingsKey = random(Object.keys(greetings));
   return {
     language: greetingsKey,

frontend/packages/core/src/index.ts

@@ -1,3 +1,4 @@
+export { getTimeBasedGreeting } from './api/time/timeUtil';
 export * from './api';
 export {
   default as EntityLink,

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -1,11 +1,5 @@
 import React, { FC } from 'react';
-import {
-  Typography,
-  makeStyles,
-  Theme,
-  Grid,
-  LinearProgress,
-} from '@material-ui/core';
+import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
 import HomePageTimer from '../HomepageTimer';
 import {
   EntityLink,
@@ -14,6 +8,8 @@ import {
   Header,
   Page,
   theme,
+  Progress,
+  getTimeBasedGreeting,
 } from '@backstage/core';
 import SquadTechHealth from './SquadTechHealth';
 import { useAsync } from 'react-use';
@@ -70,7 +66,7 @@ const HomePage: FC<{}> = () => {
   ];
 
   if (status.loading) {
-    return <LinearProgress />;
+    return <Progress />;
   }
 
   const data = STATIC_DATA.concat(status?.value ?? []).map(({ id, kind }) => {
@@ -85,10 +81,20 @@ const HomePage: FC<{}> = () => {
     };
   });
 
+  const greeting = getTimeBasedGreeting();
+  const profile = { givenName: 'Suzy' };
+
   return (
     <Page theme={theme.home}>
       <div className={classes.mainContentArea}>
-        <Header title="This is Backstage!">
+        <Header
+          title={
+            profile
+              ? `${greeting.greeting}, ${profile.givenName}`
+              : greeting.greeting
+          }
+          tooltip={greeting.language}
+        >
           <HomePageTimer />
         </Header>
         <div className={classes.pageBody}>

frontend/yarn.lock

@@ -11062,6 +11062,11 @@ modify-values@^1.0.0:
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"