fix(scorecard): add translation for status column in scorecard entities table (#2649)

Author: Eswaraiahsapram

workspaces/scorecard/.changeset/fine-poems-wear.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+add translation for the scorecard entities table status column

workspaces/scorecard/plugins/scorecard/src/components/ScorecardPage/EntitiesTable/cells/MetricStatusCell.tsx

@@ -17,9 +17,16 @@
 import { memo } from 'react';
 
 import Box from '@mui/material/Box';
+import { useTranslation } from '../../../../hooks/useTranslation';
 
 export const MetricStatusCell = memo(
   ({ status, theme }: { status: string | undefined; theme: any }) => {
+    const { t } = useTranslation();
+
+    let translatedStatus = t(`thresholds.${status}` as any, {});
+    if (translatedStatus === `thresholds.${status}` && status) {
+      translatedStatus = status?.charAt(0).toUpperCase() + status?.slice(1);
+    }
     return (
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
         <Box
@@ -32,7 +39,7 @@ export const MetricStatusCell = memo(
             flexShrink: 0,
           }}
         />
-        {status || '--'}
+        {(status && translatedStatus) || '--'}
       </Box>
     );
   },

workspaces/scorecard/plugins/scorecard/src/components/ScorecardPage/EntitiesTable/cells/__tests__/MetricStatusCell.test.tsx

@@ -37,7 +37,7 @@ describe('MetricStatusCell', () => {
       </ThemeProvider>,
     );
 
-    expect(screen.getByText('success')).toBeInTheDocument();
+    expect(screen.getByText('Success')).toBeInTheDocument();
   });
 
   it('should render -- when status is empty string', () => {
@@ -68,6 +68,34 @@ describe('MetricStatusCell', () => {
       </ThemeProvider>,
     );
 
-    expect(screen.getByText('customStatus')).toBeInTheDocument();
+    expect(screen.getByText('CustomStatus')).toBeInTheDocument();
+  });
+
+  it('should render translated label for known threshold statuses', () => {
+    const { rerender } = render(
+      <ThemeProvider theme={theme}>
+        <MetricStatusCell status="warning" theme={theme} />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('Warning')).toBeInTheDocument();
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <MetricStatusCell status="error" theme={theme} />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('should capitalise unknown status when no translation key matches', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <MetricStatusCell status="pending" theme={theme} />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByText('Pending')).toBeInTheDocument();
   });
 });