From 8d3d2c909f54da0346459e3153022191be040b68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 15 Jan 2021 15:25:45 +0000
Subject: [PATCH] chore(ui): drop react-highlighter

---
 ui/package-lock.json                          | 33 -------------------
 ui/package.json                               |  2 --
 .../Components/NavBar/FilterInput/index.tsx   | 23 ++++++++-----
 3 files changed, 15 insertions(+), 43 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 9ed1658f9..81e58fb66 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -3450,14 +3450,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-highlighter": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@types/react-highlighter/-/react-highlighter-0.3.4.tgz",
-      "integrity": "sha512-wM8l3QxU1P6rAeCIJUNug407Z8igm90xX9jDpjem1+pVzEI3VQpKiQj7oEinQVq7425Dmgyon8XfqbxD0mTknA==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/react-js-pagination": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/react-js-pagination/-/react-js-pagination-3.0.3.tgz",
@@ -5644,11 +5636,6 @@
         }
       }
     },
-    "blacklist": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/blacklist/-/blacklist-1.1.4.tgz",
-      "integrity": "sha1-st0J1hd2JbLKppg1o3somV+povI="
-    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -7088,15 +7075,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "create-react-class": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
-      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
-      "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "create-react-context": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
@@ -17063,17 +17041,6 @@
         "shallowequal": "^1.1.0"
       }
     },
-    "react-highlighter": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/react-highlighter/-/react-highlighter-0.4.3.tgz",
-      "integrity": "sha512-dwItRaGRHBceuzZd5NXeroapdmZ2JCAWZ3AdwdthRlSkdtPCY18DWrd6mPmiMCfSB6lgVwwCPQl4unZzG5sXXw==",
-      "requires": {
-        "blacklist": "^1.1.4",
-        "create-react-class": "^15.6.2",
-        "escape-string-regexp": "^1.0.5",
-        "prop-types": "^15.6.0"
-      }
-    },
     "react-hotkeys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index 17b2e17ae..8197d78a2 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,7 +27,6 @@
     "@types/react": "17.0.0",
     "@types/react-autosuggest": "10.0.1",
     "@types/react-dom": "17.0.0",
-    "@types/react-highlighter": "0.3.4",
     "@types/react-js-pagination": "3.0.3",
     "@types/react-select": "3.1.2",
     "@typescript-eslint/eslint-plugin": "4.13.0",
@@ -62,7 +61,6 @@
     "react-cool-dimensions": "1.2.0",
     "react-day-picker": "7.4.8",
     "react-dom": "17.0.1",
-    "react-highlighter": "0.4.3",
     "react-hotkeys-hook": "3.0.3",
     "react-idle-timer": "4.5.1",
     "react-intersection-observer": "8.31.0",
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index 7c7fc2b76..a08a9b498 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -3,7 +3,6 @@ import React, { FC, useEffect, useState, useRef, useCallback } from "react";
 import { observer } from "mobx-react-lite";
 
 import Autosuggest from "react-autosuggest";
-import Highlight from "react-highlighter";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
@@ -104,14 +103,22 @@ const FilterInput: FC<{
     suggestion: string,
     { query }: { query: string }
   ) => {
+    const parts = suggestion.split(new RegExp(`(${query})`, "gi"));
     return (
-      <Highlight
-        matchElement="span"
-        matchClass="font-weight-bold"
-        search={query}
-      >
-        {suggestion}
-      </Highlight>
+      <span>
+        {parts.map((part, i) => (
+          <span
+            key={i}
+            style={
+              part.toLowerCase() === query.toLowerCase()
+                ? { fontWeight: "bold" }
+                : {}
+            }
+          >
+            {part}
+          </span>
+        ))}
+      </span>
     );
   };