From 2627f19b7b52fcc1ae451af45b7dfa92b8e0c9a0 Mon Sep 17 00:00:00 2001
From: Niklas Granander <ngranander@spotify.com>
Date: Tue, 20 Jul 2021 15:32:31 +0200
Subject: [PATCH] Add placeholder text to DataValueComponent

Signed-off-by: Niklas Granander <ngranander@spotify.com>
---
 .../DataValueComponent/DataValueComponent.test.tsx       | 9 +++++++++
 .../components/DataValueComponent/DataValueComponent.tsx | 4 ++--
 .../OverviewTrendsComponent/OverviewTrendsComponent.tsx  | 4 ++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.test.tsx b/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.test.tsx
index 3681b7cf20..68c32a1a3d 100644
--- a/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.test.tsx
+++ b/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';
diff --git a/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.tsx b/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.tsx
index 52e80d3291..d29dfe3213 100644
--- a/plugins/xcmetrics/src/components/DataValueComponent/DataValueComponent.tsx
+++ b/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>
   );
 };
diff --git a/plugins/xcmetrics/src/components/OverviewTrendsComponent/OverviewTrendsComponent.tsx b/plugins/xcmetrics/src/components/OverviewTrendsComponent/OverviewTrendsComponent.tsx
index cbc64a902e..5dff52c2db 100644
--- a/plugins/xcmetrics/src/components/OverviewTrendsComponent/OverviewTrendsComponent.tsx
+++ b/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)}