[Infra UI] Format arrays as ul elements in LogEntryFieldColumn (#38692) (#38989)

* [Infra UI] Format arrays as ul elements in LogEntryFieldColumn

* Add enzyme test for LogEntryFieldColumn

* Fix tests

* Swap ul's for comma separation

* Use semantic markup for inline list

* Fix tests

* Use ::after element for comma separation

* Move ::after element to :not(:last-child)

* Hoist CommaSeparatedLi

* Use EuiThemeProvider in tests instead of isEnzyme prop

* Suppress type error with issue link

package.json

@@ -286,7 +286,7 @@
     "@types/dedent": "^0.7.0",
     "@types/delete-empty": "^2.0.0",
     "@types/elasticsearch": "^5.0.33",
-    "@types/enzyme": "^3.1.12",
+    "@types/enzyme": "^3.9.0",
     "@types/eslint": "^4.16.6",
     "@types/execa": "^0.9.0",
     "@types/fetch-mock": "7.3.0",

x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { LogEntryFieldColumn } from './log_entry_field_column';
+import { mount } from 'enzyme';
+import { EuiThemeProvider } from '../../../../../../common/eui_styled_components';
+
+describe('LogEntryFieldColumn', () => {
+  it('should output a <ul> when displaying an Array of values', () => {
+    const encodedValue = '["a","b","c"]'; // Using JSON.stringify here fails the test when running locally on macOS
+    const component = mount(
+      <LogEntryFieldColumn
+        encodedValue={encodedValue}
+        isHighlighted={false}
+        isHovered={false}
+        isWrapped={false}
+      />,
+      { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
+    );
+    expect(component.exists('ul')).toBe(true);
+    expect(
+      component.containsAllMatchingElements([
+        <li key="LogEntryFieldColumn-a-0">a</li>,
+        <li key="LogEntryFieldColumn-b-1">b</li>,
+        <li key="LogEntryFieldColumn-c-2">c</li>,
+      ])
+    ).toBe(true);
+  });
+  it('should output just text when passed a non-Array', () => {
+    const encodedValue = JSON.stringify('foo');
+    const component = mount(
+      <LogEntryFieldColumn
+        encodedValue={encodedValue}
+        isHighlighted={false}
+        isHovered={false}
+        isWrapped={false}
+      />,
+      { wrappingComponent: EuiThemeProvider } as any // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/36075
+    );
+    expect(component.exists('ul')).toBe(false);
+    expect(component.text()).toEqual('foo');
+  });
+});

x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx

@@ -7,7 +7,7 @@
 import { darken, transparentize } from 'polished';
 import React, { useMemo } from 'react';
 
-import { css } from '../../../../../../common/eui_styled_components';
+import styled, { css } from '../../../../../../common/eui_styled_components';
 import { LogEntryColumnContent } from './log_entry_column';
 
 interface LogEntryFieldColumnProps {
@@ -24,10 +24,18 @@ export const LogEntryFieldColumn: React.FunctionComponent<LogEntryFieldColumnPro
   isWrapped,
 }) => {
   const value = useMemo(() => JSON.parse(encodedValue), [encodedValue]);
-
+  const formattedValue = Array.isArray(value) ? (
+    <ul>
+      {value.map((entry, i) => (
+        <CommaSeparatedLi key={`LogEntryFieldColumn-${i}`}>{entry}</CommaSeparatedLi>
+      ))}
+    </ul>
+  ) : (
+    value
+  );
   return (
     <FieldColumnContent isHighlighted={isHighlighted} isHovered={isHovered} isWrapped={isWrapped}>
-      {value}
+      {formattedValue}
     </FieldColumnContent>
   );
 };
@@ -50,6 +58,16 @@ const unwrappedContentStyle = css`
   white-space: pre;
 `;
 
+const CommaSeparatedLi = styled.li`
+  display: inline;
+  &:not(:last-child) {
+    margin-right: 1ex;
+    &::after {
+      content: ',';
+    }
+  }
+`;
+
 const FieldColumnContent = LogEntryColumnContent.extend.attrs<{
   isHighlighted: boolean;
   isHovered: boolean;

yarn.lock

@@ -3318,10 +3318,10 @@
   resolved "https://registry.yarnpkg.com/@types/elasticsearch/-/elasticsearch-5.0.33.tgz#b0fd37dc674f498223b6d68c313bdfd71f4d812b"
   integrity sha512-n/g9pqJEpE4fyUE8VvHNGtl7E2Wv8TCroNwfgAeJKRV4ghDENahtrAo1KMsFNIejBD2gDAlEUa4CM4oEEd8p9Q==
 
-"@types/enzyme@^3.1.12":
-  version "3.1.18"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.18.tgz#4b984b9a3eb9fd025c4d77e0f53d3301c3c31ef9"
-  integrity sha512-AXxcTvIEBDzcCLpLZxdSHUOvBuyAzxtsi/DGzVdAxqQRqplG9+8xxVErAJYwF+aI48/LtL2BjU6DdD+phc7IfQ==
+"@types/enzyme@^3.9.0":
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.3.tgz#d1029c0edd353d7b00f3924803eb88216460beed"
+  integrity sha512-jDKoZiiMA3lGO3skSO7dfqEHNvmiTLLV+PHD9EBQVlJANJvpY6qq1zzjRI24ZOtG7F+CS7BVWDXKewRmN8PjHQ==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"