From 4051adf8fb8664799df9d0e634e665616c96f329 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 16 Sep 2023 17:41:37 +0200
Subject: [PATCH 1/2] user-settings: fix dev setup

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/user-settings/dev/index.tsx | 3 +++
 plugins/user-settings/package.json  | 1 +
 yarn.lock                           | 1 +
 3 files changed, 5 insertions(+)

diff --git a/plugins/user-settings/dev/index.tsx b/plugins/user-settings/dev/index.tsx
index 86dc7c0d42..90be1e3bad 100644
--- a/plugins/user-settings/dev/index.tsx
+++ b/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();
diff --git a/plugins/user-settings/package.json b/plugins/user-settings/package.json
index 1ca1929cfc..8903065ae4 100644
--- a/plugins/user-settings/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 67674c22ba..2eb9d609e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9864,6 +9864,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:^"

From c83721fee548a7d995c3019ff2cefa021b185f7d Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sat, 16 Sep 2023 17:44:42 +0200
Subject: [PATCH 2/2] user-settings: avoid unknown translation keys

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 plugins/user-settings/alpha-api-report.md     |  5 +---
 .../General/UserSettingsLanguageToggle.tsx    |  2 +-
 .../General/UserSettingsThemeToggle.tsx       | 25 ++++++++-----------
 plugins/user-settings/src/translation.ts      |  5 +---
 4 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/plugins/user-settings/alpha-api-report.md b/plugins/user-settings/alpha-api-report.md
index 4c6ac6ef39..203cfac601 100644
--- a/plugins/user-settings/alpha-api-report.md
+++ b/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}}';
   }
 >;
diff --git a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx
index 1f5bb025ee..56756b2248 100644
--- a/plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx
+++ b/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>
             );
           })}
diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
index a97355eb07..7279fcb96a 100644
--- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
+++ b/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>
             );
diff --git a/plugins/user-settings/src/translation.ts b/plugins/user-settings/src/translation.ts
index ffe4174d99..79b817c828 100644
--- a/plugins/user-settings/src/translation.ts
+++ b/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,
 });