#RI-2062 - update styles and add unit tests

Author: Artyom Podymov

redisinsight/ui/src/constants/mocks/mock-enablement-area.ts

@@ -14,12 +14,20 @@ export const MOCK_ENABLEMENT_AREA_ITEMS: Record<string, IEnablementAreaItem> = {
           path: 'static/workbench/quick-guides/document-capabilities.html',
         },
       },
-      'document': {
+      'working-with-json': {
         type: EnablementAreaComponent.InternalLink,
-        id: 'document',
-        label: 'Document',
+        id: 'working-with-json',
+        label: 'Working with JSON',
         args: {
-          path: 'static/workbench/quick-guides/document.html',
+          path: 'static/workbench/quick-guides/working-with-json.html',
+        },
+      },
+      'working-with-hash': {
+        type: EnablementAreaComponent.InternalLink,
+        id: 'working-with-hash',
+        label: 'Working with HASH',
+        args: {
+          path: 'static/workbench/quick-guides/working-with-hash.html',
         },
       }
     }
@@ -32,6 +40,14 @@ export const MOCK_ENABLEMENT_AREA_ITEMS: Record<string, IEnablementAreaItem> = {
       path: 'static/workbench/quick-guides/document-capabilities.html'
     },
   },
+  'second-internal-page': {
+    type: EnablementAreaComponent.InternalLink,
+    id: 'second-internal-page',
+    label: 'Second Internal Page',
+    args: {
+      path: 'static/workbench/quick-guides/document-capabilities.html'
+    },
+  },
   'manual': {
     type: EnablementAreaComponent.CodeButton,
     id: 'manual',

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/CodeButton.tsx

@@ -17,7 +17,7 @@ const CodeButton = ({ onClick, label, isLoading, ...rest }: Props) => (
     onClick={onClick}
     fullWidth
     color="secondary"
-    contentProps={{ className: styles.button }}
+    className={styles.button}
     textProps={{ className: styles.buttonText }}
     data-testid={`preselect-${label}`}
     {...rest}

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/CodeButton/styles.module.scss

@@ -1,5 +1,15 @@
+@import '@elastic/eui/src/global_styling/index';
+
 .button {
   justify-content: space-between;
+  &[class*='euiButton--secondary']:not([class*='isDisabled']) {
+    &:hover,
+    &:focus,
+    &:focus-within {
+      background-color: var(--euiColorSecondary) !important;
+      border-color: var(--euiColorSecondary) !important;
+    }
+  }
   &:not(:hover) {
     span {
       color: var(--euiTextSubduedColor);

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss

@@ -36,7 +36,7 @@
         line-height: 24px;
         max-height: 30px;
         &:hover {
-          background-color: var(--hoverInListColorLight);
+          background-color: var(--hoverInListColorDarken);
           color: var(--euiTextColor)
         }
       }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -3,7 +3,8 @@ import {
   EuiFlyoutHeader,
   EuiText,
   EuiButtonEmpty,
-  EuiLoadingContent, EuiHorizontalRule,
+  EuiLoadingContent,
+  EuiHorizontalRule,
 } from '@elastic/eui'
 import JsxParser from 'react-jsx-parser'
 import cx from 'classnames'
@@ -13,7 +14,8 @@ import {
   LazyCodeButton,
   InternalLink,
   Image,
-  EmptyPrompt, Pagination
+  EmptyPrompt,
+  Pagination
 } from 'uiSrc/pages/workbench/components/enablament-area/EnablementArea/components'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.module.scss

@@ -44,7 +44,7 @@
     justify-content: flex-start;
   }
   &:hover {
-    background-color: var(--hoverInListColorLight);
+    background-color: var(--hoverInListColorDarken);
     color: var(--euiTextColor) !important;
     text-decoration: none !important;
   }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.spec.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
+import { MOCK_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants'
+import { defaultValue, EnablementAreaProvider } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
+import Pagination from './Pagination'
+
+const paginationItems = Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides']?.children || {})
+
+describe('Pagination', () => {
+  it('should render', () => {
+    const component = render(<Pagination items={paginationItems} />)
+    const { queryByTestId } = component
+
+    expect(component).toBeTruthy()
+    expect(queryByTestId('enablement-area__prev-page-btn')).not.toBeInTheDocument()
+    expect(queryByTestId('enablement-area__next-page-btn')).toBeInTheDocument()
+  })
+  it('should correctly open popover', () => {
+    const { queryByTestId } = render(
+      <Pagination items={paginationItems} activePageId={paginationItems[0].id} />
+    )
+    fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn'))
+    const popover = queryByTestId('enablement-area__pagination-popover')
+
+    expect(popover).toBeInTheDocument()
+    expect(popover?.querySelectorAll('.pagesItem').length).toEqual(paginationItems.length)
+    expect(popover?.querySelector('.pagesItemActive')).toHaveTextContent(paginationItems[0].label)
+  })
+  it('should correctly open next page', () => {
+    const openPage = jest.fn()
+    const pageIndex = 0
+
+    render(
+      <EnablementAreaProvider value={{ ...defaultValue, openPage }}>
+        <Pagination items={paginationItems} activePageId={paginationItems[pageIndex].id} />
+      </EnablementAreaProvider>
+    )
+    fireEvent.click(screen.getByTestId('enablement-area__next-page-btn'))
+
+    expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex + 1]?.args?.path })
+  })
+  it('should correctly open previous page', () => {
+    const openPage = jest.fn()
+    const pageIndex = 1
+
+    render(
+      <EnablementAreaProvider value={{ ...defaultValue, openPage }}>
+        <Pagination items={paginationItems} activePageId={paginationItems[pageIndex].id} />
+      </EnablementAreaProvider>
+    )
+    fireEvent.click(screen.getByTestId('enablement-area__prev-page-btn'))
+
+    expect(openPage).toBeCalledWith({ path: paginationItems[pageIndex - 1]?.args?.path })
+  })
+  it('should correctly open by using pagination popover', async () => {
+    const openPage = jest.fn()
+    const { queryByTestId } = render(
+      <EnablementAreaProvider value={{ ...defaultValue, openPage }}>
+        <Pagination items={paginationItems} activePageId={paginationItems[0].id} />
+      </EnablementAreaProvider>
+    )
+
+    fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn'))
+    const popover = queryByTestId('enablement-area__pagination-popover')
+    await waitFor(() => {
+      popover?.querySelectorAll('.pagesItem').forEach(async (el) => {
+        fireEvent.click(el)
+      })
+    })
+
+    expect(openPage).toBeCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable
+    expect(openPage)
+      .lastCalledWith({ path: paginationItems[paginationItems.length - 1]?.args?.path })
+  })
+})

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/Pagination.tsx

@@ -13,18 +13,20 @@ import styles from './styles.module.scss'
 
 export interface Props {
   items: IEnablementAreaItem[];
-  activePageId: string;
+  activePageId?: string;
   compressed?: boolean;
 }
 
 const Pagination = ({ items = [], activePageId, compressed }: Props) => {
   const [isPopoverOpen, setPopover] = useState(false)
-  const [activePage, setActivePage] = useState(-1)
+  const [activePage, setActivePage] = useState(0)
   const { openPage } = useContext(EnablementAreaContext)
 
   useEffect(() => {
-    const index = items.findIndex((item) => item.id === activePageId)
-    setActivePage(index)
+    if (activePageId) {
+      const index = items.findIndex((item) => item.id === activePageId)
+      setActivePage(index)
+    }
   }, [activePageId])
 
   const togglePopover = () => {
@@ -57,7 +59,12 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => {
     <EuiPopover
       id="enablementAreaPagesMenu"
       button={(
-        <button className={styles.popoverButton} type="button" onClick={togglePopover}>
+        <button
+          data-testid="enablement-area__pagination-popover-btn"
+          className={styles.popoverButton}
+          type="button"
+          onClick={togglePopover}
+        >
           {`${activePage + 1} of ${items.length}`}
         </button>
       )}
@@ -67,6 +74,7 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => {
       panelPaddingSize="none"
     >
       <EuiContextMenuPanel
+        data-testid="enablement-area__pagination-popover"
         style={{ minWidth: !compressed ? '280px' : 'none' }}
         className={styles.panel}
         size="s"
@@ -82,6 +90,7 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => {
           <EuiButton
             aria-label="Previous page"
             fill
+            data-testid="enablement-area__prev-page-btn"
             color="secondary"
             iconType="arrowLeft"
             iconSide="left"
@@ -101,6 +110,7 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => {
           <EuiButton
             aria-label="Next page"
             fill
+            data-testid="enablement-area__next-page-btn"
             color="secondary"
             iconType="arrowRight"
             iconSide="right"

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Pagination/styles.module.scss

@@ -14,13 +14,13 @@
 
 .paginationCompressed {
   padding: 8px 6px;
-  & > div:first-of-type,& > div:last-of-type  {
+  & > div:first-of-type, & > div:last-of-type {
     min-width: 70px;
   }
 }
 
 .panel {
-  padding-bottom: 1px;
+  padding: 1px 0;
   button:first-of-type {
     border-radius: 3px 3px 0 0;
   }
@@ -31,8 +31,15 @@
 
 .popover {
   border: 1px solid var(--euiColorPrimary) !important;
-  & > div:before {
-    border-top-color: var(--euiColorPrimary) !important;
+  [class~=euiPopover__panelArrow] {
+    &:before {
+      border-top-color: var(--euiColorPrimary) !important;
+    }
+  }
+  [class~=euiPopover__panelArrow--bottom] {
+    &:before {
+      border-bottom-color: var(--euiColorPrimary) !important;
+    }
   }
 }
 

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/utils/getFileInfo.spec.ts

@@ -55,6 +55,18 @@ const getPagesInsideGroupTests = [
     input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/quick-guides'],
     expected: Object.values(MOCK_ENABLEMENT_AREA_ITEMS['quick-guides'].children || {})
   },
+  {
+    input: [MOCK_ENABLEMENT_AREA_ITEMS, '/static/workbench/'],
+    expected: [MOCK_ENABLEMENT_AREA_ITEMS['internal-page'], MOCK_ENABLEMENT_AREA_ITEMS['second-internal-page']]
+  },
+  {
+    input: [MOCK_ENABLEMENT_AREA_ITEMS, 'https://domen.com/workbench/enablement-area/'],
+    expected: []
+  },
+  {
+    input: [],
+    expected: []
+  },
 ]
 
 describe('getPagesInsideGroup', () => {