fix: optimize translation keys

Signed-off-by: rui ma <ruima@alauda.io>

packages/core-components/api-report-alpha.md

@@ -15,20 +15,15 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'signIn.title': 'Sign In';
     readonly 'signIn.loginFailed': 'Login failed';
     readonly 'signIn.customProvider.title': 'Custom User';
-    readonly 'signIn.customProvider.subtitle2': 'This selection will not be stored.';
-    readonly 'signIn.customProvider.subtitle': 'Enter your own User ID and credentials.';
+    readonly 'signIn.customProvider.subtitle': 'Enter your own User ID and credentials.\n This selection will not be stored.';
     readonly 'signIn.customProvider.userId': 'User ID';
     readonly 'signIn.customProvider.tokenInvalid': 'Token is not a valid OpenID Connect JWT Token';
     readonly 'signIn.customProvider.continue': 'Continue';
     readonly 'signIn.customProvider.idToken': 'ID Token (optional)';
     readonly 'signIn.guestProvider.title': 'Guest';
-    readonly 'signIn.guestProvider.description': 'You will not have a verified identity, meaning some features might be unavailable.';
     readonly 'signIn.guestProvider.enter': 'Enter';
-    readonly 'signIn.guestProvider.subtitle': 'Enter as a Guest User.';
-    readonly 'sidebar.shipToContent': 'Skip to content';
-    readonly 'sidebar.starredIntroText': 'Fun fact! As you explore all the awesome plugins in Backstage, you can actually pin them to this side nav.Keep an eye out for the little star icon (⭐) next to the plugin name and give it a click!';
-    readonly 'sidebar.recentlyViewedIntroText': 'And your recently viewed plugins will pop up here!';
-    readonly 'sidebar.dismiss': 'Dismiss';
+    readonly 'signIn.guestProvider.subtitle': 'Enter as a Guest User.\n You will not have a verified identity, meaning some features might be unavailable.';
+    readonly shipToContent: 'Skip to content';
     readonly 'copyTextButton.tooltipText': 'Text copied to clipboard';
     readonly 'simpleStepper.finish': 'Finish';
     readonly 'simpleStepper.reset': 'Reset';
@@ -38,9 +33,6 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'errorPage.title': 'Looks like someone dropped the mic!';
     readonly 'errorPage.subtitle': 'ERROR {{status}}: {{statusMessage}}';
     readonly 'errorPage.goBack': 'Go back';
-    readonly 'errorPage.orPlease': '... or please ';
-    readonly 'errorPage.contactSupport': 'contact support';
-    readonly 'errorPage.isBug': 'if you think this is a bug.';
     readonly 'emptyState.missingAnnotation.title': 'Missing Annotation';
     readonly 'emptyState.missingAnnotation.actionTitle': 'Add the annotation to your component YAML as shown in the highlighted example below:';
     readonly 'emptyState.missingAnnotation.readMore': 'Read more';
@@ -48,8 +40,8 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'emptyState.missingAnnotation.descriptionPrefix_other': 'The annotations ';
     readonly 'emptyState.missingAnnotation.descriptionSuffix_one': ' is missing. You need to add the annotation to your component if you want to enable this tool.';
     readonly 'emptyState.missingAnnotation.descriptionSuffix_other': ' are missing. You need to add the annotations to your component if you want to enable this tool.';
-    readonly 'supportConfig.title': 'Support Not Configured';
-    readonly 'supportConfig.links.title': 'Add `app.support` config key';
+    readonly 'supportConfig.default.title': 'Support Not Configured';
+    readonly 'supportConfig.default.linkTitle': 'Add `app.support` config key';
     readonly 'errorBoundary.title': 'Please contact {{slackChannel}} for help.';
     readonly 'oauthRequestDialog.title': 'Login Required';
     readonly 'oauthRequestDialog.authRedirectTitle': 'This will trigger a http redirect to OAuth Login.';
@@ -57,8 +49,8 @@ export const coreComponentsTranslationRef: TranslationRef<
     readonly 'oauthRequestDialog.rejectAll': 'Reject All';
     readonly 'supportButton.title': 'Support';
     readonly 'supportButton.close': 'Close';
-    readonly 'alertDisplay.message_one': '({{ num }} older message)';
-    readonly 'alertDisplay.message_other': '({{ num }} older messages)';
+    readonly 'alertDisplay.message_one': '({{ count }} older message)';
+    readonly 'alertDisplay.message_other': '({{ count }} older messages)';
     readonly 'autoLogout.stillTherePrompt.title': 'Logging out due to inactivity';
     readonly 'autoLogout.stillTherePrompt.description': 'You are about to be disconnected in';
     readonly 'autoLogout.stillTherePrompt.second_one': 'second';

packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx

