diff --git a/plugins/user-settings/report-alpha.api.md b/plugins/user-settings/report-alpha.api.md
index f65ea31fd4..6ec341cd93 100644
--- a/plugins/user-settings/report-alpha.api.md
+++ b/plugins/user-settings/report-alpha.api.md
@@ -153,6 +153,7 @@ export const userSettingsTranslationRef: TranslationRef<
readonly 'defaultSettingsPage.tabsTitle.authProviders': 'Authentication Providers';
readonly 'defaultSettingsPage.tabsTitle.general': 'General';
readonly 'settingsLayout.title': 'Settings';
+ readonly sideBarTitle: 'Settings';
}
>;
diff --git a/plugins/user-settings/src/components/Settings.tsx b/plugins/user-settings/src/components/Settings.tsx
index cba9549089..83cf38d69b 100644
--- a/plugins/user-settings/src/components/Settings.tsx
+++ b/plugins/user-settings/src/components/Settings.tsx
@@ -18,10 +18,13 @@ import SettingsIcon from '@material-ui/icons/Settings';
import { settingsRouteRef } from '../plugin';
import { SidebarItem } from '@backstage/core-components';
import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../translation';
/** @public */
export const Settings = (props: { icon?: IconComponent }) => {
const routePath = useRouteRef(settingsRouteRef);
const Icon = props.icon ? props.icon : SettingsIcon;
- return ;
+ const { t } = useTranslationRef(userSettingsTranslationRef);
+ return ;
};
diff --git a/plugins/user-settings/src/translation.ts b/plugins/user-settings/src/translation.ts
index 91e3e4c877..ecd8d0bfa8 100644
--- a/plugins/user-settings/src/translation.ts
+++ b/plugins/user-settings/src/translation.ts
@@ -118,5 +118,6 @@ export const userSettingsTranslationRef = createTranslationRef({
settingsLayout: {
title: 'Settings',
},
+ sideBarTitle: 'Settings',
},
});