feat: update the functionality for search clearing

package.json

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

src/Common/SearchBar/SearchBar.component.tsx

@@ -1,22 +1,22 @@
-import { ChangeEvent, FunctionComponent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
 import './searchBar.scss'
-import { debounce, noop } from '../Helper'
+import { debounce } from '../Helper'
 
 /**
  * Generic search input component with support for enter based and debounced search
  */
-const SearchBar: FunctionComponent<SearchBarProps> = ({
+const SearchBar = ({
     initialSearchText = '',
-    handleSearchChange = noop,
-    handleEnter = noop,
+    handleSearchChange = () => {},
+    handleEnter = () => {},
     inputProps = {},
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
-}) => {
+}: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
     const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
@@ -34,20 +34,24 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
         }
     }
 
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
         if (key === 'Enter') {
             const inputTarget = e.target as HTMLInputElement
-            const event = { ...e, target: { ...inputTarget, value: inputTarget.value.trim() } }
-            handleSearchChange(event.target.value)
-            handleEnter(event)
+            const value = inputTarget.value.trim()
+            _applySearch(value)
         }
     }
 
     const clearSearch = () => {
         inputRef.current.value = ''
-        handleSearchChange('')
+        _applySearch('')
     }
 
     return (

src/Common/SearchBar/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component'
+export type { SearchBarProps } from './types'

src/Common/SearchBar/types.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, SyntheticEvent } from 'react'
+import { InputHTMLAttributes } from 'react'
 
 export interface SearchBarProps {
     /**
@@ -14,7 +14,7 @@ export interface SearchBarProps {
     /**
      * Enter event handler for the search input
      */
-    handleEnter?: (event: SyntheticEvent) => void
+    handleEnter?: (searchText: string) => void
     /**
      * Input props for the search input
      */

src/Common/index.ts

@@ -26,7 +26,7 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-export { default as SearchBar } from './SearchBar/SearchBar.component'
+export * from './SearchBar'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'