feat: home plugin support i18n

Signed-off-by: mario ma <mario.ma.node@gmail.com>

plugins/home-react/package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
+    "@backstage/frontend-plugin-api": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@rjsf/utils": "5.23.2"

plugins/home-react/report.api.md

@@ -9,6 +9,7 @@ import { JSX as JSX_3 } from 'react';
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { RJSFSchema } from '@rjsf/utils';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
+import { TranslationRef } from '@backstage/frontend-plugin-api';
 import { UiSchema } from '@rjsf/utils';
 
 // @public (undocumented)
@@ -81,6 +82,16 @@ export function createCardExtension<T>(options: {
   settings?: CardSettings;
 }): Extension<(props: CardExtensionProps<T>) => JSX_2.Element>;
 
+// @public (undocumented)
+export const homeReactTranslationRef: TranslationRef<
+  'home-react',
+  {
+    readonly 'settingsModal.title': 'Settings';
+    readonly 'settingsModal.closeButtonTitle': 'Close';
+    readonly 'cardExtension.settingsButtonTitle': 'Settings';
+  }
+>;
+
 // @public (undocumented)
 export type PluginHomeComponentsNameToClassKey = {
   PluginHomeContentModal: PluginHomeContentModalClassKey;

plugins/home-react/src/components/SettingsModal.tsx

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { homeReactTranslationRef } from '../translation';
 
 /** @public */
 export const SettingsModal = (props: {
@@ -28,16 +30,18 @@ export const SettingsModal = (props: {
   children: JSX.Element;
 }) => {
   const { open, close, componentName, children } = props;
-
+  const { t } = useTranslationRef(homeReactTranslationRef);
   return (
     <Dialog open={open} onClose={() => close()}>
       <DialogTitle>
-        {componentName ? `Settings - ${componentName}` : 'Settings'}
+        {componentName
+          ? `${t('settingsModal.title')} - ${componentName}`
+          : t('settingsModal.title')}
       </DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions>
         <Button onClick={() => close()} color="primary" variant="contained">
-          Close
+          {t('settingsModal.closeButtonTitle')}
         </Button>
       </DialogActions>
     </Dialog>

plugins/home-react/src/extensions.tsx

@@ -21,6 +21,8 @@ import { InfoCard } from '@backstage/core-components';
 import { SettingsModal } from './components';
 import { createReactExtension, useApp } from '@backstage/core-plugin-api';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeReactTranslationRef } from './translation';
 
 /**
  * @public
@@ -133,6 +135,7 @@ function CardExtension<T>(props: CardExtensionComponentProps<T>) {
   const app = useApp();
   const { Progress } = app.getComponents();
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const { t } = useTranslationRef(homeReactTranslationRef);
 
   if (Renderer) {
     return (
@@ -158,7 +161,9 @@ function CardExtension<T>(props: CardExtensionComponentProps<T>) {
       ? {
           action: (
             <IconButton onClick={() => setSettingsOpen(true)}>
-              <SettingsIcon>Settings</SettingsIcon>
+              <SettingsIcon>
+                {t('cardExtension.settingsButtonTitle')}
+              </SettingsIcon>
             </IconButton>
           ),
         }

plugins/home-react/src/index.ts

@@ -31,3 +31,4 @@ export type {
   CardConfig,
 } from './extensions';
 export * from './overridableComponents';
+export { homeReactTranslationRef } from './translation';

plugins/home-react/src/translation.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2025 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/frontend-plugin-api';
+
+/**
+ * @public
+ */
+export const homeReactTranslationRef = createTranslationRef({
+  id: 'home-react',
+  messages: {
+    settingsModal: {
+      title: 'Settings',
+      closeButtonTitle: 'Close',
+    },
+    cardExtension: {
+      settingsButtonTitle: 'Settings',
+    },
+  },
+});