diff --git a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx b/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx index 0e66cb7829..5f5ca4de36 100644 --- a/redisinsight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx +++ b/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(false) + const lastAddedIdentifier = useRef(null) const prevCountFields = useRef(0) @@ -177,43 +176,38 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => { fields.length === 1 && !item.identifier.length const IdentifierInfo = () => ( - setIsInfoPopoverOpen(false)} - button={ - - setIsInfoPopoverOpen((isPopoverOpen) => !isPopoverOpen) - } - /> + + + Declares + + {' fields to index. '} + {keyTypeSelected === RedisearchIndexKeyType.HASH + ? 'Enter a hash field name.' + : 'Enter a JSON path expression.'} + } > - <> - - Declares - - {' fields to index. '} - {keyTypeSelected === RedisearchIndexKeyType.HASH - ? 'Enter a hash field name.' - : 'Enter a JSON path expression.'} - - + + ) return ( diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx index d0a4f04c55..1aa9227a4f 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/remove-list-elements/RemoveListElements.tsx +++ b/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(TAIL_DESTINATION) const [isFormValid, setIsFormValid] = useState(true) const [isPopoverOpen, setIsPopoverOpen] = useState(false) - const [isInfoPopoverOpen, setIsInfoPopoverOpen] = useState(false) + const [canRemoveMultiple, setCanRemoveMultiple] = useState(true) const { name: selectedKey = '', length } = useSelector( selectedKeyDataSelector, @@ -221,28 +220,19 @@ const RemoveListElements = (props: Props) => { ) - const InfoBoxPopover = () => ( - setIsInfoPopoverOpen(false)} - button={ - - setIsInfoPopoverOpen((isPopoverOpen) => !isPopoverOpen) - } - style={{ cursor: 'pointer' }} - data-testid="info-tooltip-icon" - /> - } + const InfoBoxTooltip = () => ( + -
- {HelpTexts.REMOVING_MULTIPLE_ELEMENTS_NOT_SUPPORT} -
-
+ + ) return ( @@ -280,10 +270,10 @@ const RemoveListElements = (props: Props) => { - {!canRemoveMultiple ? ( - {InfoBoxPopover()} - ) : ( - <> + {!canRemoveMultiple && ( + + + )} diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx index 09795d4975..2875ecc9ca 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx @@ -1,5 +1,11 @@ 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', () => { @@ -7,10 +13,16 @@ describe('SubscribeInformation', () => { expect(render()).toBeTruthy() }) - it('should open popover on click', async () => { + it('should show tooltip on hover', async () => { render() - 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() }) }) diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx index 4c54836bb4..364152d1c2 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx +++ b/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 = () => ( - } + - - - Subscribe to one or more channels or patterns by entering them, - separated by spaces. - + content={ + + + Subscribe to one or more channels or patterns by entering them, + separated by spaces. + - - Supported glob-style patterns are described  - - here. - - - - + + Supported glob-style patterns are described  + + here. + + + + } + > + + ) export default SubscribeInformation