RI-7052: replace EuiFieldSearch with SearchInput (#4586)

* RI-7054: replace EuiFormRow with FormField

* RI-7052 remove leftover

* RI-7052: expose and use KeyboardKeys enum

Author: KrumTy

redisinsight/ui/src/components/base/inputs/SearchInput.tsx

@@ -0,0 +1,3 @@
+import { SearchInput } from '@redis-ui/components'
+
+export default SearchInput

redisinsight/ui/src/components/base/inputs/index.ts

@@ -1 +1,2 @@
 export { default as PasswordInput } from './PasswordInput'
+export { default as SearchInput } from './SearchInput'

redisinsight/ui/src/components/cli/Cli/Cli.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { keys } from '@elastic/eui'
+import { KeyboardKeys as keys } from 'uiSrc/constants/keys'
 import { fireEvent, render } from 'uiSrc/utils/test-utils'
 import CLI from './Cli'
 

redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.spec.tsx

@@ -1,6 +1,6 @@
 import { cloneDeep, last } from 'lodash'
 import React from 'react'
-import { keys } from '@elastic/eui'
+import { KeyboardKeys as keys } from 'uiSrc/constants/keys'
 import { instance, mock } from 'ts-mockito'
 import {
   cleanup,

redisinsight/ui/src/components/cli/components/cli-body/CliBody/CliBody.tsx

@@ -1,5 +1,5 @@
 import React, { Ref, useEffect, useRef, useState } from 'react'
-import { keys } from '@elastic/eui'
+import { KeyboardKeys as keys } from 'uiSrc/constants/keys'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Nullable, scrollIntoView } from 'uiSrc/utils'

redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchFilter/styles.module.scss

@@ -1,5 +1,4 @@
 .container {
-  position: absolute;
   height: 36px;
   width: 180px;
 

redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/CHSearchInput.tsx

@@ -1,9 +1,9 @@
-import React, { ChangeEvent, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { EuiFieldSearch } from '@elastic/eui'
 
 import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
 
+import { SearchInput } from 'uiSrc/components/base/inputs'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -38,18 +38,14 @@ const CHSearchInput = ({ submitSearch, isLoading = false }: Props) => {
 
   return (
     <div className={styles.container}>
-      <EuiFieldSearch
-        isLoading={isLoading}
+      <SearchInput
+        loading={isLoading}
         disabled={isLoading}
-        fullWidth={false}
         name="search-command"
         placeholder="Search for a command"
         autoComplete="off"
         value={searchValue}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          onChangeSearch(e.target.value)
-        }
-        className={styles.searchInput}
+        onChange={onChangeSearch}
         data-testid="cli-helper-search"
       />
     </div>

redisinsight/ui/src/components/command-helper/components/command-helper-search/CHSearchInput/styles.module.scss

@@ -1,17 +1,3 @@
 .container {
-  max-width: 100%;
-  height: 38px;
-  margin-left: 106px;
-
-  :global(.euiFormControlLayout) {
-    max-width: calc(100%) !important;
-    height: 36px !important;
-  }
-}
-
-.searchInput {
-  &:global(.euiFieldSearch) {
-    border: 1px solid var(--euiColorLightShade) !important;
-    height: 36px !important;
-  }
+  flex: 1;
 }

redisinsight/ui/src/components/command-helper/components/command-helper-search/styles.module.scss

@@ -1,4 +1,6 @@
 .searchWrapper {
   margin-bottom: 16px;
   position: relative;
+  display: flex;
+  gap: 6px;
 }

redisinsight/ui/src/components/form-dialog/styles.module.scss

@@ -52,7 +52,6 @@
 
     .euiFieldText,
     .euiFieldNumber,
-    .euiFieldSearch,
     .euiSelect,
     .euiSuperSelectControl,
     .euiComboBox .euiComboBox__inputWrap,