feat: Add some translation to user-setting plugin

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

.changeset/long-suits-obey.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Add some translation to user-setting plugin

plugins/user-settings/report-alpha.api.md

@@ -154,6 +154,8 @@ export const userSettingsTranslationRef: TranslationRef<
     readonly 'defaultSettingsPage.tabsTitle.general': 'General';
     readonly 'settingsLayout.title': 'Settings';
     readonly sidebarTitle: 'Settings';
+    readonly 'profileCard.title': 'Profile';
+    readonly 'appearanceCard.title': 'Appearance';
   }
 >;
 

plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx

@@ -19,13 +19,16 @@ import List from '@material-ui/core/List';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 import { UserSettingsLanguageToggle } from './UserSettingsLanguageToggle';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation';
 
 /** @public */
 export const UserSettingsAppearanceCard = () => {
   const { isMobile } = useSidebarPinState();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
 
   return (
-    <InfoCard title="Appearance" variant="gridItem">
+    <InfoCard title={t('appearanceCard.title')} variant="gridItem">
       <List dense>
         <UserSettingsThemeToggle />
         <UserSettingsLanguageToggle />

plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx

@@ -20,13 +20,16 @@ import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from '../useUserProfileInfo';
 import { InfoCard } from '@backstage/core-components';
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { userSettingsTranslationRef } from '../../translation';
 
 /** @public */
 export const UserSettingsProfileCard = () => {
   const { profile, displayName } = useUserProfile();
+  const { t } = useTranslationRef(userSettingsTranslationRef);
 
   return (
-    <InfoCard title="Profile" variant="gridItem">
+    <InfoCard title={t('profileCard.title')} variant="gridItem">
       <Grid container spacing={6}>
         <Grid item>
           <UserSettingsSignInAvatar size={96} />

plugins/user-settings/src/translation.ts

@@ -119,5 +119,11 @@ export const userSettingsTranslationRef = createTranslationRef({
       title: 'Settings',
     },
     sidebarTitle: 'Settings',
+    profileCard: {
+      title: 'Profile',
+    },
+    appearanceCard: {
+      title: 'Appearance',
+    },
   },
 });