fix(ui): update visuals of the commands helper filter in the cli panel (#5019)

Author: valkirilov

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

@@ -6,7 +6,7 @@ import { GROUP_TYPES_DISPLAY } from 'uiSrc/constants'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { cliSettingsSelector } from 'uiSrc/slices/cli/cli-settings'
 import { Text } from 'uiSrc/components/base/text'
-
+import { Row } from 'uiSrc/components/base/layout/flex'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import styles from './styles.module.scss'
@@ -79,13 +79,13 @@ const CHSearchFilter = ({ submitFilter, isLoading }: Props) => {
         options={options}
         allowReset
         placeholder={
-          <div role="presentation">
+          <Row role="presentation">
             <RiIcon
               type="FilterIcon"
               data-testid="filter-option--group-type-default"
               className={styles.controlsIcon}
             />
-          </div>
+          </Row>
         }
         value={typeSelected}
         data-testid="select-filter-group-type"

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

@@ -1,45 +1,5 @@
 .container {
   height: 36px;
-  width: 180px;
-
-  :global {
-    .euiFormControlLayout {
-      .euiSuperSelectControl {
-        height: 36px !important;
-        padding: 0 8px !important;
-        background-color: var(--euiColorLightShade) !important;
-        border-color: var(--euiColorLightShade) !important;
-        box-shadow: none !important;
-
-        .euiHealth {
-          margin-top: 10px;
-          margin-left: -5px;
-        }
-
-        &.euiSuperSelect--isOpen__button {
-          background-color: var(--euiColorLightShade) !important;
-        }
-        &:focus {
-          background-color: var(--euiColorLightShade) !important;
-        }
-      }
-    }
-
-    .euiPopover:not(.euiSuperSelect) {
-      position: absolute;
-      z-index: 10;
-      top: 7px;
-      right: 88px;
-
-      svg {
-        width: 24px !important;
-        height: 24px !important;
-      }
-    }
-    .euiFormControlLayoutIcons {
-      right: 80px;
-    }
-  }
 }
 
 .filterKeyType {
@@ -49,9 +9,9 @@
 
 .controlsIcon {
   cursor: pointer;
-  margin-left: 3px;
   height: 20px !important;
   width: 20px !important;
+  
   &:global(svg) {
     color: var(--inputTextColor) !important;
   }