Merge pull request #19898 from backstage/rugvip/i18n-resources

i18n: refactor TranslationRef and rework TranslationMessages and TranslationResource

plugins/adr/alpha-api-report.md

@@ -6,11 +6,14 @@
 import { TranslationRef } from '@backstage/core-plugin-api/alpha';
 
 // @alpha (undocumented)
-export const adrTranslationRef: TranslationRef<{
-  readonly content_header_title: 'Architecture Decision Records';
-  readonly failed_to_fetch: 'Failed to fetch ADRs';
-  readonly no_adrs: 'No ADRs found';
-}>;
+export const adrTranslationRef: TranslationRef<
+  'adr',
+  {
+    readonly content_header_title: 'Architecture Decision Records';
+    readonly failed_to_fetch: 'Failed to fetch ADRs';
+    readonly no_adrs: 'No ADRs found';
+  }
+>;
 
 // (No @packageDocumentation comment for this package)
 ```

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

@@ -6,21 +6,24 @@
 import { TranslationRef } from '@backstage/core-plugin-api/alpha';
 
 // @alpha (undocumented)
-export const userSettingsTranslationRef: TranslationRef<{
-  language: string;
-  change_the_language: string;
-  theme: string;
-  theme_light: string;
-  theme_dark: string;
-  theme_auto: string;
-  change_the_theme_mode: string;
-  select_theme_light: string;
-  select_theme_dark: string;
-  select_theme_auto: string;
-  select_theme_custom: string;
-  lng: string;
-  select_lng: string;
-}>;
+export const userSettingsTranslationRef: TranslationRef<
+  'user-settings',
+  {
+    readonly language: 'Language';
+    readonly change_the_language: 'Change the language';
+    readonly theme: 'Theme';
+    readonly theme_light: 'Light';
+    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_auto: 'Select Auto Theme';
+    readonly select_theme_custom: 'Select {{custom}}';
+    readonly lng: '{{language}}';
+    readonly select_lng: 'Select language {{language}}';
+  }
+>;
 
 // (No @packageDocumentation comment for this package)
 ```

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

@@ -15,7 +15,6 @@
  */
 
 import { AppTheme, appThemeApiRef } from '@backstage/core-plugin-api';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import {
   renderWithEffects,
   TestApiRegistry,
@@ -28,7 +27,6 @@ import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 import { ApiProvider, AppThemeSelector } from '@backstage/core-app-api';
-import { userSettingsTranslationRef } from '../../translation';
 
 const mockTheme: AppTheme = {
   id: 'light-theme',
@@ -41,11 +39,6 @@ const mockTheme: AppTheme = {
   ),
 };
 
-jest.mock('@backstage/core-plugin-api/alpha', () => ({
-  ...jest.requireActual('@backstage/core-plugin-api/alpha'),
-  useTranslationRef: jest.fn(),
-}));
-
 const apiRegistry = TestApiRegistry.from([
   appThemeApiRef,
   AppThemeSelector.createWithStorage([mockTheme]),
@@ -54,15 +47,6 @@ const apiRegistry = TestApiRegistry.from([
 describe('<UserSettingsThemeToggle />', () => {
   it('toggles the theme select button', async () => {
     const themeApi = apiRegistry.get(appThemeApiRef);
-    // todo: general test provider
-    const messages: Record<string, string> =
-      userSettingsTranslationRef.getDefaultMessages();
-
-    const useTranslationRefMock = jest
-      .fn()
-      .mockReturnValue((key: string) => messages[key]);
-
-    (useTranslationRef as jest.Mock).mockImplementation(useTranslationRefMock);
 
     const rendered = await renderWithEffects(
       wrapInTestApp(

plugins/user-settings/src/translation.ts

@@ -33,5 +33,5 @@ export const userSettingsTranslationRef = createTranslationRef({
     select_theme_custom: 'Select {{custom}}',
     lng: '{{language}}',
     select_lng: 'Select language {{language}}',
-  },
+  } as const,
 });