@@ -23,18 +23,27 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
23
23
import { AdditionalRedisModule } from 'uiSrc/slices/interfaces'
24
24
import { OutsideClickDetector } from 'uiSrc/components/base/utils'
25
25
import { HealthText } from 'uiSrc/components/base/text/HealthText'
26
- import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
26
+ import {
27
+ defaultValueRender ,
28
+ RiSelect ,
29
+ } from 'uiSrc/components/base/forms/select/RiSelect'
27
30
import { Modal } from 'uiSrc/components/base/display'
28
31
import { FILTER_KEY_TYPE_OPTIONS } from './constants'
29
32
30
33
import styles from './styles.module.scss'
34
+ import styled from 'styled-components'
31
35
32
36
const ALL_KEY_TYPES_VALUE = 'all'
33
37
34
38
export interface Props {
35
39
modules ?: AdditionalRedisModule [ ]
36
40
}
37
41
42
+ const FilterKeyTypeSelect = styled ( RiSelect ) `
43
+ height: 100%;
44
+ border-radius: 0;
45
+ `
46
+
38
47
const FilterKeyType = ( { modules } : Props ) => {
39
48
const [ isSelectOpen , setIsSelectOpen ] = useState < boolean > ( false )
40
49
const [ typeSelected , setTypeSelected ] = useState < string > ( 'all' )
@@ -157,7 +166,9 @@ const FilterKeyType = ({ modules }: Props) => {
157
166
onCancel = { ( ) => setIsInfoPopoverOpen ( false ) }
158
167
className = { styles . unsupportedInfoModal }
159
168
data-testid = "filter-not-available-modal"
160
- content = { < FilterNotAvailable onClose = { ( ) => setIsInfoPopoverOpen ( false ) } /> }
169
+ content = {
170
+ < FilterNotAvailable onClose = { ( ) => setIsInfoPopoverOpen ( false ) } />
171
+ }
161
172
title = { null }
162
173
/>
163
174
{ ! isVersionSupported && (
@@ -168,15 +179,10 @@ const FilterKeyType = ({ modules }: Props) => {
168
179
data-testid = "unsupported-btn-anchor"
169
180
/>
170
181
) }
171
- < RiSelect
182
+ < FilterKeyTypeSelect
172
183
disabled = { ! isVersionSupported }
173
184
options = { options }
174
- valueRender = { ( { option, isOptionValue } ) => {
175
- if ( isOptionValue ) {
176
- return option . inputDisplay
177
- }
178
- return option . dropdownDisplay
179
- } }
185
+ valueRender = { defaultValueRender }
180
186
defaultOpen = { isSelectOpen }
181
187
value = { typeSelected }
182
188
onChange = { ( value : string ) => onChangeType ( value ) }
0 commit comments