diff --git a/.changeset/afraid-trees-show.md b/.changeset/afraid-trees-show.md new file mode 100644 index 0000000000..c9bf17adcc --- /dev/null +++ b/.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 diff --git a/plugins/api-docs/report-alpha.api.md b/plugins/api-docs/report-alpha.api.md index 43c45c1a1d..e71121d87e 100644 --- a/plugins/api-docs/report-alpha.api.md +++ b/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'; diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx index e033f93b3c..96419fa6e7 100644 --- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx +++ b/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(); const config = useApi(apiDocsConfigRef); const { getApiDefinitionWidget } = config; + const { t } = useTranslationRef(apiDocsTranslationRef); if (!entity) { - return Could not fetch the API; + return {t('apiDefinitionCard.error.title')}; } const definitionWidget = getApiDefinitionWidget(entity); @@ -42,7 +44,7 @@ export const ApiDefinitionCard = () => { {definitionWidget.component(entity.spec.definition)} - + - API - {definitionWidget?.title ?? 'Raw'} + API -{' '} + {definitionWidget?.title ?? t('apiDefinitionDialog.rawButtonTitle')} {entity.metadata.title ?? entity.metadata.name} @@ -151,7 +152,10 @@ export function ApiDefinitionDialog(props: { {definitionWidget ? ( ) : null} - + {definitionWidget ? ( diff --git a/plugins/api-docs/src/translation.ts b/plugins/api-docs/src/translation.ts index 6ae2668c7c..385f5ecbaf 100644 --- a/plugins/api-docs/src/translation.ts +++ b/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',