Add <WelcomeTitle> component

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/lemon-actors-wait.md

@@ -0,0 +1,15 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Adds a `<WelcomeTitle>` component that shows a playful greeting on the home page.
+To use it, pass it to the home page header:
+
+```typescript
+<Page themeId="home">
+  <Header title={<WelcomeTitle />} pageTitleOverride="Home">
+    <HomepageTimer />
+  </Header>
+  …
+</Page>
+```

packages/app/src/components/home/HomePage.tsx

@@ -14,25 +14,26 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import {
-  HomePageRandomJoke,
-  ComponentAccordion,
-  ComponentTabs,
-  ComponentTab,
-} from '@backstage/plugin-home';
 import {
   Content,
   Header,
-  Page,
   HomepageTimer,
+  Page,
 } from '@backstage/core-components';
+import {
+  ComponentAccordion,
+  ComponentTab,
+  ComponentTabs,
+  HomePageRandomJoke,
+  WelcomeTitle,
+} from '@backstage/plugin-home';
 import { HomePageSearchBar } from '@backstage/plugin-search';
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
 
 export const HomePage = () => (
   <Page themeId="home">
-    <Header title="Home">
+    <Header title={<WelcomeTitle />} pageTitleOverride="Home">
       <HomepageTimer />
     </Header>
     <Content>

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * 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';
+
+describe('<WelcomeTitle>', () => {
+  afterEach(() => jest.resetAllMocks());
+
+  test('should greet user', async () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementation(() => new Date('1970-01-01T23:00:00').valueOf());
+
+    const { getByText } = await renderInTestApp(<WelcomeTitle />);
+
+    expect(getByText(/Get some rest, Guest/)).toBeInTheDocument();
+  });
+});

plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { identityApiRef, useApi } from '@backstage/core-plugin-api';
+import { Tooltip } from '@material-ui/core';
+import React, { useMemo } from 'react';
+import { getTimeBasedGreeting } from './timeUtil';
+
+export const WelcomeTitle = () => {
+  const identityApi = useApi(identityApiRef);
+  const profile = identityApi.getProfile();
+  const userId = identityApi.getUserId();
+  const greeting = useMemo(() => getTimeBasedGreeting(), []);
+
+  return (
+    <Tooltip title={greeting.language}>
+      <span>{`${greeting.greeting}, ${profile.displayName || userId}!`}</span>
+    </Tooltip>
+  );
+};

plugins/home/src/homePageComponents/WelcomeTitle/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WelcomeTitle } from './WelcomeTitle';

plugins/home/src/index.ts

@@ -27,6 +27,7 @@ export {
   ComponentAccordion,
   ComponentTabs,
   ComponentTab,
+  WelcomeTitle,
 } from './plugin';
 export { SettingsModal } from './components';
 export { createCardExtension } from './extensions';

plugins/home/src/plugin.ts

@@ -60,6 +60,15 @@ export const ComponentTab = homePlugin.provide(
   }),
 );
 
+export const WelcomeTitle = homePlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./homePageComponents/WelcomeTitle').then(m => m.WelcomeTitle),
+    },
+  }),
+);
+
 export const HomePageRandomJoke = homePlugin.provide(
   createCardExtension<{ defaultCategory?: 'any' | 'programming' }>({
     title: 'Random Joke',