#RI-2450-update enablement area with relative path

AmirAllayarovSofteq · AmirAllayarovSofteq · commit b14ecee49e76 · 2022-03-18T17:19:55.000+03:00
diff --git a/redisinsight/ui/src/constants/api.ts b/redisinsight/ui/src/constants/api.ts
@@ -51,7 +51,8 @@ enum ApiEndpoints {
   PLUGINS = 'plugins',
   STATE = 'state',
   CONTENT_CREATE_DATABASE = 'static/content/create-redis.json',
-  ENABLEMENT_AREA_PATH = 'static',
+  GUIDES_PATH = 'static/guides',
+  TUTORIALS_PATH = 'static/tutorials',
 }
 
 export const DEFAULT_SEARCH_MATCH = '*'
diff --git a/redisinsight/ui/src/constants/index.ts b/redisinsight/ui/src/constants/index.ts
@@ -17,6 +17,7 @@ export * from './monitorEvents'
 export * from './socketEvents'
 export * from './mocks/mock-redis-commands'
 export * from './mocks/mock-guides'
+export * from './mocks/mock-tutorials'
 export * from './socketErrors'
 export * from './browser'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/EnablementArea.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import { instance, mock } from 'ts-mockito'
 import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
-import { MOCK_GUIDES_ITEMS } from 'uiSrc/constants'
+import { MOCK_GUIDES_ITEMS, MOCK_TUTORIALS_ITEMS } from 'uiSrc/constants'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
 import EnablementArea, { Props } from './EnablementArea'
