fix: Error with search term including %, closes #1891

app/scenes/Search/Search.js

@@ -37,6 +37,7 @@ import NewDocumentMenu from "menus/NewDocumentMenu";
 import { type LocationWithState } from "types";
 import { metaDisplay } from "utils/keyboard";
 import { newDocumentUrl, searchUrl } from "utils/routeHelpers";
+import { decodeURIComponentSafe } from "utils/urls";
 
 type Props = {
   history: RouterHistory,
@@ -55,7 +56,7 @@ class Search extends React.Component<Props> {
   lastParams: Object;
 
   @observable
-  query: string = decodeURIComponent(this.props.match.params.term || "");
+  query: string = decodeURIComponentSafe(this.props.match.params.term || "");
   @observable params: URLSearchParams = new URLSearchParams();
   @observable offset: number = 0;
   @observable allowLoadMore: boolean = true;
@@ -116,7 +117,7 @@ class Search extends React.Component<Props> {
   };
 
   handleTermChange = () => {
-    const query = decodeURIComponent(this.props.match.params.term || "");
+    const query = decodeURIComponentSafe(this.props.match.params.term || "");
     this.query = query ? query : "";
     this.offset = 0;
     this.allowLoadMore = true;

app/utils/routeHelpers.js

@@ -74,7 +74,7 @@ export function searchUrl(
   let route = "/search";
 
   if (query) {
-    route += `/${encodeURIComponent(query)}`;
+    route += `/${encodeURIComponent(query.replace("%", "%25"))}`;
   }
 
   search = search ? `?${search}` : "";

app/utils/urls.js

@@ -28,3 +28,9 @@ export function cdnPath(path: string): string {
 export function imagePath(path: string): string {
   return cdnPath(`/images/${path}`);
 }
+
+export function decodeURIComponentSafe(text: string) {
+  return text
+    ? decodeURIComponent(text.replace(/%(?![0-9][0-9a-fA-F]+)/g, "%25"))
+    : text;
+}

app/utils/urls.test.js

@@ -0,0 +1,14 @@
+// @flow
+import { decodeURIComponentSafe } from "./urls";
+
+describe("decodeURIComponentSafe", () => {
+  test("to handle % symbols", () => {
+    expect(decodeURIComponentSafe("%")).toBe("%");
+    expect(decodeURIComponentSafe("%25")).toBe("%");
+  });
+
+  test("to correctly account for encoded symbols", () => {
+    expect(decodeURIComponentSafe("%7D")).toBe("}");
+    expect(decodeURIComponentSafe("%2F")).toBe("/");
+  });
+});