From f78337da6d156c4b03c208ea091b192ec427db90 Mon Sep 17 00:00:00 2001
From: Anan Zhuang <ananzh@amazon.com>
Date: Mon, 28 Nov 2022 22:44:24 +0000
Subject: [PATCH] fix PR comments

Signed-off-by: Anan Zhuang <ananzh@amazon.com>
---
 .../public/components/table_vis_component.tsx         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx b/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
index a536b3f7be10..11d31d920be1 100644
--- a/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
+++ b/src/plugins/vis_type_table_new/public/components/table_vis_component.tsx
@@ -51,12 +51,15 @@ export const TableVisComponent = ({
       const rawContent = sortedRows[rowIndex][columnId];
       const colIndex = columns.findIndex((col) => col.id === columnId);
       const column = columns[colIndex];
-      // use formatter to format raw content
-      // this can format url, date and percentage data
       const htmlContent = column.formatter.convert(rawContent, 'html');
       const formattedContent = (
-        // eslint-disable-next-line
-        <div dangerouslySetInnerHTML={{ __html: dompurify.sanitize(htmlContent) }} />
+        /*
+         * Justification for dangerouslySetInnerHTML:
+         * This is one of the visualizations which makes use of the HTML field formatters.
+         * Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
+         * on the field formatter to only produce safe HTML.
+         */
+        <div dangerouslySetInnerHTML={{ __html: dompurify.sanitize(htmlContent) }} /> // eslint-disable-line react/no-danger
       );
       return sortedRows.hasOwnProperty(rowIndex) ? formattedContent || null : null;
     }) as EuiDataGridProps['renderCellValue'];