@@ -29,7 +29,11 @@ jest.mock('uiSrc/slices/workbench/wb-guides', () => {
 
 describe('EnablementArea', () => {
   it('should render', () => {
-    expect(render(<EnablementArea {...instance(mockedProps)} items={MOCK_GUIDES_ITEMS} />))
+    expect(render(<EnablementArea
+      {...instance(mockedProps)}
+      guides={MOCK_GUIDES_ITEMS}
+      tutorials={MOCK_TUTORIALS_ITEMS}
+    />))
       .toBeTruthy()
   })
 
@@ -46,7 +50,8 @@ describe('EnablementArea', () => {
     const { queryByTestId } = render(
       <EnablementArea
         {...instance(mockedProps)}
-        items={MOCK_GUIDES_ITEMS}
+        guides={MOCK_GUIDES_ITEMS}
+        tutorials={MOCK_TUTORIALS_ITEMS}
       />
     )
     const loaderEl = queryByTestId('enablementArea-loader')
@@ -76,7 +81,7 @@ describe('EnablementArea', () => {
     const { queryByTestId } = render(
       <EnablementArea
         {...instance(mockedProps)}
-        items={{ 'quick-guides': item }}
+        guides={{ 'quick-guides': item }}
       />
     )
 
@@ -96,7 +101,7 @@ describe('EnablementArea', () => {
     const { queryByTestId } = render(
       <EnablementArea
         {...instance(mockedProps)}
-        items={{ manual: item }}
+        guides={{ manual: item }}
       />
     )
     const codeButtonEl = queryByTestId(`preselect-${item.label}`)
@@ -115,7 +120,7 @@ describe('EnablementArea', () => {
     const { queryByTestId } = render(
       <EnablementArea
         {...instance(mockedProps)}
-        items={{ 'internal-page': item }}
+        guides={{ 'internal-page': item }}
       />
     )
 
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
@@ -21,14 +21,17 @@ import styles from './styles.module.scss'
 const padding = parseInt(styles.paddingHorizontal)
 
 export interface Props {
-  items: Record<string, IEnablementAreaItem>
+  guides: Record<string, IEnablementAreaItem>
+  tutorials: Record<string, IEnablementAreaItem>
   loading: boolean
   openScript: (script: string, path?: string, name?: string) => void
   onOpenInternalPage: (page: IInternalPage) => void
   isCodeBtnDisabled?: boolean
 }
 
-const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCodeBtnDisabled }: Props) => {
+const EnablementArea = ({
+  guides = {}, tutorials = {}, openScript, loading, onOpenInternalPage, isCodeBtnDisabled
+}: Props) => {
   const { search } = useLocation()
   const history = useHistory()
   const dispatch = useDispatch()
@@ -40,12 +43,12 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
     const pagePath = new URLSearchParams(search).get('item')
     if (pagePath) {
       setIsInternalPageVisible(true)
-      setInternalPage({ path: `${ApiEndpoints.ENABLEMENT_AREA_PATH}${pagePath}` })
+      setInternalPage({ path: pagePath })
 
       return
     }
     if (itemFromContext) {
-      handleOpenInternalPage({ path: `${ApiEndpoints.ENABLEMENT_AREA_PATH}${itemFromContext}` })
+      handleOpenInternalPage({ path: itemFromContext })
       return
     }
     setIsInternalPageVisible(false)
@@ -66,14 +69,14 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
     })
   }
 
-  const renderSwitch = (item: IEnablementAreaItem, level: number) => {
+  const renderSwitch = (item: IEnablementAreaItem, sourcePath: string, level: number) => {
     const { label, type, children, id, args } = item
     const paddingsStyle = { paddingLeft: `${padding + level * 8}px`, paddingRight: `${padding}px` }
     switch (type) {
       case EnablementAreaComponent.Group:
         return (
           <Group triggerStyle={paddingsStyle} testId={id} label={label} {...args}>
-            {renderTreeView(Object.values(children || {}) || [], level + 1)}
+            {renderTreeView(Object.values(children || {}) || [], sourcePath, level + 1)}
           </Group>
         )
       case EnablementAreaComponent.CodeButton:
@@ -90,7 +93,7 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
         )
       case EnablementAreaComponent.InternalLink:
         return (
-          <InternalLink style={paddingsStyle} testId={id || label} label={label} {...args}>
+          <InternalLink sourcePath={sourcePath} style={paddingsStyle} testId={id || label} label={label} {...args}>
             {args?.content || label}
           </InternalLink>
         )
@@ -99,10 +102,10 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
     }
   }
 
-  const renderTreeView = (elements: IEnablementAreaItem[], level: number = 0) => (
+  const renderTreeView = (elements: IEnablementAreaItem[], sourcePath: string, level: number = 0) => (
     elements?.map((item) => (
       <div className="fluid" key={item.id}>
-        {renderSwitch(item, level)}
+        {renderSwitch(item, sourcePath, level)}
       </div>
     )))
 
@@ -122,7 +125,8 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
               flush
               className={cx(styles.innerContainer)}
             >
-              {renderTreeView(Object.values(items))}
+              {renderTreeView(Object.values(guides), ApiEndpoints.GUIDES_PATH)}
+              {renderTreeView(Object.values(tutorials), ApiEndpoints.TUTORIALS_PATH)}
             </EuiListGroup>
           )}
         <div
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalLink/InternalLink.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/InternalLink/InternalLink.tsx
@@ -16,13 +16,14 @@ export interface Props {
   iconPosition?: 'left' | 'right';
   toolTip?: string;
   style?: any;
+  sourcePath: string;
 }
 const InternalLink = (props: Props) => {
-  const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, ...rest } = props
+  const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, sourcePath, ...rest } = props
   const { openPage } = useContext(EnablementAreaContext)
   const handleOpenPage = () => {
     if (path) {
-      openPage({ path, label })
+      openPage({ path: sourcePath + path, label })
     }
   }
 
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyCodeButton/LazyCodeButton.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/components/LazyCodeButton/LazyCodeButton.tsx
@@ -23,7 +23,7 @@ const LazyCodeButton = ({ path = '', ...rest }: Props) => {
       setLoading(true)
       setError('')
       try {
-        const { data, status } = await resourcesService.get<string>(`${ApiEndpoints.ENABLEMENT_AREA_PATH}${path}`)
+        const { data, status } = await resourcesService.get<string>(`${ApiEndpoints.TUTORIALS_PATH}${path}`)
         if (isStatusSuccessful(status)) {
           setLoading(false)
           const pageInfo = getFileInfo(path)
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
@@ -35,8 +35,8 @@ export const getFileInfo = (path: string): IFileInfo => {
   }
 }
 
-const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|guides)\//
-const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench|guides)\/?$/
+const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench|guides|tutorials)\//
+const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench|guides|tutorials)\/?$/
 
 export const getPagesInsideGroup = (
   structure: Record<string, IEnablementAreaItem>,
diff --git a/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementAreaWrapper.tsx b/redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementAreaWrapper.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect } from 'react'
 import { monaco } from 'react-monaco-editor'
-import { omit, findKey } from 'lodash'
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'
 import cx from 'classnames'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
@@ -11,7 +10,6 @@ import { Nullable, } from 'uiSrc/utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { fetchGuides, workbenchGuidesSelector } from 'uiSrc/slices/workbench/wb-guides'
 import { fetchTutorials, workbenchTutorialsSelector } from 'uiSrc/slices/workbench/wb-tutorials'
-import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
 import EnablementArea from './EnablementArea'
 import EnablementAreaCollapse from './EnablementAreaCollapse/EnablementAreaCollapse'
@@ -27,18 +25,6 @@ export interface Props {
   isCodeBtnDisabled?: boolean
 }
 
-const sortItems = (guides: Record<string, IEnablementAreaItem>, tutorials: Record<string, IEnablementAreaItem>)
-: Record<string, IEnablementAreaItem> => {
-  const mergedItems = { ...guides, ...tutorials }
-  const lastItemKey = findKey(mergedItems, { args: { order: 'last' } })
-
-  if (lastItemKey) {
-    return { ...omit(mergedItems, lastItemKey), lastItemKey: mergedItems[lastItemKey] }
-  }
-
-  return mergedItems
-}
-
 const EnablementAreaWrapper = ({ isMinimized, setIsMinimized, scriptEl, setScript, isCodeBtnDisabled }: Props) => {
   const { loading: loadingGuides, items: guides } = useSelector(workbenchGuidesSelector)
   const { loading: loadingTutorials, items: tutorials } = useSelector(workbenchTutorialsSelector)
@@ -53,9 +39,6 @@ const EnablementAreaWrapper = ({ isMinimized, setIsMinimized, scriptEl, setScrip
     dispatch(fetchTutorials())
   }, [])
 
-  // TODO: update it when tutorials repo will be finish
-  const items = useMemo(() => sortItems(guides, tutorials), [guides, tutorials])
-
   const sendEventButtonClickedTelemetry = (data: Record<string, any>) => {
     sendEventTelemetry({
       event: TelemetryEvent.WORKBENCH_ENABLEMENT_AREA_COMMAND_CLICKED,
@@ -106,7 +89,8 @@ const EnablementAreaWrapper = ({ isMinimized, setIsMinimized, scriptEl, setScrip
         grow={!isMinimized}
       >
         <EnablementArea
-          items={items}
+          guides={guides}
+          tutorials={tutorials}
           loading={loadingGuides || loadingTutorials}
           openScript={openScript}
           onOpenInternalPage={onOpenInternalPage}
diff --git a/redisinsight/ui/src/slices/workbench/wb-guides.ts b/redisinsight/ui/src/slices/workbench/wb-guides.ts
@@ -3,7 +3,6 @@ import { ApiEndpoints, MONACO_MANUAL } from 'uiSrc/constants'
 import { getApiErrorMessage, isStatusSuccessful, } from 'uiSrc/utils'
 import { resourcesService } from 'uiSrc/services'
 import { EnablementAreaComponent, IEnablementAreaItem, StateWorkbenchEnablementArea } from 'uiSrc/slices/interfaces'
-import { MOCK_GUIDES_ITEMS } from 'uiSrc/constants'
 
 import { AppDispatch, RootState } from '../store'
 
@@ -34,7 +33,6 @@ const workbenchGuidesSlice = createSlice({
     getWBGuidesSuccess: (state, { payload }) => {
       state.loading = false
       state.items = payload
-      // state.items = MOCK_GUIDES_ITEMS
     },
     getWBGuidesFailure: (state, { payload }) => {
       state.loading = false

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,8 @@ enum ApiEndpoints {`
`51`	`51`	`PLUGINS = 'plugins',`
`52`	`52`	`STATE = 'state',`
`53`	`53`	`CONTENT_CREATE_DATABASE = 'static/content/create-redis.json',`
`54`		`- ENABLEMENT_AREA_PATH = 'static',`
	`54`	`+ GUIDES_PATH = 'static/guides',`
	`55`	`+ TUTORIALS_PATH = 'static/tutorials',`
`55`	`56`	`}`
`56`	`57`
`57`	`58`	`export const DEFAULT_SEARCH_MATCH = '*'`
Original file line number	Diff line number	Diff line change
`@@ -16,13 +16,14 @@ export interface Props {`
`16`	`16`	`iconPosition?: 'left' \| 'right';`
`17`	`17`	`toolTip?: string;`
`18`	`18`	`style?: any;`
	`19`	`+ sourcePath: string;`
`19`	`20`	`}`
`20`	`21`	`const InternalLink = (props: Props) => {`
`21`		`- const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, ...rest } = props`
	`22`	`+ const { label, testId, children, path = '', size = 's', iconType, iconPosition = 'left', toolTip, sourcePath, ...rest } = props`
`22`	`23`	`const { openPage } = useContext(EnablementAreaContext)`
`23`	`24`	`const handleOpenPage = () => {`
`24`	`25`	`if (path) {`
`25`		`- openPage({ path, label })`
	`26`	`+ openPage({ path: sourcePath + path, label })`
`26`	`27`	`}`
`27`	`28`	`}`
`28`	`29`
Original file line number	Diff line number	Diff line change
`@@ -35,8 +35,8 @@ export const getFileInfo = (path: string): IFileInfo => {`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`		`-const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench\|guides)\//`
`39`		`-const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench\|guides)\/?$/`
	`38`	`+const EA_STATIC_PATH_REGEX = /^\/?static\/(workbench\|guides\|tutorials)\//`
	`39`	`+const EA_STATIC_ROOT_PATH = /^\/?static\/(workbench\|guides\|tutorials)\/?$/`
`40`	`40`
`41`	`41`	`export const getPagesInsideGroup = (`
`42`	`42`	`structure: Record<string, IEnablementAreaItem>,`