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:
```
-3. (optionally) Set component's title - default is "Languages"
-
- ```tsx
-
- ```
-
**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 (
-
+
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',
+ },
+ },
+});