{
const styles = useStyles();
const onClose = () => setSettingsDialogOpen(false);
+ const { t } = useTranslationRef(homeTranslationRef);
return (
@@ -98,10 +101,10 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
>
@@ -116,7 +119,7 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
>
{widget.settingsSchema && (
-
+
setSettingsDialogOpen(true)}
@@ -128,7 +131,7 @@ export const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {
)}
{deletable !== false && (
-
+
handleRemove(id)}>
diff --git a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx
index 28f199978d..60433fbddf 100644
--- a/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx
+++ b/plugins/home/src/components/StarredEntityListItem/StarredEntityListItem.tsx
@@ -26,6 +26,8 @@ import { entityRouteRef } from '@backstage/plugin-catalog-react';
import { useRouteRef } from '@backstage/core-plugin-api';
import { FavoriteToggle } from '@backstage/core-components';
import { makeStyles } from '@material-ui/core/styles';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeTranslationRef } from '../../translation';
type EntityListItemProps = {
entity: Entity;
@@ -50,6 +52,7 @@ export const StarredEntityListItem = ({
}: EntityListItemProps) => {
const classes = useStyles();
const catalogEntityRoute = useRouteRef(entityRouteRef);
+ const { t } = useTranslationRef(homeTranslationRef);
let secondaryText = '';
if (showKind) {
@@ -80,7 +83,7 @@ export const StarredEntityListItem = ({
>
onToggleStarredEntity(entity)}
/>
diff --git a/plugins/home/src/components/VisitList/VisitListEmpty.tsx b/plugins/home/src/components/VisitList/VisitListEmpty.tsx
index e8b6d369d2..144c9a2066 100644
--- a/plugins/home/src/components/VisitList/VisitListEmpty.tsx
+++ b/plugins/home/src/components/VisitList/VisitListEmpty.tsx
@@ -14,16 +14,20 @@
* limitations under the License.
*/
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
import Typography from '@material-ui/core/Typography';
+import { homeTranslationRef } from '../../translation';
-export const VisitListEmpty = () => (
- <>
-
- There are no visits to show yet.
-
-
- Once you start using Backstage, your visits will appear here as a quick
- link to carry on where you left off.
-
-
-);
+export const VisitListEmpty = () => {
+ const { t } = useTranslationRef(homeTranslationRef);
+ return (
+ <>
+
+ {t('visitList.empty.title')}
+
+
+ {t('visitList.empty.description')}
+
+
+ );
+};
diff --git a/plugins/home/src/components/VisitList/VisitListFew.tsx b/plugins/home/src/components/VisitList/VisitListFew.tsx
index 26fdb92293..7f741f3af5 100644
--- a/plugins/home/src/components/VisitList/VisitListFew.tsx
+++ b/plugins/home/src/components/VisitList/VisitListFew.tsx
@@ -14,12 +14,17 @@
* limitations under the License.
*/
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
import Typography from '@material-ui/core/Typography';
+import { homeTranslationRef } from '../../translation';
-export const VisitListFew = () => (
- <>
-
- The more pages you visit, the more pages will appear here.
-
-
-);
+export const VisitListFew = () => {
+ const { t } = useTranslationRef(homeTranslationRef);
+ return (
+ <>
+
+ {t('visitList.few.title')}
+
+
+ );
+};
diff --git a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
index 475ef4b47e..a854203fdb 100644
--- a/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
+++ b/plugins/home/src/homePageComponents/FeaturedDocsCard/Content.tsx
@@ -33,6 +33,8 @@ import { EntityFilterQuery } from '@backstage/catalog-client';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import { stringifyEntityRef } from '@backstage/catalog-model';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeTranslationRef } from '../../translation';
/**
* Props customizing the component.
@@ -88,7 +90,8 @@ const useStyles = makeStyles(
export const Content = (props: FeaturedDocsCardProps): JSX.Element => {
const { emptyState, filter, linkDestination, responseLimit, subLinkText } =
props;
- const linkText = subLinkText || 'LEARN MORE';
+ const { t } = useTranslationRef(homeTranslationRef);
+ const linkText = subLinkText || t('featuredDocsCard.learnMoreTitle');
const styles = useStyles();
const catalogApi = useApi(catalogApiRef);
const {
@@ -153,14 +156,14 @@ export const Content = (props: FeaturedDocsCardProps): JSX.Element => {
emptyState || (
- DOCS
+ {t('featuredDocsCard.empty.learnMoreLinkTitle')}
}
/>
diff --git a/plugins/home/src/homePageComponents/QuickStart/Content.tsx b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
index b923970888..5317312626 100644
--- a/plugins/home/src/homePageComponents/QuickStart/Content.tsx
+++ b/plugins/home/src/homePageComponents/QuickStart/Content.tsx
@@ -20,6 +20,8 @@ import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import { ContentModal } from '@backstage/plugin-home-react';
import { useStyles } from './styles';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeTranslationRef } from '../../translation';
/**
* Props customizing the component.
@@ -54,14 +56,15 @@ export type QuickStartCardProps = {
*/
export const Content = (props: QuickStartCardProps): JSX.Element => {
const styles = useStyles();
+ const { t } = useTranslationRef(homeTranslationRef);
return (
<>
- {props.cardDescription || 'Get started with Backstage'}
+ {props.cardDescription || t('quickStart.description')}
{
variant="h6"
className={styles.link}
>
- {props.docsLinkTitle || 'Learn more'}
+ {props.docsLinkTitle || t('quickStart.learnMoreLinkTitle')}
diff --git a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
index 80f5ee74b5..ffe1b36b36 100644
--- a/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
+++ b/plugins/home/src/homePageComponents/StarredEntities/Content.tsx
@@ -29,6 +29,8 @@ import { ReactNode, useState } from 'react';
import useAsync from 'react-use/esm/useAsync';
import { StarredEntityListItem } from '../../components/StarredEntityListItem/StarredEntityListItem';
import { makeStyles } from '@material-ui/core/styles';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeTranslationRef } from '../../translation';
const useStyles = makeStyles(theme => ({
tabs: {
@@ -63,6 +65,7 @@ export const Content = ({
const catalogApi = useApi(catalogApiRef);
const { starredEntities, toggleStarredEntity } = useStarredEntities();
const [activeTab, setActiveTab] = useState(0);
+ const { t } = useTranslationRef(homeTranslationRef);
// Grab starred entities from catalog to ensure they still exist and also retrieve display titles
const entities = useAsync(async () => {
@@ -89,7 +92,7 @@ export const Content = ({
return (
{noStarredEntitiesMessage ||
- 'Click the star beside an entity name to add it to this list!'}
+ t('starredEntities.noStarredEntitiesMessage')}
);
diff --git a/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx b/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx
index a8e8bf7722..4c874f93a7 100644
--- a/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx
+++ b/plugins/home/src/homePageComponents/VisitedByType/Actions.tsx
@@ -17,6 +17,8 @@
import { useCallback } from 'react';
import Button from '@material-ui/core/Button';
import { useContext } from './Context';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { homeTranslationRef } from '../../translation';
export const Actions = () => {
const { collapsed, setCollapsed, visits, numVisitsOpen, loading } =
@@ -25,7 +27,10 @@ export const Actions = () => {
() => setCollapsed(prevCollapsed => !prevCollapsed),
[setCollapsed],
);
- const label = collapsed ? 'View More' : 'View Less';
+ const { t } = useTranslationRef(homeTranslationRef);
+ const label = collapsed
+ ? t('visitedByType.action.viewMore')
+ : t('visitedByType.action.viewLess');
if (!loading && visits.length <= numVisitsOpen) return <>;
diff --git a/plugins/home/src/translation.ts b/plugins/home/src/translation.ts
new file mode 100644
index 0000000000..4070dde28c
--- /dev/null
+++ b/plugins/home/src/translation.ts
@@ -0,0 +1,81 @@
+/*
+ * 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 homeTranslationRef = createTranslationRef({
+ id: 'home',
+ messages: {
+ addWidgetDialog: {
+ title: 'Add new widget to dashboard',
+ },
+ customHomepageButtons: {
+ edit: 'Edit',
+ restoreDefaults: 'Restore defaults',
+ clearAll: 'Clear all',
+ addWidget: 'Add widget',
+ save: 'Save',
+ },
+ customHomepage: {
+ noWidgets: "No widgets added. Start by clicking the 'Add widget' button.",
+ },
+ widgetSettingsOverlay: {
+ editSettingsTooptip: 'Edit settings',
+ deleteWidgetTooltip: 'Delete widget',
+ submitButtonTitle: 'Submit',
+ cancelButtonTitle: 'Cancel',
+ },
+ starredEntityListItem: {
+ removeFavoriteEntityTitle: 'Remove entity from favorites',
+ },
+ visitList: {
+ empty: {
+ title: 'There are no visits to show yet.',
+ description:
+ 'Once you start using Backstage, your visits will appear here as a quick link to carry on where you left off.',
+ },
+ few: {
+ title: 'The more pages you visit, the more pages will appear here.',
+ },
+ },
+ quickStart: {
+ title: 'Onboarding',
+ description: 'Get started with Backstage',
+ learnMoreLinkTitle: 'Learn more',
+ },
+ starredEntities: {
+ noStarredEntitiesMessage:
+ 'Click the star beside an entity name to add it to this list!',
+ },
+ visitedByType: {
+ action: {
+ viewMore: 'View more',
+ viewLess: 'View less',
+ },
+ },
+ featuredDocsCard: {
+ learnMoreTitle: 'LEARN MORE',
+ empty: {
+ title: 'No documents to show',
+ description:
+ 'Create your own document. Check out our Getting Started Information',
+ learnMoreLinkTitle: 'DOCS',
+ },
+ },
+ },
+});
diff --git a/yarn.lock b/yarn.lock
index b09bfdd787..400bf07bea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6797,6 +6797,7 @@ __metadata:
"@backstage/cli": "workspace:^"
"@backstage/core-components": "workspace:^"
"@backstage/core-plugin-api": "workspace:^"
+ "@backstage/frontend-plugin-api": "workspace:^"
"@material-ui/core": "npm:^4.12.2"
"@material-ui/icons": "npm:^4.9.1"
"@rjsf/utils": "npm:5.23.2"