plugins: update translation messages to use nested structure and camelCase

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/silver-rocks-deliver.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-user-settings': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-adr': patch
+---
+
+Updated alpha translation message keys to use nested format and camel case.

plugins/adr/alpha-api-report.md

@@ -17,9 +17,9 @@ export const AdrSearchResultListItemExtension: Extension<{
 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';
+    readonly contentHeaderTitle: 'Architecture Decision Records';
+    readonly failedToFetch: 'Failed to fetch ADRs';
+    readonly notFound: 'No ADRs found';
   }
 >;
 

plugins/adr/src/components/EntityAdrContent/EntityAdrContent.tsx

@@ -219,7 +219,7 @@ export const EntityAdrContent = (props: {
 
   return (
     <Content>
-      <ContentHeader title={t('content_header_title')}>
+      <ContentHeader title={t('contentHeaderTitle')}>
         {appSupportConfigured && <SupportButton />}
       </ContentHeader>
 
@@ -230,7 +230,7 @@ export const EntityAdrContent = (props: {
       {loading && <Progress />}
 
       {entityHasAdrs && !loading && error && (
-        <WarningPanel title={t('failed_to_fetch')} message={error?.message} />
+        <WarningPanel title={t('failedToFetch')} message={error?.message} />
       )}
 
       {entityHasAdrs &&
@@ -257,7 +257,7 @@ export const EntityAdrContent = (props: {
             </Grid>
           </Grid>
         ) : (
-          <Typography>{t('no_adrs')}</Typography>
+          <Typography>{t('notFound')}</Typography>
         ))}
     </Content>
   );

plugins/adr/src/translations.ts

@@ -19,8 +19,8 @@ import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
 export const adrTranslationRef = createTranslationRef({
   id: 'adr',
   messages: {
-    content_header_title: 'Architecture Decision Records',
-    failed_to_fetch: 'Failed to fetch ADRs',
-    no_adrs: 'No ADRs found',
+    contentHeaderTitle: 'Architecture Decision Records',
+    failedToFetch: 'Failed to fetch ADRs',
+    notFound: 'No ADRs found',
   },
 });

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -62,11 +62,11 @@ export function BaseCatalogPage(props: BaseCatalogPageProps) {
   const { t } = useTranslationRef(catalogTranslationRef);
 
   return (
-    <PageWithHeader title={t('catalog_page_title', { orgName })} themeId="home">
+    <PageWithHeader title={t('indexPage.title', { orgName })} themeId="home">
       <Content>
         <ContentHeader title="">
           <CreateButton
-            title={t('catalog_page_create_button_title')}
+            title={t('indexPage.createButtonTitle')}
             to={createComponentLink && createComponentLink()}
           />
           <SupportButton>All your software catalog entities</SupportButton>

plugins/catalog/src/translation.ts

@@ -20,7 +20,9 @@ import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
 export const catalogTranslationRef = createTranslationRef({
   id: 'catalog',
   messages: {
-    catalog_page_title: `{{orgName}} Catalog`,
-    catalog_page_create_button_title: 'Create',
+    indexPage: {
+      title: `{{orgName}} Catalog`,
+      createButtonTitle: 'Create',
+    },
   },
 });

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

@@ -20,16 +20,16 @@ export default _default;
 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: 'Select {{theme}}';
-    readonly select_theme_auto: 'Select Auto Theme';
-    readonly select_lng: 'Select language {{language}}';
+    readonly 'languageToggle.select': 'Select language {{language}}';
+    readonly 'languageToggle.title': 'Language';
+    readonly 'languageToggle.description': 'Change the language';
+    readonly 'themeToggle.select': 'Select theme {{theme}}';
+    readonly 'themeToggle.title': 'Theme';
+    readonly 'themeToggle.description': 'Change the theme mode';
+    readonly 'themeToggle.names.auto': 'Auto';
+    readonly 'themeToggle.names.dark': 'Dark';
+    readonly 'themeToggle.names.light': 'Light';
+    readonly 'themeToggle.selectAuto': 'Select Auto Theme';
   }
 >;
 

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

@@ -118,8 +118,8 @@ export const UserSettingsLanguageToggle = () => {
     >
       <ListItemText
         className={classes.listItemText}
-        primary={t('language')}
-        secondary={t('change_the_language')}
+        primary={t('languageToggle.title')}
+        secondary={t('languageToggle.description')}
       />
       <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
         <ToggleButtonGroup
@@ -132,7 +132,7 @@ export const UserSettingsLanguageToggle = () => {
             return (
               <TooltipToggleButton
                 key={language}
-                title={t('select_lng', { language })}
+                title={t('languageToggle.select', { language })}
                 value={language}
               >
                 <>{language}</>

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

@@ -130,8 +130,8 @@ export const UserSettingsThemeToggle = () => {
     >
       <ListItemText
         className={classes.listItemText}
-        primary={t('theme')}
-        secondary={t('change_the_theme_mode')}
+        primary={t('themeToggle.title')}
+        secondary={t('themeToggle.description')}
       />
       <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
         <ToggleButtonGroup
@@ -146,12 +146,12 @@ export const UserSettingsThemeToggle = () => {
             const themeTitle =
               theme.title ||
               (themeId === 'light' || themeId === 'dark'
-                ? t(`theme_${themeId}`)
+                ? t(`themeToggle.names.${themeId}`)
                 : themeId);
             return (
               <TooltipToggleButton
                 key={themeId}
-                title={t('select_theme', { theme: themeTitle })}
+                title={t('themeToggle.select', { theme: themeTitle })}
                 value={themeId}
               >
                 <>
@@ -165,9 +165,9 @@ export const UserSettingsThemeToggle = () => {
               </TooltipToggleButton>
             );
           })}
-          <Tooltip placement="top" arrow title={t('select_theme_auto')}>
+          <Tooltip placement="top" arrow title={t('themeToggle.selectAuto')}>
             <ToggleButton value="auto" selected={activeThemeId === undefined}>
-              {t('theme_auto')}&nbsp;
+              {t('themeToggle.names.auto')}&nbsp;
               <AutoIcon
                 color={activeThemeId === undefined ? 'primary' : undefined}
               />

plugins/user-settings/src/translation.ts

@@ -20,15 +20,21 @@ import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
 export const userSettingsTranslationRef = createTranslationRef({
   id: 'user-settings',
   messages: {
-    language: 'Language',
-    change_the_language: 'Change the language',
-    theme: 'Theme',
-    theme_light: 'Light',
-    theme_dark: 'Dark',
-    theme_auto: 'Auto',
-    change_the_theme_mode: 'Change the theme mode',
-    select_theme: 'Select {{theme}}',
-    select_theme_auto: 'Select Auto Theme',
-    select_lng: 'Select language {{language}}',
+    languageToggle: {
+      title: 'Language',
+      description: 'Change the language',
+      select: 'Select language {{language}}',
+    },
+    themeToggle: {
+      title: 'Theme',
+      description: 'Change the theme mode',
+      select: 'Select theme {{theme}}',
+      selectAuto: 'Select Auto Theme',
+      names: {
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'Auto',
+      },
+    },
   },
 });