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

…ns missing (elastic#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

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+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[];
+}
+
+export function Section({ keyValuePairs }: Props) {
+  if (!isEmpty(keyValuePairs)) {
+    return <KeyValueTable keyValuePairs={keyValuePairs} />;
+  }
+  return (
+    <EuiText size="s">
+      {i18n.translate(
+        'xpack.apm.propertiesTable.agentFeature.noDataAvailableLabel',
+        { defaultMessage: 'No data available' }
+      )}
+    </EuiText>
+  );
+}

x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/__test__/Section.test.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import 'jest-dom/extend-expect';
+import { render } from 'react-testing-library';
+import { Section } from '../Section';
+import { expectTextsInDocument } from '../../../../utils/testHelpers';
+
+describe('Section', () => {
+  it('shows "empty state message" if no data is available', () => {
+    const component = render(<Section keyValuePairs={[]} />);
+    expectTextsInDocument(component, ['No data available']);
+  });
+});