Get linguist component title from translation

Signed-off-by: Piotr Piątkiewicz <piatkiewicz.piotr@gmail.com>

.changeset/lazy-terms-shake.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-linguist': patch
 ---
 
-Allow to optionally pass component's title as LinguistCard parameter
+Get component's title from translation file

plugins/linguist/README.md

@@ -79,12 +79,6 @@ To setup the Linguist Card frontend you'll need to do the following steps:
     </Grid>
    ```
 
-3. (optionally) Set component's title - default is "Languages"
-
-   ```tsx
-   <EntityLinguistCard title="Tech stack" />
-   ```
-
 **Notes:**
 
 - The `if` prop is optional on the `EntitySwitch.Case`, you can remove it if you always want to see the tab even if the entity being viewed does not have the needed annotation

plugins/linguist/api-report.md

@@ -10,11 +10,7 @@ import { Entity } from '@backstage/catalog-model';
 import { JSX as JSX_2 } from 'react';
 
 // @public (undocumented)
-export const EntityLinguistCard: ({
-  title,
-}: {
-  title?: string | undefined;
-}) => JSX_2.Element;
+export const EntityLinguistCard: () => JSX_2.Element;
 
 // @public (undocumented)
 export const isLinguistAvailable: (entity: Entity) => boolean;

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: {
@@ -55,7 +57,8 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const LinguistCard = ({ title = 'Languages' }) => {
+export const LinguistCard = () => {
+  const { t } = useTranslationRef(linguistTranslationRef);
   const classes = useStyles();
   const theme = useTheme();
   const { entity } = useEntity();
@@ -70,7 +73,7 @@ export const LinguistCard = ({ title = 'Languages' }) => {
 
   if (items && items.languageCount === 0 && items.totalBytes === 0) {
     return (
-      <InfoCard title={title} className={classes.infoCard}>
+      <InfoCard title={t('component.title')} className={classes.infoCard}>
         <Grid container spacing={3}>
           <Box p={2}>
             <Typography>

plugins/linguist/src/translation.ts

@@ -0,0 +1,26 @@
+/*
+ * 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: {
+    component: {
+      title: 'Languages',
+    },
+  },
+});