Merge pull request #7540 from SDA-SE/feat/welcome

Feat/welcome

plugins/home/api-report.md

@@ -122,6 +122,9 @@ export const SettingsModal: ({
   children: JSX.Element;
 }) => JSX.Element;
 
+// @public
+export const WelcomeTitle: () => JSX.Element;
+
 // Warnings were encountered during analysis:
 //
 // src/extensions.d.ts:16:5 - (ae-forgotten-export) The symbol "ComponentParts" needs to be exported by the entry point index.d.ts

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/homePageComponents/WelcomeTitle/timeUtil.test.ts

@@ -16,16 +16,20 @@
 
 import { getTimeBasedGreeting } from './timeUtil';
 
-it('has greeting and language', () => {
-  const greeting = getTimeBasedGreeting();
-  expect(greeting).toHaveProperty('greeting');
-  expect(greeting).toHaveProperty('language');
-});
+describe('getTimeBasedGreeting', () => {
+  afterEach(() => jest.resetAllMocks());
 
-it('greets late at night', () => {
-  jest
-    .spyOn(global.Date, 'now')
-    .mockImplementationOnce(() => new Date('1970-01-01T23:00:00').valueOf());
-  const greeting = getTimeBasedGreeting();
-  expect(greeting.greeting).toBe('Get some rest');
+  it('has greeting and language', () => {
+    const greeting = getTimeBasedGreeting();
+    expect(greeting).toHaveProperty('greeting');
+    expect(greeting).toHaveProperty('language');
+  });
+
+  it('greets late at night', () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementationOnce(() => new Date('1970-01-01T23:00:00').valueOf());
+    const greeting = getTimeBasedGreeting();
+    expect(greeting.greeting).toBe('Get some rest');
+  });
 });

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

@@ -18,12 +18,12 @@ import goodMorning from './locales/goodMorning.locales.json';
 import goodAfternoon from './locales/goodAfternoon.locales.json';
 import goodEvening from './locales/goodEvening.locales.json';
 
-// Select a large random integer at startup, to prevent the greetings to change every time the user
-// navigates.
+// Select a large random integer at startup, to prevent the greetings to change
+// every time the user navigates.
 const greetingRandomSeed = Math.floor(Math.random() * 1000000);
 
-export function getTimeBasedGreeting() {
-  const random = array => array[greetingRandomSeed % array.length];
+export function getTimeBasedGreeting(): { language: string; greeting: string } {
+  const random = (array: string[]) => array[greetingRandomSeed % array.length];
 
   const currentHour = new Date(Date.now()).getHours();
   if (currentHour >= 23) {
@@ -32,7 +32,7 @@ export function getTimeBasedGreeting() {
       greeting: 'Get some rest',
     };
   }
-  const timeOfDay = hour => {
+  const timeOfDay = (hour: number): { [language: string]: string } => {
     if (hour < 12) return goodMorning;
     if (hour < 17) return goodAfternoon;
     return goodEvening;

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

@@ -64,6 +64,20 @@ export const ComponentTab = homePlugin.provide(
   }),
 );
 
+/**
+ * A component to display a playful greeting for the user.
+ *
+ * @public
+ */
+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',