From 7e328bc2f3bda02f9a7564881de4b51797254b10 Mon Sep 17 00:00:00 2001
From: Larry Gregory <larry.gregory@elastic.co>
Date: Thu, 22 Apr 2021 14:44:28 -0400
Subject: [PATCH 1/2] Replace discover's usage of lodash.template with static
 react rendering

---
 .../{row_formatter.ts => row_formatter.tsx}   | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)
 rename src/plugins/discover/public/application/angular/helpers/{row_formatter.ts => row_formatter.tsx} (74%)

diff --git a/src/plugins/discover/public/application/angular/helpers/row_formatter.ts b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
similarity index 74%
rename from src/plugins/discover/public/application/angular/helpers/row_formatter.ts
rename to src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
index b219dda19e10a8..1037e3a985190b 100644
--- a/src/plugins/discover/public/application/angular/helpers/row_formatter.ts
+++ b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
@@ -6,24 +6,28 @@
  * Side Public License, v 1.
  */
 
-import { template } from 'lodash';
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom/server';
 import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../common';
 import { getServices, IndexPattern } from '../../../kibana_services';
 
-function noWhiteSpace(html: string) {
-  const TAGS_WITH_WS = />\s+</g;
-  return html.replace(TAGS_WITH_WS, '><');
+interface Props {
+  defPairs: Array<[string, unknown]>;
 }
-
-const templateHtml = `
-  <dl class="source truncate-by-height">
-    <% defPairs.forEach(function (def) { %>
-      <dt><%- def[0] %>:</dt>
-      <dd><%= def[1] %></dd>
-      <%= ' ' %>
-    <% }); %>
-  </dl>`;
-export const doTemplate = template(noWhiteSpace(templateHtml));
+const TemplateComponent = ({ defPairs }: Props) => {
+  return (
+    <dl className={'source truncate-by-height'}>
+      {defPairs.map((pair, idx) => (
+        <Fragment key={idx}>
+          <dt>{pair[0]}:</dt>
+          <dd
+            dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
+          />{' '}
+        </Fragment>
+      ))}
+    </dl>
+  );
+};
 
 export const formatRow = (hit: Record<string, any>, indexPattern: IndexPattern) => {
   const highlights = hit?.highlight ?? {};
@@ -38,7 +42,9 @@ export const formatRow = (hit: Record<string, any>, indexPattern: IndexPattern)
     pairs.push([displayKey ? displayKey : key, val]);
   });
   const maxEntries = getServices().uiSettings.get(MAX_DOC_FIELDS_DISPLAYED);
-  return doTemplate({ defPairs: [...highlightPairs, ...sourcePairs].slice(0, maxEntries) });
+  return ReactDOM.renderToStaticMarkup(
+    <TemplateComponent defPairs={[...highlightPairs, ...sourcePairs].slice(0, maxEntries)} />
+  );
 };
 
 export const formatTopLevelObject = (
@@ -70,5 +76,7 @@ export const formatTopLevelObject = (
     pairs.push([displayKey ? displayKey : key, formatted]);
   });
   const maxEntries = getServices().uiSettings.get(MAX_DOC_FIELDS_DISPLAYED);
-  return doTemplate({ defPairs: [...highlightPairs, ...sourcePairs].slice(0, maxEntries) });
+  return ReactDOM.renderToStaticMarkup(
+    <TemplateComponent defPairs={[...highlightPairs, ...sourcePairs].slice(0, maxEntries)} />
+  );
 };

From 0a32a38ee24e656ee21e9f5d61beb4e059886c84 Mon Sep 17 00:00:00 2001
From: Larry Gregory <larry.gregory@elastic.co>
Date: Fri, 23 Apr 2021 09:58:50 -0400
Subject: [PATCH 2/2] add justification for dangerouslySetInnerHTML

---
 .../public/application/angular/helpers/row_formatter.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
index 1037e3a985190b..c5e64f38a31178 100644
--- a/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
+++ b/src/plugins/discover/public/application/angular/helpers/row_formatter.tsx
@@ -21,6 +21,7 @@ const TemplateComponent = ({ defPairs }: Props) => {
         <Fragment key={idx}>
           <dt>{pair[0]}:</dt>
           <dd
+            // We  can dangerously set HTML here because this content is guaranteed to have been run through a valid field formatter first.
             dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
           />{' '}
         </Fragment>