From 0afea5c0eda27febad0a9f835a2d42ce09be8cfe Mon Sep 17 00:00:00 2001 From: rui ma Date: Thu, 1 Feb 2024 13:45:49 +0800 Subject: [PATCH] fix: optimize translation keys Signed-off-by: rui ma --- packages/core-components/api-report-alpha.md | 22 +++++-------- .../components/AlertDisplay/AlertDisplay.tsx | 1 - .../src/hooks/useSupportConfig.ts | 4 +-- .../src/layout/ErrorPage/ErrorPage.tsx | 18 ++++++----- .../src/layout/Sidebar/Bar.tsx | 2 +- .../src/layout/SignInPage/customProvider.tsx | 7 +++-- packages/core-components/src/translation.ts | 31 ++++++------------- 7 files changed, 35 insertions(+), 50 deletions(-) diff --git a/packages/core-components/api-report-alpha.md b/packages/core-components/api-report-alpha.md index a51e590812..f4f35ae68a 100644 --- a/packages/core-components/api-report-alpha.md +++ b/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'; diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 19527f76c2..0291b6861d 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -125,7 +125,6 @@ export function AlertDisplay(props: AlertDisplayProps) { {messages.length > 1 && ( {t('alertDisplay.message', { - num: String(messages.length - 1), count: messages.length - 1, })} diff --git a/packages/core-components/src/hooks/useSupportConfig.ts b/packages/core-components/src/hooks/useSupportConfig.ts index 49cc44c0f7..2b969d8b4d 100644 --- a/packages/core-components/src/hooks/useSupportConfig.ts +++ b/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', }, ], diff --git a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx b/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx index f80161ff3c..72c00ed6a9 100644 --- a/packages/core-components/src/layout/ErrorPage/ErrorPage.tsx +++ b/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 })} {additionalInfo} @@ -92,11 +98,9 @@ export function ErrorPage(props: IErrorPageProps) { navigate(-1)}> {t('errorPage.goBack')} - {t('errorPage.orPlease')} - - {t('errorPage.contactSupport')} - - {t('errorPage.isBug')} + ... or please{' '} + contact support if you + think this is a bug. {stack && } diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index f8c6036158..200eb0b8e5 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/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')} ); } diff --git a/packages/core-components/src/layout/SignInPage/customProvider.tsx b/packages/core-components/src/layout/SignInPage/customProvider.tsx index ebab5dce5c..7d1de40d7b 100644 --- a/packages/core-components/src/layout/SignInPage/customProvider.tsx +++ b/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 ( - + {t('signIn.customProvider.subtitle')} -
- {t('signIn.customProvider.subtitle2')}
diff --git a/packages/core-components/src/translation.ts b/packages/core-components/src/translation.ts index a9fc17e7f6..5d7754e765 100644 --- a/packages/core-components/src/translation.ts +++ b/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: {