Prevent usage of dangerouslySetInnerHTML (#22201)

Author: Tim Roes

airbyte-webapp/.eslintrc.js

@@ -84,6 +84,7 @@ module.exports = {
       },
     ],
     "jest/consistent-test-it": ["warn", { fn: "it", withinDescribe: "it" }],
+    "react/no-danger": "error",
     "react/jsx-boolean-value": "warn",
     "react/jsx-curly-brace-presence": "warn",
     "react/jsx-fragments": "warn",

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx

@@ -27,6 +27,9 @@ const TooltipText: React.FC<{ textNodes: Element[] }> = ({ textNodes }) => {
     return null;
   }
   const text = textNodes.map((t) => decodeURIComponent(t.innerHTML)).join(" | ");
+  // This is not a safe use, and need to be removed still.
+  // https://github.com/airbytehq/airbyte/issues/22196
+  // eslint-disable-next-line react/no-danger
   return <div dangerouslySetInnerHTML={{ __html: text }} />;
 };
 

airbyte-webapp/src/components/ui/TextWithHTML/TextWithHTML.tsx

@@ -26,5 +26,8 @@ export const TextWithHTML: React.FC<TextWithHTMLProps> = ({ text, className }) =
     },
   });
 
+  // Since we use `sanitize-html` above to sanitize this string from all dangerous HTML, we're safe to
+  // set this here via `dangerouslySetInnerHTML`
+  // eslint-disable-next-line react/no-danger
   return <span className={className} dangerouslySetInnerHTML={{ __html: sanitizedHtmlText }} />;
 };