Add placeholder text to DataValueComponent

Signed-off-by: Niklas Granander <ngranander@spotify.com>

plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.test.tsx

@@ -28,6 +28,15 @@ describe('DataValueComponent', () => {
     expect(rendered.getByText(value)).toBeInTheDocument();
   });
 
+  it('should render placeholder text when no value is present', async () => {
+    const field = 'Field';
+    const rendered = await renderInTestApp(
+      <DataValueComponent field={field} />,
+    );
+    expect(rendered.getByText(field)).toBeInTheDocument();
+    expect(rendered.getByText('Unknown')).toBeInTheDocument();
+  });
+
   it('grid item should render', async () => {
     const field = 'Field';
     const value = 'Value';

plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.tsx

@@ -18,14 +18,14 @@ import React from 'react';
 
 interface DataValueProps {
   field: string;
-  value: string | number | undefined;
+  value?: string | number | null | undefined;
 }
 
 export const DataValueComponent = ({ field, value }: DataValueProps) => {
   return (
     <div>
       <Typography variant="caption">{field}</Typography>
-      <Typography variant="subtitle1">{value}</Typography>
+      <Typography variant="subtitle1">{value ?? 'Unknown'}</Typography>
     </div>
   );
 };

plugins/xcmetrics/src/components/OverviewTrendsComponent/OverviewTrendsComponent.tsx

@@ -73,8 +73,8 @@ export const OverviewTrendsComponent = ({ days }: { days: number }) => {
         direction="row"
         className={classes.spacingTop}
       >
-        <DataValueGridItem field="Total Build Count" value={sumCount} />
-        <DataValueGridItem field="Total Error Count" value={sumErrors} />
+        <DataValueGridItem field="Build Count" value={sumCount} />
+        <DataValueGridItem field="Error Count" value={sumErrors} />
         <DataValueGridItem
           field="Error Rate"
           value={formatPercentage(errorRate)}