From e520f121c50ef1258336a39869fc7d1306b8ea43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Fri, 28 Dec 2018 12:20:31 +0100
Subject: [PATCH] [APM] StickyProperties should render components as values
 (#27814)

---
 .../__snapshots__/DetailView.test.tsx.snap    |  2 +-
 .../ErrorGroupDetails/DetailView/index.tsx    |  2 +-
 .../StickyProperties/StickyProperties.test.js | 78 ++++++++++++++++++-
 .../StickyProperties.test.js.snap             | 40 ++++++----
 .../shared/StickyProperties/index.tsx         |  4 +-
 5 files changed, 104 insertions(+), 22 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap
index 43fc3d0371df..55d471975767 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/__test__/__snapshots__/DetailView.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`DetailView should render StickyProperties 1`] = `
       Object {
         "fieldName": "error.exception.handled",
         "label": "Handled",
-        "val": true,
+        "val": "true",
         "width": "25%",
       },
       Object {
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
index 667c9a11720e..2e0e549b4aaa 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
@@ -112,7 +112,7 @@ export function DetailView({ errorGroup, urlParams, location }: Props) {
     {
       fieldName: ERROR_EXC_HANDLED,
       label: 'Handled',
-      val: get(error, ERROR_EXC_HANDLED, 'N/A'),
+      val: String(get(error, ERROR_EXC_HANDLED, 'N/A')),
       width: '25%'
     },
     {
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js b/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
index aa1ea0cb62d5..1ec04b7d1b0a 100644
--- a/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/StickyProperties.test.js
@@ -13,7 +13,7 @@ import { mockMoment } from '../../../utils/testHelpers';
 describe('StickyProperties', () => {
   beforeEach(mockMoment);
 
-  it('should render', () => {
+  it('should render entire component', () => {
     const stickyProperties = [
       {
         label: 'Timestamp',
@@ -34,7 +34,7 @@ describe('StickyProperties', () => {
       {
         label: 'Handled',
         fieldName: 'error.exception.handled',
-        val: true
+        val: String(true)
       },
       {
         label: 'User ID',
@@ -49,4 +49,78 @@ describe('StickyProperties', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  describe('values', () => {
+    it('should render timestamp when fieldName is `@timestamp`', () => {
+      const stickyProperties = [
+        {
+          label: 'My Timestamp',
+          fieldName: '@timestamp',
+          val: 1536405447640
+        }
+      ];
+
+      const wrapper = shallow(
+        <StickyProperties stickyProperties={stickyProperties} />
+      ).find('TimestampValue');
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render numbers', () => {
+      const stickyProperties = [
+        {
+          label: 'My Number',
+          fieldName: 'myNumber',
+          val: 1337
+        }
+      ];
+
+      const wrapper = shallow(
+        <StickyProperties stickyProperties={stickyProperties} />
+      )
+        .find('PropertyValue')
+        .dive()
+        .text();
+
+      expect(wrapper).toEqual('1337');
+    });
+
+    it('should not stringify booleans', () => {
+      const stickyProperties = [
+        {
+          label: 'My boolean',
+          fieldName: 'myBoolean',
+          val: true
+        }
+      ];
+
+      const wrapper = shallow(
+        <StickyProperties stickyProperties={stickyProperties} />
+      )
+        .find('PropertyValue')
+        .dive()
+        .text();
+
+      expect(wrapper).toEqual('');
+    });
+
+    it('should render nested components', () => {
+      const stickyProperties = [
+        {
+          label: 'My Component',
+          fieldName: 'myComponent',
+          val: <h1>My header</h1>
+        }
+      ];
+
+      const wrapper = shallow(
+        <StickyProperties stickyProperties={stickyProperties} />
+      )
+        .find('PropertyValue')
+        .html();
+
+      expect(wrapper).toContain(`<h1>My header</h1>`);
+    });
+  });
 });
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
index 0788f6fd759a..de93fc92bc67 100644
--- a/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/__snapshots__/StickyProperties.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StickyProperties should render 1`] = `
+exports[`StickyProperties should render entire component 1`] = `
 <EuiFlexGroup
   alignItems="stretch"
   component="div"
