Make (empty) value subdued (#103833) (#104048)

* Make empty value subdued

* Fix highlighting in values

* Fix test failures

* Add unit tests

Co-authored-by: Tim Roes <tim.roes@elastic.co>

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 ng-non-bindable\>(.*)\<\/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(
+      '<span class="ffString__emptyValue">(empty)</span>'
+    );
   });
 });

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 `<span class="ffString__emptyValue">${emptyLabel}</span>`;
+    }
+
+    return hit?.highlight?.[field?.name]
+      ? getHighlightHtml(val, hit.highlight[field.name])
+      : escape(this.textConvert(val));
+  };
 }

src/plugins/data/public/field_formats/converters/_index.scss

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

src/plugins/data/public/field_formats/converters/_string.scss

@@ -0,0 +1,3 @@
+.ffString__emptyValue {
+  color: $euiColorDarkShade;
+}

src/plugins/data/public/index.scss

@@ -1,2 +1,3 @@
 @import './ui/index';
 @import './utils/table_inspector_view/index';
+@import './field_formats/converters/index';