feat(i18n): add translation support to ai-integrations plugin (#1386)

Author: karthikjeeyar

workspaces/ai-integrations/.changeset/breezy-planes-wave.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-ai-experience': minor
+---
+
+Add internationalization (i18n) support with German, French and Spanish translations in ai-integrations plugin.

workspaces/ai-integrations/packages/app/src/App.tsx

@@ -57,6 +57,7 @@ import {
   AiNewsPage,
 } from '@red-hat-developer-hub/backstage-plugin-ai-experience';
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
+import { aiExperienceTranslationsResource } from '@red-hat-developer-hub/backstage-plugin-ai-experience';
 
 const githubProvider = {
   id: 'github-auth-provider',
@@ -67,6 +68,11 @@ const githubProvider = {
 
 const app = createApp({
   apis,
+  __experimentalTranslations: {
+    defaultLanguage: 'en',
+    availableLanguages: ['en', 'de', 'fr', 'es'],
+    resources: [aiExperienceTranslationsResource],
+  },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,

workspaces/ai-integrations/plugins/ai-experience/dev/index.tsx

@@ -22,10 +22,14 @@ import {
   AiExperiencePage,
   AiNewsPage,
 } from '../src/plugin';
+import { aiExperienceTranslationsResource } from '../src/translations';
 
 createDevApp()
   .registerPlugin(aiExperiencePlugin)
   .addThemes(getAllThemes())
+  .addTranslationResource(aiExperienceTranslationsResource)
+  .setAvailableLanguages(['en', 'de', 'fr', 'es'])
+  .setDefaultLanguage('en')
   .addPage({
     element: <AiExperiencePage />,
     title: 'Root Page',

workspaces/ai-integrations/plugins/ai-experience/report.api.md

@@ -9,6 +9,8 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { TranslationRef } from '@backstage/core-plugin-api/alpha';
+import { TranslationResource } from '@backstage/core-plugin-api/alpha';
 
 // @public
 export const AiExperiencePage: () => JSX_2.Element;
@@ -22,6 +24,54 @@ export const aiExperiencePlugin: BackstagePlugin<
   {}
 >;
 
+// @public
+export const aiExperienceTranslationRef: TranslationRef<
+  'plugin.ai-experience',
+  {
+    readonly 'page.title': string;
+    readonly 'page.subtitle': string;
+    readonly 'news.pageTitle': string;
+    readonly 'news.fetchingRssFeed': string;
+    readonly 'news.noContentAvailable': string;
+    readonly 'news.noContentDescription': string;
+    readonly 'news.noRssContent': string;
+    readonly 'learn.learn.title': string;
+    readonly 'learn.learn.description': string;
+    readonly 'learn.learn.cta': string;
+    readonly 'learn.getStarted.title': string;
+    readonly 'learn.getStarted.description': string;
+    readonly 'learn.getStarted.cta': string;
+    readonly 'learn.explore.title': string;
+    readonly 'learn.explore.description': string;
+    readonly 'learn.explore.cta': string;
+    readonly 'modal.title.preview': string;
+    readonly 'modal.title.edit': string;
+    readonly 'modal.close': string;
+    readonly 'modal.edit': string;
+    readonly 'modal.save': string;
+    readonly 'modal.cancel': string;
+    readonly 'common.template': string;
+    readonly 'common.latest': string;
+    readonly 'common.more': string;
+    readonly 'common.viewMore': string;
+    readonly 'common.guest': string;
+    readonly 'greeting.goodMorning': string;
+    readonly 'greeting.goodAfternoon': string;
+    readonly 'greeting.goodEvening': string;
+    readonly 'sections.exploreAiModels': string;
+    readonly 'sections.exploreAiTemplates': string;
+    readonly 'sections.discoverModels': string;
+    readonly 'sections.viewAllModels': string;
+    readonly 'sections.viewAllTemplates': string;
+    readonly 'accessibility.close': string;
+    readonly 'accessibility.aiIllustration': string;
+    readonly 'accessibility.aiModelsIllustration': string;
+  }
+>;
+
+// @public
+export const aiExperienceTranslationsResource: TranslationResource<'plugin.ai-experience'>;
+
 // @public (undocumented)
 export const AiNewsIcon: IconComponent;
 

workspaces/ai-integrations/plugins/ai-experience/src/alpha.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * 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 * from './translations';

workspaces/ai-integrations/plugins/ai-experience/src/components/AiExperienceHomePage/AiExperienceHomePage.tsx

@@ -14,22 +14,22 @@
  * limitations under the License.
  */
 import React from 'react';
-
+import { useAsync } from 'react-use';
 import { Content, Page } from '@backstage/core-components';
+import { identityApiRef, useApi } from '@backstage/core-plugin-api';
 import Box from '@mui/material/Box';
-
-import SectionWrapper from '../SectionWrapper';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import useGreeting from '../../hooks/useGreeting';
+import { useTranslation } from '../../hooks/useTranslation';
 import LearnSection from '../LearnSection';
 import ModelSection from '../ModelSection';
+import SectionWrapper from '../SectionWrapper';
 import TemplateSection from '../TemplateSection';
-import useGreeting from '../../hooks/useGreeting';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { identityApiRef, useApi } from '@backstage/core-plugin-api';
-import { useAsync } from 'react-use';
 
 export const AiExperienceHomePage = () => {
   const greeting = useGreeting();
   const identityApi = useApi(identityApiRef);
+  const { t } = useTranslation();
 
   const { value: profile } = useAsync(() => identityApi.getProfileInfo());
 
@@ -39,22 +39,24 @@ export const AiExperienceHomePage = () => {
         <Content>
           <Box>
             <SectionWrapper
-              title={`${greeting} ${profile?.displayName ?? 'Guest'}!`}
+              title={`${greeting} ${
+                profile?.displayName ?? t('common.guest')
+              }!`}
             >
               <Box sx={{ padding: '20px 10px 30px 40px' }}>
                 <LearnSection />
               </Box>
             </SectionWrapper>
           </Box>
           <Box sx={{ pt: 3 }}>
-            <SectionWrapper title="Explore AI models">
+            <SectionWrapper title={t('sections.exploreAiModels')}>
               <Box sx={{ padding: '20px 10px 10px 0' }}>
                 <ModelSection />
               </Box>
             </SectionWrapper>
           </Box>
           <Box sx={{ pt: 3 }}>
-            <SectionWrapper title="Explore AI templates">
+            <SectionWrapper title={t('sections.exploreAiTemplates')}>
               <Box sx={{ padding: '20px 10px 10px 0' }}>
                 <TemplateSection />
               </Box>

workspaces/ai-integrations/plugins/ai-experience/src/components/LearnSection/CardWrapper.tsx

@@ -61,14 +61,12 @@ const CardWrapper: React.FC<CardWrapperProps> = ({
             {title}
           </Typography>
         </Box>
-        <Box>
+        <Box sx={{ pt: 1, pb: 2 }}>
           <Typography
             variant="body2"
             sx={{
               fontSize: 16,
               fontWeight: '500',
-              pt: 1,
-              pb: 2,
               display: '-webkit-box',
               WebkitBoxOrient: 'vertical',
               WebkitLineClamp: 2,

workspaces/ai-integrations/plugins/ai-experience/src/components/LearnSection/LearnSection.tsx

@@ -21,8 +21,10 @@ import Box from '@mui/material/Box';
 import CardWrapper from './CardWrapper';
 import HomePageAiIllustration from '../../images/homepage-ai-illustration.svg';
 import { LEARNING_SECTION_ITEMS } from '../../utils/constants';
+import { useTranslation } from '../../hooks/useTranslation';
 
 export const LearnSection = () => {
+  const { t } = useTranslation();
   return (
     <Grid container spacing={3}>
       <Grid
@@ -37,7 +39,7 @@ export const LearnSection = () => {
         <Box
           component="img"
           src={HomePageAiIllustration}
-          alt="AI illustration"
+          alt={t('accessibility.aiIllustration')}
         />
       </Grid>
       {LEARNING_SECTION_ITEMS.map(item => (
@@ -46,15 +48,15 @@ export const LearnSection = () => {
           xs={12}
           md={6}
           lg={3}
-          key={item.title}
+          key={String(item.titleKey)}
           display="flex"
           justifyContent="left"
           alignItems="center"
         >
           <CardWrapper
-            title={item.title}
-            description={item.description}
-            buttonText={item.buttonText}
+            title={t(item.titleKey as any, {})}
+            description={t(item.descriptionKey as any, {})}
+            buttonText={t(item.buttonTextKey as any, {})}
             buttonLink={item.buttonLink}
             target={item.target}
           />

workspaces/ai-integrations/plugins/ai-experience/src/components/ModelSection/ModelSection.tsx

@@ -28,6 +28,7 @@ import CardWrapper from './CardWrapper';
 import HomePageAiModels from '../../images/homepage-ai-models.svg';
 import { useModels } from '../../hooks/useModels';
 import { ViewMoreLink } from '../Links/ViewMoreLink';
+import { useTranslation } from '../../hooks/useTranslation';
 
 export const ModelSection = () => {
   const [isRemoveFirstCard, setIsRemoveFirstCard] = React.useState(false);
@@ -39,6 +40,7 @@ export const ModelSection = () => {
   const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down(900));
   const smallScreenWidth = isExtraSmallScreen ? 266 : 180;
   const imageWidth = isSmallScreen ? smallScreenWidth : 266;
+  const { t } = useTranslation();
 
   const handleClose = () => {
     setShowDiscoveryCard(false);
@@ -47,7 +49,7 @@ export const ModelSection = () => {
     }, 500);
   };
   const { data } = useModels();
-  const models = data?.items ?? [];
+  const models = data?.items;
   const params = new URLSearchParams({
     'filters[kind]': 'resource',
     'filters[type]': 'ai-model',
@@ -59,7 +61,12 @@ export const ModelSection = () => {
     <React.Fragment>
       <Grid container spacing={1} alignItems="stretch">
         {!isRemoveFirstCard && (
-          <Grid item xs={12} md={5} key="AI models illustration">
+          <Grid
+            item
+            xs={12}
+            md={5}
+            key={t('accessibility.aiModelsIllustration')}
+          >
             <Box
               sx={{
                 border: `1px solid ${theme.palette.grey[400]}`,
@@ -86,20 +93,19 @@ export const ModelSection = () => {
                 component="img"
                 src={HomePageAiModels}
                 onLoad={() => setImgLoaded(true)}
-                alt="AI models illustration"
+                alt={t('accessibility.aiModelsIllustration')}
                 height={300}
                 width={imageWidth}
               />
               <Box sx={{ p: 2 }}>
                 <Box>
                   <Typography variant="body2" paragraph>
-                    Discover the AI models and services that are available in
-                    your organization
+                    {t('sections.discoverModels')}
                   </Typography>
                 </Box>
                 <IconButton
                   onClick={handleClose}
-                  aria-label="close"
+                  aria-label={t('accessibility.close')}
                   sx={{ position: 'absolute', top: 8, right: 8 }}
                 >
                   <CloseIcon sx={{ width: '16px', height: '16px' }} />
@@ -118,7 +124,7 @@ export const ModelSection = () => {
             <CardWrapper
               link={`/catalog/default/resource/${item.metadata.name}`}
               title={item.spec?.profile?.displayName ?? item.metadata.name}
-              version="latest"
+              version={t('common.latest')}
               description={item.metadata.description ?? ''}
               tags={item.metadata?.tags ?? []}
             />
@@ -127,7 +133,9 @@ export const ModelSection = () => {
       </Grid>
       <Box sx={{ pt: 2 }}>
         <ViewMoreLink to={catalogModelLink}>
-          View all {data?.totalItems ? data?.totalItems : ''} models
+          {t('sections.viewAllModels' as any, {
+            count: data?.totalItems ? data?.totalItems.toString() : '',
+          })}
         </ViewMoreLink>
       </Box>
     </React.Fragment>

workspaces/ai-integrations/plugins/ai-experience/src/components/ModelSection/TagList.tsx

@@ -18,12 +18,14 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from '../../hooks/useTranslation';
 
 interface TagListProps {
   tags: string[];
 }
 
 const TagList: React.FC<TagListProps> = ({ tags }) => {
+  const { t } = useTranslation();
   const hiddenCount = tags.length - 3;
   return (
     <Box
@@ -60,7 +62,7 @@ const TagList: React.FC<TagListProps> = ({ tags }) => {
                   `${theme.palette.mode === 'light' ? '#0066CC' : '#1FA7F8'}`,
               }}
             >
-              {`${hiddenCount} more`}
+              {`${hiddenCount} ${t('common.more')}`}
             </Typography>
           }
           variant="outlined"