feat(i18n): add translation support to homepage plugin

Signed-off-by: Rohit Rai <rohitkrai03@gmail.com>

Author: rohitkrai03

workspaces/homepage/.changeset/long-turtles-wash.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dynamic-home-page': minor
+---
+
+Add internationalization (i18n) support with German, French, Italian, and Spanish translations.

workspaces/homepage/packages/app/src/App.tsx

@@ -63,6 +63,7 @@ import {
   TemplateSection,
   VisitListener,
   HomePageCardMountPoint,
+  homepageTranslations,
 } from '@red-hat-developer-hub/backstage-plugin-dynamic-home-page';
 
 const identityProviders: IdentityProviders = [
@@ -78,6 +79,10 @@ const identityProviders: IdentityProviders = [
 const app = createApp({
   apis,
   themes: getThemes(),
+  __experimentalTranslations: {
+    availableLanguages: ['en', 'de', 'fr', 'it', 'es'],
+    resources: [homepageTranslations],
+  },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,

workspaces/homepage/plugins/dynamic-home-page/dev/index.tsx

@@ -63,6 +63,7 @@ import {
   EntitySection,
   TemplateSection,
 } from '../src/plugin';
+import { homepageTranslations } from '../src/translations';
 import { HomePageCardMountPoint, QuickAccessLink } from '../src/types';
 import defaultQuickAccess from './quickaccess-default.json';
 
@@ -276,6 +277,9 @@ const createPage = ({
 
 createDevApp()
   .registerPlugin(dynamicHomePagePlugin)
+  .addTranslationResource(homepageTranslations)
+  .setAvailableLanguages(['en', 'de', 'fr', 'it', 'es'])
+  .setDefaultLanguage('en')
   .addThemes(getAllThemes())
   .addPage(
     createPage({

workspaces/homepage/plugins/dynamic-home-page/report.api.md

@@ -11,6 +11,8 @@ import { FeaturedDocsCardProps } from '@backstage/plugin-home';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { StarredEntitiesProps } from '@backstage/plugin-home';
+import { TranslationRef } from '@backstage/core-plugin-api/alpha';
+import { TranslationResource } from '@backstage/core-plugin-api/alpha';
 import { VisitedByTypeProps } from '@backstage/plugin-home';
 
 // @public (undocumented)
@@ -112,6 +114,54 @@ export interface HomePageCardMountPointConfig {
     priority?: number;
 }
 
+// @public
+export const homepageTranslationRef: TranslationRef<"plugin.homepage", {
+readonly "search.placeholder": string;
+readonly "header.local": string;
+readonly "header.welcome": string;
+readonly "header.welcomePersonalized": string;
+readonly "templates.error": string;
+readonly "templates.title": string;
+readonly "templates.empty": string;
+readonly "templates.register": string;
+readonly "templates.fetchError": string;
+readonly "templates.emptyDescription": string;
+readonly "templates.viewAll": string;
+readonly "entities.error": string;
+readonly "entities.title": string;
+readonly "entities.close": string;
+readonly "entities.description": string;
+readonly "entities.empty": string;
+readonly "entities.register": string;
+readonly "entities.fetchError": string;
+readonly "entities.emptyDescription": string;
+readonly "entities.viewAll": string;
+readonly "homePage.empty": string;
+readonly "quickAccess.error": string;
+readonly "quickAccess.title": string;
+readonly "quickAccess.fetchError": string;
+readonly "featuredDocs.learnMore": string;
+readonly "onboarding.guest": string;
+readonly "onboarding.greeting.goodMorning": string;
+readonly "onboarding.greeting.goodAfternoon": string;
+readonly "onboarding.greeting.goodEvening": string;
+readonly "onboarding.getStarted.title": string;
+readonly "onboarding.getStarted.ariaLabel": string;
+readonly "onboarding.getStarted.description": string;
+readonly "onboarding.getStarted.buttonText": string;
+readonly "onboarding.explore.title": string;
+readonly "onboarding.explore.ariaLabel": string;
+readonly "onboarding.explore.description": string;
+readonly "onboarding.explore.buttonText": string;
+readonly "onboarding.learn.title": string;
+readonly "onboarding.learn.ariaLabel": string;
+readonly "onboarding.learn.description": string;
+readonly "onboarding.learn.buttonText": string;
+}>;
+
+// @public
+export const homepageTranslations: TranslationResource<"plugin.homepage">;
+
 // @public (undocumented)
 export const JokeCard: ComponentType<{
     defaultCategory?: 'any' | 'programming';

workspaces/homepage/plugins/dynamic-home-page/src/components/CustomizableHomePage.tsx

@@ -19,6 +19,7 @@ import { useMemo } from 'react';
 import { Content, EmptyState, Page } from '@backstage/core-components';
 
 import { HomePageCardMountPoint } from '../types';
+import { useTranslation } from '../hooks/useTranslation';
 
 import { Header, HeaderProps } from './Header';
 import { CustomizableGrid } from './CustomizableGrid';
@@ -28,6 +29,7 @@ export interface HomePageProps extends HeaderProps {
 }
 
 export const CustomizableHomePage = (props: HomePageProps) => {
+  const { t } = useTranslation();
   const filteredAndSortedHomePageCards = useMemo(() => {
     if (!props.cards) {
       return [];
@@ -51,10 +53,7 @@ export const CustomizableHomePage = (props: HomePageProps) => {
       <Header {...props} />
       <Content>
         {filteredAndSortedHomePageCards.length === 0 ? (
-          <EmptyState
-            title="No home page cards (mount points) configured or found."
-            missing="content"
-          />
+          <EmptyState title={t('homePage.empty')} missing="content" />
         ) : (
           <CustomizableGrid mountPoints={filteredAndSortedHomePageCards} />
         )}

workspaces/homepage/plugins/dynamic-home-page/src/components/EntitySection/EntitySection.tsx

@@ -44,6 +44,8 @@ import {
   addDismissedEntityIllustrationUsers,
   hasEntityIllustrationUserDismissed,
 } from '../../utils/utils';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Trans } from '../Trans';
 
 const StyledLink = styled(BackstageLink)(({ theme }) => ({
   textDecoration: 'none',
@@ -56,6 +58,7 @@ const StyledLink = styled(BackstageLink)(({ theme }) => ({
 
 export const EntitySection = () => {
   const theme = useTheme();
+  const { t } = useTranslation();
   const { displayName, loading: profileLoading } = useUserProfile();
   const [isRemoveFirstCard, setIsRemoveFirstCard] = useState(false);
   const [showDiscoveryCard, setShowDiscoveryCard] = useState(true);
@@ -109,10 +112,10 @@ export const EntitySection = () => {
     );
   } else if (!data) {
     content = (
-      <WarningPanel severity="error" title="Could not fetch data.">
+      <WarningPanel severity="error" title={t('entities.fetchError')}>
         <CodeSnippet
           language="text"
-          text={error?.toString() ?? 'Unknown error'}
+          text={error?.toString() ?? t('entities.error')}
         />
       </WarningPanel>
     );
@@ -165,14 +168,13 @@ export const EntitySection = () => {
                   <Box sx={{ p: 2 }}>
                     <Box>
                       <Typography variant="body2" paragraph>
-                        Browse the Systems, Components, Resources, and APIs that
-                        are available in your organization.
+                        {t('entities.description')}
                       </Typography>
                     </Box>
                     {entities?.length > 0 && (
                       <IconButton
                         onClick={handleClose}
-                        aria-label="close"
+                        aria-label={t('entities.close')}
                         style={{
                           position: 'absolute',
                           top: '8px',
@@ -224,7 +226,7 @@ export const EntitySection = () => {
                 >
                   <CardContent>
                     <Typography sx={{ fontSize: '1.125rem', fontWeight: 500 }}>
-                      No software catalog added yet
+                      {t('entities.empty')}
                     </Typography>
                     <Typography
                       sx={{
@@ -234,11 +236,10 @@ export const EntitySection = () => {
                         mb: '16px',
                       }}
                     >
-                      Once software catalogs are added, this space will showcase
-                      relevant content tailored to your experience.
+                      {t('entities.emptyDescription')}
                     </Typography>
                     <StyledLink to="/catalog-import" underline="none">
-                      Register a component
+                      {t('entities.register')}
                     </StyledLink>
                   </CardContent>
                 </Box>
@@ -268,13 +269,16 @@ export const EntitySection = () => {
           fontSize: '1.5rem',
         }}
       >
-        Explore Your Software Catalog
+        {t('entities.title')}
       </Typography>
       {content}
       {entities?.length > 0 && (
         <Box sx={{ pt: 2 }}>
           <ViewMoreLink to="/catalog">
-            View all {data?.totalItems ? data?.totalItems : ''} catalog entities
+            <Trans
+              message="entities.viewAll"
+              params={{ count: data?.totalItems?.toString() || '' }}
+            />
           </ViewMoreLink>
         </Box>
       )}

workspaces/homepage/plugins/dynamic-home-page/src/components/FeaturedDocsCard.tsx

@@ -19,6 +19,8 @@ import {
   FeaturedDocsCardProps,
 } from '@backstage/plugin-home';
 
+import { useTranslation } from '../hooks/useTranslation';
+
 /**
  * Overrides `FeaturedDocsCard` from the home plugin, but overrides the
  * `subLinkText` prop to be " Learn more" instead of "LEARN MORE".
@@ -27,5 +29,11 @@ import {
  * 2. To add a small missing gap between the title and the button
  */
 export const FeaturedDocsCard = (props: FeaturedDocsCardProps) => {
-  return <PluginHomeFeaturedDocsCard subLinkText=" Learn more" {...props} />;
+  const { t } = useTranslation();
+  return (
+    <PluginHomeFeaturedDocsCard
+      subLinkText={` ${t('featuredDocs.learnMore')}`}
+      {...props}
+    />
+  );
 };

workspaces/homepage/plugins/dynamic-home-page/src/components/Header.tsx

@@ -23,6 +23,7 @@ import { ClockConfig, HeaderWorldClock } from '@backstage/plugin-home';
 import useAsync from 'react-use/esm/useAsync';
 
 import { LocalClock, LocalClockProps } from './LocalClock';
+import { useTranslation } from '../hooks/useTranslation';
 
 export interface HeaderProps {
   title?: string;
@@ -44,35 +45,68 @@ export interface HeaderProps {
 //   return 'Good evening {{firstName}}';
 // };
 
-export const getPersonalizedTitle = (
+/**
+ * Handles user-provided title customization with variable interpolation.
+ *
+ * When users provide custom titles in their configuration, they take responsibility
+ * for internationalization at the configuration level. This function simply handles
+ * the variable interpolation for their custom strings.
+ *
+ * Supports variables:
+ * - {{firstName}} - First part of displayName (split by space)
+ * - {{displayName}} - Full displayName from user profile
+ *
+ * @param title - User-provided title string with optional {{variables}}
+ * @param displayName - User's displayName from profile, if available
+ */
+const interpolateUserTitle = (
   title: string,
   displayName: string | undefined,
 ) => {
-  const firstName = displayName?.split(' ')[0];
-  const replacedTitle = title
-    .replace('{{firstName}}', firstName ?? '')
-    .replace('{{displayName}}', displayName ?? '');
-  return replacedTitle;
+  if (!displayName) {
+    // Remove variable placeholders when no displayName is available
+    return title.replace(/\{\{(firstName|displayName)\}\}/g, '');
+  }
+
+  const firstName = displayName.split(' ')[0];
+  return title
+    .replace(/\{\{firstName\}\}/g, firstName)
+    .replace(/\{\{displayName\}\}/g, displayName);
 };
 
 export const Header = (props: HeaderProps) => {
   const identityApi = useApi(identityApiRef);
   const { value: profile } = useAsync(() => identityApi.getProfileInfo());
+  const { t } = useTranslation();
 
   const title = useMemo<string>(() => {
+    const firstName = profile?.displayName?.split(' ')[0];
+
+    // Priority 1: User-provided personalized title (user handles i18n)
     if (profile?.displayName && props.personalizedTitle) {
-      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);
-    } else if (props.title) {
-      return getPersonalizedTitle(props.title, profile?.displayName);
+      return interpolateUserTitle(props.personalizedTitle, profile.displayName);
     }
-    // return getPersonalizedTitle(getTimeBasedTitle(), profile?.displayName);
-    return getPersonalizedTitle('Welcome back!', profile?.displayName);
-  }, [profile?.displayName, props.personalizedTitle, props.title]);
+
+    // Priority 2: User-provided general title (user handles i18n)
+    if (props.title) {
+      return interpolateUserTitle(props.title, profile?.displayName);
+    }
+
+    // Default: Use plugin's translation system
+    if (profile?.displayName && firstName) {
+      return t('header.welcomePersonalized' as any, { name: firstName });
+    }
+
+    return t('header.welcome');
+  }, [profile?.displayName, props.personalizedTitle, props.title, t]);
 
   const subtitle = useMemo<string | undefined>(() => {
-    return props.subtitle
-      ? getPersonalizedTitle(props.subtitle, profile?.displayName)
-      : undefined;
+    // User-provided subtitle (user handles i18n)
+    if (props.subtitle) {
+      return interpolateUserTitle(props.subtitle, profile?.displayName);
+    }
+
+    return undefined;
   }, [props.subtitle, profile?.displayName]);
 
   return (
@@ -86,7 +120,7 @@ export const Header = (props: HeaderProps) => {
           label={
             props.localClock?.label ??
             (props.worldClocks && props.worldClocks.length > 0
-              ? 'Local'
+              ? t('header.local')
               : undefined)
           }
           format={

workspaces/homepage/plugins/dynamic-home-page/src/components/HomePage.tsx

@@ -19,6 +19,7 @@ import { useMemo } from 'react';
 import { Content, EmptyState, Page } from '@backstage/core-components';
 
 import { HomePageCardMountPoint } from '../types';
+import { useTranslation } from '../hooks/useTranslation';
 
 import { Header, HeaderProps } from './Header';
 import { ReadOnlyGrid } from './ReadOnlyGrid';
@@ -28,6 +29,7 @@ export interface HomePageProps extends HeaderProps {
 }
 
 export const HomePage = (props: HomePageProps) => {
+  const { t } = useTranslation();
   const filteredAndSortedHomePageCards = useMemo(() => {
     if (!props.cards) {
       return [];
@@ -48,13 +50,10 @@ export const HomePage = (props: HomePageProps) => {
 
   return (
     <Page themeId="home">
-      <Header title="Welcome back!" {...props} />
+      <Header title={t('header.welcome')} {...props} />
       <Content>
         {filteredAndSortedHomePageCards.length === 0 ? (
-          <EmptyState
-            title="No home page cards (mount points) configured or found."
-            missing="content"
-          />
+          <EmptyState title={t('homePage.empty')} missing="content" />
         ) : (
           <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />
         )}