Merge pull request #18613 from grvpandey11/master

Add Optional Language Variable to WelcomeTitle Component [New PR]

.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: `<WelcomeTitle language={['English', 'Spanish']} />`

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[];
+};
 ```

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

@@ -29,3 +29,13 @@ export default {
 export const Default = () => {
   return <Header title={<WelcomeTitle />} pageTitleOverride="Home" />;
 };
+
+export const withLanguage = () => {
+  const languages = ['English', 'Spanish'];
+  return (
+    <Header
+      title={<WelcomeTitle language={languages} />}
+      pageTitleOverride="Home"
+    />
+  );
+};

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('<WelcomeTitle>', () => {
     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(
+    <WelcomeTitle language={['English']} />,
+  );
+
+  expect(getByText(/Good morning, Guest/)).toBeInTheDocument();
+});

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(),

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

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { WelcomeTitle } from './WelcomeTitle';
+export type { WelcomeTitleLanguageProps } from './WelcomeTitle';

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,

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