Merge pull request #19979 from backstage/rugvip/user-settings-messages

user-settings: avoid using undeclared translation keys

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

@@ -16,11 +16,8 @@ export const userSettingsTranslationRef: TranslationRef<
     readonly theme_dark: 'Dark';
     readonly theme_auto: 'Auto';
     readonly change_the_theme_mode: 'Change the theme mode';
-    readonly select_theme_light: 'Select light';
-    readonly select_theme_dark: 'Select dark';
+    readonly select_theme: 'Select {{theme}}';
     readonly select_theme_auto: 'Select Auto Theme';
-    readonly select_theme_custom: 'Select {{custom}}';
-    readonly lng: '{{language}}';
     readonly select_lng: 'Select language {{language}}';
   }
 >;

plugins/user-settings/dev/index.tsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import { CatalogEntityPage } from '@backstage/plugin-catalog';
 import { createDevApp } from '@backstage/dev-utils';
 import { userSettingsPlugin, UserSettingsPage } from '../src/plugin';
 
@@ -22,6 +23,8 @@ createDevApp()
   .registerPlugin(userSettingsPlugin)
   .addPage({
     title: 'Settings',
+    path: '/settings',
     element: <UserSettingsPage />,
   })
+  .addPage({ element: <CatalogEntityPage /> })
   .render();

plugins/user-settings/package.json

@@ -68,6 +68,7 @@
   "devDependencies": {
     "@backstage/cli": "workspace:^",
     "@backstage/dev-utils": "workspace:^",
+    "@backstage/plugin-catalog": "workspace:^",
     "@backstage/test-utils": "workspace:^",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.10.1",

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

@@ -135,7 +135,7 @@ export const UserSettingsLanguageToggle = () => {
                 title={t('select_lng', { language })}
                 value={language}
               >
-                <>{t('lng', { language })}</>
+                <>{language}</>
               </TooltipToggleButton>
             );
           })}

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

@@ -142,24 +142,21 @@ export const UserSettingsThemeToggle = () => {
         >
           {themeIds.map(theme => {
             const themeIcon = themeIds.find(it => it.id === theme.id)?.icon;
-            const themeId = theme.id as 'light' | 'dark';
+            const themeId = theme.id;
+            const themeTitle =
+              theme.title ||
+              (themeId === 'light' || themeId === 'dark'
+                ? t(`theme_${themeId}`)
+                : themeId);
             return (
               <TooltipToggleButton
-                key={theme.id}
-                title={
-                  theme.title
-                    ? t('select_theme_custom', { custom: theme.title })
-                    : t(`select_theme_${themeId}`)
-                }
-                value={theme.id}
+                key={themeId}
+                title={t('select_theme', { theme: themeTitle })}
+                value={themeId}
               >
                 <>
-                  {theme.title || t(`theme_${themeId}`)}&nbsp;
-                  <ThemeIcon
-                    id={theme.id}
-                    icon={themeIcon}
-                    activeId={themeId}
-                  />
+                  {themeTitle}&nbsp;
+                  <ThemeIcon id={themeId} icon={themeIcon} activeId={themeId} />
                 </>
               </TooltipToggleButton>
             );

plugins/user-settings/src/translation.ts

@@ -27,11 +27,8 @@ export const userSettingsTranslationRef = createTranslationRef({
     theme_dark: 'Dark',
     theme_auto: 'Auto',
     change_the_theme_mode: 'Change the theme mode',
-    select_theme_light: 'Select light',
-    select_theme_dark: 'Select dark',
+    select_theme: 'Select {{theme}}',
     select_theme_auto: 'Select Auto Theme',
-    select_theme_custom: 'Select {{custom}}',
-    lng: '{{language}}',
     select_lng: 'Select language {{language}}',
   } as const,
 });

yarn.lock

@@ -9865,6 +9865,7 @@ __metadata:
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
     "@backstage/errors": "workspace:^"
+    "@backstage/plugin-catalog": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"