Merge pull request #30140 from mario-mui/feat/home-plugin-i18n

feat: home plugin support i18n

plugins/home-react/package.json

@@ -11,9 +11,7 @@
     ]
   },
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "keywords": [
     "backstage",
@@ -27,8 +25,23 @@
   },
   "license": "Apache-2.0",
   "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.ts",
+    "./package.json": "./package.json"
+  },
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "files": [
     "dist"
   ],
@@ -44,6 +57,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-alpha.api.md

@@ -0,0 +1,19 @@
+## API Report File for "@backstage/plugin-home-react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { TranslationRef } from '@backstage/frontend-plugin-api';
+
+// @alpha (undocumented)
+export const homeReactTranslationRef: TranslationRef<
+  'home-react',
+  {
+    readonly 'settingsModal.title': 'Settings';
+    readonly 'settingsModal.closeButtonTitle': 'Close';
+    readonly 'cardExtension.settingsButtonTitle': 'Settings';
+  }
+>;
+
+// (No @packageDocumentation comment for this package)
+```

plugins/home-react/src/alpha.ts

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+export { homeReactTranslationRef } from './translation';

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/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';
+
+/**
+ * @alpha
+ */
+export const homeReactTranslationRef = createTranslationRef({
+  id: 'home-react',
+  messages: {
+    settingsModal: {
+      title: 'Settings',
+      closeButtonTitle: 'Close',
+    },
+    cardExtension: {
+      settingsButtonTitle: 'Settings',
+    },
+  },
+});