Merge pull request #29346 from its-mitesh-kumar/catalog-import-add-translation

feat(catalog-import): adding translation for `Register an existing component` in catalog-import plugin

.changeset/moody-eagles-smile.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': patch
+---
+
+adding translation for `Register an existing component` text

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<

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({

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 (
     <Page themeId="home">
-      <Header title="Register an existing component" />
+      <Header title={t('pageTitle')} />
       <Content>
         <ContentHeader title={`Start tracking your component in ${appTitle}`}>
           <SupportButton>{supportTitle}</SupportButton>

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('<ImportInfoCard />', () => {
   let apis: TestApiRegistry;
@@ -50,6 +52,14 @@ describe('<ImportInfoCard />', () => {
   });
 
   it('renders without exploding', async () => {
+    let translatedText = '';
+
+    const TestComponent = () => {
+      const { t } = useTranslationRef(catalogImportTranslationRef);
+      translatedText = t('importInfoCard.title');
+      return <ImportInfoCard />;
+    };
+
     await renderInTestApp(
       <TestApiProvider
         apis={[
@@ -57,13 +67,10 @@ describe('<ImportInfoCard />', () => {
           [catalogImportApiRef, catalogImportApi],
         ]}
       >
-        <ImportInfoCard />
+        <TestComponent />
       </TestApiProvider>,
     );
-
-    expect(
-      screen.getByText('Register an existing component'),
-    ).toBeInTheDocument();
+    expect(screen.getByText(translatedText)).toBeInTheDocument();
   });
 
   it('renders section on GitHub discovery if supported', async () => {

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 (
     <InfoCard
-      title="Register an existing component"
+      title={t('importInfoCard.title')}
       titleTypographyProps={{ component: 'h3' }}
       deepLink={{
         title: 'Learn more about the Software Catalog',

plugins/catalog-import/src/translation.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * 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.
+ */
+
+import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
+
+/** @alpha */
+export const catalogImportTranslationRef = createTranslationRef({
+  id: 'catalog-import',
+  messages: {
+    pageTitle: 'Register an existing component',
+    importInfoCard: {
+      title: 'Register an existing component',
+    },
+  },
+});