[RI-7074] Replace EuiToolTip with RiTooltip (#4659)

* RI-7074: init RiTooltip

* RI-7074: replace EuiTooltip with RITooltip

* update unit tests

* remove euiTooltip styles

* fix failing tests

* cleanup TODOs

* resolve comments

* remove EuiTooltip

* expose TOOLTIP_DELAY_LONG constant

Author: KrumTy

redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx

@@ -316,15 +316,15 @@ describe('AutoRefresh', () => {
     render(
       <AutoRefresh
         {...instance(mockedProps)}
-        disabled={true}
+        disabled
         disabledRefreshButtonMessage={tooltipText}
       />,
     )
 
-    fireEvent.mouseOver(screen.getByTestId('refresh-btn'))
+    fireEvent.focus(screen.getByTestId('refresh-btn'))
     await screen.findByTestId('refresh-tooltip')
     expect(screen.getByTestId('refresh-tooltip')).toHaveTextContent(
-      new RegExp(`^${tooltipText}$`),
+      new RegExp(`^${tooltipText}`),
     )
   })
 })

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { EuiIcon, EuiPopover, EuiToolTip } from '@elastic/eui'
+import { EuiIcon, EuiPopover } from '@elastic/eui'
 import cx from 'classnames'
 import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
 import {
@@ -14,6 +14,7 @@ import { BrowserStorageItem } from 'uiSrc/constants'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
 import { SwitchInput } from 'uiSrc/components/base/inputs'
+import { RiTooltip } from 'uiSrc/components'
 import {
   DEFAULT_REFRESH_RATE,
   DURATION_FIRST_REFRESH_TIME,
@@ -223,7 +224,7 @@ const AutoRefresh = ({
         )}
       </ColorText>
 
-      <EuiToolTip
+      <RiTooltip
         title={!disabled && 'Last Refresh'}
         className={styles.tooltip}
         position="top"
@@ -242,7 +243,7 @@ const AutoRefresh = ({
           aria-labelledby={getDataTestid('refresh-btn')?.replaceAll?.('-', ' ')}
           data-testid={getDataTestid('refresh-btn')}
         />
-      </EuiToolTip>
+      </RiTooltip>
 
       <EuiPopover
         ownFocus={false}

redisinsight/ui/src/components/base/index.ts

@@ -2,3 +2,5 @@ import ExternalLink from './external-link'
 import { HorizontalRule, LoadingContent } from './layout'
 
 export { ExternalLink, HorizontalRule, LoadingContent }
+
+export * from './tooltip'

redisinsight/ui/src/components/base/shared/WindowControlGroup.tsx

@@ -1,8 +1,8 @@
-import { EuiToolTip } from '@elastic/eui'
 import React from 'react'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { CancelSlimIcon, MinusIcon } from 'uiSrc/components/base/icons'
+import { RiTooltip } from 'uiSrc/components'
 
 type Props = {
   onClose: () => void
@@ -22,12 +22,7 @@ export const WindowControlGroup = ({
 }: Props) => (
   <Row gap="m" justify="end">
     <FlexItem>
-      <EuiToolTip
-        content={hideContent}
-        position="top"
-        display="inlineBlock"
-        anchorClassName="flex-row"
-      >
+      <RiTooltip content={hideContent} position="top">
         <IconButton
           size="S"
           icon={MinusIcon}
@@ -36,15 +31,10 @@ export const WindowControlGroup = ({
           data-testid={`hide-${id}`}
           onClick={onHide}
         />
-      </EuiToolTip>
+      </RiTooltip>
     </FlexItem>
     <FlexItem>
-      <EuiToolTip
-        content={closeContent}
-        position="top"
-        display="inlineBlock"
-        anchorClassName="flex-row"
-      >
+      <RiTooltip content={closeContent} position="top">
         <IconButton
           size="S"
           icon={CancelSlimIcon}
@@ -53,7 +43,7 @@ export const WindowControlGroup = ({
           data-testid={`close-${id}`}
           onClick={onClose}
         />
-      </EuiToolTip>
+      </RiTooltip>
     </FlexItem>
   </Row>
 )

redisinsight/ui/src/components/base/text/index.ts

@@ -1,3 +1,4 @@
 export { Text } from './Text'
 export { ColorText } from './ColorText'
 export { HealthText } from './HealthText'
+export { Title } from './Title'

redisinsight/ui/src/components/base/tooltip/HoverContent.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { Title } from 'uiSrc/components/base/text'
+
+interface RiTooltipContentProps {
+  title?: React.ReactNode
+  content: React.ReactNode
+}
+
+export const HoverContent = ({ title, content }: RiTooltipContentProps) => (
+  <Col>
+    {title && <Title size="S">{title}</Title>}
+    {content}
+  </Col>
+)

redisinsight/ui/src/components/base/tooltip/RITooltip.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { TooltipProvider, Tooltip, TooltipProps } from '@redis-ui/components'
+import { HoverContent } from './HoverContent'
+
+export interface RiTooltipProps
+  extends Omit<TooltipProps, 'placement' | 'openDelayDuration'> {
+  title?: React.ReactNode
+  position?: TooltipProps['placement']
+  delay?: TooltipProps['openDelayDuration']
+}
+
+export const RiTooltip = ({
+  children,
+  title,
+  content,
+  position,
+  delay,
+  ...props
+}: RiTooltipProps) => (
+  <TooltipProvider>
+    <Tooltip
+      {...props}
+      content={<HoverContent title={title} content={content} />}
+      placement={position}
+      openDelayDuration={delay}
+    >
+      <span>{children}</span>
+    </Tooltip>
+  </TooltipProvider>
+)

redisinsight/ui/src/components/base/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './RITooltip'

redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { FormikErrors, useFormik } from 'formik'
 import { isEmpty, forEach } from 'lodash'
-import { EuiToolTip, EuiForm } from '@elastic/eui'
+import { EuiForm } from '@elastic/eui'
 import cx from 'classnames'
 
-import { HorizontalRule } from 'uiSrc/components'
+import { HorizontalRule, RiTooltip } from 'uiSrc/components'
 import { compareConsents } from 'uiSrc/utils'
 import {
   updateUserConfigSettingsAction,
@@ -331,12 +331,11 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
           ))}
         </FlexItem>
         <FlexItem>
-          <EuiToolTip
+          <RiTooltip
             position="top"
-            anchorClassName="euiToolTip__btn-disabled"
             content={
               submitIsDisabled() ? (
-                <span className="euiToolTip__content">
+                <span>
                   {Object.values(errors).map((err) => [
                     spec?.agreements[err as string]?.requiredText,
                     <br key={err} />,
@@ -355,7 +354,7 @@ const ConsentsSettings = ({ onSubmitted }: Props) => {
             >
               Submit
             </PrimaryButton>
-          </EuiToolTip>
+          </RiTooltip>
         </FlexItem>
       </Row>
     </EuiForm>

redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/no-nested-template-literals */
 import React, { useContext } from 'react'
-import { EuiIcon, EuiToolTip } from '@elastic/eui'
+import { EuiIcon } from '@elastic/eui'
 import cx from 'classnames'
 
 import { Theme } from 'uiSrc/constants'
@@ -12,6 +12,7 @@ import { DEFAULT_MODULES_INFO } from 'uiSrc/constants/modules'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { UnknownDarkIcon, UnknownLightIcon } from 'uiSrc/components/base/icons'
 import { ColorText } from 'uiSrc/components/base/text'
+import { RiTooltip } from 'uiSrc/components'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import styles from './styles.module.scss'
@@ -141,15 +142,9 @@ const DatabaseListModules = React.memo((props: Props) => {
       !inCircle ? (
         Module(moduleName, abbreviation, icon, content)
       ) : (
-        <EuiToolTip
-          position="bottom"
-          display="inlineBlock"
-          content={Content[i]}
-          anchorClassName={styles.anchorModuleTooltip}
-          key={moduleName}
-        >
+        <RiTooltip position="bottom" content={Content[i]} key={moduleName}>
           <>{Module(moduleName, abbreviation, icon, content)}</>
-        </EuiToolTip>
+        </RiTooltip>
       ),
     )
 
@@ -164,15 +159,14 @@ const DatabaseListModules = React.memo((props: Props) => {
       {inCircle ? (
         Modules()
       ) : (
-        <EuiToolTip
+        <RiTooltip
           position="bottom"
           title={tooltipTitle ?? undefined}
-          display="inlineBlock"
           content={Content}
           data-testid="modules-tooltip"
         >
           <>{content ?? Modules()}</>
-        </EuiToolTip>
+        </RiTooltip>
       )}
     </div>
   )