Fix crashing search bars (#2765)

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -8,6 +8,7 @@ import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useSearchParams } from 'react-router-dom';
 import { Search } from 'component/common/Search/Search';
+import { safeRegExp } from '@server/util/escape-regex';
 
 type PageQueryType = Partial<Record<'search', string>>;
 
@@ -30,7 +31,7 @@ export const ApplicationList = () => {
     }, [searchValue, setSearchParams]);
 
     const filteredApplications = useMemo(() => {
-        const regExp = new RegExp(searchValue, 'i');
+        const regExp = safeRegExp(searchValue, 'i');
         return searchValue
             ? applications?.filter(a => regExp.test(a.appName))
             : applications;

frontend/src/component/common/Highlighter/Highlighter.tsx

@@ -1,5 +1,6 @@
 import { VFC } from 'react';
 import { useStyles } from './Highlighter.styles';
+import { safeRegExp } from '@server/util/escape-regex';
 
 interface IHighlighterProps {
     search?: string;
@@ -7,8 +8,6 @@ interface IHighlighterProps {
     caseSensitive?: boolean;
 }
 
-const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
 export const Highlighter: VFC<IHighlighterProps> = ({
     search,
     children,
@@ -23,7 +22,7 @@ export const Highlighter: VFC<IHighlighterProps> = ({
         return <>{children}</>;
     }
 
-    const regex = new RegExp(escapeRegex(search), caseSensitive ? 'g' : 'gi');
+    const regex = safeRegExp(search, caseSensitive ? 'g' : 'gi');
 
     return (
         <span

frontend/src/component/project/ProjectList/ProjectList.tsx

@@ -23,6 +23,7 @@ import { Search } from 'component/common/Search/Search';
 import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
 import { ITooltipResolverProps } from 'component/common/TooltipResolver/TooltipResolver';
 import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
+import { safeRegExp } from '@server/util/escape-regex';
 
 type PageQueryType = Partial<Record<'search', string>>;
 
@@ -93,7 +94,7 @@ export const ProjectListNew = () => {
     }, [searchValue, setSearchParams]);
 
     const filteredProjects = useMemo(() => {
-        const regExp = new RegExp(searchValue, 'i');
+        const regExp = safeRegExp(searchValue, 'i');
         return (
             searchValue
                 ? projects.filter(project => regExp.test(project.name))

frontend/src/hooks/useFeaturesFilter.ts

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { createGlobalStateHook } from 'hooks/useGlobalState';
 import { FeatureSchema } from 'openapi';
+import { safeRegExp } from '@server/util/escape-regex';
 
 export interface IFeaturesFilter {
     query?: string;
@@ -66,7 +67,7 @@ const filterFeaturesByQuery = (
     // Try to parse the search query as a RegExp.
     // Return all features if it can't be parsed.
     try {
-        const regExp = new RegExp(filter.query, 'i');
+        const regExp = safeRegExp(filter.query, 'i');
         return features.filter(f => filterFeatureByRegExp(f, filter, regExp));
     } catch (err) {
         if (err instanceof SyntaxError) {

src/lib/proxy/create-context.test.ts

@@ -107,8 +107,6 @@ test.skip('will not blow up if userId is an array', () => {
         properties: ['some'],
     });
 
-    // console.log(context);
-
     expect(context.userId).toBe('123');
     expect(context).not.toHaveProperty('tenantId');
     expect(context).not.toHaveProperty('region');

src/lib/util/escape-regex.ts

@@ -0,0 +1,3 @@
+export function safeRegExp(pattern: string, flags?: string): RegExp {
+    return new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), flags);
+}