fix: add missing i18n support for catalog plugin

Signed-off-by: Eswaraiahsapram <esapram@redhat.com>

.changeset/empty-games-hug.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Added missing i18n

plugins/catalog/src/alpha/components/EntityLayout/EntityLayout.tsx

@@ -180,9 +180,9 @@ export const EntityLayout = (props: EntityLayoutProps) => {
             NotFoundComponent
           ) : (
             <WarningPanel title={t('entityLabels.warningPanelTitle')}>
-              There is no {kind} with the requested{' '}
+              {t('entityLayout.notFoundMessage', { kind })}{' '}
               <Link to="https://backstage.io/docs/features/software-catalog/references">
-                kind, namespace, and name
+                {t('entityLayout.notFoundLinkText')}
               </Link>
               .
             </WarningPanel>

plugins/catalog/src/alpha/components/EntityTabs/EntityTabsList.tsx

@@ -18,9 +18,12 @@ import { ReactElement, useMemo } from 'react';
 import Box from '@material-ui/core/Box';
 import Tabs from '@material-ui/core/Tabs';
 import { makeStyles } from '@material-ui/core/styles';
-import { EntityTabsGroup } from './EntityTabsGroup';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { EntityContentGroupDefinitions } from '@backstage/plugin-catalog-react/alpha';
 
+import { EntityTabsGroup } from './EntityTabsGroup';
+import { catalogTranslationRef } from '../../translation';
+
 /** @public */
 export type HeaderTabsClassKey =
   | 'tabsWrapper'
@@ -81,6 +84,7 @@ type EntityTabsListProps = {
 
 export function EntityTabsList(props: EntityTabsListProps) {
   const styles = useStyles();
+  const { t } = useTranslationRef(catalogTranslationRef);
 
   const { tabs: items, selectedIndex = 0, showIcons, groupDefinitions } = props;
 
@@ -108,7 +112,7 @@ export function EntityTabsList(props: EntityTabsListProps) {
         textColor="inherit"
         variant="scrollable"
         scrollButtons="auto"
-        aria-label="tabs"
+        aria-label={t('entityTabs.tabsAriaLabel')}
         value={selectedItem?.group ?? selectedItem?.id}
       >
         {Object.entries(groups).map(([id, tabGroup]) => (

plugins/catalog/src/alpha/translation.ts

@@ -25,15 +25,22 @@ export const catalogTranslationRef = createTranslationRef({
       createButtonTitle: 'Create',
       supportButtonContent: 'All your software catalog entities',
     },
+    entityLayout: {
+      notFoundMessage: 'There is no {{kind}} with the requested',
+      notFoundLinkText: 'kind, namespace, and name',
+    },
     aboutCard: {
       title: 'About',
       refreshButtonTitle: 'Schedule entity refresh',
       editButtonTitle: 'Edit Metadata',
+      editButtonAriaLabel: 'Edit',
       createSimilarButtonTitle: 'Create something similar',
       refreshScheduledMessage: 'Refresh scheduled',
+      refreshButtonAriaLabel: 'Refresh',
       launchTemplate: 'Launch Template',
       viewTechdocs: 'View TechDocs',
       viewSource: 'View Source',
+      unknown: 'unknown',
       descriptionField: {
         label: 'Description',
         value: 'No description',
@@ -69,6 +76,8 @@ export const catalogTranslationRef = createTranslationRef({
       },
     },
     searchResultItem: {
+      kind: 'Kind',
+      type: 'Type',
       lifecycle: 'Lifecycle',
       Owner: 'Owner',
     },
@@ -78,6 +87,7 @@ export const catalogTranslationRef = createTranslationRef({
       editActionTitle: 'Edit',
       starActionTitle: 'Add to favorites',
       unStarActionTitle: 'Remove from favorites',
+      allFilters: 'All',
     },
     dependencyOfComponentsCard: {
       title: 'Dependency of components',
@@ -97,6 +107,7 @@ export const catalogTranslationRef = createTranslationRef({
       inspectMenuTitle: 'Inspect entity',
       copyURLMenuTitle: 'Copy entity URL',
       unregisterMenuTitle: 'Unregister entity',
+      moreButtonAriaLabel: 'more',
     },
     entityLabelsCard: {
       title: 'Labels',
@@ -121,6 +132,9 @@ export const catalogTranslationRef = createTranslationRef({
         'Want to help us build this? Check out our Getting Started documentation.',
       docButtonTitle: 'DOCS',
     },
+    entityTabs: {
+      tabsAriaLabel: 'Tabs',
+    },
     deleteEntity: {
       dialogTitle: 'Are you sure you want to delete this entity?',
       deleteButtonTitle: 'Delete',

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -241,7 +241,7 @@ export function InternalAboutCard(props: InternalAboutCardProps) {
           <>
             {allowRefresh && canRefresh && (
               <IconButton
-                aria-label="Refresh"
+                aria-label={t('aboutCard.refreshButtonAriaLabel')}
                 title={t('aboutCard.refreshButtonTitle')}
                 onClick={refreshEntity}
               >
@@ -250,7 +250,7 @@ export function InternalAboutCard(props: InternalAboutCardProps) {
             )}
             <IconButton
               component={Link}
-              aria-label="Edit"
+              aria-label={t('aboutCard.editButtonAriaLabel')}
               disabled={!entityMetadataEditUrl}
               title={t('aboutCard.editButtonTitle')}
               to={entityMetadataEditUrl ?? '#'}

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -225,7 +225,7 @@ export function AboutContent(props: AboutContentProps) {
                 text: target,
                 href: getLocationTargetHref(
                   target,
-                  (entity?.spec?.type || 'unknown') as string,
+                  (entity?.spec?.type || t('aboutCard.unknown')) as string,
                   entitySourceLocation!,
                 ),
               }))}

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -19,6 +19,8 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { ReactNode } from 'react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { catalogTranslationRef } from '../../alpha/translation';
 
 const useStyles = makeStyles(theme => ({
   value: {
@@ -55,6 +57,7 @@ export interface AboutFieldProps {
 export function AboutField(props: AboutFieldProps) {
   const { label, value, gridSizes, children, className } = props;
   const classes = useStyles();
+  const { t } = useTranslationRef(catalogTranslationRef);
 
   const childElements = useElementFilter(children, c => c.getElements());
 
@@ -64,7 +67,7 @@ export function AboutField(props: AboutFieldProps) {
       childElements
     ) : (
       <Typography variant="body2" className={classes.value}>
-        {value || `unknown`}
+        {value || t('aboutCard.unknown')}
       </Typography>
     );
   return (

plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx

@@ -127,8 +127,18 @@ export function CatalogSearchResultListItem(
           }
         />
         <Box>
-          {result.kind && <Chip label={`Kind: ${result.kind}`} size="small" />}
-          {result.type && <Chip label={`Type: ${result.type}`} size="small" />}
+          {result.kind && (
+            <Chip
+              label={`${t('searchResultItem.kind')}: ${result.kind}`}
+              size="small"
+            />
+          )}
+          {result.type && (
+            <Chip
+              label={`${t('searchResultItem.type')}: ${result.type}`}
+              size="small"
+            />
+          )}
           {result.lifecycle && (
             <Chip
               label={`${t('searchResultItem.lifecycle')}: ${result.lifecycle}`}

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -186,7 +186,9 @@ export const CatalogTable = (props: CatalogTableProps) => {
   const currentType = filters.type?.value || '';
   const currentCount = typeof totalItems === 'number' ? `(${totalItems})` : '';
   // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
-  const titlePreamble = capitalize(filters.user?.value ?? 'all');
+  const titlePreamble = capitalize(
+    filters.user?.value ?? t('catalogTable.allFilters'),
+  );
   const title =
     props.title ||
     [titlePreamble, currentType, pluralize(currentKind), currentCount]

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx

@@ -161,7 +161,7 @@ export function EntityContextMenu(props: EntityContextMenuProps) {
     <>
       <Tooltip title={t('entityContextMenu.moreButtonTitle')} arrow>
         <IconButton
-          aria-label="more"
+          aria-label={t('entityContextMenu.moreButtonAriaLabel')}
           aria-controls="long-menu"
           aria-haspopup="true"
           aria-expanded={!!anchorEl}

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -389,9 +389,9 @@ export const EntityLayout = (props: EntityLayoutProps) => {
             NotFoundComponent
           ) : (
             <WarningPanel title={t('entityLabels.warningPanelTitle')}>
-              There is no {kind} with the requested{' '}
+              {t('entityLayout.notFoundMessage', { kind })}{' '}
               <Link to="https://backstage.io/docs/features/software-catalog/references">
-                kind, namespace, and name
+                {t('entityLayout.notFoundLinkText')}
               </Link>
               .
             </WarningPanel>