#RI-2450-fix pagination

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

@@ -7,6 +7,7 @@ import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/inter
 import { EnablementAreaProvider, IInternalPage } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { appContextWorkbenchEA, resetWorkbenchEAItem } from 'uiSrc/slices/app/context'
 import { ApiEndpoints } from 'uiSrc/constants'
+import { getWBSourcePath } from './utils/getFileInfo'
 import {
   CodeButton,
   Group,
@@ -44,7 +45,6 @@ const EnablementArea = ({
     if (pagePath) {
       setIsInternalPageVisible(true)
       setInternalPage({ path: pagePath })
-
       return
     }
     if (itemFromContext) {
@@ -140,6 +140,7 @@ const EnablementArea = ({
               onClose={handleCloseInternalPage}
               title={internalPage?.label}
               path={internalPage?.path}
+              sourcePath={getWBSourcePath(internalPage?.path)}
             />
           )}
         </div>

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

@@ -35,6 +35,7 @@ export interface Props {
   onScroll?: (top: number) => void;
   id: string;
   path: string;
+  sourcePath: string;
   pagination?: IEnablementAreaItem[]
 }
 const InternalPage = (props: Props) => {
@@ -51,6 +52,7 @@ const InternalPage = (props: Props) => {
     pagination,
     id,
     path,
+    sourcePath
   } = props
   const components: any = { LazyCodeButton, Image, Code }
   const containerRef = useRef<HTMLDivElement>(null)
@@ -146,10 +148,10 @@ const InternalPage = (props: Props) => {
       {!!pagination?.length && (
         <>
           <div className={cx(styles.footer, 'eui-showFor--xl')}>
-            <Pagination items={pagination} activePageId={id} />
+            <Pagination sourcePath={sourcePath} items={pagination} activePageId={id} />
           </div>
           <div className={cx(styles.footer, 'eui-hideFor--xl')}>
-            <Pagination items={pagination} activePageId={id} compressed />
+            <Pagination sourcePath={sourcePath} items={pagination} activePageId={id} compressed />
           </div>
         </>
       )}

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { startCase } from 'lodash'
 import { useHistory } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
@@ -7,6 +7,7 @@ import axios from 'axios'
 import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils'
 import { resourcesService } from 'uiSrc/services'
 import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
+import { ApiEndpoints } from 'uiSrc/constants'
 import {
   setWorkbenchEAItem,
   resetWorkbenchEAItem,
@@ -15,6 +16,7 @@ import {
 } from 'uiSrc/slices/app/context'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 import { workbenchGuidesSelector } from 'uiSrc/slices/workbench/wb-guides'
+import { workbenchTutorialsSelector } from 'uiSrc/slices/workbench/wb-tutorials'
 
 import InternalPage from '../InternalPage'
 import { getFileInfo, getPagesInsideGroup, IFileInfo } from '../../utils/getFileInfo'
@@ -30,23 +32,38 @@ export interface Props {
   onClose: () => void;
   title?: string;
   path: string;
+  sourcePath: string;
 }
 
-const LazyInternalPage = ({ onClose, title, path }: Props) => {
+const LazyInternalPage = ({ onClose, title, path, sourcePath }: Props) => {
   const history = useHistory()
   const { itemScrollTop } = useSelector(appContextWorkbenchEA)
   const guides = useSelector(workbenchGuidesSelector)
+  const tutorials = useSelector(workbenchTutorialsSelector)
   const [isLoading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
   const [pageData, setPageData] = useState<IPageData>(DEFAULT_PAGE_DATA)
   const dispatch = useDispatch()
   const fetchService = IS_ABSOLUTE_PATH.test(path) ? axios : resourcesService
 
+  const getRelatedPages = useCallback((sourcePath: string): IEnablementAreaItem[] => {
+    const pageInfo = getFileInfo(path)
+
+    switch (sourcePath) {
+      case ApiEndpoints.GUIDES_PATH:
+        return getPagesInsideGroup(guides.items, pageInfo.location)
+      case ApiEndpoints.TUTORIALS_PATH:
+        return getPagesInsideGroup(tutorials.items, pageInfo.location)
+      default:
+        return []
+    }
+  }, [sourcePath])
+
   const loadContent = async () => {
     setLoading(true)
     setError('')
     const pageInfo = getFileInfo(path)
-    const relatedPages = getPagesInsideGroup(guides.items, pageInfo.location)
+    const relatedPages = getRelatedPages(sourcePath)
     setPageData({ ...DEFAULT_PAGE_DATA, ...pageInfo, relatedPages })
     try {
       const formatter = FormatSelector.selectFor(pageInfo.extension)
@@ -81,10 +98,11 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => {
     <InternalPage
       id={pageData.name}
       path={path}
+      sourcePath={sourcePath}
       onClose={onClose}
       title={startCase(title || pageData.name)}
       backTitle={startCase(pageData?.parent)}
-      isLoading={isLoading || guides.loading}
+      isLoading={isLoading || guides.loading || tutorials.loading}
       content={pageData.content}
       error={error}
       onScroll={handlePageScroll}

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

@@ -1,14 +1,14 @@
 import React from 'react'
 import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
-import { MOCK_GUIDES_ITEMS } from 'uiSrc/constants'
+import { ApiEndpoints, MOCK_GUIDES_ITEMS } from 'uiSrc/constants'
 import { defaultValue, EnablementAreaProvider } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import Pagination from './Pagination'
 
 const paginationItems = Object.values(MOCK_GUIDES_ITEMS['quick-guides']?.children || {})
 
 describe('Pagination', () => {
   it('should render', () => {
-    const component = render(<Pagination items={paginationItems} />)
+    const component = render(<Pagination sourcePath={ApiEndpoints.GUIDES_PATH} items={paginationItems} />)
     const { queryByTestId } = component
 
     expect(component).toBeTruthy()
@@ -17,7 +17,7 @@ describe('Pagination', () => {
   })
   it('should correctly open popover', () => {
     const { queryByTestId } = render(
-      <Pagination items={paginationItems} activePageId={paginationItems[0].id} />
+      <Pagination sourcePath={ApiEndpoints.GUIDES_PATH} items={paginationItems} activePageId={paginationItems[0].id} />
     )
     fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn'))
     const popover = queryByTestId('enablement-area__pagination-popover')
@@ -32,31 +32,43 @@ describe('Pagination', () => {
 
     render(
       <EnablementAreaProvider value={{ ...defaultValue, openPage }}>
-        <Pagination items={paginationItems} activePageId={paginationItems[pageIndex].id} />
+        <Pagination
+          sourcePath={ApiEndpoints.GUIDES_PATH}
+          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 })
+    expect(openPage).toBeCalledWith({ path: ApiEndpoints.GUIDES_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} />
+        <Pagination
+          sourcePath={ApiEndpoints.GUIDES_PATH}
+          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 })
+    expect(openPage).toBeCalledWith({ path: ApiEndpoints.GUIDES_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} />
+        <Pagination
+          sourcePath={ApiEndpoints.GUIDES_PATH}
+          items={paginationItems}
+          activePageId={paginationItems[0].id}
+        />
       </EnablementAreaProvider>
     )
 
@@ -70,6 +82,6 @@ describe('Pagination', () => {
 
     expect(openPage).toBeCalledTimes(paginationItems.length - 1) // -1 because active item should not be clickable
     expect(openPage)
-      .lastCalledWith({ path: paginationItems[paginationItems.length - 1]?.args?.path })
+      .lastCalledWith({ path: ApiEndpoints.GUIDES_PATH + paginationItems[paginationItems.length - 1]?.args?.path })
   })
 })

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

@@ -13,11 +13,12 @@ import styles from './styles.module.scss'
 
 export interface Props {
   items: IEnablementAreaItem[];
+  sourcePath: string;
   activePageId?: string;
   compressed?: boolean;
 }
 
-const Pagination = ({ items = [], activePageId, compressed }: Props) => {
+const Pagination = ({ items = [], sourcePath, activePageId, compressed }: Props) => {
   const [isPopoverOpen, setPopover] = useState(false)
   const [activePage, setActivePage] = useState(0)
   const { openPage } = useContext(EnablementAreaContext)
@@ -41,7 +42,7 @@ const Pagination = ({ items = [], activePageId, compressed }: Props) => {
     const path = items[index]?.args?.path
     closePopover()
     if (index !== activePage && openPage && path) {
-      openPage({ path })
+      openPage({ path: sourcePath + path })
     }
   }
 

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

@@ -52,7 +52,7 @@ describe('getFileInfo', () => {
 
 const getPagesInsideGroupTests = [
   {
-    input: [MOCK_GUIDES_ITEMS, '/static/workbench/quick-guides'],
+    input: [MOCK_GUIDES_ITEMS, '/static/guides/quick-guides'],
     expected: Object.values(MOCK_GUIDES_ITEMS['quick-guides'].children || {})
   },
   {

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

@@ -1,5 +1,5 @@
 import { get } from 'lodash'
-import { API_URL } from 'uiSrc/constants'
+import { API_URL, ApiEndpoints } from 'uiSrc/constants'
 import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
@@ -37,17 +37,20 @@ export const getFileInfo = (path: string): IFileInfo => {
 
 const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|guides|tutorials)\//
 const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench|guides|tutorials)\/?$/
+const EA_GUIDES_PATH = '/static/guides/'
+const EA_TUTORIALS_PATH = '/static/'
 
 export const getPagesInsideGroup = (
   structure: Record<string, IEnablementAreaItem>,
   path: string
 ): IEnablementAreaItem[] => {
   try {
     if (EA_STATIC_PATH_REGEX.test(path)) {
-      let groupPath = path.replace(EA_STATIC_PATH_REGEX, '')
+      let groupPath = path.replace(EA_GUIDES_PATH, '').replace(EA_TUTORIALS_PATH, '')
       let groupChildren
       if (!EA_STATIC_ROOT_PATH.test(path)) {
         groupPath = groupPath.replace('/', '.children.')
+        // groupPath = 'tutorials.children.redis_stack'
         groupChildren = get(structure, groupPath, undefined)?.children
       } else {
         groupChildren = structure
@@ -62,3 +65,13 @@ export const getPagesInsideGroup = (
     return []
   }
 }
+
+export const getWBSourcePath = (path: string): string => {
+  if (path.includes(ApiEndpoints.TUTORIALS_PATH)) {
+    return ApiEndpoints.TUTORIALS_PATH
+  }
+  if (path.includes(ApiEndpoints.GUIDES_PATH)) {
+    return ApiEndpoints.GUIDES_PATH
+  }
+  return ''
+}