Merge pull request #242 from devtron-labs/fix/logs-search

fix: revert search working as regex search for logs

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -34,6 +34,7 @@ export const PATTERNS = {
     KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
     START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
     ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
+    ESCAPED_CHARACTERS: /[.*+?^${}()|[\]\\]/g,
 }
 
 export const URLS = {

src/Common/Constants.ts

@@ -19,6 +19,7 @@ import { useEffect, useRef, useState } from 'react'
 import AnsiUp from 'ansi_up'
 import DOMPurify from 'dompurify'
 import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
+import { escapeRegExp } from '@Shared/Helpers'
 import {
     Progressing,
     Host,
@@ -197,19 +198,21 @@ export const LogsRenderer = ({
             // We will remove color through [0m and add background color of y6, till searchKey is present and then revert back to original color
             // While reverting if index is 0, would not add any escape code since it is the start of the log
             if (targetSearchKey && areStagesAvailable) {
+                // Search is working on assumption that color codes are not nested for words.
                 const logParts = log.split(ANSI_UP_REGEX)
-                const availableEscapeCodes = log.match(ANSI_UP_REGEX)
+                const availableEscapeCodes = log.match(ANSI_UP_REGEX) || []
+                const searchRegex = new RegExp(`(${escapeRegExp(targetSearchKey)})`, 'g')
                 const parts = logParts.reduce((acc, part, index) => {
                     try {
+                        // Question: Can we directly set it as true inside the replace function?
+                        isSearchKeyPresent = isSearchKeyPresent || searchRegex.test(part)
                         acc.push(
                             part.replace(
-                                new RegExp(targetSearchKey, 'g'),
-                                `\x1B[0m\x1B[48;2;197;141;54m${targetSearchKey}\x1B[0m${index > 0 ? availableEscapeCodes[index - 1] : ''}`,
+                                searchRegex,
+                                (match) =>
+                                    `\x1B[0m\x1B[48;2;197;141;54m${match}\x1B[0m${index > 0 ? availableEscapeCodes[index - 1] : ''}`,
                             ),
                         )
-                        if (part.includes(targetSearchKey)) {
-                            isSearchKeyPresent = true
-                        }
                     } catch (searchRegexError) {
                         acc.push(part)
                     }

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -18,7 +18,15 @@
 import { useEffect, useRef, useState, ReactElement } from 'react'
 import Tippy from '@tippyjs/react'
 import moment from 'moment'
-import { handleUTCTime, mapByKey, MaterialInfo, shallowEqual, SortingOrder, ZERO_TIME_STRING } from '../Common'
+import {
+    handleUTCTime,
+    mapByKey,
+    MaterialInfo,
+    PATTERNS,
+    shallowEqual,
+    SortingOrder,
+    ZERO_TIME_STRING,
+} from '../Common'
 import {
     AggregationKeys,
     GitTriggers,
@@ -54,7 +62,8 @@ interface HighlightSearchTextProps {
     highlightClasses?: string
 }
 
-// Disabling default export since this is a helper function and we would have to export a lot of functions in future.
+export const escapeRegExp = (text: string): string => text.replace(PATTERNS.ESCAPED_CHARACTERS, '\\$&')
+
 export const highlightSearchText = ({ searchText, text, highlightClasses }: HighlightSearchTextProps): string => {
     if (!searchText) {
         return text