diff --git a/.changeset/quiet-starfishes-kick.md b/.changeset/quiet-starfishes-kick.md new file mode 100644 index 0000000000..2fc8ed632e --- /dev/null +++ b/.changeset/quiet-starfishes-kick.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-home': patch +--- + +Now, user can provide a language (optional) as input to receive a greeting in that specific language. Example: `` diff --git a/plugins/home/api-report.md b/plugins/home/api-report.md index 1001f27b51..5442714430 100644 --- a/plugins/home/api-report.md +++ b/plugins/home/api-report.md @@ -184,5 +184,12 @@ export type ToolkitContentProps = { }; // @public -export const WelcomeTitle: () => JSX.Element; +export const WelcomeTitle: ({ + language, +}: WelcomeTitleLanguageProps) => JSX.Element; + +// @public (undocumented) +export type WelcomeTitleLanguageProps = { + language?: string[]; +}; ``` diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx index d7d12f02c6..6d14aa7a95 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.stories.tsx @@ -29,3 +29,13 @@ export default { export const Default = () => { return
} pageTitleOverride="Home" />; }; + +export const withLanguage = () => { + const languages = ['English', 'Spanish']; + return ( +
} + pageTitleOverride="Home" + /> + ); +}; diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx index 839ecdbae1..dfeac300c4 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.test.tsx @@ -13,6 +13,7 @@ * 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'; @@ -30,3 +31,15 @@ describe('', () => { expect(getByText(/Get some rest, Guest/)).toBeInTheDocument(); }); }); + +test('should greet user with a single language', async () => { + jest + .spyOn(global.Date, 'now') + .mockImplementation(() => new Date('1970-01-01T10:00:00').valueOf()); + + const { getByText } = await renderInTestApp( + , + ); + + expect(getByText(/Good morning, Guest/)).toBeInTheDocument(); +}); diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx index 49ae38d90c..9981d91873 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx +++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx @@ -23,10 +23,15 @@ import React, { useEffect, useMemo } from 'react'; import useAsync from 'react-use/lib/useAsync'; import { getTimeBasedGreeting } from './timeUtil'; -export const WelcomeTitle = () => { +/** @public */ +export type WelcomeTitleLanguageProps = { + language?: string[]; +}; + +export const WelcomeTitle = ({ language }: WelcomeTitleLanguageProps) => { const identityApi = useApi(identityApiRef); const alertApi = useApi(alertApiRef); - const greeting = useMemo(() => getTimeBasedGreeting(), []); + const greeting = useMemo(() => getTimeBasedGreeting(language), [language]); const { value: profile, error } = useAsync(() => identityApi.getProfileInfo(), diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/index.ts b/plugins/home/src/homePageComponents/WelcomeTitle/index.ts index ca237511e7..8ca4d4bcc0 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/index.ts +++ b/plugins/home/src/homePageComponents/WelcomeTitle/index.ts @@ -14,3 +14,4 @@ * limitations under the License. */ export { WelcomeTitle } from './WelcomeTitle'; +export type { WelcomeTitleLanguageProps } from './WelcomeTitle'; diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts index 8df7703b44..707f42baf7 100644 --- a/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts +++ b/plugins/home/src/homePageComponents/WelcomeTitle/timeUtil.ts @@ -22,7 +22,10 @@ import goodEvening from './locales/goodEvening.locales.json'; // every time the user navigates. const greetingRandomSeed = Math.floor(Math.random() * 1000000); -export function getTimeBasedGreeting(): { language: string; greeting: string } { +export function getTimeBasedGreeting(language?: string[]): { + language: string; + greeting: string; +} { const random = (array: string[]) => array[greetingRandomSeed % array.length]; const currentHour = new Date(Date.now()).getHours(); @@ -32,12 +35,26 @@ export function getTimeBasedGreeting(): { language: string; greeting: string } { greeting: 'Get some rest', }; } + const timeOfDay = (hour: number): { [language: string]: string } => { if (hour < 12) return goodMorning; if (hour < 17) return goodAfternoon; return goodEvening; }; + const greetings = timeOfDay(currentHour); + + if (Array.isArray(language) && language.length > 0) { + const validLanguages = language.filter(lang => lang && greetings[lang]); + if (validLanguages.length > 0) { + const greetingsKey = random(validLanguages); + return { + language: greetingsKey, + greeting: greetings[greetingsKey], + }; + } + } + const greetingsKey = random(Object.keys(greetings)); return { language: greetingsKey, diff --git a/plugins/home/src/homePageComponents/index.ts b/plugins/home/src/homePageComponents/index.ts index 6a3978c595..36d2335afe 100644 --- a/plugins/home/src/homePageComponents/index.ts +++ b/plugins/home/src/homePageComponents/index.ts @@ -16,3 +16,4 @@ export type { ToolkitContentProps, Tool } from './Toolkit'; export type { ClockConfig } from './HeaderWorldClock'; +export type { WelcomeTitleLanguageProps } from './WelcomeTitle';