From cbc70acab9d3e3c047316b9d891e00d5e263936c Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Tue, 19 Jul 2022 17:25:11 -0300 Subject: [PATCH 1/3] [Discover] Improve HTML formatting of fields with a list of values --- .../common/content_types/html_content_type.ts | 14 +++++++++- .../field_formats/common/field_format.test.ts | 27 +++++++++++++++++++ 2 files changed, 40 insertions(+), 1 deletion(-) 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 index f1906ab3e68f7..9ac1bf082cc18 100644 --- a/src/plugins/field_formats/common/content_types/html_content_type.ts +++ b/src/plugins/field_formats/common/content_types/html_content_type.ts @@ -50,7 +50,19 @@ export const setup = ( }; 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 `[\n ${indentedValue}\n]`; + } + + return `[${convertedValue}]`; }; return wrap; diff --git a/src/plugins/field_formats/common/field_format.test.ts b/src/plugins/field_formats/common/field_format.test.ts index 41c403d8055c7..a36e2faef0bbd 100644 --- a/src/plugins/field_formats/common/field_format.test.ts +++ b/src/plugins/field_formats/common/field_format.test.ts @@ -147,6 +147,33 @@ 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')).toBe('[123, 456, 789]'); + }); + + 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(` + "[ + { + "foo": "bar", + "fizz": "buzz" + }, + { + "bar": "foo", + "buzz": "fizz" + } + ]" + `); + }); }); }); }); From 79ace8765b0ee5d9650bc3a31fcc04c0b54924ae Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Wed, 20 Jul 2022 16:34:57 -0300 Subject: [PATCH 2/3] [Discover] Add support for highlighting array brackets and commas --- .../common/content_types/html_content_type.ts | 9 ++++++--- src/plugins/field_formats/common/field_format.test.ts | 10 ++++++---- 2 files changed, 12 insertions(+), 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 index 9ac1bf082cc18..8d2a67cc207b1 100644 --- 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) => `${text}`; 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 index a36e2faef0bbd..57f9482333066 100644 --- 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( + `"[123, 456, 789]"` + ); }); test('formats a list of values containing newlines as html', () => { @@ -162,16 +164,16 @@ describe('FieldFormat class', () => { ]; expect(f.convert(newlineList, 'html')).toMatchInlineSnapshot(` - "[ + "[ { "foo": "bar", "fizz": "buzz" - }, + }, { "bar": "foo", "buzz": "fizz" } - ]" + ]" `); }); }); From ebebb6670729b17903a4d34f0c3879a8faaa2ee1 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Thu, 21 Jul 2022 19:43:44 -0300 Subject: [PATCH 3/3] [Discover] Update array field format to use a CSS class instead of inline styles --- .../common/content_types/html_content_type.ts | 4 +--- src/plugins/field_formats/common/field_format.test.ts | 8 ++++---- src/plugins/field_formats/public/index.scss | 1 + .../public/lib/content_types/_html_content_type.scss | 3 +++ .../field_formats/public/lib/content_types/_index.scss | 1 + 5 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 src/plugins/field_formats/public/lib/content_types/_html_content_type.scss create mode 100644 src/plugins/field_formats/public/lib/content_types/_index.scss 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 index 8d2a67cc207b1..22fbe81f1a69a 100644 --- 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,7 +7,6 @@ */ import { escape, isFunction } from 'lodash'; -import { euiThemeVars } from '@kbn/ui-theme'; import { IFieldFormat, HtmlContextTypeConvert, FieldFormatsContentType } from '../types'; import { asPrettyString, getHighlightHtml } from '../utils'; @@ -34,8 +33,7 @@ export const setup = ( htmlContextTypeConvert?: HtmlContextTypeConvert ): HtmlContextTypeConvert => { const convert = getConvertFn(format, htmlContextTypeConvert); - const highlightColor = euiThemeVars.euiColorMediumShade; - const highlight = (text: string) => `${text}`; + const highlight = (text: string) => `${text}`; const recurse: HtmlContextTypeConvert = (value, options = {}) => { if (value == null) { diff --git a/src/plugins/field_formats/common/field_format.test.ts b/src/plugins/field_formats/common/field_format.test.ts index 57f9482333066..2db6caca2c4c4 100644 --- a/src/plugins/field_formats/common/field_format.test.ts +++ b/src/plugins/field_formats/common/field_format.test.ts @@ -152,7 +152,7 @@ describe('FieldFormat class', () => { const f = getTestFormat(); expect(f.convert([123, 456, 789], 'html')).toMatchInlineSnapshot( - `"[123, 456, 789]"` + `"[123, 456, 789]"` ); }); @@ -164,16 +164,16 @@ describe('FieldFormat class', () => { ]; expect(f.convert(newlineList, 'html')).toMatchInlineSnapshot(` - "[ + "[ { "foo": "bar", "fizz": "buzz" - }, + }, { "bar": "foo", "buzz": "fizz" } - ]" + ]" `); }); }); diff --git a/src/plugins/field_formats/public/index.scss b/src/plugins/field_formats/public/index.scss index 7928d81b1f565..d3dffb385feeb 100644 --- a/src/plugins/field_formats/public/index.scss +++ b/src/plugins/field_formats/public/index.scss @@ -1 +1,2 @@ @import './lib/converters/index'; +@import './lib/content_types/index'; diff --git a/src/plugins/field_formats/public/lib/content_types/_html_content_type.scss b/src/plugins/field_formats/public/lib/content_types/_html_content_type.scss new file mode 100644 index 0000000000000..244be673b4a4d --- /dev/null +++ b/src/plugins/field_formats/public/lib/content_types/_html_content_type.scss @@ -0,0 +1,3 @@ +.ffArray__highlight { + color: $euiColorMediumShade; +} diff --git a/src/plugins/field_formats/public/lib/content_types/_index.scss b/src/plugins/field_formats/public/lib/content_types/_index.scss new file mode 100644 index 0000000000000..e2fb515dd800f --- /dev/null +++ b/src/plugins/field_formats/public/lib/content_types/_index.scss @@ -0,0 +1 @@ +@import './html_content_type';