fix(ui): don't crash on autocomplete errors

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.101
+
+### Fixed
+
+- Don't crash on autocomplete errors.
+
 ## v0.100
 
 ### Changed

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" } });

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}