diff --git a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx index fa89ac2caf..cdff61fe73 100644 --- a/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx +++ b/plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx @@ -28,6 +28,8 @@ import { useTheme } from '@material-ui/core/styles'; import React from 'react'; import { ImportInfoCard } from '../ImportInfoCard'; import { ImportStepper } from '../ImportStepper'; +import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { catalogImportTranslationRef } from '../../translation'; /** * The default catalog import page. @@ -35,6 +37,7 @@ import { ImportStepper } from '../ImportStepper'; * @public */ export const DefaultImportPage = () => { + const { t } = useTranslationRef(catalogImportTranslationRef); const theme = useTheme(); const configApi = useApi(configApiRef); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); @@ -54,7 +57,7 @@ export const DefaultImportPage = () => { return ( -
+
{supportTitle} diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx index c33de77ffd..caa6be223d 100644 --- a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.test.tsx @@ -25,6 +25,8 @@ import { screen } from '@testing-library/react'; import React from 'react'; import { CatalogImportApi, catalogImportApiRef } from '../../api'; import { ImportInfoCard } from './ImportInfoCard'; +import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { catalogImportTranslationRef } from '../../translation'; describe('', () => { let apis: TestApiRegistry; @@ -50,6 +52,14 @@ describe('', () => { }); it('renders without exploding', async () => { + let translatedText = ''; + + const TestComponent = () => { + const { t } = useTranslationRef(catalogImportTranslationRef); + translatedText = t('importInfoCard.title'); + return ; + }; + await renderInTestApp( ', () => { [catalogImportApiRef, catalogImportApi], ]} > - + , ); - - expect( - screen.getByText('Register an existing component'), - ).toBeInTheDocument(); + expect(screen.getByText(translatedText)).toBeInTheDocument(); }); it('renders section on GitHub discovery if supported', async () => { diff --git a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx index be8a457572..c0790006e5 100644 --- a/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx +++ b/plugins/catalog-import/src/components/ImportInfoCard/ImportInfoCard.tsx @@ -21,6 +21,8 @@ import Typography from '@material-ui/core/Typography'; import React from 'react'; import { catalogImportApiRef } from '../../api'; import { useCatalogFilename } from '../../hooks'; +import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; +import { catalogImportTranslationRef } from '../../translation'; /** * Props for {@link ImportInfoCard}. @@ -43,6 +45,7 @@ export const ImportInfoCard = (props: ImportInfoCardProps) => { exampleRepositoryUrl = 'https://github.com/backstage/backstage', } = props; + const { t } = useTranslationRef(catalogImportTranslationRef); const configApi = useApi(configApiRef); const appTitle = configApi.getOptionalString('app.title') || 'Backstage'; const catalogImportApi = useApi(catalogImportApiRef); @@ -53,7 +56,7 @@ export const ImportInfoCard = (props: ImportInfoCardProps) => { return (