#RI-4340 - fix multiple tooltips on the list of dbs

redisinsight/ui/src/components/index.ts

@@ -22,6 +22,7 @@ import BulkActionsConfig from './bulk-actions-config'
 import ImportDatabasesDialog from './import-databases-dialog'
 import OnboardingTour from './onboarding-tour'
 import CodeBlock from './code-block'
+import ShowChildByCondition from './show-child-by-condition'
 
 export {
   NavigationMenu,
@@ -51,4 +52,5 @@ export {
   ImportDatabasesDialog,
   OnboardingTour,
   CodeBlock,
+  ShowChildByCondition
 }

redisinsight/ui/src/components/show-child-by-condition/ShowChildByCondition.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import ShowChildByCondition from './ShowChildByCondition'
+
+const A = ({ children }: { children: React.ReactElement }) => <div data-testid="a-wrapper"><div data-testid="a-inner">{children}</div></div>
+const B = () => <div data-testid="b-inner">1</div>
+
+describe('ShowChildByCondition', () => {
+  it('should render', () => {
+    expect(render(<ShowChildByCondition isShow><A><B /></A></ShowChildByCondition>)).toBeTruthy()
+  })
+
+  it('should render A and B', () => {
+    render(<ShowChildByCondition isShow><A><B /></A></ShowChildByCondition>)
+
+    expect(screen.getByTestId('a-wrapper')).toBeInTheDocument()
+    expect(screen.getByTestId('a-inner')).toBeInTheDocument()
+    expect(screen.getByTestId('b-inner')).toBeInTheDocument()
+  })
+
+  it('should render only B', () => {
+    render(<ShowChildByCondition isShow={false}><A><B /></A></ShowChildByCondition>)
+
+    expect(screen.queryByTestId('a-wrapper')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('a-inner')).not.toBeInTheDocument()
+    expect(screen.getByTestId('b-inner')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/show-child-by-condition/ShowChildByCondition.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export interface Props {
+  children: React.ReactElement
+  isShow: boolean
+  innerClassName?: string
+}
+
+const ShowChildByCondition = (props: Props) => {
+  const { isShow, children, innerClassName = '' } = props
+  const innerContent = children.props.children ?? children
+
+  return isShow ? children : <span className={innerClassName}>{innerContent}</span>
+}
+
+export default ShowChildByCondition

redisinsight/ui/src/components/show-child-by-condition/index.ts

@@ -0,0 +1,3 @@
+import ShowChildByCondition from './ShowChildByCondition'
+
+export default ShowChildByCondition

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

@@ -7,7 +7,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui'
 import { capitalize, map } from 'lodash'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation } from 'react-router-dom'
 import cx from 'classnames'
@@ -30,6 +30,7 @@ import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
 import { PageNames, Pages, Theme } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent, getRedisModulesSummary } from 'uiSrc/telemetry'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
+import { ShowChildByCondition } from 'uiSrc/components'
 import { formatLongName, getDbIndex, lastConnectionFormat, Nullable, replaceSpaces } from 'uiSrc/utils'
 import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
 import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
@@ -69,6 +70,7 @@ const DatabasesListWrapper = ({
   const instances = useSelector(instancesSelector)
   const [, forceRerender] = useState({})
   const deleting = { id: '' }
+  const isLoadingRef = useRef(false)
 
   const closePopover = () => {
     deleting.id = ''
@@ -91,6 +93,9 @@ const DatabasesListWrapper = ({
         history.replace(Pages.home)
       }, 1000)
     }
+
+    isLoadingRef.current = instances.loading
+    forceRerender({})
   }, [instances.loading, search])
 
   useEffect(() => {
@@ -209,41 +214,46 @@ const DatabasesListWrapper = ({
       render: function InstanceCell(name: string = '', instance: Instance) {
         const { id, db, new: newStatus = false } = instance
         const cellContent = replaceSpaces(name.substring(0, 200))
+
         return (
           <div
             role="presentation"
           >
             {newStatus && (
-              <EuiToolTip
-                content="New"
-                position="top"
-                anchorClassName={styles.newStatusAnchor}
-              >
-                <div className={styles.newStatus} data-testid={`database-status-new-${id}`} />
-              </EuiToolTip>
+              <ShowChildByCondition isShow={!isLoadingRef.current} innerClassName={styles.newStatusAnchor}>
+                <EuiToolTip
+                  content="New"
+                  position="top"
+                  anchorClassName={styles.newStatusAnchor}
+                >
+                  <div className={styles.newStatus} data-testid={`database-status-new-${id}`} />
+                </EuiToolTip>
+              </ShowChildByCondition>
             )}
-            <EuiToolTip
-              position="bottom"
-              title="Database Alias"
-              className={styles.tooltipColumnName}
-              content={`${formatLongName(name)} ${getDbIndex(db)}`}
-            >
-              <EuiText
-                className={styles.tooltipAnchorColumnName}
-                data-testid={`instance-name-${id}`}
-                onClick={(e: React.MouseEvent) => handleCheckConnectToInstance(e, instance)}
-                onKeyDown={(e: React.KeyboardEvent) => handleCheckConnectToInstance(e, instance)}
+            <ShowChildByCondition isShow={!isLoadingRef.current}>
+              <EuiToolTip
+                position="bottom"
+                title="Database Alias"
+                className={styles.tooltipColumnName}
+                content={`${formatLongName(name)} ${getDbIndex(db)}`}
               >
-                <EuiTextColor
-                  className={cx(styles.tooltipColumnNameText, { [styles.withDb]: db })}
+                <EuiText
+                  className={styles.tooltipAnchorColumnName}
+                  data-testid={`instance-name-${id}`}
+                  onClick={(e: React.MouseEvent) => handleCheckConnectToInstance(e, instance)}
+                  onKeyDown={(e: React.KeyboardEvent) => handleCheckConnectToInstance(e, instance)}
                 >
-                  {cellContent}
-                </EuiTextColor>
-                <EuiTextColor>
-                  {` ${getDbIndex(db)}`}
-                </EuiTextColor>
-              </EuiText>
-            </EuiToolTip>
+                  <EuiTextColor
+                    className={cx(styles.tooltipColumnNameText, { [styles.withDb]: db })}
+                  >
+                    {cellContent}
+                  </EuiTextColor>
+                  <EuiTextColor>
+                    {` ${getDbIndex(db)}`}
+                  </EuiTextColor>
+                </EuiText>
+              </EuiToolTip>
+            </ShowChildByCondition>
           </div>
         )
       },