RI-7542 Rework the visuals of the inline search for the hash/list keys in the browser

redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.spec.tsx

@@ -20,4 +20,48 @@ describe('TableColumnSearchTrigger', () => {
     })
     expect(searchInput).toHaveValue('*1*')
   })
+
+  it('should call "handleOpenState" on search blur if input is empty', () => {
+    const handleOpenState = jest.fn()
+
+    render(
+      <TableColumnSearchTrigger
+        {...instance(mockedProps)}
+        isOpen
+        handleOpenState={handleOpenState}
+      />,
+    )
+
+    const searchInput = screen.getByTestId('search')
+    expect(searchInput).toBeInTheDocument()
+    expect(searchInput).toHaveValue('')
+
+    fireEvent.blur(searchInput)
+    expect(handleOpenState).toHaveBeenCalledWith(false)
+  })
+
+  it('should not call "handleOpenState" on search blur if input has value', () => {
+    const handleOpenState = jest.fn()
+
+    render(
+      <TableColumnSearchTrigger
+        {...instance(mockedProps)}
+        isOpen
+        handleOpenState={handleOpenState}
+      />,
+    )
+
+    const searchInput = screen.getByTestId('search')
+    expect(searchInput).toBeInTheDocument()
+    expect(searchInput).toHaveValue('')
+
+    fireEvent.change(searchInput, {
+      target: { value: '*1*' },
+    })
+
+    expect(searchInput).toHaveValue('*1*')
+
+    fireEvent.blur(searchInput)
+    expect(handleOpenState).not.toHaveBeenCalled()
+  })
 })

redisinsight/ui/src/components/table-column-search-trigger/TableColumnSearchTrigger.tsx

@@ -52,12 +52,20 @@
     }
   }
 
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === keys.ENTER) {
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === keys.ENTER) {
       handleApply(value)
     }
   }
 
+  const handleOnBlur = (event?: React.FocusEvent<HTMLInputElement>) => {
+    const target = event?.target as HTMLInputElement
+
+    if (!target.value) {
+      handleOpenState(false)
+    }
+  }
+
   return (
     <div style={{ paddingRight: 10 }}>
       <IconButton
@@ -72,13 +80,14 @@
       >
         <SearchInput
           onKeyDown={onKeyDown}
-          // onBlur={handleOnBlur}
+          onBlur={handleOnBlur}
           ref={setInputEl}
           name={fieldName}
           placeholder="Search"
           value={value || ''}
           onChange={handleChangeValue}
           data-testid="search"
+          style={{ width: '100%' }}
         />
       </div>
     </div>

redisinsight/ui/src/components/table-column-search-trigger/styles.module.scss

@@ -7,6 +7,6 @@
   right: 0;
   top: 0;
   bottom: 0;
-  padding: 0;
+  padding: 8px;
   align-items: center;
 }