From 7dbe341c78e2d5e865e735942d732aa486c52f6c Mon Sep 17 00:00:00 2001 From: Matthew Kime Date: Mon, 21 Feb 2022 09:35:06 -0600 Subject: [PATCH] [data views] Improve preview pane (#126013) * fix preview pane * fix preview pane * one less span tag Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../public/components/preview/field_preview_context.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx b/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx index a4a09562c300f..981654ac52d91 100644 --- a/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx +++ b/src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx @@ -16,6 +16,7 @@ import React, { useRef, FunctionComponent, } from 'react'; +import { renderToString } from 'react-dom/server'; import useDebounce from 'react-use/lib/useDebounce'; import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; @@ -45,8 +46,10 @@ const defaultParams: Params = { format: null, }; -export const defaultValueFormatter = (value: unknown) => - `${typeof value === 'object' ? JSON.stringify(value) : value ?? '-'}`; +export const defaultValueFormatter = (value: unknown) => { + const content = typeof value === 'object' ? JSON.stringify(value) : String(value) ?? '-'; + return renderToString(<>{content}); +}; export const FieldPreviewProvider: FunctionComponent = ({ children }) => { const previewCount = useRef(0);