RI-7811 Show info icon tooltips on hover instead of click

redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx

@@ -1,5 +1,4 @@
 import { EuiComboBoxOptionOption } from '@elastic/eui/src/components/combo_box/types'
-import cx from 'classnames'
 import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
@@ -28,7 +27,7 @@ import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { HealthText, Text } from 'uiSrc/components/base/text'
 import { Link } from 'uiSrc/components/base/link/Link'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
-import { RiPopover } from 'uiSrc/components/base'
+import { RiTooltip } from 'uiSrc/components/base'
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto'
 import { Panel } from 'uiSrc/components/panel'
@@ -89,7 +88,7 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
     initialFieldValue(fieldTypeOptions),
   ])
 
-  const [isInfoPopoverOpen, setIsInfoPopoverOpen] = useState<boolean>(false)
+
 
   const lastAddedIdentifier = useRef<HTMLInputElement>(null)
   const prevCountFields = useRef<number>(0)
@@ -177,43 +176,38 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
     fields.length === 1 && !item.identifier.length
 
   const IdentifierInfo = () => (
-    <RiPopover
-      anchorPosition="upCenter"
-      isOpen={isInfoPopoverOpen}
-      panelClassName={cx('popoverLikeTooltip')}
-      closePopover={() => setIsInfoPopoverOpen(false)}
-      button={
-        <IconButton
-          icon={InfoIcon}
-          id="identifier-info-icon"
-          aria-label="identifier info icon"
-          data-testid="identifier-info-icon"
-          onClick={() =>
-            setIsInfoPopoverOpen((isPopoverOpen) => !isPopoverOpen)
-          }
-        />
+    <RiTooltip
+      interactive
+      position="top"
+      content={
+        <>
+          <Link
+            variant="inline"
+            size="S"
+            href={getUtmExternalLink(
+              'https://redis.io/commands/ft.create/#SCHEMA',
+              {
+                campaign: 'browser_search',
+              },
+            )}
+            target="_blank"
+          >
+            Declares
+          </Link>
+          {' fields to index. '}
+          {keyTypeSelected === RedisearchIndexKeyType.HASH
+            ? 'Enter a hash field name.'
+            : 'Enter a JSON path expression.'}
+        </>
       }
     >
-      <>
-        <Link
-          variant="inline"
-          size="S"
-          href={getUtmExternalLink(
-            'https://redis.io/commands/ft.create/#SCHEMA',
-            {
-              campaign: 'browser_search',
-            },
-          )}
-          target="_blank"
-        >
-          Declares
-        </Link>
-        {' fields to index. '}
-        {keyTypeSelected === RedisearchIndexKeyType.HASH
-          ? 'Enter a hash field name.'
-          : 'Enter a JSON path expression.'}
-      </>
-    </RiPopover>
+      <IconButton
+        icon={InfoIcon}
+        id="identifier-info-icon"
+        aria-label="identifier info icon"
+        data-testid="identifier-info-icon"
+      />
+    </RiTooltip>
   )
 
   return (

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
 import { toNumber } from 'lodash'
 
 import { Text } from 'uiSrc/components/base/text'
@@ -41,7 +40,7 @@ import { DeleteIcon } from 'uiSrc/components/base/icons'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
-import { RiPopover } from 'uiSrc/components/base'
+import { RiPopover, RiTooltip } from 'uiSrc/components/base'
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { DeleteListElementsDto } from 'apiSrc/modules/browser/list/dto'
 
@@ -79,7 +78,7 @@ const RemoveListElements = (props: Props) => {
     useState<ListElementDestination>(TAIL_DESTINATION)
   const [isFormValid, setIsFormValid] = useState<boolean>(true)
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
-  const [isInfoPopoverOpen, setIsInfoPopoverOpen] = useState<boolean>(false)
+
   const [canRemoveMultiple, setCanRemoveMultiple] = useState<boolean>(true)
   const { name: selectedKey = '', length } = useSelector(
     selectedKeyDataSelector,
@@ -221,28 +220,19 @@ const RemoveListElements = (props: Props) => {
     </RiPopover>
   )
 
-  const InfoBoxPopover = () => (
-    <RiPopover
-      panelClassName={cx('popoverLikeTooltip')}
-      anchorPosition="leftCenter"
-      isOpen={isInfoPopoverOpen}
-      closePopover={() => setIsInfoPopoverOpen(false)}
-      button={
-        <RiIcon
-          className={styles.infoIcon}
-          type="InfoIcon"
-          onClick={() =>
-            setIsInfoPopoverOpen((isPopoverOpen) => !isPopoverOpen)
-          }
-          style={{ cursor: 'pointer' }}
-          data-testid="info-tooltip-icon"
-        />
-      }
+  const InfoBoxTooltip = () => (
+    <RiTooltip
+      interactive
+      position="left"
+      content={HelpTexts.REMOVING_MULTIPLE_ELEMENTS_NOT_SUPPORT}
     >
-      <div className={styles.popover}>
-        {HelpTexts.REMOVING_MULTIPLE_ELEMENTS_NOT_SUPPORT}
-      </div>
-    </RiPopover>
+      <RiIcon
+        className={styles.infoIcon}
+        type="InfoIcon"
+        style={{ cursor: 'pointer' }}
+        data-testid="info-tooltip-icon"
+      />
+    </RiTooltip>
   )
 
   return (
@@ -280,10 +270,10 @@ const RemoveListElements = (props: Props) => {
                 </FormField>
               </FlexItem>
 
-              {!canRemoveMultiple ? (
-                <FlexItem>{InfoBoxPopover()}</FlexItem>
-              ) : (
-                <></>
+              {!canRemoveMultiple && (
+                <FlexItem>
+                  <InfoBoxTooltip />
+                </FlexItem>
               )}
             </Row>
           </Row>

redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx

@@ -1,16 +1,28 @@
 import React from 'react'
-import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitForRiTooltipVisible,
+} from 'uiSrc/utils/test-utils'
 import SubscribeInformation from './SubscribeInformation'
 
 describe('SubscribeInformation', () => {
   it('should render', () => {
     expect(render(<SubscribeInformation />)).toBeTruthy()
   })
 
-  it('should open popover on click', async () => {
+  it('should show tooltip on hover', async () => {
     render(<SubscribeInformation />)
 
-    fireEvent.click(screen.getByTestId('append-info-icon'))
-    expect(screen.getByTestId('pub-sub-examples')).toBeInTheDocument()
+    await act(async () => {
+      fireEvent.focus(screen.getByTestId('append-info-icon'))
+    })
+    await waitForRiTooltipVisible()
+
+    expect(
+      screen.getAllByText(/Subscribe to one or more channels/)[0],
+    ).toBeInTheDocument()
   })
 })

redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx

@@ -7,37 +7,39 @@ import {
   UTM_MEDIUMS,
 } from 'uiSrc/constants/links'
 import { Link } from 'uiSrc/components/base/link/Link'
-import { RiPopover } from 'uiSrc/components/base'
+import { RiTooltip } from 'uiSrc/components/base'
 import { Col } from 'uiSrc/components/base/layout/flex'
 import { InfoIcon } from './SubscribeInformation.styles'
 
 const SubscribeInformation = () => (
-  <RiPopover
-    id="showPupSubExamples"
-    button={<InfoIcon />}
+  <RiTooltip
+    interactive
     data-testid="pub-sub-examples"
-  >
-    <Col gap="l">
-      <Text>
-        Subscribe to one or more channels or patterns by entering them,
-        separated by spaces.
-      </Text>
+    content={
+      <Col gap="l">
+        <Text>
+          Subscribe to one or more channels or patterns by entering them,
+          separated by spaces.
+        </Text>
 
-      <Text>
-        Supported glob-style patterns are described&nbsp;
-        <Link
-          variant="inline"
-          target="_blank"
-          href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
-            medium: UTM_MEDIUMS.Main,
-            campaign: UTM_CAMPAINGS.PubSub,
-          })}
-        >
-          here.
-        </Link>
-      </Text>
-    </Col>
-  </RiPopover>
+        <Text>
+          Supported glob-style patterns are described&nbsp;
+          <Link
+            variant="inline"
+            target="_blank"
+            href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
+              medium: UTM_MEDIUMS.Main,
+              campaign: UTM_CAMPAINGS.PubSub,
+            })}
+          >
+            here.
+          </Link>
+        </Text>
+      </Col>
+    }
+  >
+    <InfoIcon />
+  </RiTooltip>
 )
 
 export default SubscribeInformation