From 9c1a728f60d78d02702e8d85ec4d067076f7d947 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Thu, 1 Apr 2021 15:26:24 +0200
Subject: [PATCH] Add escaping to components

---
 .../src/search-list-control/item.js           |  23 +-
 .../test/__snapshots__/index.js.snap          | 376 +++++++-----------
 2 files changed, 152 insertions(+), 247 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/item.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/item.js
index 0a401f6f320..2d365cbf7d8 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/item.js
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/item.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { escapeRegExp, first, last, isNil } from 'lodash';
 import PropTypes from 'prop-types';
 
@@ -9,7 +10,18 @@ function getHighlightedName( name, search ) {
 		return name;
 	}
 	const re = new RegExp( escapeRegExp( search ), 'ig' );
-	return name.replace( re, '<strong>$&</strong>' );
+	const nameParts = name.split( re );
+	return nameParts.map( ( part, i ) => {
+		if ( i === 0 ) {
+			return part;
+		}
+		return (
+			<Fragment key={ i }>
+				<strong>{ search }</strong>
+				{ part }
+			</Fragment>
+		);
+	} );
 }
 
 function getBreadcrumbsForDisplay( breadcrumbs ) {
@@ -77,12 +89,9 @@ const SearchListItem = ( {
 						{ getBreadcrumbsForDisplay( item.breadcrumbs ) }
 					</span>
 				) : null }
-				<span
-					className="woocommerce-search-list__item-name"
-					dangerouslySetInnerHTML={ {
-						__html: getHighlightedName( item.name, search ),
-					} }
-				/>
+				<span className="woocommerce-search-list__item-name">
+					{ getHighlightedName( item.name, search ) }
+				</span>
 			</span>
 
 			{ !! showCount && (
diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
index b13bbbdd5f1..f3e83dcf528 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
@@ -60,12 +60,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -92,12 +89,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
           </span>
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -124,12 +118,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
           </span>
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -156,12 +147,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
           </span>
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -183,12 +171,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -210,12 +195,9 @@ exports[`SearchListControl should render a search box and list of hierarchical o
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>
@@ -283,12 +265,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -310,12 +289,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -337,12 +313,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -364,12 +337,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -391,12 +361,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -418,12 +385,9 @@ exports[`SearchListControl should render a search box and list of options 1`] =
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>
@@ -491,12 +455,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -518,12 +479,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -545,12 +503,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -572,12 +527,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -599,12 +551,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -626,12 +575,9 @@ exports[`SearchListControl should render a search box and list of options with a
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>
@@ -781,12 +727,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -808,12 +751,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -835,12 +775,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -862,12 +799,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -889,12 +823,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -916,12 +847,9 @@ exports[`SearchListControl should render a search box and list of options, with
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>
@@ -1133,12 +1061,13 @@ exports[`SearchListControl should render a search box with a search term, and on
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elder<strong>berry</strong>",
-              }
-            }
-          />
+          >
+            Elder
+            <strong>
+              berry
+            </strong>
+            
+          </span>
         </span>
       </label>
     </li>
@@ -1160,12 +1089,13 @@ exports[`SearchListControl should render a search box with a search term, and on
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mul<strong>berry</strong>",
-              }
-            }
-          />
+          >
+            Mul
+            <strong>
+              berry
+            </strong>
+            
+          </span>
         </span>
       </label>
     </li>
@@ -1234,12 +1164,13 @@ exports[`SearchListControl should render a search box with a search term, and on
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elder<strong>berry</strong>",
-              }
-            }
-          />
+          >
+            Elder
+            <strong>
+              bERry
+            </strong>
+            
+          </span>
         </span>
       </label>
     </li>
@@ -1261,12 +1192,13 @@ exports[`SearchListControl should render a search box with a search term, and on
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mul<strong>berry</strong>",
-              }
-            }
-          />
+          >
+            Mul
+            <strong>
+              bERry
+            </strong>
+            
+          </span>
         </span>
       </label>
     </li>
@@ -1387,12 +1319,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -1414,12 +1343,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -1441,12 +1367,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -1468,12 +1391,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -1495,12 +1415,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -1522,12 +1439,9 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>
@@ -1691,12 +1605,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Apricots",
-              }
-            }
-          />
+          >
+            Apricots
+          </span>
         </span>
       </label>
     </li>
@@ -1718,12 +1629,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Clementine",
-              }
-            }
-          />
+          >
+            Clementine
+          </span>
         </span>
       </label>
     </li>
@@ -1745,12 +1653,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Elderberry",
-              }
-            }
-          />
+          >
+            Elderberry
+          </span>
         </span>
       </label>
     </li>
@@ -1772,12 +1677,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Guava",
-              }
-            }
-          />
+          >
+            Guava
+          </span>
         </span>
       </label>
     </li>
@@ -1799,12 +1701,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Lychee",
-              }
-            }
-          />
+          >
+            Lychee
+          </span>
         </span>
       </label>
     </li>
@@ -1826,12 +1725,9 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         >
           <span
             className="woocommerce-search-list__item-name"
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Mulberry",
-              }
-            }
-          />
+          >
+            Mulberry
+          </span>
         </span>
       </label>
     </li>