Fix react/no-danger eslint problem

[MAILPOET-976]

assets/js/src/help-tooltip.js

@@ -5,22 +5,9 @@ define('helpTooltip', ['mailpoet', 'React', 'react-dom', 'help-tooltip.jsx'],
     MailPoet.helpTooltip = {
       show: function (domContainerNode, opts) {
 
-        var tooltipText = React.createElement(
-          "span",
-          {
-            style: {
-              pointerEvents: "all",
-            },
-            "dangerouslySetInnerHTML": {
-              __html: opts.tooltip,
-            },
-          },
-          null
-        );
-
         ReactDOM.render(React.createElement(
           TooltipComponent, {
-            tooltip: tooltipText,
+            tooltip: opts.tooltip,
             tooltipId: opts.tooltipId,
           }
         ), domContainerNode);

assets/js/src/help-tooltip.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
+import ReactHtmlParser from 'react-html-parser';
 
 function Tooltip(props) {
   let tooltipId = props.tooltipId;
+  let tooltip = props.tooltip;
   // tooltip ID must be unique, defaults to tooltip text
   if(!props.tooltipId && typeof props.tooltip === "string") {
     tooltipId = props.tooltip;
   }
 
+  if(typeof props.tooltip === "string") {
+    tooltip = ReactHtmlParser(props.tooltip);
+  }
+
   return (
     <span>
       <span
@@ -26,7 +32,7 @@ function Tooltip(props) {
           id={tooltipId}
           efect="solid"
         >
-          {props.tooltip}
+          {tooltip}
         </ReactTooltip>
     </span>
   );

assets/js/src/newsletters/send.jsx

@@ -217,11 +217,6 @@ define(
         return true;
       },
       render: function () {
-        const tooltip = (<span
-          dangerouslySetInnerHTML={{
-            __html: MailPoet.I18n.t('helpTooltipSendEmail'),
-          }}
-        />);
         return (
           <div>
             <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
@@ -259,7 +254,7 @@ define(
                 </a>.
               </p>
               <HelpTooltip
-                tooltip={tooltip}
+                tooltip={MailPoet.I18n.t('helpTooltipSendEmail')}
                 tooltipId="helpTooltipSendEmail"
               />
             </Form>

package.json

@@ -25,6 +25,7 @@
     "parsleyjs": "^2.1.2",
     "react": "~15.4.2",
     "react-dom": "~15.4.2",
+    "react-html-parser": "^1.0.3",
     "react-router": "~3.0.2",
     "react-string-replace": "^0.3.2",
     "react-tooltip": "^3.2.10",
@@ -38,10 +39,10 @@
     "amd-inject-loader": "~0.5.0",
     "babel-core": "^5.8.22",
     "babel-loader": "^5.3.2",
-    "clean-webpack-plugin": "^0.1.16",
-    "cross-env": "^5.0.1",
     "chai": "2.2.0",
     "chai-jq": "0.0.8",
+    "clean-webpack-plugin": "^0.1.16",
+    "cross-env": "^5.0.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.3.0",
@@ -53,6 +54,7 @@
     "imports-loader": "~0.7.1",
     "jquery": "2.1.4",
     "jsdom": "3.1.2",
+    "json-loader": "^0.5.7",
     "mocha": "2.2.1",
     "nib": "~1.1.2",
     "sinon": "1.14.1",
@@ -62,4 +64,4 @@
     "webpack-manifest-plugin": "^1.1.0",
     "webpack-md5-hash": "0.0.5"
   }
-}
+}

webpack.config.js

@@ -50,6 +50,9 @@ var baseConfig = {
     ])
   ],
   module: {
+    preLoaders: [
+      { test: /\.json$/, loader: "json-loader" },
+    ],
     loaders: [
       {
         test: /\.jsx$/,