fix(api-docs): Add i18n support for Raw tab title and an error message

Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com>

.changeset/afraid-trees-show.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Add i18n support for Raw tab title and an error message

plugins/api-docs/report-alpha.api.md

@@ -25,8 +25,11 @@ import { TranslationRef } from '@backstage/frontend-plugin-api';
 export const apiDocsTranslationRef: TranslationRef<
   'api-docs',
   {
+    readonly 'apiDefinitionCard.error.title': 'Could not fetch the API';
+    readonly 'apiDefinitionCard.rawButtonTitle': 'Raw';
     readonly 'apiDefinitionDialog.closeButtonTitle': 'Close';
     readonly 'apiDefinitionDialog.tabsAriaLabel': 'API definition options';
+    readonly 'apiDefinitionDialog.rawButtonTitle': 'Raw';
     readonly 'apiDefinitionDialog.toggleButtonAriaLabel': 'Toggle API Definition Dialog';
     readonly 'defaultApiExplorerPage.title': 'APIs';
     readonly 'defaultApiExplorerPage.subtitle': '{{orgName}} API Explorer';

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx

@@ -16,21 +16,23 @@
 
 import { ApiEntity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import Alert from '@material-ui/lab/Alert';
-import { apiDocsConfigRef } from '../../config';
-import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
-
 import { CardTab, TabbedCard } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import Alert from '@material-ui/lab/Alert';
+import { apiDocsConfigRef } from '../../config';
+import { apiDocsTranslationRef } from '../../translation';
+import { PlainApiDefinitionWidget } from '../PlainApiDefinitionWidget';
 
 /** @public */
 export const ApiDefinitionCard = () => {
   const { entity } = useEntity<ApiEntity>();
   const config = useApi(apiDocsConfigRef);
   const { getApiDefinitionWidget } = config;
+  const { t } = useTranslationRef(apiDocsTranslationRef);
 
   if (!entity) {
-    return <Alert severity="error">Could not fetch the API</Alert>;
+    return <Alert severity="error">{t('apiDefinitionCard.error.title')}</Alert>;
   }
 
   const definitionWidget = getApiDefinitionWidget(entity);
@@ -42,7 +44,7 @@ export const ApiDefinitionCard = () => {
         <CardTab label={definitionWidget.title} key="widget">
           {definitionWidget.component(entity.spec.definition)}
         </CardTab>
-        <CardTab label="Raw" key="raw">
+        <CardTab label={t('apiDefinitionCard.rawButtonTitle')} key="raw">
           <PlainApiDefinitionWidget
             definition={entity.spec.definition}
             language={definitionWidget.rawLanguage || entity.spec.type}

plugins/api-docs/src/components/ApiDefinitionDialog/ApiDefinitionDialog.tsx

@@ -133,7 +133,8 @@ export function ApiDefinitionDialog(props: {
     >
       <DialogTitle id="api-definition-dialog-title" disableTypography>
         <Typography className={classes.type}>
-          API - {definitionWidget?.title ?? 'Raw'}
+          API -{' '}
+          {definitionWidget?.title ?? t('apiDefinitionDialog.rawButtonTitle')}
         </Typography>
         <Typography className={classes.title} variant="h1">
           {entity.metadata.title ?? entity.metadata.name}
@@ -151,7 +152,10 @@ export function ApiDefinitionDialog(props: {
           {definitionWidget ? (
             <Tab label={definitionWidget.title} {...a11yProps(tabIndex++)} />
           ) : null}
-          <Tab label="Raw" {...a11yProps(tabIndex++)} />
+          <Tab
+            label={t('apiDefinitionDialog.rawButtonTitle')}
+            {...a11yProps(tabIndex++)}
+          />
         </Tabs>
 
         {definitionWidget ? (

plugins/api-docs/src/translation.ts

@@ -22,10 +22,17 @@ import { createTranslationRef } from '@backstage/frontend-plugin-api';
 export const apiDocsTranslationRef = createTranslationRef({
   id: 'api-docs',
   messages: {
+    apiDefinitionCard: {
+      error: {
+        title: 'Could not fetch the API',
+      },
+      rawButtonTitle: 'Raw',
+    },
     apiDefinitionDialog: {
       closeButtonTitle: 'Close',
       tabsAriaLabel: 'API definition options',
       toggleButtonAriaLabel: 'Toggle API Definition Dialog',
+      rawButtonTitle: 'Raw',
     },
     defaultApiExplorerPage: {
       title: 'APIs',