From a3c079bda645b62e0ac92e739c3af123a9ceb160 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 1 Jul 2021 09:26:43 +0200 Subject: [PATCH] Make (empty) value subdued (#103833) * Make empty value subdued * Fix highlighting in values * Fix test failures * Add unit tests --- .../field_formats/converters/string.test.ts | 28 +++++++++++++++++++ .../common/field_formats/converters/string.ts | 17 +++++++++-- .../field_formats/converters/_index.scss | 1 + .../field_formats/converters/_string.scss | 3 ++ src/plugins/data/public/index.scss | 1 + 5 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 src/plugins/data/public/field_formats/converters/_index.scss create mode 100644 src/plugins/data/public/field_formats/converters/_string.scss diff --git a/src/plugins/data/common/field_formats/converters/string.test.ts b/src/plugins/data/common/field_formats/converters/string.test.ts index ccb7a58285b20..d691712b674dd 100644 --- a/src/plugins/data/common/field_formats/converters/string.test.ts +++ b/src/plugins/data/common/field_formats/converters/string.test.ts @@ -8,6 +8,14 @@ import { StringFormat } from './string'; +/** + * Removes a wrapping span, that is created by the field formatter infrastructure + * and we're not caring about in these tests. + */ +function stripSpan(input: string): string { + return input.replace(/^\(.*)\<\/span\>$/, '$1'); +} + describe('String Format', () => { test('convert a string to lower case', () => { const string = new StringFormat( @@ -17,6 +25,7 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('Kibana')).toBe('kibana'); + expect(stripSpan(string.convert('Kibana', 'html'))).toBe('kibana'); }); test('convert a string to upper case', () => { @@ -27,6 +36,7 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('Kibana')).toBe('KIBANA'); + expect(stripSpan(string.convert('Kibana', 'html'))).toBe('KIBANA'); }); test('decode a base64 string', () => { @@ -37,6 +47,7 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('Zm9vYmFy')).toBe('foobar'); + expect(stripSpan(string.convert('Zm9vYmFy', 'html'))).toBe('foobar'); }); test('convert a string to title case', () => { @@ -47,10 +58,15 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('PLEASE DO NOT SHOUT')).toBe('Please Do Not Shout'); + expect(stripSpan(string.convert('PLEASE DO NOT SHOUT', 'html'))).toBe('Please Do Not Shout'); expect(string.convert('Mean, variance and standard_deviation.')).toBe( 'Mean, Variance And Standard_deviation.' ); + expect(stripSpan(string.convert('Mean, variance and standard_deviation.', 'html'))).toBe( + 'Mean, Variance And Standard_deviation.' + ); expect(string.convert('Stay CALM!')).toBe('Stay Calm!'); + expect(stripSpan(string.convert('Stay CALM!', 'html'))).toBe('Stay Calm!'); }); test('convert a string to short case', () => { @@ -61,6 +77,7 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('dot.notated.string')).toBe('d.n.string'); + expect(stripSpan(string.convert('dot.notated.string', 'html'))).toBe('d.n.string'); }); test('convert a string to unknown transform case', () => { @@ -82,5 +99,16 @@ describe('String Format', () => { jest.fn() ); expect(string.convert('%EC%95%88%EB%85%95%20%ED%82%A4%EB%B0%94%EB%82%98')).toBe('안녕 키바나'); + expect( + stripSpan(string.convert('%EC%95%88%EB%85%95%20%ED%82%A4%EB%B0%94%EB%82%98', 'html')) + ).toBe('안녕 키바나'); + }); + + test('outputs specific empty value', () => { + const string = new StringFormat(); + expect(string.convert('')).toBe('(empty)'); + expect(stripSpan(string.convert('', 'html'))).toBe( + '(empty)' + ); }); }); diff --git a/src/plugins/data/common/field_formats/converters/string.ts b/src/plugins/data/common/field_formats/converters/string.ts index 64367df5d90dd..28dd714abaf41 100644 --- a/src/plugins/data/common/field_formats/converters/string.ts +++ b/src/plugins/data/common/field_formats/converters/string.ts @@ -6,14 +6,15 @@ * Side Public License, v 1. */ +import escape from 'lodash/escape'; import { i18n } from '@kbn/i18n'; -import { asPrettyString } from '../utils'; +import { asPrettyString, getHighlightHtml } from '../utils'; import { KBN_FIELD_TYPES } from '../../kbn_field_types/types'; import { FieldFormat } from '../field_format'; -import { TextContextTypeConvert, FIELD_FORMAT_IDS } from '../types'; +import { TextContextTypeConvert, FIELD_FORMAT_IDS, HtmlContextTypeConvert } from '../types'; import { shortenDottedString } from '../../utils'; -export const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', { +const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', { defaultMessage: '(empty)', }); @@ -127,4 +128,14 @@ export class StringFormat extends FieldFormat { return asPrettyString(val); } }; + + htmlConvert: HtmlContextTypeConvert = (val, { hit, field } = {}) => { + if (val === '') { + return `${emptyLabel}`; + } + + return hit?.highlight?.[field?.name] + ? getHighlightHtml(val, hit.highlight[field.name]) + : escape(this.textConvert(val)); + }; } diff --git a/src/plugins/data/public/field_formats/converters/_index.scss b/src/plugins/data/public/field_formats/converters/_index.scss new file mode 100644 index 0000000000000..cc13062a3ef8b --- /dev/null +++ b/src/plugins/data/public/field_formats/converters/_index.scss @@ -0,0 +1 @@ +@import './string'; diff --git a/src/plugins/data/public/field_formats/converters/_string.scss b/src/plugins/data/public/field_formats/converters/_string.scss new file mode 100644 index 0000000000000..9d97f0195780c --- /dev/null +++ b/src/plugins/data/public/field_formats/converters/_string.scss @@ -0,0 +1,3 @@ +.ffString__emptyValue { + color: $euiColorDarkShade; +} diff --git a/src/plugins/data/public/index.scss b/src/plugins/data/public/index.scss index 467efa98934ec..c0eebf3402771 100644 --- a/src/plugins/data/public/index.scss +++ b/src/plugins/data/public/index.scss @@ -1,2 +1,3 @@ @import './ui/index'; @import './utils/table_inspector_view/index'; +@import './field_formats/converters/index';