feat(i18n): add translation support to quickstart plugin with German, French and Spanish translations (#1397)

Author: lokanandaprabhu

workspaces/quickstart/.changeset/add-quickstart-i18n-support.md

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

workspaces/quickstart/packages/app/src/App.test.tsx

@@ -16,6 +16,63 @@
 import { render, waitFor } from '@testing-library/react';
 import App from './App';
 
+// Mock HTMLCanvasElement.getContext to avoid canvas-related errors in tests
+Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
+  value: jest.fn(() => ({
+    fillRect: jest.fn(),
+    clearRect: jest.fn(),
+    getImageData: jest.fn(() => ({
+      data: new Array(4),
+    })),
+    putImageData: jest.fn(),
+    createImageData: jest.fn(() => []),
+    setTransform: jest.fn(),
+    drawImage: jest.fn(),
+    save: jest.fn(),
+    fillText: jest.fn(),
+    restore: jest.fn(),
+    beginPath: jest.fn(),
+    moveTo: jest.fn(),
+    lineTo: jest.fn(),
+    closePath: jest.fn(),
+    stroke: jest.fn(),
+    translate: jest.fn(),
+    scale: jest.fn(),
+    rotate: jest.fn(),
+    arc: jest.fn(),
+    fill: jest.fn(),
+    measureText: jest.fn(() => ({ width: 0 })),
+    transform: jest.fn(),
+    rect: jest.fn(),
+    clip: jest.fn(),
+    createLinearGradient: jest.fn(() => ({
+      addColorStop: jest.fn(),
+    })),
+  })),
+});
+
+// eslint-disable-next-line no-console
+const originalError = console.error;
+beforeAll(() => {
+  // eslint-disable-next-line no-console
+  console.error = (...args: any[]) => {
+    if (
+      typeof args[0] === 'string' &&
+      (args[0].includes('MUI: The') ||
+        args[0].includes('Warning: findDOMNode') ||
+        args[0].includes('Not implemented: HTMLCanvasElement'))
+    ) {
+      return;
+    }
+    originalError.call(console, ...args);
+  };
+});
+
+afterAll(() => {
+  // eslint-disable-next-line no-console
+  console.error = originalError;
+});
+
 describe('App', () => {
   it('should render', async () => {
     process.env = {

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

@@ -51,9 +51,15 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
+import { quickstartTranslations } from '@red-hat-developer-hub/backstage-plugin-quickstart';
 
 const app = createApp({
   apis,
+  __experimentalTranslations: {
+    defaultLanguage: 'en',
+    availableLanguages: ['en', 'de', 'fr', 'es'],
+    resources: [quickstartTranslations],
+  },
   bindRoutes({ bind }) {
     bind(catalogPlugin.externalRoutes, {
       createComponent: scaffolderPlugin.routes.root,

workspaces/quickstart/plugins/quickstart/dev/index.tsx

@@ -16,7 +16,9 @@
 
 import { createDevApp } from '@backstage/dev-utils';
 import { quickstartPlugin, QuickstartDrawerProvider } from '../src/plugin';
+import { quickstartTranslations } from '../src/translations';
 import { useQuickstartDrawerContext } from '../src/hooks/useQuickstartDrawerContext';
+import { useTranslation } from '../src/hooks/useTranslation';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Card from '@mui/material/Card';
@@ -27,26 +29,28 @@ import { getAllThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
 const QuickstartTestPageContent = () => {
   const { openDrawer, closeDrawer, isDrawerOpen } =
     useQuickstartDrawerContext();
+  const { t } = useTranslation();
 
   return (
     <Box sx={{ padding: 4 }}>
       <Typography variant="h3" gutterBottom>
-        Quickstart Plugin Test Page
+        {t('dev.pageTitle')}
       </Typography>
 
       <Typography variant="body1" paragraph>
-        This is a test page for the Quickstart plugin. Use the buttons below to
-        interact with the quickstart drawer.
+        {t('dev.pageDescription')}
       </Typography>
 
       <Card sx={{ maxWidth: 600, marginBottom: 2 }}>
         <CardContent>
           <Typography variant="h6" gutterBottom>
-            Drawer Controls
+            {t('dev.drawerControls')}
           </Typography>
 
           <Typography variant="body2" color="text.secondary" paragraph>
-            Current drawer state: {isDrawerOpen ? 'Open' : 'Closed'}
+            {t('dev.currentState' as any, {
+              state: isDrawerOpen ? t('dev.stateOpen') : t('dev.stateClosed'),
+            })}
           </Typography>
 
           <Box sx={{ display: 'flex', gap: 2 }}>
@@ -56,15 +60,15 @@ const QuickstartTestPageContent = () => {
               onClick={openDrawer}
               disabled={isDrawerOpen}
             >
-              Open Quickstart Guide
+              {t('button.openQuickstartGuide')}
             </Button>
 
             <Button
               variant="outlined"
               onClick={closeDrawer}
               disabled={!isDrawerOpen}
             >
-              Close Drawer
+              {t('button.closeDrawer')}
             </Button>
           </Box>
         </CardContent>
@@ -73,19 +77,18 @@ const QuickstartTestPageContent = () => {
       <Card sx={{ maxWidth: 600 }}>
         <CardContent>
           <Typography variant="h6" gutterBottom>
-            Instructions
+            {t('dev.instructions')}
           </Typography>
           <Typography variant="body2" color="text.secondary">
-            1. Click "Open Quickstart Guide" to open the drawer
+            {t('dev.step1')}
             <br />
-            2. Navigate through the quickstart steps
+            {t('dev.step2')}
             <br />
-            3. Test the progress tracking by completing steps
+            {t('dev.step3')}
             <br />
-            4. The drawer can be closed using the close button or the drawer's
-            own controls
+            {t('dev.step4')}
             <br />
-            5. Progress is automatically saved to localStorage
+            {t('dev.step5')}
           </Typography>
         </CardContent>
       </Card>
@@ -101,6 +104,9 @@ const QuickstartTestPage = () => (
 
 createDevApp()
   .registerPlugin(quickstartPlugin)
+  .addTranslationResource(quickstartTranslations)
+  .setAvailableLanguages(['en', 'de', 'fr', 'es'])
+  .setDefaultLanguage('en')
   .addThemes(getAllThemes())
   .addPage({
     element: <QuickstartTestPage />,

workspaces/quickstart/plugins/quickstart/report.api.md

@@ -8,6 +8,7 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CSSProperties } from 'react';
 import { PropsWithChildren } from 'react';
+import { TranslationResource } from '@backstage/core-plugin-api/alpha';
 
 // @public
 export const QuickstartButton: React.ComponentType<QuickstartButtonProps>;
@@ -35,6 +36,9 @@ export const QuickstartDrawerProvider: React.ComponentType<PropsWithChildren>;
 // @public
 export const quickstartPlugin: BackstagePlugin<{}, {}, {}>;
 
+// @public
+export const quickstartTranslations: TranslationResource<'plugin.quickstart'>;
+
 // @public
 export const useQuickstartDrawerContext: () => QuickstartDrawerContextType;
 

workspaces/quickstart/plugins/quickstart/src/alpha.ts

@@ -0,0 +1,17 @@
+/*
+ * 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/quickstart/plugins/quickstart/src/components/QuickstartButton/QuickstartButton.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '@mui/material/styles';
 import WavingHandIcon from '@mui/icons-material/WavingHandOutlined';
 import { useQuickstartPermission } from '../../hooks/useQuickstartPermission';
 import { useQuickstartDrawerContext } from '../../hooks/useQuickstartDrawerContext';
+import { useTranslation } from '../../hooks/useTranslation';
 
 /**
  * Props for the QuickstartButton component
@@ -47,14 +48,17 @@ export interface QuickstartButtonProps {
  * @public
  */
 export const QuickstartButton = ({
-  title = 'Quick start',
+  title,
   style,
   onClick = () => {},
 }: QuickstartButtonProps) => {
+  const { t } = useTranslation();
   const isAllowed = useQuickstartPermission();
   const { toggleDrawer } = useQuickstartDrawerContext();
   const theme = useTheme();
 
+  const defaultTitle = t('button.quickstart');
+
   const handleClick = useCallback(() => {
     toggleDrawer();
     onClick();
@@ -102,7 +106,7 @@ export const QuickstartButton = ({
             }}
           >
             <Typography variant="body2" color={theme.palette.text.primary}>
-              {title}
+              {title || defaultTitle}
             </Typography>
           </Box>
         </Box>

workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartContent.tsx

@@ -20,6 +20,7 @@ import { QuickstartItem } from './QuickstartItem';
 import { EmptyState } from '@backstage/core-components';
 import { useState } from 'react';
 import { QuickstartItemData } from '../../types';
+import { useTranslation } from '../../hooks/useTranslation';
 
 type QuickstartContentProps = {
   quickstartItems: QuickstartItemData[];
@@ -32,6 +33,7 @@ export const QuickstartContent = ({
   setProgress,
   itemCount,
 }: QuickstartContentProps) => {
+  const { t } = useTranslation();
   const [openItems, setOpenItems] = useState<boolean[]>(
     new Array(itemCount).fill(false),
   );
@@ -62,10 +64,7 @@ export const QuickstartContent = ({
           ))}
         </List>
       ) : (
-        <EmptyState
-          title="Quickstart content not available for your role."
-          missing="data"
-        />
+        <EmptyState title={t('content.emptyState.title')} missing="data" />
       )}
     </Box>
   );

workspaces/quickstart/plugins/quickstart/src/components/QuickstartContent/QuickstartItem.tsx

@@ -27,6 +27,7 @@ import { QuickstartItemIcon } from './QuickstartItemIcon';
 import { QuickstartCtaLink } from './QuickstartCtaLink';
 import IconButton from '@mui/material/IconButton';
 import { QuickstartItemData } from '../../types';
+import { useTranslation } from '../../hooks/useTranslation';
 
 export type QuickstartItemProps = {
   item: QuickstartItemData;
@@ -43,6 +44,7 @@ export const QuickstartItem = ({
   open,
   handleOpen,
 }: QuickstartItemProps) => {
+  const { t } = useTranslation();
   const [stepCompleted, setStepCompleted] = useState<boolean>(false);
   const itemKey = `${item.title}-${index}`;
 
@@ -70,7 +72,11 @@ export const QuickstartItem = ({
         onClick={handleOpen}
         role="button"
         aria-expanded={open}
-        aria-label={`${open ? 'Collapse' : 'Expand'} ${item.title} details`}
+        aria-label={
+          open
+            ? t('item.collapseAriaLabel' as any, { title: item.title })
+            : t('item.expandAriaLabel' as any, { title: item.title })
+        }
         tabIndex={0}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -115,7 +121,11 @@ export const QuickstartItem = ({
           }}
         />
         <IconButton
-          aria-label={open ? 'Collapse item' : 'Expand item'}
+          aria-label={
+            open
+              ? t('item.collapseButtonAriaLabel')
+              : t('item.expandButtonAriaLabel')
+          }
           sx={{
             ...(open
               ? { color: theme => theme.palette.text.primary }

workspaces/quickstart/plugins/quickstart/src/components/QuickstartFooter.tsx

@@ -18,6 +18,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
+import { useTranslation } from '../hooks/useTranslation';
 
 export type QuickstartFooterProps = {
   handleDrawerClose: () => void;
@@ -28,6 +29,8 @@ export const QuickstartFooter = ({
   handleDrawerClose,
   progress,
 }: QuickstartFooterProps) => {
+  const { t } = useTranslation();
+
   return (
     <Box>
       <LinearProgress variant="determinate" value={progress} />
@@ -40,9 +43,11 @@ export const QuickstartFooter = ({
         }}
       >
         <Typography sx={{ fontSize: theme => theme.typography.caption }}>
-          {progress > 0 ? `${progress}% progress` : 'Not started'}
+          {progress > 0
+            ? t('footer.progress' as any, { progress: progress.toString() })
+            : t('footer.notStarted')}
         </Typography>
-        <Button onClick={() => handleDrawerClose()}>Hide</Button>
+        <Button onClick={() => handleDrawerClose()}>{t('footer.hide')}</Button>
       </Box>
     </Box>
   );