From 65a8a5b901cba812b03653d7813a964751879cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 21 Mar 2022 11:00:48 +0000
Subject: [PATCH] fix(ui): don't crash on autocomplete errors

---
 CHANGELOG.md                                  |  6 ++++++
 .../NavBar/FilterInput/index.test.tsx         | 21 ++++++++++++++++++-
 .../Components/NavBar/FilterInput/index.tsx   |  3 ++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 145625c42..e2160c72c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.101
+
+### Fixed
+
+- Don't crash on autocomplete errors.
+
 ## v0.100
 
 ### Changed
diff --git a/ui/src/Components/NavBar/FilterInput/index.test.tsx b/ui/src/Components/NavBar/FilterInput/index.test.tsx
index 1ecf0128c..f7c99c866 100644
--- a/ui/src/Components/NavBar/FilterInput/index.test.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.test.tsx
@@ -181,7 +181,7 @@ describe("<FilterInput autocomplete />", () => {
     tree.unmount();
   });
 
-  it("highliting a suggestion makes it active", async () => {
+  it("highlighting a suggestion makes it active", async () => {
     const tree = MountedInput();
     tree.find("input").simulate("change", { target: { value: "cluster" } });
     act(() => {
@@ -200,6 +200,25 @@ describe("<FilterInput autocomplete />", () => {
     expect(tree.find(".dropdown-item").at(0).html()).toMatch(/active/);
   });
 
+  it("handles invalid regexp values", async () => {
+    const tree = MountedInput();
+    tree.find("input").simulate("change", { target: { value: "foo(" } });
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    // suggestions are rendered only when input is focused
+    tree.find("input").simulate("focus");
+    // find() doesn't pick up suggestions even when tree.html() shows them
+    // forcing update seems to solve it
+    // https://github.com/airbnb/enzyme/issues/1233#issuecomment-343449560
+    tree.update();
+
+    tree.find("input").simulate("keydown", { keyCode: 40, key: "ArrowDown" });
+    tree.update();
+    expect(tree.find(".dropdown-item").at(0).html()).toMatch(/active/);
+  });
+
   it("clicking on a suggestion adds it to filters", async () => {
     const tree = MountedInput();
     tree.find("input").simulate("change", { target: { value: "cluster" } });
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index fda64e13a..8775108fd 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
 
 import { AlertStore, FormatBackendURI } from "Stores/AlertStore";
+import { EscapeRegex } from "Stores/SilenceFormStore";
 import type { Settings } from "Stores/Settings";
 import { IsMobile } from "Common/Device";
 import { useFetchGet } from "Hooks/useFetchGet";
@@ -182,7 +183,7 @@ const FilterInput: FC<{
                     {...getItemProps({ item, index })}
                   >
                     {item
-                      .split(new RegExp(`(${inputValue})`, "gi"))
+                      .split(new RegExp(`(${EscapeRegex(inputValue)})`, "gi"))
                       .map((part, i) => (
                         <span
                           key={i}