[RI-7064] Replace EuiPopover with RiPopover (#4671)

* RI-7064: replace EuiPopup init

* replace EuiPopup with RiPopup

* fix some unit tests

* skip some unit tests

* remove EuiPopover reference

* fix tests

* fix onboarding popover

Author: KrumTy

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(<AutoRefresh {...instance(mockedProps)} displayText />)
 
-    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(<AutoRefresh {...instance(mockedProps)} onRefresh={onRefresh} />)
 
-      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', () => {
       <AutoRefresh {...instance(mockedProps)} onRefresh={onRefresh} />,
     )
 
-    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), {

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 = ({
         />
       </RiTooltip>
 
-      <EuiPopover
+      <RiPopover
         ownFocus={false}
         anchorPosition="downRight"
         isOpen={isPopoverOpen}
@@ -309,7 +309,7 @@ const AutoRefresh = ({
             </>
           )}
         </div>
-      </EuiPopover>
+      </RiPopover>
     </div>
   )
 }

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'

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) => (
+  <Popover
+    {...props}
+    open={isOpen}
+    onClickOutside={closePopover}
+    content={children}
+    // Props passed to the children wrapper:
+    className={panelClassName}
+    maxWidth={maxWidth}
+    style={{
+      padding: panelPaddingSize && panelPaddingSizeMap[panelPaddingSize],
+    }}
+    autoFocus={ownFocus}
+    placement={anchorPosition && anchorPositionMap[anchorPosition]?.placement}
+    align={anchorPosition && anchorPositionMap[anchorPosition]?.align}
+  >
+    <span className={anchorClassName}>{button}</span>
+  </Popover>
+)

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

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

@@ -0,0 +1,2 @@
+export * from './RiPopover'
+export * from './types'

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
+}

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 && (
-                    <EuiPopover
+                    <RiPopover
                       anchorPosition="leftCenter"
                       isOpen={isShowApprovePopover}
                       closePopover={() => setIsShowApprovePopover(false)}
                       anchorClassName={styles.popoverAnchor}
                       panelClassName={cx(styles.popoverPanel)}
-                      className={styles.popoverWrapper}
                       button={ApplyBtn}
                     >
                       <div
@@ -289,7 +288,7 @@ const InlineItemEditor = (props: Props) => {
                           </DestructiveButton>
                         </div>
                       </div>
-                    </EuiPopover>
+                    </RiPopover>
                   )}
                 </div>
               </EuiForm>

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 (
-    <EuiPopover
+    <RiPopover
       ownFocus
       anchorPosition="downRight"
       panelPaddingSize="none"
@@ -169,7 +170,7 @@ const InstancesNavigationPopover = ({ name }: Props) => {
           </div>
         </div>
       </div>
-    </EuiPopover>
+    </RiPopover>
   )
 }
 

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
     }