RI-7048, RI-7049: replace eui menu with redis menu

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

@@ -0,0 +1,8 @@
+import { Menu } from '@redis-ui/components'
+
+const MenuContent = Menu.Content
+const MenuTrigger = Menu.Trigger
+const MenuItem = Menu.Content.Item
+const MenuDropdownArrow = Menu.Content.DropdownArrow
+
+export { Menu, MenuContent, MenuItem, MenuTrigger, MenuDropdownArrow }

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.spec.tsx

@@ -1,4 +1,3 @@
-import { act } from '@testing-library/react'
 import React from 'react'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { ApiEndpoints, MOCK_TUTORIALS_ITEMS } from 'uiSrc/constants'
@@ -31,7 +30,7 @@ describe('Pagination', () => {
     ).not.toBeInTheDocument()
     expect(queryByTestId('enablement-area__next-page-btn')).toBeInTheDocument()
   })
-  it('should correctly open popover', () => {
+  it('should correctly open menu', () => {
     const { queryByTestId } = render(
       <Pagination
         sourcePath={ApiEndpoints.GUIDES_PATH}
@@ -40,15 +39,15 @@ describe('Pagination', () => {
       />,
     )
     fireEvent.click(
-      screen.getByTestId('enablement-area__pagination-popover-btn'),
+      screen.getByTestId('enablement-area__toggle-pagination-menu-btn'),
     )
-    const popover = queryByTestId('enablement-area__pagination-popover')
+    const menu = queryByTestId('enablement-area__pagination-menu')
 
-    expect(popover).toBeInTheDocument()
-    expect(popover?.querySelectorAll('.pagesItem').length).toEqual(
+    expect(menu).toBeInTheDocument()
+    expect(menu?.querySelectorAll('[data-testid^="menu-item"]').length).toEqual(
       paginationItems.length,
     )
-    expect(popover?.querySelector('.pagesItemActive')).toHaveTextContent(
+    expect(menu?.querySelector('.activeMenuItem')).toHaveTextContent(
       paginationItems[0].label,
     )
   })
@@ -67,7 +66,7 @@ describe('Pagination', () => {
     )
     fireEvent.click(screen.getByTestId('enablement-area__next-page-btn'))
 
-    expect(openPage).toBeCalledWith({
+    expect(openPage).toHaveBeenCalledWith({
       path:
         ApiEndpoints.GUIDES_PATH + paginationItems[pageIndex + 1]?.args?.path,
       manifestPath: expect.any(String),
@@ -88,36 +87,47 @@ describe('Pagination', () => {
     )
     fireEvent.click(screen.getByTestId('enablement-area__prev-page-btn'))
 
-    expect(openPage).toBeCalledWith({
+    expect(openPage).toHaveBeenCalledWith({
       path:
         ApiEndpoints.GUIDES_PATH + paginationItems[pageIndex - 1]?.args?.path,
       manifestPath: expect.any(String),
     })
   })
-  it('should correctly open by using pagination popover', async () => {
+  it('should correctly open by using pagination menu', async () => {
     const openPage = jest.fn()
+    const ACTIVE_PAGE_KEY = '0'
     const { queryByTestId } = render(
       <EnablementAreaProvider value={{ ...defaultValue, openPage }}>
         <Pagination
           sourcePath={ApiEndpoints.GUIDES_PATH}
           items={paginationItems}
-          activePageKey="0"
+          activePageKey={ACTIVE_PAGE_KEY}
         />
       </EnablementAreaProvider>,
     )
 
-    fireEvent.click(
-      screen.getByTestId('enablement-area__pagination-popover-btn'),
-    )
-    const popover = queryByTestId('enablement-area__pagination-popover')
-    await act(() => {
-      popover?.querySelectorAll('.pagesItem').forEach(async (el) => {
-        fireEvent.click(el)
-      })
-    })
+    const toggleMenuBtnId = 'enablement-area__toggle-pagination-menu-btn'
+    for (let i = 0; i < paginationItems.length; i++) {
+      const pageItem = paginationItems[i]
+
+      if (pageItem._key !== ACTIVE_PAGE_KEY) {
+        // Reopen the menu each time
+        fireEvent.click(screen.getByTestId(toggleMenuBtnId))
+
+        const menu = queryByTestId('enablement-area__pagination-menu')
+        expect(menu).not.toBeNull()
+
+        const menuItem = menu?.querySelector(
+          `[data-testid="menu-item-${pageItem._key}"]`,
+        )
+        expect(menuItem).not.toBeNull()
+
+        fireEvent.click(menuItem as Element)
+      }
+    }
 
-    expect(openPage).toBeCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable
-    expect(openPage).lastCalledWith({
+    expect(openPage).toHaveBeenCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable
+    expect(openPage).toHaveBeenLastCalledWith({
       path:
         ApiEndpoints.GUIDES_PATH +
         paginationItems[paginationItems.length - 1]?.args?.path,

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/Pagination.tsx

@@ -1,9 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react'
-import {
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-  EuiPopover,
-} from '@elastic/eui'
 import cx from 'classnames'
 import { isNil } from 'lodash'
 import { ChevronLeftIcon, ChevronRightIcon } from 'uiSrc/components/base/icons'
@@ -12,6 +7,14 @@ import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementArea
 
 import { Nullable } from 'uiSrc/utils'
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
+import {
+  Menu,
+  MenuContent,
+  MenuDropdownArrow,
+  MenuItem,
+  MenuTrigger,
+} from 'uiSrc/components/base/layout/menu'
+import { Text } from 'uiSrc/components/base/text'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -27,7 +30,7 @@ const Pagination = ({
   activePageKey,
   compressed,
 }: Props) => {
-  const [isPopoverOpen, setPopover] = useState(false)
+  const [isMenuOpen, setMenuOpen] = useState(false)
   const [activePage, setActivePage] = useState(0)
   const { openPage } = useContext(EnablementAreaContext)
 
@@ -38,20 +41,20 @@ const Pagination = ({
     }
   }, [activePageKey])
 
-  const togglePopover = () => {
-    setPopover(!isPopoverOpen)
+  const toggleMenuOpen = () => {
+    setMenuOpen(!isMenuOpen)
   }
 
-  const closePopover = () => {
-    setPopover(false)
+  const closeMenu = () => {
+    setMenuOpen(false)
   }
 
   const handleOpenPage = (index: number) => {
     const path = items[index]?.args?.path
     const groupPath = items[index]?._groupPath
     const key = items[index]?._key
 
-    closePopover()
+    closeMenu()
     if (index !== activePage && openPage && path) {
       openPage({
         path: sourcePath + path,
@@ -60,44 +63,38 @@ const Pagination = ({
     }
   }
 
-  const pages = items.map((item, index) => (
-    <EuiContextMenuItem
-      className={cx(styles.pagesItem, {
-        [styles.pagesItemActive]: index === activePage,
-      })}
-      key={item.id}
-      onClick={() => handleOpenPage(index)}
-    >
-      <span>{item.label}</span>
-    </EuiContextMenuItem>
-  ))
-
   const PagesControl = () => (
-    <EuiPopover
-      id="enablementAreaPagesMenu"
-      button={
+    <Menu open={isMenuOpen}>
+      <MenuTrigger>
         <button
-          data-testid="enablement-area__pagination-popover-btn"
-          className={styles.popoverButton}
+          data-testid="enablement-area__toggle-pagination-menu-btn"
           type="button"
-          onClick={togglePopover}
+          onClick={toggleMenuOpen}
         >
-          {`${activePage + 1} of ${items.length}`}
+          <Text size="S">
+            <strong
+              className={styles.underline}
+            >{`${activePage + 1} of ${items.length}`}</strong>
+          </Text>
         </button>
-      }
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelClassName={styles.popover}
-      panelPaddingSize="none"
-    >
-      <EuiContextMenuPanel
-        data-testid="enablement-area__pagination-popover"
-        style={{ minWidth: !compressed ? '280px' : 'none' }}
-        className={styles.panel}
-        size="s"
-        items={pages}
-      />
-    </EuiPopover>
+      </MenuTrigger>
+      <MenuContent
+        data-testid="enablement-area__pagination-menu"
+        placement="top"
+        onInteractOutside={() => setMenuOpen(false)}
+      >
+        {items.map((item, index) => (
+          <MenuItem
+            data-testid={`menu-item-${index}`}
+            key={item.id}
+            onClick={() => handleOpenPage(index)}
+            text={item.label}
+            className={cx({ [styles.activeMenuItem]: activePage === index })}
+          />
+        ))}
+        <MenuDropdownArrow />
+      </MenuContent>
+    </Menu>
   )
 
   const size = compressed ? 'small' : 'medium'

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Pagination/styles.module.scss

@@ -22,67 +22,6 @@
   }
 }
 
-.panel {
-  padding: 1px 0;
-  button:first-of-type {
-    border-radius: 3px 3px 0 0;
-  }
-  button:last-of-type {
-    border-radius: 0 0 2px 2px;
-  }
-}
-
-.popover {
-  border: 1px solid var(--euiColorPrimary) !important;
-  [class~=euiPopover__panelArrow] {
-    &:before {
-      border-top-color: var(--euiColorPrimary) !important;
-    }
-  }
-  [class~=euiPopover__panelArrow--bottom] {
-    &:before {
-      border-bottom-color: var(--euiColorPrimary) !important;
-    }
-  }
-}
-
-.popoverButton {
-  text-decoration: underline;
-  color: var(--euiTextSubduedColor);
-  &:hover, &:focus {
-    color: var(--euiTextColor);
-  }
-  font: normal normal 500 13px/18px Graphik, sans-serif;
-}
-
-.pagesItem {
-  padding: 4px 16px !important;
-  background-color: transparent;
-  text-decoration: none !important;
-  font: normal normal normal 14px/30px Graphik, sans-serif;
-  letter-spacing: 0;
-  span {
-    color: var(--euiTextSubduedColor);
-  }
-  &:focus {
-    background-color: transparent !important;
-  }
-  &:hover {
-    background-color: var(--hoverInListColorLight) !important;
-    span {
-      color: inherit;
-    }
-  }
-}
-
-.pagesItemActive, .pagesItemActive:hover, .pagesItemActive:focus {
-  background-color: var(--euiColorPrimary) !important;
-  cursor: default !important;
-  span {
-    color: var(--euiColorEmptyShade);
-  }
-}
-
 .prevPage, .nextPage {
   & > span {
     justify-content: flex-start;
@@ -99,3 +38,12 @@
     padding: 0 4px 0 12px !important;
   }
 }
+
+.activeMenuItem {
+  background-color: var(--euiColorPrimary) !important;
+  color: var(--euiColorEmptyShade) !important;
+}
+
+.underline {
+  text-decoration: underline;
+}