Merge pull request #1615 from devtron-labs/issue-resource-escape-search

fix: Issue in Search of resource browser with escape characters

Author: shivani170

src/components/common/helpers/Helpers.tsx

@@ -19,6 +19,7 @@ import { SIDEBAR_KEYS } from '../../ResourceBrowser/Constants'
 import { DEFAULT_SECRET_PLACEHOLDER } from '../../cluster/cluster.type'
 import { AUTO_SELECT } from '../../ClusterNodes/constants'
 import { ToastBody3 as UpdateToast } from '../ToastBody'
+import { PATTERNS } from '../../../config/constants'
 
 export type IntersectionChangeHandler = (entry: IntersectionObserverEntry) => void
 
@@ -1013,10 +1014,14 @@ export const highlightSearchedText = (searchText: string, matchString: string):
     if (!searchText) {
         return matchString
     }
-    const highlightText = (highlighted) => `<mark>${highlighted}</mark>`
-
-    const regex = new RegExp(searchText, 'gi')
-    return matchString.replace(regex, highlightText)
+    try {
+        const highlightText = (highlighted) => `<mark>${highlighted}</mark>`
+        const escapedSearchText = searchText.replace(PATTERNS.ESCAPED_CHARACTERS, '\\$&') // Escape special characters handling
+        const regex = new RegExp(escapedSearchText, 'gi')
+        return matchString.replace(regex, highlightText)
+    } catch (err) {
+        return matchString
+    }
 }
 
 export const trackByGAEvent = (category: string, action: string): void => {

src/config/constants.ts

@@ -291,6 +291,7 @@ export const PATTERNS = {
     ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
     CUSTOM_TAG: /^(?![.-])([a-zA-Z0-9_.-]*\{[Xx]\}[a-zA-Z0-9_.-]*)(?<![.-])$/, //Allowed: Alphanumeric characters, including (_) (.) (-) {x} {X} but cannot begin or end with (.) or (-)
     ALPHANUMERIC_WITH_SPECIAL_CHAR_AND_SLASH: /^[A-Za-z0-9._/-]+$/, // allow alphanumeric,(.) ,(-),(_),(/)
+    ESCAPED_CHARACTERS: /[.*+?^${}()|[\]\\]/g,
 }
 
 export const TriggerType = {