From fe8e16df4a20c93c86722010585c7663ef23519d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Pi=C4=85tkiewicz?= <piatkiewicz.piotr@gmail.com>
Date: Mon, 12 Feb 2024 15:44:05 +0100
Subject: [PATCH] Get linguist component title from translation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Piotr Piątkiewicz <piatkiewicz.piotr@gmail.com>
---
 .changeset/lazy-terms-shake.md                |  2 +-
 plugins/linguist/README.md                    |  6 -----
 plugins/linguist/api-report.md                |  6 +----
 .../components/LinguistCard/LinguistCard.tsx  |  7 +++--
 plugins/linguist/src/translation.ts           | 26 +++++++++++++++++++
 5 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 plugins/linguist/src/translation.ts

diff --git a/.changeset/lazy-terms-shake.md b/.changeset/lazy-terms-shake.md
index 62fd2d848e..03c0fee21f 100644
--- a/.changeset/lazy-terms-shake.md
+++ b/.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
diff --git a/plugins/linguist/README.md b/plugins/linguist/README.md
index 72855c0894..7ad70f1db6 100644
--- a/plugins/linguist/README.md
+++ b/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
diff --git a/plugins/linguist/api-report.md b/plugins/linguist/api-report.md
index ca1ce3cdd2..71e2460088 100644
--- a/plugins/linguist/api-report.md
+++ b/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;
diff --git a/plugins/linguist/src/components/LinguistCard/LinguistCard.tsx b/plugins/linguist/src/components/LinguistCard/LinguistCard.tsx
index 3b63abd406..95aa5e0d89 100644
--- a/plugins/linguist/src/components/LinguistCard/LinguistCard.tsx
+++ b/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>
diff --git a/plugins/linguist/src/translation.ts b/plugins/linguist/src/translation.ts
new file mode 100644
index 0000000000..78a34f2f7e
--- /dev/null
+++ b/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',
+    },
+  },
+});