Empty message "No data available" for Labels and User metadata sectio…

…ns missing (#49846)

* Adding missing data message when sections are required

* refactoring test

* fixing unit test

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 (

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']);
   });
 });