diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx index 8d9a01c8e7..afb573c968 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.tsx +++ b/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)} /> )} diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx index a0d3820ab8..4c02f85e13 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx +++ b/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(null) @@ -146,10 +148,10 @@ const InternalPage = (props: Props) => { {!!pagination?.length && ( <>
- +
- +
)} diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx index 59122ee200..e6b8d72dcc 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyInternalPage/LazyInternalPage.tsx +++ b/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(false) const [error, setError] = useState('') const [pageData, setPageData] = useState(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) => { { it('should render', () => { - const component = render() + const component = render() const { queryByTestId } = component expect(component).toBeTruthy() @@ -17,7 +17,7 @@ describe('Pagination', () => { }) it('should correctly open popover', () => { const { queryByTestId } = render( - + ) fireEvent.click(screen.getByTestId('enablement-area__pagination-popover-btn')) const popover = queryByTestId('enablement-area__pagination-popover') @@ -32,12 +32,16 @@ describe('Pagination', () => { render( - + ) 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() @@ -45,18 +49,26 @@ describe('Pagination', () => { render( - + ) 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( - + ) @@ -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 }) }) }) diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Pagination/Pagination.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Pagination/Pagination.tsx index 5f6f9e168d..1c1dc83e53 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/Pagination/Pagination.tsx +++ b/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 }) } } diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.spec.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.spec.ts index c4d757cd9a..2970081b32 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.spec.ts +++ b/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 || {}) }, { diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.ts b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.ts index c29aceb9d4..4da507d23d 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo.ts +++ b/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,6 +37,8 @@ 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, @@ -44,10 +46,11 @@ export const getPagesInsideGroup = ( ): 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 '' +}