fix: StackDetails support translations

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

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

@@ -33,6 +33,8 @@ 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.showMoreDetails': 'Show more details';
+    readonly 'errorPage.showLessDetails': 'Show less details';
     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';

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

@@ -19,6 +19,8 @@ import { useState } from 'react';
 import { Link } from '../../components/Link';
 import { CodeSnippet } from '../../components';
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { coreComponentsTranslationRef } from '../../translation';
 
 interface IStackDetailsProps {
   stack: string;
@@ -46,6 +48,7 @@ const useStyles = makeStyles(
 export function StackDetails(props: IStackDetailsProps) {
   const { stack } = props;
   const classes = useStyles();
+  const { t } = useTranslationRef(coreComponentsTranslationRef);
 
   const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
 
@@ -53,7 +56,7 @@ export function StackDetails(props: IStackDetailsProps) {
     return (
       <Typography variant="h6" className={classes.title}>
         <Link to="#" onClick={() => setDetailsOpen(true)}>
-          Show more details
+          {t('errorPage.showMoreDetails')}
         </Link>
       </Typography>
     );
@@ -63,7 +66,7 @@ export function StackDetails(props: IStackDetailsProps) {
     <>
       <Typography variant="h6" className={classes.title}>
         <Link to="#" onClick={() => setDetailsOpen(false)}>
-          Show less details
+          {t('errorPage.showLessDetails')}
         </Link>
       </Typography>
       <CodeSnippet

packages/core-components/src/translation.ts

@@ -54,6 +54,8 @@ export const coreComponentsTranslationRef = createTranslationRef({
       subtitle: 'ERROR {{status}}: {{statusMessage}}',
       title: 'Looks like someone dropped the mic!',
       goBack: 'Go back',
+      showMoreDetails: 'Show more details',
+      showLessDetails: 'Show less details',
     },
     emptyState: {
       missingAnnotation: {