[Discover] Improve HTML formatting of fields with a list of values (#136684)

* [Discover] Improve HTML formatting of fields with a list of values

* [Discover] Add support for highlighting array brackets and commas

* [Discover] Update array field format to use a CSS class instead of inline styles

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/field_formats/common/content_types/html_content_type.ts

@@ -33,6 +33,7 @@ export const setup = (
   htmlContextTypeConvert?: HtmlContextTypeConvert
 ): HtmlContextTypeConvert => {
   const convert = getConvertFn(format, htmlContextTypeConvert);
+  const highlight = (text: string) => `<span class="ffArray__highlight">${text}</span>`;
 
   const recurse: HtmlContextTypeConvert = (value, options = {}) => {
     if (value == null) {
@@ -46,11 +47,23 @@ export const setup = (
     const subValues = value.map((v: unknown) => recurse(v, options));
     const useMultiLine = subValues.some((sub: string) => sub.indexOf('\n') > -1);
 
-    return subValues.join(',' + (useMultiLine ? '\n' : ' '));
+    return subValues.join(highlight(',') + (useMultiLine ? '\n' : ' '));
   };
 
   const wrap: HtmlContextTypeConvert = (value, options) => {
-    return recurse(value, options);
+    const convertedValue = recurse(value, options);
+
+    if (!Array.isArray(value) || value.length < 2) {
+      return convertedValue;
+    }
+
+    if (convertedValue.includes('\n')) {
+      const indentedValue = convertedValue.replaceAll(/(\n+)/g, '$1  ');
+
+      return highlight('[') + `\n  ${indentedValue}\n` + highlight(']');
+    }
+
+    return highlight('[') + convertedValue + highlight(']');
   };
 
   return wrap;

src/plugins/field_formats/common/field_format.test.ts

@@ -147,6 +147,35 @@ describe('FieldFormat class', () => {
 
         expect(f.convert(['one', 'two', 'three'])).toBe('["one","two","three"]');
       });
+
+      test('formats a list of values as html', () => {
+        const f = getTestFormat();
+
+        expect(f.convert([123, 456, 789], 'html')).toMatchInlineSnapshot(
+          `"<span class=\\"ffArray__highlight\\">[</span>123<span class=\\"ffArray__highlight\\">,</span> 456<span class=\\"ffArray__highlight\\">,</span> 789<span class=\\"ffArray__highlight\\">]</span>"`
+        );
+      });
+
+      test('formats a list of values containing newlines as html', () => {
+        const f = getTestFormat();
+        const newlineList = [
+          '{\n  "foo": "bar",\n  "fizz": "buzz"\n}',
+          '{\n  "bar": "foo",\n  "buzz": "fizz"\n}',
+        ];
+
+        expect(f.convert(newlineList, 'html')).toMatchInlineSnapshot(`
+          "<span class=\\"ffArray__highlight\\">[</span>
+            {
+              &quot;foo&quot;: &quot;bar&quot;,
+              &quot;fizz&quot;: &quot;buzz&quot;
+            }<span class=\\"ffArray__highlight\\">,</span>
+            {
+              &quot;bar&quot;: &quot;foo&quot;,
+              &quot;buzz&quot;: &quot;fizz&quot;
+            }
+          <span class=\\"ffArray__highlight\\">]</span>"
+        `);
+      });
     });
   });
 });

src/plugins/field_formats/public/index.scss

@@ -1 +1,2 @@
 @import './lib/converters/index';
+@import './lib/content_types/index';

src/plugins/field_formats/public/lib/content_types/_html_content_type.scss

@@ -0,0 +1,3 @@
+.ffArray__highlight {
+  color: $euiColorMediumShade;
+}

src/plugins/field_formats/public/lib/content_types/_index.scss

@@ -0,0 +1 @@
+@import './html_content_type';