[FieldFormatters] React field formatters

[Dosant]

Parent: #65993

Currently, field formatters expose sync API:

const fieldFormatter = getFormatService().deserialize(s.format);
return fieldFormatter.convert(row[s.accessor]);

We should investigate the feasibility of implementing and integrating:

• Async or stream API.
• Maybe a field formatter react-renderer wrapper component

We need this to:

• Reduce data plugin bundle size - [data] Reduce data bundle size #84788 (comment)
• Dynamic relative date display - Relative date not updated on refresh unless underlying data changes #75729 and other formats which could change over time

Plan:

• [Field Formatters] Research & POC async field formatters #104655

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServices)

[kertal]

@Dosant wanted to create a own issue for that, but it seems it would be a duplicate, so copying my draft here, would this make sense?

Currenty we have 2 kinds of field formatters, one formatting plain text, and another one for formattinghtml. Therefore, when showing formatted fields in e.g. Discover's Data table, we need to make use of React's dangerouslySetInnerHTML to show the formatted value

kibana/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx

Lines 127 to 134 in 9c1202f

	<span
	className={CELL_CLASS}
	// formatFieldValue guarantees sanitized values
	// eslint-disable-next-line react/no-danger
	dangerouslySetInnerHTML={{
	__html: formatFieldValue(row.flattened[columnId], row.raw, fieldFormats, dataView, field),
	}}
	/>

Having a React based field formatter would give the benefit that no longer dangerouslySetInnerHTML would be necessary.

A field formatter currently has functions for textConvert and htmlConvert, at least one function has to be defined. Additionally there could be another function e.h. reactConvert

export class StringFormat extends FieldFormat {

  textConvert: TextContextTypeConvert = (val: string | number, options) => {
    // code returning plain text formatted value
  };

  htmlConvert: HtmlContextTypeConvert = (val, { hit, field } = {}) => {
   // code returning HTML formatted plain text
 }; 

 reactConvert = (val, { hit, field } = {}) => {
   // returning React element formatting the fields value
 };  
}

Apart from the benefit of having the option to drop the usage of dangerouslySetInnerHTML in the future, this would also give the possibility to create more interactive formatted fields. Like eg. a time fields calculating the time until now, that could automatically refresh this setting.

[Dosant]

@kertal, I think this is would be great. Also easy to fix with it #75729

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[weltenwort]

@kertal @Dosant, what would your stance be towards replacing the content of this issue's description with the following so that we can pick it up as part of the log explorer work? There is already synchronous imports of React, so this should be independent of the introduction of an async registry. Is there anything you'd like to add to the ACs?

📓 Summary

In order to allow for more dynamic formatting of field values (such as auto-updating relative dates) and full use of interactive EUI components, we want to add a "React" format type in addition to the existing "text" and "html" types.

✔ Acceptance criteria

• The field format registry supports a new content type react.
• The field format class supports converting to the new content type react.
• Discover prefers the react content type, e.g. via its formatFieldValue utility function and doesn't use dangerouslySetInnerHTML if the content type is available.

[kertal]

Looking good, adding @davismcphee & @mattkime to the loop. Would be great to have this implemented 👍 (and once this is available we should migrate all html formatters to React)

[kertal]

Closing this because it's not planned to be resolved in the foreseeable future. It will be tracked in our Icebox and will be re-opened if our priorities change. Feel free to re-open if you think it should be melted sooner.