Merge pull request #22868 from piatkiewicz/master

Get LinguistCard texts from translations

.changeset/lazy-terms-shake.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-linguist': patch
+---
+
+Get component's title from translation file. See: https://backstage.io/docs/plugins/internationalization#for-an-application-developer-overwrite-plugin-messages

plugins/linguist/api-report-alpha.md

@@ -4,10 +4,20 @@
 
 ```ts
 import { BackstagePlugin } from '@backstage/frontend-plugin-api';
+import { TranslationRef } from '@backstage/core-plugin-api/alpha';
 
 // @alpha (undocumented)
 const _default: BackstagePlugin<{}, {}>;
 export default _default;
 
+// @alpha (undocumented)
+export const linguistTranslationRef: TranslationRef<
+  'linguist',
+  {
+    readonly 'entityCard.title': 'Languages';
+    readonly 'entityCard.noData': 'There is currently no language data for this entity.';
+  }
+>;
+
 // (No @packageDocumentation comment for this package)
 ```

plugins/linguist/src/alpha.ts

@@ -16,3 +16,4 @@
 
 export * from './alpha/index';
 export { default } from './alpha/index';
+export * from './translation';

plugins/linguist/src/components/LinguistCard/LinguistCard.tsx

@@ -27,6 +27,8 @@ import React from 'react';
 import slugify from 'slugify';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useLanguages } from '../../hooks';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { linguistTranslationRef } from '../../translation';
 
 const useStyles = makeStyles(theme => ({
   infoCard: {
@@ -56,6 +58,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export const LinguistCard = () => {
+  const { t } = useTranslationRef(linguistTranslationRef);
   const classes = useStyles();
   const theme = useTheme();
   const { entity } = useEntity();
@@ -70,12 +73,10 @@ export const LinguistCard = () => {
 
   if (items && items.languageCount === 0 && items.totalBytes === 0) {
     return (
-      <InfoCard title="Languages" className={classes.infoCard}>
+      <InfoCard title={t('entityCard.title')} className={classes.infoCard}>
         <Grid container spacing={3}>
           <Box p={2}>
-            <Typography>
-              There is currently no language data for this entity.
-            </Typography>
+            <Typography>{t('entityCard.noData')}</Typography>
           </Box>
         </Grid>
       </InfoCard>
@@ -88,7 +89,7 @@ export const LinguistCard = () => {
   const processedDate = items?.processedDate;
 
   return breakdown && processedDate ? (
-    <InfoCard title="Languages" className={classes.infoCard}>
+    <InfoCard title={t('entityCard.title')} className={classes.infoCard}>
       <Box className={classes.barContainer}>
         {breakdown.map((language, index: number) => {
           barWidth = barWidth + language.percentage;

plugins/linguist/src/translation.ts

@@ -0,0 +1,27 @@
+/*
+ * 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 linguistTranslationRef = createTranslationRef({
+  id: 'linguist',
+  messages: {
+    entityCard: {
+      title: 'Languages',
+      noData: 'There is currently no language data for this entity.',
+    },
+  },
+});