Fix to search for a '<lambda' Python function in the sidebar (#1497)

* Fix to search for a '<lambda' Python function in the sidebar

* Fix for failed test cases

* Variable name updated

---------

Co-authored-by: Tynan DeBold <[email protected]>
Signed-off-by: Vladimir <[email protected]>

RELEASE.md

@@ -6,6 +6,14 @@ Please follow the established format:
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
 
+# Release 6.4.1
+
+## Major features and improvements
+
+## Bug fixes and other changes
+
+- Fix to search for a '<lambda' Python function in the sidebar. (#1497)
+
 # Release 6.4.0
 
 ## Major features and improvements

src/components/node-list/node-list-row.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { changed, replaceMatches } from '../../utils';
+import { changed, replaceAngleBracketMatches } from '../../utils';
 import NodeIcon from '../icons/node-icon';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
@@ -12,12 +12,6 @@ import { toggleHoveredFocusMode } from '../../actions';
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 32;
 
-// This allows lambda and partial Python functions to render via dangerouslySetInnerHTML
-const replaceTagsWithEntities = {
-  '<lambda>': '&lt;lambda&gt;',
-  '<partial>': '&lt;partial&gt;',
-};
-
 /**
  * Returns `true` if there are no props changes, therefore the last render can be reused.
  * Performance: Checks only the minimal set of props known to change after first render.
@@ -134,7 +128,7 @@ const NodeListRow = memo(
               }
             )}
             dangerouslySetInnerHTML={{
-              __html: replaceMatches(label, replaceTagsWithEntities),
+              __html: replaceAngleBracketMatches(label),
             }}
           />
         </TextButton>

src/utils/index.js

@@ -78,6 +78,33 @@ export const replaceMatches = (str, toReplace) => {
   }
 };
 
+/**
+ * Replace any parts of a string that match the '<' & '>' except '<b>' & '</b>'
+ * @param {String} str The string to check
+ * @returns {String} The string with or without replaced values
+ */
+export const replaceAngleBracketMatches = (str) => {
+  if (str?.length > 0) {
+    // Handling string like '<lambda>' or '<partial>' in 3 steps
+    // 1. replacing all '<b>' & '</b>' with unique '@$1$@' & '@$2$@' respectively
+    // 2. replacing all '<' & '>' with '&lt;' & '&gt;' respectively
+    // 3. replacing back all '@$1$@' & '@$2$@' with <b> & </b> respectively
+    const strWithoutBTag = str
+      .replaceAll('<b>', '@$1$@')
+      .replaceAll('</b>', '@$2$@');
+    const replacedWithAngleBracket = strWithoutBTag
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;');
+    const result = replacedWithAngleBracket
+      .replaceAll('@$1$@', '<b>')
+      .replaceAll('@$2$@', '</b>');
+
+    return result;
+  } else {
+    return str;
+  }
+};
+
 /**
  * Removes any parts of a string that match the regular expression
  * @param {String} str The string to check

src/utils/utils.test.js

@@ -1,4 +1,10 @@
-import { arrayToObject, getUrl, unique, replaceMatches } from './index';
+import {
+  arrayToObject,
+  getUrl,
+  unique,
+  replaceMatches,
+  replaceAngleBracketMatches,
+} from './index';
 
 describe('utils', () => {
   describe('arrayToObject', () => {
@@ -59,4 +65,16 @@ describe('utils', () => {
       );
     });
   });
+
+  describe('replaceAngleBracketMatches', () => {
+    it('replaces angle bracket matched characters from a string', () => {
+      expect(replaceAngleBracketMatches('<b><lam</b>bda>')).toEqual(
+        '<b>&lt;lam</b>bda&gt;'
+      );
+      expect(replaceAngleBracketMatches('<b><lambda></b>')).toEqual(
+        '<b>&lt;lambda&gt;</b>'
+      );
+      expect(replaceAngleBracketMatches('<lambda>')).toEqual('&lt;lambda&gt;');
+    });
+  });
 });