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';