@@ -125,7 +125,6 @@ export function AlertDisplay(props: AlertDisplayProps) {
           {messages.length > 1 && (
             <em>
               {t('alertDisplay.message', {
-                num: String(messages.length - 1),
                 count: messages.length - 1,
               })}
             </em>

packages/core-components/src/hooks/useSupportConfig.ts

@@ -40,12 +40,12 @@ const useDefaultSupportConfig = () => {
     url: 'https://github.com/backstage/backstage/issues',
     items: [
       {
-        title: t('supportConfig.title'),
+        title: t('supportConfig.default.title'),
         icon: 'warning',
         links: [
           {
             // TODO: Update to dedicated support page on backstage.io/docs
-            title: t('supportConfig.links.title'),
+            title: t('supportConfig.default.linkTitle'),
             url: 'https://github.com/backstage/backstage/blob/master/app-config.yaml',
           },
         ],

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -66,7 +66,13 @@ const useStyles = makeStyles(
  *
  */
 export function ErrorPage(props: IErrorPageProps) {
-  const { status, statusMessage, additionalInfo, supportUrl, stack } = props;
+  const {
+    status = '',
+    statusMessage,
+    additionalInfo,
+    supportUrl,
+    stack,
+  } = props;
   const classes = useStyles();
   const navigate = useNavigate();
   const support = useSupportConfig();
@@ -80,7 +86,7 @@ export function ErrorPage(props: IErrorPageProps) {
           variant="body1"
           className={classes.subtitle}
         >
-          {t('errorPage.subtitle', { status: status || '', statusMessage })}
+          {t('errorPage.subtitle', { status, statusMessage })}
         </Typography>
         <Typography variant="body1" className={classes.subtitle}>
           {additionalInfo}
@@ -92,11 +98,9 @@ export function ErrorPage(props: IErrorPageProps) {
           <Link to="#" data-testid="go-back-link" onClick={() => navigate(-1)}>
             {t('errorPage.goBack')}
           </Link>
-          {t('errorPage.orPlease')}
-          <Link to={supportUrl || support.url}>
-            {t('errorPage.contactSupport')}
-          </Link>
-          {t('errorPage.isBug')}
+          ... or please{' '}
+          <Link to={supportUrl || support.url}>contact support</Link> if you
+          think this is a bug.
         </Typography>
         {stack && <StackDetails stack={stack} />}
       </Grid>

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -263,7 +263,7 @@ function A11ySkipSidebar() {
       variant="contained"
       className={classnames(classes.visuallyHidden)}
     >
-      {t('sidebar.shipToContent')}
+      {t('shipToContent')}
     </Button>
   );
 }

packages/core-components/src/layout/SignInPage/customProvider.tsx

@@ -46,6 +46,9 @@ const useFormStyles = makeStyles(
       alignSelf: 'center',
       marginTop: theme.spacing(2),
     },
+    subTitle: {
+      whiteSpace: 'pre-line',
+    },
   }),
   { name: 'BackstageCustomProvider' },
 );
@@ -88,10 +91,8 @@ const Component: ProviderComponent = ({ onSignInStarted, onSignInSuccess }) => {
   return (
     <GridItem>
       <InfoCard title={t('signIn.customProvider.title')} variant="fullHeight">
-        <Typography variant="body1">
+        <Typography variant="body1" className={classes.subTitle}>
           {t('signIn.customProvider.subtitle')}
-          <br />
-          {t('signIn.customProvider.subtitle2')}
         </Typography>
 
         <form className={classes.form} onSubmit={handleSubmit(handleResult)}>

packages/core-components/src/translation.ts

@@ -25,8 +25,8 @@ export const coreComponentsTranslationRef = createTranslationRef({
       loginFailed: 'Login failed',
       customProvider: {
         title: 'Custom User',
-        subtitle: 'Enter your own User ID and credentials.',
-        subtitle2: 'This selection will not be stored.',
+        subtitle:
+          'Enter your own User ID and credentials.\n This selection will not be stored.',
         userId: 'User ID',
         tokenInvalid: 'Token is not a valid OpenID Connect JWT Token',
         continue: 'Continue',
@@ -34,20 +34,12 @@ export const coreComponentsTranslationRef = createTranslationRef({
       },
       guestProvider: {
         title: 'Guest',
-        subtitle: 'Enter as a Guest User.',
-        description:
-          'You will not have a verified identity, meaning some features might be unavailable.',
+        subtitle:
+          'Enter as a Guest User.\n You will not have a verified identity, meaning some features might be unavailable.',
         enter: 'Enter',
       },
     },
-    sidebar: {
-      shipToContent: 'Skip to content',
-      starredIntroText:
-        'Fun fact! As you explore all the awesome plugins in Backstage, you can actually pin them to this side nav.Keep an eye out for the little star icon (⭐) next to the plugin name and give it a click!',
-      recentlyViewedIntroText:
-        'And your recently viewed plugins will pop up here!',
-      dismiss: 'Dismiss',
-    },
+    shipToContent: 'Skip to content',
     copyTextButton: {
       tooltipText: 'Text copied to clipboard',
     },
@@ -62,9 +54,6 @@ export const coreComponentsTranslationRef = createTranslationRef({
       subtitle: 'ERROR {{status}}: {{statusMessage}}',
       title: 'Looks like someone dropped the mic!',
       goBack: 'Go back',
-      orPlease: '... or please ',
-      contactSupport: 'contact support',
-      isBug: 'if you think this is a bug.',
     },
     emptyState: {
       missingAnnotation: {
@@ -81,9 +70,9 @@ export const coreComponentsTranslationRef = createTranslationRef({
       },
     },
     supportConfig: {
-      title: 'Support Not Configured',
-      links: {
-        title: 'Add `app.support` config key',
+      default: {
+        title: 'Support Not Configured',
+        linkTitle: 'Add `app.support` config key',
       },
     },
     errorBoundary: {
@@ -109,8 +98,8 @@ export const coreComponentsTranslationRef = createTranslationRef({
       },
     },
     alertDisplay: {
-      message_one: '({{ num }} older message)',
-      message_other: '({{ num }} older messages)',
+      message_one: '({{ count }} older message)',
+      message_other: '({{ count }} older messages)',
     },
     autoLogout: {
       stillTherePrompt: {