feat: home plugin support i18n

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

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',
+    },
+  },
+});