From d21ab7b82d1cb46ce819834659898de64f266133 Mon Sep 17 00:00:00 2001
From: rw4nn <86979911+rw4nn@users.noreply.github.com>
Date: Thu, 23 Jun 2022 06:55:55 +0200
Subject: [PATCH] fix(FE): escape regular expression to filter dashboards with
 special characters (#1279)

* fix(FE): escape reg exp to filter dashboards
* test(FE): add type and use uuid v4
---
 .../SearchFilter/__tests__/utils.test.ts      | 58 +++++++++++++++++++
 .../ListOfDashboard/SearchFilter/utils.ts     |  4 +-
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts

diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts b/frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts
new file mode 100644
index 0000000000..db9825b677
--- /dev/null
+++ b/frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts
@@ -0,0 +1,58 @@
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { v4 as uuid } from 'uuid';
+
+import { TOperator } from '../types';
+import { executeSearchQueries } from '../utils';
+
+describe('executeSearchQueries', () => {
+	const firstDashboard: Dashboard = {
+		id: 11111,
+		uuid: uuid(),
+		created_at: '',
+		updated_at: '',
+		data: {
+			title: 'first dashboard',
+		},
+	};
+	const secondDashboard: Dashboard = {
+		id: 22222,
+		uuid: uuid(),
+		created_at: '',
+		updated_at: '',
+		data: {
+			title: 'second dashboard',
+		},
+	};
+	const thirdDashboard: Dashboard = {
+		id: 333333,
+		uuid: uuid(),
+		created_at: '',
+		updated_at: '',
+		data: {
+			title: 'third dashboard (with special characters +?\\)',
+		},
+	};
+	const dashboards = [firstDashboard, secondDashboard, thirdDashboard];
+
+	it('should filter dashboards based on title', () => {
+		const query = {
+			category: 'title',
+			id: 'someid',
+			operator: '=' as TOperator,
+			value: 'first dashboard',
+		};
+
+		expect(executeSearchQueries([query], dashboards)).toEqual([firstDashboard]);
+	});
+
+	it('should filter dashboards with special characters', () => {
+		const query = {
+			category: 'title',
+			id: 'someid',
+			operator: '=' as TOperator,
+			value: 'third dashboard (with special characters +?\\)',
+		};
+
+		expect(executeSearchQueries([query], dashboards)).toEqual([thirdDashboard]);
+	});
+});
diff --git a/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts b/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts
index 5f9b37cc3e..6487ccd789 100644
--- a/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts
+++ b/frontend/src/container/ListOfDashboard/SearchFilter/utils.ts
@@ -42,6 +42,8 @@ export const executeSearchQueries = (
 	if (!searchData.length || !queries.length) {
 		return searchData;
 	}
+	const escapeRegExp = (regExp: string): string =>
+		regExp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
 	queries.forEach((query: IQueryStructure) => {
 		const { operator } = query;
@@ -61,7 +63,7 @@ export const executeSearchQueries = (
 				for (const searchSpaceItem of searchSpace) {
 					if (searchSpaceItem)
 						for (const queryValue of value) {
-							if (searchSpaceItem.match(queryValue)) {
+							if (searchSpaceItem.match(escapeRegExp(queryValue))) {
 								return resolveOperator(true, operator);
 							}
 						}