[Discover] Add support for highlighting array brackets and commas

elastic · Jul 20, 2022 · e6c388d · e6c388d
1 parent 39aa31f
commit e6c388d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/plugins/field_formats/common/content_types/html_content_type.ts b/src/plugins/field_formats/common/content_types/html_content_type.ts
@@ -7,6 +7,7 @@
  */
 
 import { escape, isFunction } from 'lodash';
+import { euiThemeVars } from '@kbn/ui-theme';
 import { IFieldFormat, HtmlContextTypeConvert, FieldFormatsContentType } from '../types';
 import { asPrettyString, getHighlightHtml } from '../utils';
 
@@ -33,6 +34,8 @@ export const setup = (
  htmlContextTypeConvert?: HtmlContextTypeConvert
 ): HtmlContextTypeConvert => {
  const convert = getConvertFn(format, htmlContextTypeConvert);
+ const highlightColor = euiThemeVars.euiColorMediumShade;
+ const highlight = (text: string) => `<span style="color: ${highlightColor};">${text}</span>`;
 
  const recurse: HtmlContextTypeConvert = (value, options = {}) => {
  if (value == null) {
@@ -46,7 +49,7 @@ 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) => {
@@ -59,10 +62,10 @@ export const setup = (
  if (convertedValue.includes('\n')) {
  const indentedValue = convertedValue.replaceAll(/(\n+)/g, '$1 ');
 
- return `[\n ${indentedValue}\n]`;
+ return highlight('[') + `\n ${indentedValue}\n` + highlight(']');
  }
 
- return `[${convertedValue}]`;
+ return highlight('[') + convertedValue + highlight(']');
  };
 
  return wrap;

diff --git a/src/plugins/field_formats/common/field_format.test.ts b/src/plugins/field_formats/common/field_format.test.ts
@@ -151,7 +151,9 @@ describe('FieldFormat class', () => {
  test('formats a list of values as html', () => {
  const f = getTestFormat();
 
- expect(f.convert([123, 456, 789], 'html')).toBe('[123, 456, 789]');
+ expect(f.convert([123, 456, 789], 'html')).toMatchInlineSnapshot(
+ `"<span style=\\"color: #98a2b3;\\">[</span>123<span style=\\"color: #98a2b3;\\">,</span> 456<span style=\\"color: #98a2b3;\\">,</span> 789<span style=\\"color: #98a2b3;\\">]</span>"`
+ );
  });
 
  test('formats a list of values containing newlines as html', () => {
@@ -162,16 +164,16 @@ describe('FieldFormat class', () => {
  ];
 
  expect(f.convert(newlineList, 'html')).toMatchInlineSnapshot(`
- "[
+ "<span style=\\"color: #98a2b3;\\">[</span>
  {
  &quot;foo&quot;: &quot;bar&quot;,
  &quot;fizz&quot;: &quot;buzz&quot;
- },
+ }<span style=\\"color: #98a2b3;\\">,</span>
  {
  &quot;bar&quot;: &quot;foo&quot;,
  &quot;buzz&quot;: &quot;fizz&quot;
  }
- ]"
+ <span style=\\"color: #98a2b3;\\">]</span>"
  `);
  });
  });