From ef5bf4235aa54ff380b4536c06a2df71ab8a6f55 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Mon, 11 Oct 2021 10:13:25 +0200 Subject: [PATCH 1/3] Add `` component Signed-off-by: Oliver Sand --- .changeset/lemon-actors-wait.md | 15 +++++++++ packages/app/src/components/home/HomePage.tsx | 21 ++++++------ .../WelcomeTitle/WelcomeTitle.test.tsx | 32 +++++++++++++++++++ .../WelcomeTitle/WelcomeTitle.tsx | 32 +++++++++++++++++++ .../homePageComponents/WelcomeTitle/index.ts | 16 ++++++++++ .../locales/goodAfternoon.locales.json | 0 .../locales/goodEvening.locales.json | 0 .../locales/goodMorning.locales.json | 0 .../WelcomeTitle}/timeUtil.js | 0 .../WelcomeTitle}/timeUtil.test.js | 0 plugins/home/src/index.ts | 1 + plugins/home/src/plugin.ts | 9 ++++++ 12 files changed, 116 insertions(+), 10 deletions(-) create mode 100644 .changeset/lemon-actors-wait.md create mode 100644 plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx create mode 100644 plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx create mode 100644 plugins/home/src/homePageComponents/WelcomeTitle/index.ts rename plugins/{welcome/src/utils => home/src/homePageComponents/WelcomeTitle}/locales/goodAfternoon.locales.json (100%) rename plugins/{welcome/src/utils => home/src/homePageComponents/WelcomeTitle}/locales/goodEvening.locales.json (100%) rename plugins/{welcome/src/utils => home/src/homePageComponents/WelcomeTitle}/locales/goodMorning.locales.json (100%) rename plugins/{welcome/src/utils => home/src/homePageComponents/WelcomeTitle}/timeUtil.js (100%) rename plugins/{welcome/src/utils => home/src/homePageComponents/WelcomeTitle}/timeUtil.test.js (100%) diff --git a/.changeset/lemon-actors-wait.md b/.changeset/lemon-actors-wait.md new file mode 100644 index 0000000000..e98adc891e --- /dev/null +++ b/.changeset/lemon-actors-wait.md @@ -0,0 +1,15 @@ +--- +'@backstage/plugin-home': patch +--- + +Adds a `` component that shows a playful greeting on the home page. +To use it, pass it to the home page header: + +```typescript + +
} pageTitleOverride="Home"> + +
+ … + +``` diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index ebb486790d..33ac1a7e8c 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/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 = () => ( -
+
} pageTitleOverride="Home">
diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx new file mode 100644 index 0000000000..839ecdbae1 --- /dev/null +++ b/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('', () => { + 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(); + + expect(getByText(/Get some rest, Guest/)).toBeInTheDocument(); + }); +}); diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx new file mode 100644 index 0000000000..04ec7e1673 --- /dev/null +++ b/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 ( + + {`${greeting.greeting}, ${profile.displayName || userId}!`} + + ); +}; diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/index.ts b/plugins/home/src/homePageComponents/WelcomeTitle/index.ts new file mode 100644 index 0000000000..ca237511e7 --- /dev/null +++ b/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'; diff --git a/plugins/welcome/src/utils/locales/goodAfternoon.locales.json b/plugins/home/src/homePageComponents/WelcomeTitle/locales/goodAfternoon.locales.json similarity index 100% rename from plugins/welcome/src/utils/locales/goodAfternoon.locales.json rename to plugins/home/src/homePageComponents/WelcomeTitle/locales/goodAfternoon.locales.json diff --git a/plugins/welcome/src/utils/locales/goodEvening.locales.json b/plugins/home/src/homePageComponents/WelcomeTitle/locales/goodEvening.locales.json similarity index 100% rename from plugins/welcome/src/utils/locales/goodEvening.locales.json rename to plugins/home/src/homePageComponents/WelcomeTitle/locales/goodEvening.locales.json diff --git a/plugins/welcome/src/utils/locales/goodMorning.locales.json b/plugins/home/src/homePageComponents/WelcomeTitle/locales/goodMorning.locales.json similarity index 100% rename from plugins/welcome/src/utils/locales/goodMorning.locales.json rename to plugins/home/src/homePageComponents/WelcomeTitle/locales/goodMorning.locales.json diff --git a/plugins/welcome/src/utils/timeUtil.js b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.js similarity index 100% rename from plugins/welcome/src/utils/timeUtil.js rename to plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.js diff --git a/plugins/welcome/src/utils/timeUtil.test.js b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.js similarity index 100% rename from plugins/welcome/src/utils/timeUtil.test.js rename to plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.js diff --git a/plugins/home/src/index.ts b/plugins/home/src/index.ts index 0dacda7a01..0004cf5a23 100644 --- a/plugins/home/src/index.ts +++ b/plugins/home/src/index.ts @@ -27,6 +27,7 @@ export { ComponentAccordion, ComponentTabs, ComponentTab, + WelcomeTitle, } from './plugin'; export { SettingsModal } from './components'; export { createCardExtension } from './extensions'; diff --git a/plugins/home/src/plugin.ts b/plugins/home/src/plugin.ts index 46df84c1bf..503418a42c 100644 --- a/plugins/home/src/plugin.ts +++ b/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', From e5d79ade955d4b932c00f485d77700cb7f5d6ae8 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Mon, 11 Oct 2021 10:21:02 +0200 Subject: [PATCH 2/3] Convert timeUtil to typescript Signed-off-by: Oliver Sand --- .../{timeUtil.test.js => timeUtil.test.ts} | 26 +++++++++++-------- .../WelcomeTitle/{timeUtil.js => timeUtil.ts} | 10 +++---- 2 files changed, 20 insertions(+), 16 deletions(-) rename plugins/home/src/homePageComponents/WelcomeTitle/{timeUtil.test.js => timeUtil.test.ts} (55%) rename plugins/home/src/homePageComponents/WelcomeTitle/{timeUtil.js => timeUtil.ts} (83%) diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.js b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.ts similarity index 55% rename from plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.js rename to plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.ts index 2abb03152f..77eb6677ca 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.test.js +++ b/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'); + }); }); diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.js b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts similarity index 83% rename from plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.js rename to plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts index 93f4379d8e..8df7703b44 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.js +++ b/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; From a593c5feb4939205870867a83be09dfba2a911bf Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Mon, 11 Oct 2021 10:39:11 +0200 Subject: [PATCH 3/3] Update api report Signed-off-by: Oliver Sand --- plugins/home/api-report.md | 3 +++ plugins/home/src/plugin.ts | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/plugins/home/api-report.md b/plugins/home/api-report.md index db7631290d..a1cd98124a 100644 --- a/plugins/home/api-report.md +++ b/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 diff --git a/plugins/home/src/plugin.ts b/plugins/home/src/plugin.ts index 503418a42c..56849cb6d0 100644 --- a/plugins/home/src/plugin.ts +++ b/plugins/home/src/plugin.ts @@ -60,6 +60,11 @@ export const ComponentTab = homePlugin.provide( }), ); +/** + * A component to display a playful greeting for the user. + * + * @public + */ export const WelcomeTitle = homePlugin.provide( createComponentExtension({ component: {