@@ -27,7 +27,7 @@ exports[`StickyProperties should render 1`] = `
       }
     }
   >
-    <styled.div>
+    <PropertyLabel>
       <EuiToolTip
         content={
           <styled.span>
@@ -41,7 +41,7 @@ exports[`StickyProperties should render 1`] = `
           Timestamp
         </span>
       </EuiToolTip>
-    </styled.div>
+    </PropertyLabel>
     <TimestampValue
       timestamp={1536405447640}
     />
@@ -57,7 +57,7 @@ exports[`StickyProperties should render 1`] = `
       }
     }
   >
-    <styled.div>
+    <PropertyLabel>
       <EuiToolTip
         content={
           <styled.span>
@@ -71,7 +71,7 @@ exports[`StickyProperties should render 1`] = `
           URL
         </span>
       </EuiToolTip>
-    </styled.div>
+    </PropertyLabel>
     <EuiToolTip
       content="https://www.elastic.co/test"
       delay="regular"
@@ -93,7 +93,7 @@ exports[`StickyProperties should render 1`] = `
       }
     }
   >
-    <styled.div>
+    <PropertyLabel>
       <EuiToolTip
         content={
           <styled.span>
@@ -107,10 +107,10 @@ exports[`StickyProperties should render 1`] = `
           Request method
         </span>
       </EuiToolTip>
-    </styled.div>
-    <styled.div>
+    </PropertyLabel>
+    <PropertyValue>
       GET
-    </styled.div>
+    </PropertyValue>
   </EuiFlexItem>
   <EuiFlexItem
     component="div"
@@ -123,7 +123,7 @@ exports[`StickyProperties should render 1`] = `
       }
     }
   >
-    <styled.div>
+    <PropertyLabel>
       <EuiToolTip
         content={
           <styled.span>
@@ -137,10 +137,10 @@ exports[`StickyProperties should render 1`] = `
           Handled
         </span>
       </EuiToolTip>
-    </styled.div>
-    <styled.div>
+    </PropertyLabel>
+    <PropertyValue>
       true
-    </styled.div>
+    </PropertyValue>
   </EuiFlexItem>
   <EuiFlexItem
     component="div"
@@ -153,7 +153,7 @@ exports[`StickyProperties should render 1`] = `
       }
     }
   >
-    <styled.div>
+    <PropertyLabel>
       <EuiToolTip
         content={
           <styled.span>
@@ -167,10 +167,16 @@ exports[`StickyProperties should render 1`] = `
           User ID
         </span>
       </EuiToolTip>
-    </styled.div>
-    <styled.div>
+    </PropertyLabel>
+    <PropertyValue>
       1337
-    </styled.div>
+    </PropertyValue>
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
+
+exports[`StickyProperties values should render timestamp when fieldName is \`@timestamp\` 1`] = `
+<TimestampValue
+  timestamp={1536405447640}
+/>
+`;
diff --git a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
index be4ff1cf9eb7..99637cc1f069 100644
--- a/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
@@ -40,6 +40,7 @@ const PropertyLabel = styled.div`
     cursor: help;
   }
 `;
+PropertyLabel.displayName = 'PropertyLabel';
 
 const PropertyValueDimmed = styled.span`
   color: ${colors.gray3};
@@ -49,6 +50,7 @@ const PropertyValue = styled.div`
   display: inline-block;
   line-height: ${px(unit)};
 `;
+PropertyValue.displayName = 'PropertyValue';
 
 const PropertyValueTruncated = styled.span`
   display: inline-block;
@@ -101,7 +103,7 @@ function getPropertyValue({
     );
   }
 
-  return <PropertyValue>{String(val)}</PropertyValue>;
+  return <PropertyValue>{val}</PropertyValue>;
 }
 
 export function StickyProperties({