From 03f85c32d6376c03f57fd511e0196981c62bba6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Thu, 14 Nov 2019 08:48:33 +0100
Subject: [PATCH] Empty message "No data available" for Labels and User
 metadata sections missing (#49846)

* Adding missing data message when sections are required

* refactoring test

* fixing unit test
---
 .../apm/public/components/shared/MetadataTable/Section.tsx   | 5 +++--
 .../shared/MetadataTable/__test__/Section.test.tsx           | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/Section.tsx b/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/Section.tsx
index 6f67b2458ea10..0aaeae3e4ce44 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/Section.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/Section.tsx
@@ -5,17 +5,18 @@
  */
 
 import React from 'react';
+import { isEmpty } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
 import { KeyValueTable } from '../KeyValueTable';
 import { KeyValuePair } from '../../../utils/flattenObject';
 
 interface Props {
-  keyValuePairs?: KeyValuePair[];
+  keyValuePairs: KeyValuePair[];
 }
 
 export function Section({ keyValuePairs }: Props) {
-  if (keyValuePairs) {
+  if (!isEmpty(keyValuePairs)) {
     return <KeyValueTable keyValuePairs={keyValuePairs} />;
   }
   return (
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/__test__/Section.test.tsx b/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/__test__/Section.test.tsx
index 7e68b2f84eead..4378c7fdeee0c 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/__test__/Section.test.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/__test__/Section.test.tsx
@@ -11,7 +11,7 @@ import { expectTextsInDocument } from '../../../../utils/testHelpers';
 
 describe('Section', () => {
   it('shows "empty state message" if no data is available', () => {
-    const output = render(<Section />);
-    expectTextsInDocument(output, ['No data available']);
+    const component = render(<Section keyValuePairs={[]} />);
+    expectTextsInDocument(component, ['No data available']);
   });
 });