diff --git a/.changeset/moody-eagles-smile.md b/.changeset/moody-eagles-smile.md new file mode 100644 index 0000000000..3fd8a748ab --- /dev/null +++ b/.changeset/moody-eagles-smile.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-import': patch +--- + +adding translation for `Register an existing component` text diff --git a/plugins/catalog-import/report-alpha.api.md b/plugins/catalog-import/report-alpha.api.md index 91c0e05d30..4cbcc8e7c1 100644 --- a/plugins/catalog-import/report-alpha.api.md +++ b/plugins/catalog-import/report-alpha.api.md @@ -10,6 +10,16 @@ import { ExtensionDefinition } from '@backstage/frontend-plugin-api'; import { FrontendPlugin } from '@backstage/frontend-plugin-api'; import { default as React_2 } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; +import { TranslationRef } from '@backstage/core-plugin-api/alpha'; + +// @alpha (undocumented) +export const catalogImportTranslationRef: TranslationRef< + 'catalog-import', + { + readonly pageTitle: 'Register an existing component'; + readonly 'importInfoCard.title': 'Register an existing component'; + } +>; // @alpha (undocumented) const _default: FrontendPlugin< diff --git a/plugins/catalog-import/src/alpha.tsx b/plugins/catalog-import/src/alpha.tsx index cf63c92338..ab6e3f2a68 100644 --- a/plugins/catalog-import/src/alpha.tsx +++ b/plugins/catalog-import/src/alpha.tsx @@ -38,6 +38,8 @@ import { CatalogImportClient, catalogImportApiRef } from './api'; import { rootRouteRef } from './plugin'; import { catalogApiRef } from '@backstage/plugin-catalog-react'; +export * from './translation'; + // TODO: It's currently possible to override the import page with a custom one. We need to decide // whether this type of override is typically done with an input or by overriding the entire extension. const catalogImportPage = PageBlueprint.make({ 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 (