diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx index 9aabf4812c..d5c31832c4 100644 --- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx +++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx @@ -6,6 +6,7 @@ import { screen, render, act, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { localStorageService } from 'uiSrc/services' import AutoRefresh, { Props } from './AutoRefresh' @@ -77,7 +78,8 @@ describe('AutoRefresh', () => { it('refresh text should contain "Auto-refresh" time with enabled auto-refresh', async () => { render() - fireEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await userEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await waitForRiPopoverVisible() await userEvent.click(screen.getByTestId('auto-refresh-switch')) expect(screen.getByTestId('refresh-message-label')).toHaveTextContent( @@ -158,7 +160,8 @@ describe('AutoRefresh', () => { const onRefresh = jest.fn() render() - fireEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await userEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await waitForRiPopoverVisible() await userEvent.click(screen.getByTestId('auto-refresh-switch')) fireEvent.click(screen.getByTestId('refresh-rate')) @@ -264,7 +267,8 @@ describe('AutoRefresh', () => { , ) - fireEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await userEvent.click(screen.getByTestId('auto-refresh-config-btn')) + await waitForRiPopoverVisible() await userEvent.click(screen.getByTestId('auto-refresh-switch')) fireEvent.click(screen.getByTestId('refresh-rate')) fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), { diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx index e02382a0fa..47131b2418 100644 --- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx +++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons' import { @@ -14,7 +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 { RiPopover, RiTooltip } from 'uiSrc/components/base' import { DEFAULT_REFRESH_RATE, DURATION_FIRST_REFRESH_TIME, @@ -245,7 +245,7 @@ const AutoRefresh = ({ /> - )} - + ) } diff --git a/redisinsight/ui/src/components/base/index.ts b/redisinsight/ui/src/components/base/index.ts index a49fc2b0a1..13efb0bccd 100644 --- a/redisinsight/ui/src/components/base/index.ts +++ b/redisinsight/ui/src/components/base/index.ts @@ -4,3 +4,4 @@ import { HorizontalRule, LoadingContent } from './layout' export { ExternalLink, HorizontalRule, LoadingContent } export * from './tooltip' +export * from './popover' diff --git a/redisinsight/ui/src/components/base/popover/RiPopover.tsx b/redisinsight/ui/src/components/base/popover/RiPopover.tsx new file mode 100644 index 0000000000..37bf118ba1 --- /dev/null +++ b/redisinsight/ui/src/components/base/popover/RiPopover.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { Popover } from '@redis-ui/components' + +import { RiPopoverProps } from './types' +import { anchorPositionMap, panelPaddingSizeMap } from './config' + +export const RiPopover = ({ + isOpen, + closePopover, + children, + ownFocus, + button, + anchorPosition, + panelPaddingSize, + anchorClassName, + panelClassName, + maxWidth = '100%', + ...props +}: RiPopoverProps) => ( + + {button} + +) diff --git a/redisinsight/ui/src/components/base/popover/config.ts b/redisinsight/ui/src/components/base/popover/config.ts new file mode 100644 index 0000000000..90f54694bf --- /dev/null +++ b/redisinsight/ui/src/components/base/popover/config.ts @@ -0,0 +1,57 @@ +export const anchorPositionMap = { + upCenter: { + placement: 'top', + align: 'center', + }, + upLeft: { + placement: 'top', + align: 'start', + }, + upRight: { + placement: 'top', + align: 'end', + }, + downCenter: { + placement: 'bottom', + align: 'center', + }, + downLeft: { + placement: 'bottom', + align: 'start', + }, + downRight: { + placement: 'bottom', + align: 'end', + }, + leftCenter: { + placement: 'left', + align: 'center', + }, + leftUp: { + placement: 'left', + align: 'start', + }, + leftDown: { + placement: 'left', + align: 'end', + }, + rightCenter: { + placement: 'right', + align: 'center', + }, + rightUp: { + placement: 'right', + align: 'start', + }, + rightDown: { + placement: 'right', + align: 'end', + }, +} as const + +export const panelPaddingSizeMap = { + l: 24, + m: 18, + s: 8, + none: 0, +} as const diff --git a/redisinsight/ui/src/components/base/popover/index.tsx b/redisinsight/ui/src/components/base/popover/index.tsx new file mode 100644 index 0000000000..4c9d4e3d55 --- /dev/null +++ b/redisinsight/ui/src/components/base/popover/index.tsx @@ -0,0 +1,2 @@ +export * from './RiPopover' +export * from './types' diff --git a/redisinsight/ui/src/components/base/popover/types.ts b/redisinsight/ui/src/components/base/popover/types.ts new file mode 100644 index 0000000000..f25792706f --- /dev/null +++ b/redisinsight/ui/src/components/base/popover/types.ts @@ -0,0 +1,28 @@ +import { type PopoverProps } from '@redis-ui/components' + +import { anchorPositionMap, panelPaddingSizeMap } from './config' + +type AnchorPosition = keyof typeof anchorPositionMap + +type PanelPaddingSize = keyof typeof panelPaddingSizeMap + +export type RiPopoverProps = Omit< + PopoverProps, + | 'open' + | 'onClickOutside' + | 'autoFocus' + | 'content' + | 'className' + | 'placement' + | 'align' +> & { + isOpen?: PopoverProps['open'] + closePopover?: PopoverProps['onClickOutside'] + ownFocus?: PopoverProps['autoFocus'] + button: PopoverProps['content'] + anchorPosition?: AnchorPosition + panelPaddingSize?: PanelPaddingSize + anchorClassName?: string + panelClassName?: string + 'data-testid'?: string +} diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx index d544068881..fb713b7110 100644 --- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx +++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx @@ -1,9 +1,9 @@ import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react' import { capitalize } from 'lodash' import cx from 'classnames' -import { EuiFieldText, EuiForm, EuiPopover, keys } from '@elastic/eui' +import { EuiFieldText, EuiForm, keys } from '@elastic/eui' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { FlexItem } from 'uiSrc/components/base/layout/flex' import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent' import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap' @@ -250,13 +250,12 @@ const InlineItemEditor = (props: Props) => { /> {!approveByValidation && ApplyBtn} {approveByValidation && ( - setIsShowApprovePopover(false)} anchorClassName={styles.popoverAnchor} panelClassName={cx(styles.popoverPanel)} - className={styles.popoverWrapper} button={ApplyBtn} >
{
- + )} diff --git a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx index 39df88f750..e831a084a6 100644 --- a/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx +++ b/redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx @@ -1,5 +1,5 @@ import React, { ChangeEvent, useEffect, useState, useMemo } from 'react' -import { EuiFieldText, EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiFieldText, EuiIcon } from '@elastic/eui' import { useSelector } from 'react-redux' import { useHistory, useParams } from 'react-router-dom' import { instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances' @@ -15,6 +15,7 @@ import { filterAndSort } from 'uiSrc/utils' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { Text } from 'uiSrc/components/base/text' import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs' +import { RiPopover } from 'uiSrc/components/base' import InstancesList from './components/instances-list' import styles from './styles.module.scss' @@ -110,7 +111,7 @@ const InstancesNavigationPopover = ({ name }: Props) => { ) return ( - { - + ) } diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx index 591847dc30..8756f17708 100644 --- a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx +++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx @@ -5,7 +5,7 @@ import { fireEvent, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, within, } from 'uiSrc/utils/test-utils' import * as appFeaturesSlice from 'uiSrc/slices/app/features' @@ -104,7 +104,7 @@ describe('UserProfileBadge', () => { await act(async () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() return resp } diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx index 059c78b2c1..cffe55d9da 100644 --- a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx +++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { useHistory } from 'react-router-dom' import { logoutUserAction } from 'uiSrc/slices/oauth/cloud' @@ -19,6 +19,7 @@ import { import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { FeatureFlags, Pages } from 'uiSrc/constants' import { FeatureFlagComponent } from 'uiSrc/components' +import { RiPopover } from 'uiSrc/components/base' import { getConfig } from 'uiSrc/config' import { Text } from 'uiSrc/components/base/text' import { UserProfileLink } from 'uiSrc/components/base/link/UserProfileLink' @@ -110,9 +111,8 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => { return (
- setIsProfileOpen(false)} @@ -261,7 +261,7 @@ const UserProfileBadge = (props: UserProfileBadgeProps) => {
- + ) } diff --git a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx index 6f2fabd78a..97f8c812d0 100644 --- a/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/delete-action/DeleteAction.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { @@ -9,6 +9,7 @@ import { import { DeleteIcon } from 'uiSrc/components/base/icons' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components' import styles from '../styles.module.scss' export interface Props { @@ -44,7 +45,7 @@ const DeleteAction = ( ) return ( - ( Delete - + ) } diff --git a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx index 6f40c4a6cb..d985b2cf1d 100644 --- a/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx +++ b/redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' @@ -10,6 +10,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Text } from 'uiSrc/components/base/text' import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { FormField } from 'uiSrc/components/base/forms/FormField' +import { RiPopover } from 'uiSrc/components/base' import styles from '../styles.module.scss' export interface Props { @@ -38,7 +39,7 @@ const ExportAction = ( ) return ( - ( Export - + ) } diff --git a/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx b/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx index 968dd87f5d..e07bffa040 100644 --- a/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx +++ b/redisinsight/ui/src/components/markdown/CodeButtonBlock/CodeButtonBlock.tsx @@ -1,4 +1,3 @@ -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import React, { useEffect, useState } from 'react' import { monaco } from 'react-monaco-editor' @@ -16,7 +15,8 @@ import { MonacoLanguage, } from 'uiSrc/constants' -import { CodeBlock, RiTooltip } from 'uiSrc/components' +import { CodeBlock } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { getDBConfigStorageField } from 'uiSrc/services' import { ConfigDBStorageItem } from 'uiSrc/constants/storage' import { @@ -180,19 +180,14 @@ const CodeButtonBlock = (props: Props) => { Copy {!isRunButtonHidden && ( - { } > {getPopoverMessage()} - + )} diff --git a/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx b/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx index d8ddf5cac3..2d57728ad8 100644 --- a/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx +++ b/redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import { EuiPopover } from '@elastic/eui' import { useHistory, useLocation, useParams } from 'react-router-dom' import cx from 'classnames' import { isNull } from 'lodash' @@ -7,6 +6,7 @@ import { getRedirectionPage } from 'uiSrc/utils/routing' import DatabaseNotOpened from 'uiSrc/components/messages/database-not-opened' import { Link } from 'uiSrc/components/base/link/Link' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -37,19 +37,14 @@ const RedisInsightLink = (props: Props) => { } return ( - setIsPopoverOpen(false)} - focusTrapProps={{ - scrollLock: true, - }} button={ { } > - + ) } diff --git a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx index 9619300c6c..cfac7ebb41 100644 --- a/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx +++ b/redisinsight/ui/src/components/markdown/RedisUploadButton/RedisUploadButton.tsx @@ -1,4 +1,4 @@ -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import React, { useEffect, useState } from 'react' import cx from 'classnames' @@ -29,8 +29,9 @@ import { } from 'uiSrc/components/base/forms/buttons' import { PlayFilledIcon, ContractsIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' -import styles from './styles.module.scss' +import { RiPopover } from 'uiSrc/components/base' import { Link } from 'uiSrc/components/base/link/Link' +import styles from './styles.module.scss' export interface Props { label: string @@ -107,9 +108,8 @@ const RedisUploadButton = ({ label, path }: Props) => { return (
- { ) : ( )} - +
) } diff --git a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx index 50e1627ad2..9ab787ffb1 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/help-menu/HelpMenu.tsx @@ -1,4 +1,4 @@ -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -19,7 +19,8 @@ import GithubHelpCenterSVG from 'uiSrc/assets/img/github.svg?react' import BulbSVG from 'uiSrc/assets/img/bulb.svg?react' import { FeatureFlags } from 'uiSrc/constants' -import { FeatureFlagComponent, RiTooltip } from 'uiSrc/components' +import { FeatureFlagComponent } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { Title } from 'uiSrc/components/base/text/Title' @@ -86,7 +87,7 @@ const HelpMenu = () => { ) return ( - { - + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx index 7723a58ea7..59148bcedf 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationCenter.tsx @@ -1,4 +1,3 @@ -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -11,6 +10,7 @@ import { import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import Notification from './Notification' import styles from './styles.module.scss' @@ -43,14 +43,13 @@ const NotificationCenter = () => { const hasNotifications = !!notifications?.length return ( - dispatch(setIsCenterOpen(false))} button={
} - initialFocus={false} >
{
)}
- + ) } diff --git a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx index 97a68084b8..84203da6f8 100644 --- a/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx +++ b/redisinsight/ui/src/components/navigation-menu/components/notifications-center/PopoverNotification/PopoverNotification.tsx @@ -1,4 +1,3 @@ -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import React, { useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -12,6 +11,7 @@ import { IGlobalNotification } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { CancelSlimIcon } from 'uiSrc/components/base/icons' +import { RiPopover } from 'uiSrc/components/base' import Notification from '../Notification' import styles from '../styles.module.scss' @@ -88,8 +88,7 @@ const PopoverNotification = () => { return ( <> {lastReceivedNotification && ( - {}} @@ -117,7 +116,7 @@ const PopoverNotification = () => { /> - + )} ) diff --git a/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx b/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx index 393167a2d7..6d62525335 100644 --- a/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-user-profile/OAuthUserProfile.spec.tsx @@ -8,7 +8,7 @@ import { mockedStore, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, mockedStoreFn, } from 'uiSrc/utils/test-utils' @@ -123,7 +123,7 @@ describe('OAuthUserProfile', () => { await act(async () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(screen.getByTestId('account-full-name')).toHaveTextContent( 'Bill Russell', @@ -145,7 +145,7 @@ describe('OAuthUserProfile', () => { await act(async () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() ;(sendEventTelemetry as jest.Mock).mockRestore() fireEvent.click(screen.getByTestId('profile-import-cloud-databases')) @@ -174,7 +174,7 @@ describe('OAuthUserProfile', () => { await act(async () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.CLOUD_PROFILE_OPENED, @@ -198,7 +198,7 @@ describe('OAuthUserProfile', () => { await act(async () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() ;(sendEventTelemetry as jest.Mock).mockRestore() fireEvent.click(screen.getByTestId('cloud-console-link')) @@ -219,7 +219,7 @@ describe('OAuthUserProfile', () => { fireEvent.click(screen.getByTestId('user-profile-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('profile-logout')) diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.spec.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.spec.tsx index 0c96078217..5ff644f4f4 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.spec.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/RecommendationVoting.spec.tsx @@ -10,7 +10,7 @@ import { fireEvent, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, waitForRiTooltipVisible, } from 'uiSrc/utils/test-utils' @@ -55,7 +55,7 @@ describe('RecommendationVoting', () => { ).not.toBeInTheDocument() fireEvent.click(screen.getByTestId('not useful-vote-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect( document.querySelector('[data-test-subj="github-repo-link"]'), diff --git a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx index 0a5ce0e627..ccb6578869 100644 --- a/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx +++ b/redisinsight/ui/src/components/recommendation/recommendation-voting/components/vote-option/VoteOption.tsx @@ -1,7 +1,7 @@ import React from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { EXTERNAL_LINKS } from 'uiSrc/constants/links' import { Vote } from 'uiSrc/constants/recommendations' import { putRecommendationVote } from 'uiSrc/slices/analytics/dbAnalysis' @@ -20,7 +20,7 @@ import { Text } from 'uiSrc/components/base/text' import { CancelSlimIcon } from 'uiSrc/components/base/icons' import { IconButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Link } from 'uiSrc/components/base/link/Link' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { getVotedText, voteTooltip, iconType } from './utils' import styles from './styles.module.scss' @@ -93,8 +93,7 @@ const VoteOption = (props: Props) => { : 'Enable Analytics on the Settings page to vote for a tip' return ( - setPopover('')} @@ -174,7 +173,7 @@ const VoteOption = (props: Props) => { - + ) } diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/assistance-chat/AssistanceChat.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/assistance-chat/AssistanceChat.spec.tsx index 7ecdde6aa0..72b3887820 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/assistance-chat/AssistanceChat.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/assistance-chat/AssistanceChat.spec.tsx @@ -8,7 +8,7 @@ import { mockedStoreFn, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { @@ -153,7 +153,7 @@ describe('AssistanceChat', () => { fireEvent.click(screen.getByTestId('ai-submit-message-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.AI_CHAT_BOT_TERMS_DISPLAYED, @@ -199,7 +199,7 @@ describe('AssistanceChat', () => { fireEvent.click(screen.getByTestId('ai-general-restart-session-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() await act(async () => { fireEvent.click(screen.getByTestId('ai-chat-restart-confirm')) }) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx index d37c666ddf..99d9fcb35f 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx @@ -8,7 +8,7 @@ import { mockedStoreFn, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { @@ -180,7 +180,7 @@ describe('ExpertChat', () => { fireEvent.click(screen.getByTestId('ai-submit-message-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.AI_CHAT_BOT_TERMS_DISPLAYED, @@ -229,7 +229,7 @@ describe('ExpertChat', () => { fireEvent.click(screen.getByTestId('ai-expert-restart-session-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() await act(async () => { fireEvent.click(screen.getByTestId('ai-chat-restart-confirm')) }) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.spec.tsx index 97d93b123d..756364f22b 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.spec.tsx @@ -7,7 +7,7 @@ import { mockedStore, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { @@ -55,7 +55,7 @@ describe('ExpertChatHeader', () => { fireEvent.click(screen.getByTestId('ai-expert-tutorial-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('ai-expert-open-tutorials')) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx index 665871312b..e437d4164c 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/expert-chat-header/ExpertChatHeader.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import { useDispatch } from 'react-redux' @@ -10,7 +9,7 @@ import { TELEMETRY_EMPTY_VALUE, TelemetryEvent, } from 'uiSrc/telemetry' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { InsightsPanelTabs, SidePanels } from 'uiSrc/slices/interfaces/insights' import { changeSelectedTab, @@ -80,17 +79,14 @@ const ExpertChatHeader = (props: Props) => { } position="bottom" > - setIsTutorialsPopoverOpen(false)} - focusTrapProps={{ scrollLock: true }} button={ { Open tutorials - + { await act(async () => { fireEvent.click(screen.getByTestId('ai-submit-message-btn')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(onSubmit).not.toBeCalled() diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx index 7b83559597..64ed8b7edb 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-form/ChatForm.tsx @@ -1,10 +1,10 @@ import React, { Ref, useRef, useState } from 'react' -import { EuiForm, EuiPopover, keys } from '@elastic/eui' +import { EuiForm, keys } from '@elastic/eui' import cx from 'classnames' import { isModifiedEvent } from 'uiSrc/services' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { SendIcon } from 'uiSrc/components/base/icons' @@ -129,9 +129,8 @@ const ChatForm = (props: Props) => { disabled={!!validation} data-testid="ai-message-textarea" /> - setIsAgreementsPopoverOpen(false)} @@ -163,7 +162,7 @@ const ChatForm = (props: Props) => { I accept - + diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.spec.tsx index 1a5228a8ba..bf76580950 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.spec.tsx @@ -3,7 +3,7 @@ import { fireEvent, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import RestartChat from './RestartChat' @@ -23,7 +23,7 @@ describe('RestartChat', () => { fireEvent.click(screen.getByTestId('anchor-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('ai-chat-restart-confirm')) diff --git a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx index 0937e5be29..650ba61b5a 100644 --- a/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/restart-chat/RestartChat.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react' import cx from 'classnames' -import { EuiPopover } from '@elastic/eui' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -30,17 +30,14 @@ const RestartChat = (props: Props) => { const extendedButton = React.cloneElement(button, { onClick: onClickAnchor }) return ( - setIsPopoverOpen(false)} - focusTrapProps={{ scrollLock: true }} button={extendedButton} > <> @@ -60,7 +57,7 @@ const RestartChat = (props: Props) => { Restart - + ) } diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx index ac671ecbb4..3273b8d8f8 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.tsx @@ -1,11 +1,12 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { DestructiveButton } from 'uiSrc/components/base/forms/buttons' import { DeleteIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -24,7 +25,7 @@ const DeleteTutorialButton = (props: Props) => { } return ( - { - + ) } diff --git a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx index fd3edfc6f6..14adab33e1 100644 --- a/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx @@ -1,5 +1,4 @@ import React, { useMemo, useRef, useEffect, useState } from 'react' -import { EuiPopover } from '@elastic/eui' import JsxParser from 'react-jsx-parser' import cx from 'classnames' import { debounce } from 'lodash' @@ -8,6 +7,7 @@ import { useSelector } from 'react-redux' import { ChevronLeftIcon } from 'uiSrc/components/base/icons' import { ExternalLink, HorizontalRule, LoadingContent } from 'uiSrc/components' +import { RiPopover } from 'uiSrc/components/base' import { IEnablementAreaItem } from 'uiSrc/slices/interfaces' import { sendEventTelemetry, @@ -167,8 +167,7 @@ const InternalPage = (props: Props) => {
- { started.
- +
diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.spec.tsx index b73862782d..27f503c59a 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/LiveTimeRecommendations.spec.tsx @@ -10,7 +10,7 @@ import { mockStore, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FeatureFlags, Pages } from 'uiSrc/constants' @@ -142,7 +142,7 @@ describe('LiveTimeRecommendations', () => { fireEvent.click(screen.getByTestId('footer-db-analysis-link')) ;(async () => { - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() })() fireEvent.click(screen.getByTestId('approve-insights-db-analysis-btn')) diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx index 853bc0c106..cba7ff09b3 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/popover-run-analyze/PopoverRunAnalyze.tsx @@ -1,9 +1,9 @@ -import { EuiPopover } from '@elastic/eui' import React from 'react' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -24,13 +24,12 @@ const PopoverRunAnalyze = (props: Props) => { } = props return ( - setIsShowPopover(false)} panelPaddingSize="m" - display="inlineBlock" panelClassName={styles.panelPopover} button={children} onClick={(e) => e.stopPropagation()} @@ -55,7 +54,7 @@ const PopoverRunAnalyze = (props: Props) => { Analyze
- + ) } diff --git a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/welcome-screen/WelcomeScreen.spec.tsx b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/welcome-screen/WelcomeScreen.spec.tsx index ba188ebb95..c461d6c8bf 100644 --- a/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/welcome-screen/WelcomeScreen.spec.tsx +++ b/redisinsight/ui/src/components/side-panels/panels/live-time-recommendations/components/welcome-screen/WelcomeScreen.spec.tsx @@ -9,7 +9,7 @@ import { screen, cleanup, render, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, initialStateDefault, mockStore, } from 'uiSrc/utils/test-utils' @@ -66,7 +66,7 @@ describe('WelcomeScreen', () => { fireEvent.click(screen.getByTestId('insights-db-analysis-link')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('approve-insights-db-analysis-btn')) expect(pushMock).toHaveBeenCalledWith(Pages.databaseAnalysis('instanceId')) @@ -78,7 +78,7 @@ describe('WelcomeScreen', () => { fireEvent.click(screen.getByTestId('insights-db-analysis-link')) ;(async () => { - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() })() fireEvent.click(screen.getByTestId('approve-insights-db-analysis-btn')) @@ -101,7 +101,7 @@ describe('WelcomeScreen', () => { render() fireEvent.click(screen.getByTestId('insights-db-analysis-link')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('approve-insights-db-analysis-btn')) expect(sendEventTelemetry).toBeCalledWith({ diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx index f6cca7e533..2191e5ffb6 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import { EuiPopover } from '@elastic/eui' import { map, pick } from 'lodash' import { useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' @@ -16,7 +15,7 @@ import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { Pages } from 'uiSrc/constants' import { Title } from 'uiSrc/components/base/text/Title' import { SearchInput } from 'uiSrc/components/base/inputs' @@ -131,7 +130,7 @@ const RedisCloudDatabasesPage = ({ } const CancelButton = ({ isPopoverOpen: popoverIsOpen }: IPopoverProps) => ( -
- + ) const SubmitButton = ({ isDisabled }: { isDisabled: boolean }) => ( diff --git a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx index 38965bb6d4..4ff40887b8 100644 --- a/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx +++ b/redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react' import { map } from 'lodash' -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import { InstanceRedisCloud, @@ -26,7 +25,7 @@ import { SearchInput } from 'uiSrc/components/base/inputs' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' import { FormField } from 'uiSrc/components/base/forms/FormField' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import styles from '../styles.module.scss' export interface Props { @@ -142,7 +141,7 @@ const RedisCloudSubscriptions = ({ } const CancelButton = ({ isPopoverOpen: popoverIsOpen }: IPopoverProps) => ( - - + ) const SubmitButton = ({ isDisabled }: { isDisabled: boolean }) => ( diff --git a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx index 4ffa1ac78c..6c13834623 100644 --- a/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx +++ b/redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react' import cx from 'classnames' -import { EuiPopover } from '@elastic/eui' import { useSelector } from 'react-redux' import { sentinelSelector } from 'uiSrc/slices/instances/sentinel' @@ -18,7 +17,7 @@ import { InfoIcon } from 'uiSrc/components/base/icons' import { SearchInput } from 'uiSrc/components/base/inputs' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { FormField } from 'uiSrc/components/base/forms/FormField' import { Table, ColumnDefinition } from 'uiSrc/components/base/layout/table' import styles from '../../../styles.module.scss' @@ -114,8 +113,6 @@ const SentinelDatabases = ({ item.numberOfSlaves?.toString().includes(value), ) - console.log('+++onQueryChange', itemsTemp) - if (!itemsTemp.length) { setMessage(notFoundMsg) } @@ -123,7 +120,7 @@ const SentinelDatabases = ({ } const CancelButton = ({ isPopoverOpen: popoverIsOpen }: IPopoverProps) => ( - - + ) const SubmitButton = ({ onClick }: { onClick: () => void }) => { diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx index 208ee99a9e..d053601af3 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx +++ b/redisinsight/ui/src/pages/browser/BrowserPage.tsx @@ -285,7 +285,6 @@ const BrowserPage = () => { return (
- {arePanelsCollapsed && isRightPanelOpen && !isBrowserFullScreen && ( { )} {!isProcessedBulkAction(status) && ( - { Delete - + )} {isProcessedBulkAction(status) && ( { {isProcessedBulkAction(status) ? 'Close' : 'Cancel'} {!isCompleted ? ( - { Upload - + ) : ( { fields.length === 1 && !item.identifier.length const IdentifierInfo = () => ( - setIsInfoPopoverOpen(false)} - initialFocus={false} button={ { ? 'Enter a hash field name.' : 'Enter a JSON path expression.'} - + ) return ( diff --git a/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx b/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx index d96635dfe2..e095c057c7 100644 --- a/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx +++ b/redisinsight/ui/src/pages/browser/components/delete-key-popover/DeleteKeyPopover.tsx @@ -1,5 +1,3 @@ -import { EuiPopover } from '@elastic/eui' - import React from 'react' import cx from 'classnames' @@ -13,6 +11,7 @@ import { } from 'uiSrc/components/base/forms/buttons' import { DeleteIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' export interface DeleteProps { nameString: string @@ -35,7 +34,7 @@ export const DeleteKeyPopover = ({ onDelete, onOpenPopover, }: DeleteProps) => ( - - + ) diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx index b4b9c04745..4a9dccbef3 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.spec.tsx @@ -15,7 +15,7 @@ import { render, screen, act, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, waitForRedisUiSelectVisible, userEvent, } from 'uiSrc/utils/test-utils' @@ -67,7 +67,7 @@ describe('KeyTreeDelimiter', () => { await act(async () => { fireEvent.click(screen.getByTestId(TREE_SETTINGS_TRIGGER_BTN)) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() const comboboxInput = document.querySelector( '[data-testid="delimiter-combobox"] [data-test-subj="autoTagInput"]', @@ -89,7 +89,7 @@ describe('KeyTreeDelimiter', () => { fireEvent.click(screen.getByTestId(TREE_SETTINGS_TRIGGER_BTN)) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() const comboboxInput = document.querySelector( '[data-testid="delimiter-combobox"] [data-test-subj="autoTagInput"]', @@ -159,7 +159,7 @@ describe('KeyTreeDelimiter', () => { fireEvent.click(screen.getByTestId(TREE_SETTINGS_TRIGGER_BTN)) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() const containerLabels = document.querySelector( '[data-test-subj="autoTagWrapper"]', diff --git a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx index 89df96873a..e6e793c9c2 100644 --- a/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx +++ b/redisinsight/ui/src/pages/browser/components/key-tree/KeyTreeSettings/KeyTreeSettings.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { isEqual } from 'lodash' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' @@ -32,6 +32,7 @@ import { AutoTagOption, } from 'uiSrc/components/base/forms/combo-box/AutoTag' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -138,7 +139,7 @@ const KeyTreeSettings = ({ loading }: Props) => { return (
- {
- +
) } diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx index a5b531915a..23d3cd214c 100644 --- a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx +++ b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/destructuring-assignment */ /* eslint-disable react/no-this-in-sfc */ -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import React, { Ref, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -46,7 +46,8 @@ import { import { OnboardingStepName, OnboardingSteps } from 'uiSrc/constants/onboarding' import { incrementOnboardStepAction } from 'uiSrc/slices/app/features' -import { AutoRefresh, OnboardingTour, RiTooltip } from 'uiSrc/components' +import { AutoRefresh, OnboardingTour } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features' import { BrowserColumns, KeyValueFormat } from 'uiSrc/constants' @@ -361,7 +362,7 @@ const KeysHeader = (props: Props) => { testid="keys" />
- { } data-testid="show-ttl" /> - +
{ViewSwitch()} diff --git a/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.spec.tsx b/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.spec.tsx index 0a2c703397..73c1a535c2 100644 --- a/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.spec.tsx @@ -4,7 +4,7 @@ import { render, screen, fireEvent, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, mockedStore, cleanup, waitForStack, @@ -56,7 +56,7 @@ describe('LoadSampleData', () => { render() fireEvent.click(screen.getByTestId('load-sample-data-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('load-sample-data-btn-confirm')) diff --git a/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx b/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx index 74b7b8fb0a..a43e9268ce 100644 --- a/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx +++ b/redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import { useDispatch, useSelector } from 'react-redux' @@ -15,6 +15,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { PlayFilledIcon } from 'uiSrc/components/base/icons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -44,9 +45,8 @@ const LoadSampleData = (props: Props) => { } return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.spec.tsx b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.spec.tsx index 521d8a84c1..79e2a336fb 100644 --- a/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.spec.tsx +++ b/redisinsight/ui/src/pages/browser/components/no-keys-found/NoKeysFound.spec.tsx @@ -7,7 +7,7 @@ import { fireEvent, mockedStore, cleanup, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, waitForStack, } from 'uiSrc/utils/test-utils' @@ -77,7 +77,7 @@ describe('NoKeysFound', () => { render() fireEvent.click(screen.getByTestId('load-sample-data-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('load-sample-data-btn-confirm')) diff --git a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx index 8a72162984..e71a9e629d 100644 --- a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx +++ b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { EuiPopover } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { appFeatureOnboardingSelector, @@ -14,6 +13,7 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer' import { EmptyButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' const OnboardingStartPopover = () => { @@ -44,7 +44,7 @@ const OnboardingStartPopover = () => { } return ( - } isOpen={isActive && currentStep === OnboardingSteps.Start} ownFocus={false} @@ -80,7 +80,7 @@ const OnboardingStartPopover = () => { Show me around - + ) } diff --git a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss index 1531edb52c..0455cd8048 100644 --- a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss @@ -1,7 +1,4 @@ .onboardingStartPopover { - position: fixed !important; - top: calc(100% - 228px) !important; - left: calc(100% - 398px) !important; width: 360px !important; background-color: var(--euiTooltipBackgroundColor) !important; diff --git a/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx b/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx index 431feece96..1d9c3dd05a 100644 --- a/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx +++ b/redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx @@ -1,7 +1,6 @@ import React from 'react' -import { EuiPopover } from '@elastic/eui' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { DeleteIcon } from 'uiSrc/components/base/icons' import { RedisString } from 'uiSrc/slices/interfaces' import { isTruncatedString } from 'uiSrc/utils' @@ -94,7 +93,7 @@ const PopoverDelete = (props: Props) => { ) return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx index 96cbb438d6..688547db62 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-delete/KeyDetailsHeaderDelete.tsx @@ -1,4 +1,3 @@ -import { EuiPopover } from '@elastic/eui' import React, { useState } from 'react' import { useSelector } from 'react-redux' @@ -22,6 +21,7 @@ import { IconButton, } from 'uiSrc/components/base/forms/buttons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -62,7 +62,7 @@ const KeyDetailsHeaderDelete = ({ onDelete }: Props) => { } 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 71f1f8c7ae..c0368747ad 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 @@ -2,7 +2,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { toNumber } from 'lodash' -import { EuiFieldText, EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiFieldText, EuiIcon } from '@elastic/eui' @@ -43,6 +43,7 @@ import { import { DeleteIcon } from 'uiSrc/components/base/icons' import { FormField } from 'uiSrc/components/base/forms/FormField' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' +import { RiPopover } from 'uiSrc/components/base' import { DeleteListElementsDto } from 'apiSrc/modules/browser/list/dto' import { @@ -167,7 +168,7 @@ const RemoveListElements = (props: Props) => { } const RemoveButton = () => ( - { Remove - + ) const InfoBoxPopover = () => ( - setIsInfoPopoverOpen(false)} - initialFocus={false} button={ {
{HelpTexts.REMOVING_MULTIPLE_ELEMENTS_NOT_SUPPORT}
- + ) return ( diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx index a376507367..4c64944ceb 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/ConfirmOverwrite.tsx @@ -1,12 +1,12 @@ import React from 'react' import cx from 'classnames' -import { EuiPopover } from '@elastic/eui' import { PrimaryButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from '../../styles.module.scss' interface ConfirmOverwriteProps { @@ -22,9 +22,8 @@ const ConfirmOverwrite = ({ onConfirm, children, }: ConfirmOverwriteProps) => ( - - + ) export default ConfirmOverwrite diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-item-field-action/EditItemFieldAction.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-item-field-action/EditItemFieldAction.spec.tsx index 24e5ba87ed..34640c2c09 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-item-field-action/EditItemFieldAction.spec.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-item-field-action/EditItemFieldAction.spec.tsx @@ -4,7 +4,7 @@ import { fireEvent, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, act, } from 'uiSrc/utils/test-utils' import EditItemFieldAction, { Props } from './EditItemFieldAction' @@ -45,7 +45,7 @@ describe('EditItemFieldAction Component', () => { fireEvent.click(screen.getByTestId('remove-json-field-icon')) }) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('remove-json-field')) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/MessageAckPopover.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/MessageAckPopover.tsx index 08ef684b98..558cb7d7c2 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/MessageAckPopover.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageAckPopover/MessageAckPopover.tsx @@ -1,11 +1,11 @@ import React from 'react' -import { EuiPopover } from '@elastic/eui' import { Text } from 'uiSrc/components/base/text' import { DestructiveButton, SecondaryButton, } from 'uiSrc/components/base/forms/buttons' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -25,7 +25,7 @@ const AckPopover = (props: Props) => { acknowledge = () => {}, } = props return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx index 3836b38e3e..425e5214e3 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessageClaimPopover/MessageClaimPopover.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, ChangeEvent } from 'react' import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' -import { EuiPopover, EuiForm } from '@elastic/eui' +import { EuiForm } from '@elastic/eui' import { useFormik } from 'formik' import { orderBy, filter } from 'lodash' @@ -26,7 +26,7 @@ import { import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' import { FormField } from 'uiSrc/components/base/forms/FormField' import { NumericInput, SwitchInput } from 'uiSrc/components/base/inputs' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' import { ClaimPendingEntryDto, @@ -194,13 +194,12 @@ const MessageClaimPopover = (props: Props) => { ) return ( - e.stopPropagation()} anchorPosition="leftCenter" ownFocus isOpen={isOpen} - className="popover" panelPaddingSize="m" anchorClassName="claimPendingMessage" panelClassName={styles.popoverWrapper} @@ -352,7 +351,7 @@ const MessageClaimPopover = (props: Props) => { - + ) } diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.spec.tsx index 884c6062b7..ce692f4e04 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.spec.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/zset-details/zset-details-table/ZSetDetailsTable.spec.tsx @@ -10,7 +10,7 @@ import { act, mockedStore, cleanup, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, waitForRiTooltipVisible, } from 'uiSrc/utils/test-utils' import { @@ -78,7 +78,7 @@ describe('ZSetDetailsTable', () => { render() fireEvent.click(screen.getByTestId('zset-remove-button-1-icon')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(screen.getByTestId('zset-remove-button-1')).toBeInTheDocument() }) diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-popover/EditablePopover.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-popover/EditablePopover.tsx index cc1c8f4d0b..af3cefb98e 100644 --- a/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-popover/EditablePopover.tsx +++ b/redisinsight/ui/src/pages/browser/modules/key-details/shared/editable-popover/EditablePopover.tsx @@ -1,6 +1,6 @@ import React, { FormEvent, useEffect, useState } from 'react' -import { EuiForm, EuiPopover } from '@elastic/eui' +import { EuiForm } from '@elastic/eui' import cx from 'classnames' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' @@ -12,6 +12,7 @@ import { } from 'uiSrc/components/base/forms/buttons' import { EditIcon } from 'uiSrc/components/base/icons' import { Loader } from 'uiSrc/components/base/display' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -118,7 +119,7 @@ const EditablePopover = (props: Props) => { ) return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx b/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx index 97fc870bbd..9c252340b9 100644 --- a/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx +++ b/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx @@ -1,7 +1,6 @@ import { Criteria, EuiIcon, - EuiPopover, EuiTableFieldDataColumnType, PropertySort, } from '@elastic/eui' @@ -84,8 +83,8 @@ import { getUtmExternalLink } from 'uiSrc/utils/links' import { CREATE_CLOUD_DB_ID, HELP_LINKS } from 'uiSrc/pages/home/constants' import { Tag } from 'uiSrc/slices/interfaces/tag' - -import { FeatureFlagComponent, RiTooltip } from 'uiSrc/components' +import { FeatureFlagComponent } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { EmptyButton, IconButton } from 'uiSrc/components/base/forms/buttons' import { Link } from 'uiSrc/components/base/link/Link' import { RIResizeObserver } from 'uiSrc/components/base/utils' @@ -612,9 +611,8 @@ const DatabasesListWrapper = (props: Props) => { )} - toggleControlsPopover('')} @@ -653,7 +651,7 @@ const DatabasesListWrapper = (props: Props) => { /> - + ) diff --git a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx index 7a5d6a8b73..e31a33e9c5 100644 --- a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx @@ -1,5 +1,4 @@ import React, { useContext, useEffect, useState } from 'react' -import { EuiPopover } from '@elastic/eui' import { useSelector, useDispatch } from 'react-redux' import { isEmpty } from 'lodash' import cx from 'classnames' @@ -13,6 +12,7 @@ import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces' import PromoLink from 'uiSrc/components/promo-link/PromoLink' import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components' +import { RiPopover } from 'uiSrc/components/base' import { getPathToResource } from 'uiSrc/services/resourcesService' import { ContentCreateRedis } from 'uiSrc/slices/interfaces/content' import { HELP_LINKS } from 'uiSrc/pages/home/constants' @@ -213,7 +213,7 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => { - { > {columnCheckboxes} - + diff --git a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.spec.tsx b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.spec.tsx index de971c20a9..018f7372c1 100644 --- a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.spec.tsx +++ b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.spec.tsx @@ -5,7 +5,7 @@ import { fireEvent, render, screen, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { Tag } from 'uiSrc/slices/interfaces/tag' import { TagsCellHeader } from './TagsCellHeader' @@ -52,7 +52,7 @@ describe('TagsCellHeader', () => { it('should open the popover when the filter icon is clicked', async () => { const { getByRole } = render() fireEvent.click(getByRole('button')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(screen.getByRole('search')).toBeInTheDocument() }) @@ -60,7 +60,7 @@ describe('TagsCellHeader', () => { it('should filter tags based on search input', async () => { const { getByRole, getByTestId } = render() fireEvent.click(getByRole('button')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(getByTestId(`${mockTags[0].key}:${mockTags[0].value}`)).toBeVisible() expect(getByTestId(`${mockTags[1].key}:${mockTags[1].value}`)).toBeVisible() diff --git a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx index 3a4a891597..797f1d367a 100644 --- a/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx +++ b/redisinsight/ui/src/pages/home/components/tags-cell/TagsCellHeader.tsx @@ -1,10 +1,11 @@ -import { EuiFieldText, EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiFieldText, EuiIcon } from '@elastic/eui' import React, { memo } from 'react' import FilterSvg from 'uiSrc/assets/img/icons/filter.svg' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { FormField } from 'uiSrc/components/base/forms/FormField' import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' +import { RiPopover } from 'uiSrc/components/base' import { useFilterTags } from './useFilterTags' import styles from './styles.module.scss' @@ -28,7 +29,7 @@ export const TagsCellHeader = memo(() => { return (
Tags{' '} - {
))} - + ) }) diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx index cbe6a96046..a590b07f0f 100644 --- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx +++ b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { getUtmExternalLink } from 'uiSrc/utils/links' import { Text } from 'uiSrc/components/base/text' import { @@ -8,6 +8,7 @@ import { UTM_MEDIUMS, } from 'uiSrc/constants/links' import { Link } from 'uiSrc/components/base/link/Link' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' const ClickableAppendInfo = () => { @@ -19,7 +20,7 @@ const ClickableAppendInfo = () => { } return ( - { here. - + ) } diff --git a/redisinsight/ui/src/pages/rdi/components/confirmation-popover/ConfirmationPopover.tsx b/redisinsight/ui/src/pages/rdi/components/confirmation-popover/ConfirmationPopover.tsx index 7483ae68b7..105b73cbb7 100644 --- a/redisinsight/ui/src/pages/rdi/components/confirmation-popover/ConfirmationPopover.tsx +++ b/redisinsight/ui/src/pages/rdi/components/confirmation-popover/ConfirmationPopover.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import { formatLongName } from 'uiSrc/utils' import { OutsideClickDetector } from 'uiSrc/components/base/utils' @@ -7,6 +7,7 @@ import { OutsideClickDetector } from 'uiSrc/components/base/utils' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { Text } from 'uiSrc/components/base/text' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' interface Props { @@ -52,15 +53,13 @@ const ConfirmationPopover = (props: Props) => { return ( - @@ -79,7 +78,7 @@ const ConfirmationPopover = (props: Props) => { {!!appendAction && appendAction} {confirmBtn} - + ) } diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx index 73d9bbdd88..2938e964df 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/buttons/deploy-pipeline-button/DeployPipelineButton.tsx @@ -1,4 +1,4 @@ -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import cx from 'classnames' import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' @@ -23,7 +23,7 @@ import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { RiRocketIcon } from 'uiSrc/components/base/icons' import { Title } from 'uiSrc/components/base/text/Title' import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -101,7 +101,7 @@ const DeployPipelineButton = ({ loading, disabled, onReset }: Props) => { return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx b/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx index 396db1f70a..719e26e49f 100644 --- a/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx +++ b/redisinsight/ui/src/pages/rdi/instance/components/header/components/rdi-config-file-action-menu/RdiConfigFileActionMenu.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react' -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import UploadModal from 'uiSrc/pages/rdi/pipeline-management/components/upload-modal/UploadModal' import Download from 'uiSrc/pages/rdi/instance/components/download' import { Col, FlexItem } from 'uiSrc/components/base/layout/flex' import { EmptyButton, IconButton } from 'uiSrc/components/base/forms/buttons' import { UploadIcon, MoreactionsIcon } from 'uiSrc/components/base/icons' +import { RiPopover } from 'uiSrc/components/base' import FetchPipelinePopover from '../fetch-pipeline-popover' import styles from './styles.module.scss' @@ -33,7 +33,7 @@ const RdiConfigFileActionMenu = () => { ) return ( - { - + ) } diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx index 72ec180e58..b118fafac6 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx +++ b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { EuiPopover } from '@elastic/eui' import { useDispatch } from 'react-redux' import { useParams } from 'react-router-dom' @@ -9,6 +8,7 @@ import { RdiPipelineTabs } from 'uiSrc/slices/interfaces' import { OutsideClickDetector } from 'uiSrc/components/base/utils' import { SecondaryButton } from 'uiSrc/components/base/forms/buttons' +import { RiPopover } from 'uiSrc/components/base' import styles from './styles.module.scss' export interface Props { @@ -45,12 +45,11 @@ const TemplatePopover = (props: Props) => { return ( - { source={source} value={value} /> - + ) } diff --git a/redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.spec.tsx b/redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.spec.tsx index 6f7479e1ab..ed4660c2df 100644 --- a/redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.spec.tsx +++ b/redisinsight/ui/src/pages/rdi/statistics/StatisticsPage.spec.tsx @@ -20,6 +20,7 @@ import { mockedStore, render, screen, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { PageNames, Pages } from 'uiSrc/constants' import { setLastPageContext } from 'uiSrc/slices/app/context' @@ -237,7 +238,8 @@ describe('StatisticsPage', () => { const testid = 'processing-performance-info' - fireEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`)) + await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`)) + await waitForRiPopoverVisible() await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // disabled expect(sendEventTelemetry).toBeCalledWith({ @@ -256,7 +258,8 @@ describe('StatisticsPage', () => { const testid = 'processing-performance-info' - fireEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`)) + await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-config-btn`)) + await waitForRiPopoverVisible() await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // disabled await userEvent.click(screen.getByTestId(`${testid}-auto-refresh-switch`)) // enabled diff --git a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx index 0285958a90..2e618f1c2d 100644 --- a/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx +++ b/redisinsight/ui/src/pages/redis-cluster/RedisClusterDatabases.tsx @@ -1,11 +1,10 @@ import React, { useEffect, useState } from 'react' -import { EuiPopover } from '@elastic/eui' import cx from 'classnames' import { map } from 'lodash' import { useSelector } from 'react-redux' import { SearchInput } from 'uiSrc/components/base/inputs' import { Maybe } from 'uiSrc/utils' -import { RiTooltip } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { InstanceRedisCluster } from 'uiSrc/slices/interfaces' import { clusterSelector } from 'uiSrc/slices/instances/cluster' import validationErrors from 'uiSrc/constants/validationErrors' @@ -108,7 +107,7 @@ const RedisClusterDatabases = ({ } const CancelButton = ({ isPopoverOpen: popoverIsOpen }: IPopoverProps) => ( - - + ) return ( diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx index 24502c28ae..824863e637 100644 --- a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx +++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx @@ -7,7 +7,8 @@ import { mockedStore, render, screen, - waitForEuiPopoverVisible, + userEvent, + waitForRiPopoverVisible, } from 'uiSrc/utils/test-utils' import { @@ -50,8 +51,8 @@ describe('CloudSettings', () => { }) render() - fireEvent.click(screen.getByTestId('delete-key-btn')) - await waitForEuiPopoverVisible() + await userEvent.click(screen.getByTestId('delete-key-btn')) + await waitForRiPopoverVisible() fireEvent.click(screen.getByTestId('delete-key-confirm-btn')) @@ -94,7 +95,7 @@ describe('CloudSettings', () => { render() fireEvent.click(screen.getByTestId('delete-key-btn')) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.SETTINGS_CLOUD_API_KEYS_REMOVE_CLICKED, diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx index f30584111d..787392e685 100644 --- a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx +++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' -import { EuiPopover } from '@elastic/eui' import { DeleteIcon } from 'uiSrc/components/base/icons' import { @@ -18,6 +17,7 @@ import { import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' import { Link } from 'uiSrc/components/base/link/Link' +import { RiPopover } from 'uiSrc/components/base' import UserApiKeysTable from './components/user-api-keys-table' import styles from './styles.module.scss' @@ -74,7 +74,7 @@ const CloudSettings = () => { - { - + diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.spec.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.spec.tsx index f8af181147..6fe3751bc1 100644 --- a/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.spec.tsx +++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.spec.tsx @@ -7,7 +7,7 @@ import { render, screen, fireEvent, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, act, } from 'uiSrc/utils/test-utils' @@ -78,7 +78,7 @@ describe('UserApiKeysTable', () => { fireEvent.click( screen.getByTestId(`remove-key-button-${mockedCapiKeys[0].name}-icon`), ) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() fireEvent.click( screen.getByTestId(`remove-key-button-${mockedCapiKeys[0].name}`), @@ -100,7 +100,7 @@ describe('UserApiKeysTable', () => { fireEvent.click( screen.getByTestId(`remove-key-button-${mockedCapiKeys[0].name}-icon`), ) - await waitForEuiPopoverVisible() + await waitForRiPopoverVisible() expect(sendEventTelemetry).toBeCalledWith({ event: TelemetryEvent.SETTINGS_CLOUD_API_KEY_REMOVE_CLICKED, diff --git a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx index b83ff41dfc..775f30620d 100644 --- a/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx +++ b/redisinsight/ui/src/pages/slow-log/components/Actions/Actions.tsx @@ -1,4 +1,4 @@ -import { EuiIcon, EuiPopover } from '@elastic/eui' +import { EuiIcon } from '@elastic/eui' import React, { useState } from 'react' import { useSelector } from 'react-redux' import cx from 'classnames' @@ -6,7 +6,8 @@ import { useParams } from 'react-router-dom' import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances' import { DurationUnits } from 'uiSrc/constants' import { slowLogSelector } from 'uiSrc/slices/analytics/slowlog' -import { AutoRefresh, RiTooltip } from 'uiSrc/components' +import { AutoRefresh } from 'uiSrc/components' +import { RiPopover, RiTooltip } from 'uiSrc/components/base' import { Nullable } from 'uiSrc/utils' import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' @@ -143,7 +144,7 @@ const Actions = (props: Props) => { /> - { closePopover={closePopoverConfig} onRefresh={onRefresh} /> - + {!isEmptySlowLog && ( - { } > {ToolTipContent} - + )} diff --git a/redisinsight/ui/src/utils/test-utils.tsx b/redisinsight/ui/src/utils/test-utils.tsx index 3f9434d6ee..871d5f18c7 100644 --- a/redisinsight/ui/src/utils/test-utils.tsx +++ b/redisinsight/ui/src/utils/test-utils.tsx @@ -251,11 +251,18 @@ const waitForRiTooltipHidden = async () => { }) } -const waitForEuiPopoverVisible = async (timeout = 500) => { +const waitForRiPopoverVisible = async (timeout = 500) => { await waitFor( () => { - const tooltip = document.querySelector('.euiPopover__panel-isOpen') + const tooltip = document.querySelector( + 'div[data-radix-popper-content-wrapper]', + ) as HTMLElement | null expect(tooltip).toBeInTheDocument() + + if (tooltip) { + // Note: during unit tests, the popover is not interactive by default so we need to enable pointer events + tooltip.style.pointerEvents = 'all' + } }, { timeout }, // Account for long delay on popover ) @@ -423,5 +430,5 @@ export { clearStoreActions, waitForRiTooltipVisible, waitForRiTooltipHidden, - waitForEuiPopoverVisible, + waitForRiPopoverVisible, }