feat: add helper to highlight text and open search bar initial text c…

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.58-beta-8",
+    "version": "0.0.58-beta-21",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

src/Common/SearchBar/SearchBar.component.tsx

@@ -55,9 +55,11 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
-    // In most case would reset the state by doing history.push('/')
+    // assuming initialSearchText will change if we are changing history otherwise will be constant and will not change
+    // since on changing history we expect to make api call using useAsync so not applying handleEnter
     useEffect(() => {
         inputRef.current.value = initialSearchText
+        setShowClearButton(!!initialSearchText)
     }, [initialSearchText])
 
     const _applySearch = (value: string) => {
@@ -75,11 +77,6 @@ const SearchBar = ({
         const { value } = e.target
         setShowClearButton(!!value)
 
-        if (!value) {
-            clearSearch()
-            return
-        }
-
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -91,6 +88,7 @@ const SearchBar = ({
         const { key } = e
 
         if (key === 'Enter') {
+            e.preventDefault()
             const inputTarget = e.target as HTMLInputElement
             const value = inputTarget.value.trim()
             _applySearch(value)

src/Pages/GlobalConfigurations/BuildInfra/constants.tsx

@@ -29,7 +29,7 @@ export const BUILD_INFRA_TEXT = {
     DESCRIPTION_LABEL: 'Description',
     DESCRIPTION_PLACEHOLDER: 'Enter a description here',
     PROFILE_LABEL: 'Profile name',
-    PROFILE_PLACEHOLDER: 'Eg. Java or Node',
+    PROFILE_PLACEHOLDER: 'Eg. java or node',
     INHERITING_HEADING_DESCRIPTION: 'Inheriting from default',
     SUBMIT_BUTTON_TIPPY: {
         INVALID_INPUT: 'Valid input is required for all mandatory fields.',

src/Shared/Helpers.tsx

@@ -0,0 +1,29 @@
+interface HighlightSearchTextProps {
+    /**
+     * The text to be highlighted
+     */
+    searchText: string
+    /**
+     * The whole text string
+     */
+    text: string
+    /**
+     * The classes to be applied to the highlighted text
+     */
+    highlightClasses?: string
+}
+
+// Disabling default export since this is a helper function and we would have to export a lot of functions in future.
+// eslint-disable-next-line import/prefer-default-export
+export const highlightSearchText = ({ searchText, text, highlightClasses }: HighlightSearchTextProps): string => {
+    if (!searchText) {
+        return text
+    }
+
+    try {
+        const regex = new RegExp(searchText, 'gi')
+        return text.replace(regex, (match) => `<span class="${highlightClasses}">${match}</span>`)
+    } catch (error) {
+        return text
+    }
+}

src/Shared/index.ts

@@ -1,2 +1,3 @@
 export * from './Components'
 export * from './validations'
+export * from './Helpers'