-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix missing html formatting in Doc_Viewer #49326
Fix missing html formatting in Doc_Viewer #49326
Conversation
💔 Build Failed |
💚 Build Succeeded |
…-25-fix-html-fieldformats-in-react
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
1 main change (added comment), lot's of redundant code
const isCollapsible = typeof value === 'string' && value.length > COLLAPSE_LINE_LENGTH; | ||
const value = trimAngularSpan(String(formatted[field])); | ||
|
||
const isCollapsible = value.length > COLLAPSE_LINE_LENGTH; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the main change, by using the value, formatted by our field formatters, without any component internal modification, it's safe to use dangerouslySetInnerHTML
later on. And since this internal formatter isn't used anymore, lot's of helper + test code can be removed.
💚 Build Succeeded |
Pinging @elastic/kibana-app (Team:KibanaApp) |
return typeof valueFormatted === 'string' ? convertAngularHtml(valueFormatted) : String(value); | ||
} | ||
export function trimAngularSpan(text: string): string { | ||
return text.replace('<span ng-non-bindable>', '').replace('</span>', ''); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to be save, can we make sure via regex we're stripping here from the beginning and respectively end of the string?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code LGTM, tested on Chrome Linux, works as expected. Tried that XSS injection doesn't work.
💚 Build Succeeded |
* Add detection if a value has been formatted, conditional rendering * Use markup by formatters, it's escaped for dangerouslySetInnerHTML * Enable dangerouslySetInnerHTML for displaying values * Use regex for replace
* Add detection if a value has been formatted, conditional rendering * Use markup by formatters, it's escaped for dangerouslySetInnerHTML * Enable dangerouslySetInnerHTML for displaying values * Use regex for replace
* Add detection if a value has been formatted, conditional rendering * Use markup by formatters, it's escaped for dangerouslySetInnerHTML * Enable dangerouslySetInnerHTML for displaying values * Use regex for replace
Summary
After the refactoring of the DocViewer Table layout to React (#43240), HTML produced by Kibana's Field Formatters was displayed as text, instead of e.g. rendering a Link. This PR restores HTML formatted fields, so e.g. Links provided by the url formatter are clickable again. The HTML provided by the formatters is escaped. This is a interim solution until #48728 will be ready
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.- [ ] This was checked for cross-browser compatibility, including a check against IE11- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support- [ ] Documentation was added for features that require explanation or tutorials- [ ] Unit or functional tests were updated or added to match the most common scenarios- [ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
- [ ] This was checked for breaking API changes and was labeled appropriately- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately