Skip to content

Commit 7893cf4

Browse files
committed
#RI-4340 - fix multiple tooltips on the list of dbs
1 parent 49542c4 commit 7893cf4

File tree

5 files changed

+88
-28
lines changed

5 files changed

+88
-28
lines changed

redisinsight/ui/src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import BulkActionsConfig from './bulk-actions-config'
2222
import ImportDatabasesDialog from './import-databases-dialog'
2323
import OnboardingTour from './onboarding-tour'
2424
import CodeBlock from './code-block'
25+
import ShowChildByCondition from './show-child-by-condition'
2526

2627
export {
2728
NavigationMenu,
@@ -51,4 +52,5 @@ export {
5152
ImportDatabasesDialog,
5253
OnboardingTour,
5354
CodeBlock,
55+
ShowChildByCondition
5456
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import { render, screen } from 'uiSrc/utils/test-utils'
3+
4+
import ShowChildByCondition from './ShowChildByCondition'
5+
6+
const A = ({ children }: { children: React.ReactElement }) => <div data-testid="a-wrapper"><div data-testid="a-inner">{children}</div></div>
7+
const B = () => <div data-testid="b-inner">1</div>
8+
9+
describe('ShowChildByCondition', () => {
10+
it('should render', () => {
11+
expect(render(<ShowChildByCondition isShow><A><B /></A></ShowChildByCondition>)).toBeTruthy()
12+
})
13+
14+
it('should render A and B', () => {
15+
render(<ShowChildByCondition isShow><A><B /></A></ShowChildByCondition>)
16+
17+
expect(screen.getByTestId('a-wrapper')).toBeInTheDocument()
18+
expect(screen.getByTestId('a-inner')).toBeInTheDocument()
19+
expect(screen.getByTestId('b-inner')).toBeInTheDocument()
20+
})
21+
22+
it('should render only B', () => {
23+
render(<ShowChildByCondition isShow={false}><A><B /></A></ShowChildByCondition>)
24+
25+
expect(screen.queryByTestId('a-wrapper')).not.toBeInTheDocument()
26+
expect(screen.queryByTestId('a-inner')).not.toBeInTheDocument()
27+
expect(screen.getByTestId('b-inner')).toBeInTheDocument()
28+
})
29+
})
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
export interface Props {
4+
children: React.ReactElement
5+
isShow: boolean
6+
innerClassName?: string
7+
}
8+
9+
const ShowChildByCondition = (props: Props) => {
10+
const { isShow, children, innerClassName = '' } = props
11+
const innerContent = children.props.children ?? children
12+
13+
return isShow ? children : <span className={innerClassName}>{innerContent}</span>
14+
}
15+
16+
export default ShowChildByCondition
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import ShowChildByCondition from './ShowChildByCondition'
2+
3+
export default ShowChildByCondition

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx

Lines changed: 38 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
EuiToolTip,
88
} from '@elastic/eui'
99
import { capitalize, map } from 'lodash'
10-
import React, { useContext, useEffect, useState } from 'react'
10+
import React, { useContext, useEffect, useRef, useState } from 'react'
1111
import { useDispatch, useSelector } from 'react-redux'
1212
import { useHistory, useLocation } from 'react-router-dom'
1313
import cx from 'classnames'
@@ -30,6 +30,7 @@ import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
3030
import { PageNames, Pages, Theme } from 'uiSrc/constants'
3131
import { sendEventTelemetry, TelemetryEvent, getRedisModulesSummary } from 'uiSrc/telemetry'
3232
import { ThemeContext } from 'uiSrc/contexts/themeContext'
33+
import { ShowChildByCondition } from 'uiSrc/components'
3334
import { formatLongName, getDbIndex, lastConnectionFormat, Nullable, replaceSpaces } from 'uiSrc/utils'
3435
import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
3536
import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
@@ -69,6 +70,7 @@ const DatabasesListWrapper = ({
6970
const instances = useSelector(instancesSelector)
7071
const [, forceRerender] = useState({})
7172
const deleting = { id: '' }
73+
const isLoadingRef = useRef(false)
7274

7375
const closePopover = () => {
7476
deleting.id = ''
@@ -91,6 +93,9 @@ const DatabasesListWrapper = ({
9193
history.replace(Pages.home)
9294
}, 1000)
9395
}
96+
97+
isLoadingRef.current = instances.loading
98+
forceRerender({})
9499
}, [instances.loading, search])
95100

96101
useEffect(() => {
@@ -209,41 +214,46 @@ const DatabasesListWrapper = ({
209214
render: function InstanceCell(name: string = '', instance: Instance) {
210215
const { id, db, new: newStatus = false } = instance
211216
const cellContent = replaceSpaces(name.substring(0, 200))
217+
212218
return (
213219
<div
214220
role="presentation"
215221
>
216222
{newStatus && (
217-
<EuiToolTip
218-
content="New"
219-
position="top"
220-
anchorClassName={styles.newStatusAnchor}
221-
>
222-
<div className={styles.newStatus} data-testid={`database-status-new-${id}`} />
223-
</EuiToolTip>
223+
<ShowChildByCondition isShow={!isLoadingRef.current} innerClassName={styles.newStatusAnchor}>
224+
<EuiToolTip
225+
content="New"
226+
position="top"
227+
anchorClassName={styles.newStatusAnchor}
228+
>
229+
<div className={styles.newStatus} data-testid={`database-status-new-${id}`} />
230+
</EuiToolTip>
231+
</ShowChildByCondition>
224232
)}
225-
<EuiToolTip
226-
position="bottom"
227-
title="Database Alias"
228-
className={styles.tooltipColumnName}
229-
content={`${formatLongName(name)} ${getDbIndex(db)}`}
230-
>
231-
<EuiText
232-
className={styles.tooltipAnchorColumnName}
233-
data-testid={`instance-name-${id}`}
234-
onClick={(e: React.MouseEvent) => handleCheckConnectToInstance(e, instance)}
235-
onKeyDown={(e: React.KeyboardEvent) => handleCheckConnectToInstance(e, instance)}
233+
<ShowChildByCondition isShow={!isLoadingRef.current}>
234+
<EuiToolTip
235+
position="bottom"
236+
title="Database Alias"
237+
className={styles.tooltipColumnName}
238+
content={`${formatLongName(name)} ${getDbIndex(db)}`}
236239
>
237-
<EuiTextColor
238-
className={cx(styles.tooltipColumnNameText, { [styles.withDb]: db })}
240+
<EuiText
241+
className={styles.tooltipAnchorColumnName}
242+
data-testid={`instance-name-${id}`}
243+
onClick={(e: React.MouseEvent) => handleCheckConnectToInstance(e, instance)}
244+
onKeyDown={(e: React.KeyboardEvent) => handleCheckConnectToInstance(e, instance)}
239245
>
240-
{cellContent}
241-
</EuiTextColor>
242-
<EuiTextColor>
243-
{` ${getDbIndex(db)}`}
244-
</EuiTextColor>
245-
</EuiText>
246-
</EuiToolTip>
246+
<EuiTextColor
247+
className={cx(styles.tooltipColumnNameText, { [styles.withDb]: db })}
248+
>
249+
{cellContent}
250+
</EuiTextColor>
251+
<EuiTextColor>
252+
{` ${getDbIndex(db)}`}
253+
</EuiTextColor>
254+
</EuiText>
255+
</EuiToolTip>
256+
</ShowChildByCondition>
247257
</div>
248258
)
249259
},

0 commit comments

Comments
 (0)