#RI-2450-add tutorials in workbench, enablement-area -> guides

Author: AmirAllayarovSofteq

redisinsight/ui/src/constants/api.ts

@@ -45,10 +45,13 @@ enum ApiEndpoints {
   WORKBENCH_COMMAND_EXECUTIONS = 'workbench/command-executions',
 
   REDIS_COMMANDS = 'commands',
-  ENABLEMENT_AREA = 'static/workbench/enablement-area.json',
+  GUIDES = 'static/workbench/guides/guides.json',
+  // TODO double check it, when tutorials will be completed
+  TUTORIALS = 'static/workbench/tutorials/tutorials.json',
   PLUGINS = 'plugins',
   STATE = 'state',
   CONTENT_CREATE_DATABASE = 'static/content/create-redis.json',
+  ENABLEMENT_AREA_PATH = 'static/workbench/guides',
 }
 
 export const DEFAULT_SEARCH_MATCH = '*'

redisinsight/ui/src/constants/index.ts

@@ -16,7 +16,7 @@ export * from './workbenchResults'
 export * from './monitorEvents'
 export * from './socketEvents'
 export * from './mocks/mock-redis-commands'
-export * from './mocks/mock-enablement-area'
+export * from './mocks/mock-guides'
 export * from './socketErrors'
 export * from './browser'
 export { ApiEndpoints, BrowserStorageItem, ApiStatusCode, apiErrors }

redisinsight/ui/src/constants/mocks/mock-guides.ts

@@ -0,0 +1,59 @@
+import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
+
+export const MOCK_GUIDES_ITEMS: Record<string, IEnablementAreaItem> = {
+  'quick-guides': {
+    type: EnablementAreaComponent.Group,
+    id: 'quick-guides',
+    label: 'Quick Guides',
+    children: {
+      'document-capabilities': {
+        type: EnablementAreaComponent.InternalLink,
+        id: 'document-capabilities',
+        label: 'Document Capabilities',
+        args: {
+          path: '/static/workbench/quick-guides/document/learn-more.md',
+        },
+      },
+      'working-with-json': {
+        type: EnablementAreaComponent.InternalLink,
+        id: 'working-with-json',
+        label: 'Working with JSON',
+        args: {
+          path: 'quick-guides/working-with-json.html',
+        },
+      },
+      'working-with-hash': {
+        type: EnablementAreaComponent.InternalLink,
+        id: 'working-with-hash',
+        label: 'Working with HASH',
+        args: {
+          path: 'quick-guides/working-with-hash.html',
+        },
+      }
+    }
+  },
+  'internal-page': {
+    type: EnablementAreaComponent.InternalLink,
+    id: 'internal-page',
+    label: 'Internal Page',
+    args: {
+      path: 'quick-guides/document-capabilities.html'
+    },
+  },
+  'second-internal-page': {
+    type: EnablementAreaComponent.InternalLink,
+    id: 'second-internal-page',
+    label: 'Second Internal Page',
+    args: {
+      path: 'quick-guides/document-capabilities.html'
+    },
+  },
+  manual: {
+    type: EnablementAreaComponent.CodeButton,
+    id: 'manual',
+    label: 'Manual',
+    args: {
+      path: '_scripts/manual.txt'
+    },
+  }
+}

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

@@ -1,6 +1,6 @@
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
-export const MOCK_ENABLEMENT_AREA_ITEMS: Record<string, IEnablementAreaItem> = {
+export const MOCK_TUTORIALS_ITEMS: Record<string, IEnablementAreaItem> = {
   'quick-guides': {
     type: EnablementAreaComponent.Group,
     id: 'quick-guides',

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_ENABLEMENT_AREA_ITEMS } from 'uiSrc/constants'
+import { MOCK_GUIDES_ITEMS } from 'uiSrc/constants'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
 import EnablementArea, { Props } from './EnablementArea'
@@ -17,19 +17,19 @@ beforeEach(() => {
   store.clearActions()
 })
 
-jest.mock('uiSrc/slices/workbench/wb-enablement-area', () => {
-  const defaultState = jest.requireActual('uiSrc/slices/workbench/wb-enablement-area').initialState
+jest.mock('uiSrc/slices/workbench/wb-guides', () => {
+  const defaultState = jest.requireActual('uiSrc/slices/workbench/wb-guides').initialState
   return {
-    ...jest.requireActual('uiSrc/slices/workbench/wb-enablement-area'),
-    workbenchEnablementAreaSelector: jest.fn().mockReturnValue({
+    ...jest.requireActual('uiSrc/slices/workbench/wb-guides'),
+    workbenchGuidesSelector: jest.fn().mockReturnValue({
       ...defaultState,
     }),
   }
 })
 
 describe('EnablementArea', () => {
   it('should render', () => {
-    expect(render(<EnablementArea {...instance(mockedProps)} items={MOCK_ENABLEMENT_AREA_ITEMS} />))
+    expect(render(<EnablementArea {...instance(mockedProps)} items={MOCK_GUIDES_ITEMS} />))
       .toBeTruthy()
   })
 
@@ -46,15 +46,15 @@ describe('EnablementArea', () => {
     const { queryByTestId } = render(
       <EnablementArea
         {...instance(mockedProps)}
-        items={MOCK_ENABLEMENT_AREA_ITEMS}
+        items={MOCK_GUIDES_ITEMS}
       />
     )
     const loaderEl = queryByTestId('enablementArea-loader')
     const treeViewEl = queryByTestId('enablementArea-treeView')
 
     expect(loaderEl).not.toBeInTheDocument()
     expect(treeViewEl).toBeInTheDocument()
-    expect(treeViewEl?.childNodes.length).toEqual(Object.values(MOCK_ENABLEMENT_AREA_ITEMS).length)
+    expect(treeViewEl?.childNodes.length).toEqual(Object.values(MOCK_GUIDES_ITEMS).length)
   })
   it('should render Group component', () => {
     const item: IEnablementAreaItem = {

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

@@ -6,6 +6,7 @@ import { EuiListGroup, EuiLoadingContent } from '@elastic/eui'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 import { EnablementAreaProvider, IInternalPage } from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { appContextWorkbenchEA, resetWorkbenchEAGuide } from 'uiSrc/slices/app/context'
+import { ApiEndpoints } from 'uiSrc/constants'
 import {
   CodeButton,
   Group,
@@ -36,22 +37,23 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
   const [internalPage, setInternalPage] = useState<IInternalPage>({ path: '' })
 
   useEffect(() => {
-    const pagePath = new URLSearchParams(search).get('guide')
+    const pagePath = new URLSearchParams(search).get('item')
     if (pagePath) {
       setIsInternalPageVisible(true)
-      setInternalPage({ path: pagePath })
+      setInternalPage({ path: `${ApiEndpoints.ENABLEMENT_AREA_PATH}/${pagePath}` })
+
       return
     }
     if (guideFromContext) {
-      handleOpenInternalPage({ path: guideFromContext })
+      handleOpenInternalPage({ path: `${ApiEndpoints.ENABLEMENT_AREA_PATH}/${guideFromContext}` })
       return
     }
     setIsInternalPageVisible(false)
   }, [search])
 
   const handleOpenInternalPage = (page: IInternalPage) => {
     history.push({
-      search: `?guide=${page.path}`
+      search: `?item=${page.path}`
     })
     onOpenInternalPage(page)
   }
@@ -76,11 +78,15 @@ const EnablementArea = ({ items, openScript, loading, onOpenInternalPage, isCode
         )
       case EnablementAreaComponent.CodeButton:
         return (
-          <div style={{ marginTop: '12px', ...paddingsStyle }}>
-            {args?.path
-              ? <LazyCodeButton label={label} {...args} />
-              : <CodeButton onClick={() => openScript(args?.content || '')} label={label} {...args} />}
-          </div>
+          <>
+            <div style={paddingsStyle} className="divider"><hr /></div>
+            <div style={{ marginTop: '24px', ...paddingsStyle }}>
+              {args?.path
+                ? <LazyCodeButton label={label} {...args} />
+                : <CodeButton onClick={() => openScript(args?.content || '')} label={label} {...args} />}
+            </div>
+          </>
+
         )
       case EnablementAreaComponent.InternalLink:
         return (

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

@@ -17,7 +17,7 @@ const Code = ({ children, ...rest }: Props) => {
   const { setScript, isCodeBtnDisabled } = useContext(EnablementAreaContext)
 
   const loadContent = () => {
-    const pagePath = new URLSearchParams(search).get('guide')
+    const pagePath = new URLSearchParams(search).get('item')
     if (pagePath) {
       const pageInfo = getFileInfo(pagePath)
       setScript(children, `${pageInfo.location}/${pageInfo.name}`, startCase(rest.label))

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

@@ -49,10 +49,7 @@ const Group = (props: Props) => {
       style={{ whiteSpace: 'nowrap', width: 'auto' }}
       className={[withBorder ? 'withBorder' : ''].join(' ')}
     >
-      <>
-        {children}
-        {withBorder && <div style={triggerStyle} className="divider"><hr /></div> }
-      </>
+      {children}
     </EuiAccordion>
   )
 }

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

@@ -5,6 +5,7 @@ import { getApiErrorMessage, isStatusSuccessful } from 'uiSrc/utils'
 import { resourcesService } from 'uiSrc/services'
 import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { getFileInfo } from 'uiSrc/pages/workbench/components/enablement-area/EnablementArea/utils/getFileInfo'
+import { ApiEndpoints } from 'uiSrc/constants'
 
 import CodeButton from '../CodeButton'
 
@@ -22,7 +23,7 @@ const LazyCodeButton = ({ path = '', ...rest }: Props) => {
       setLoading(true)
       setError('')
       try {
-        const { data, status } = await resourcesService.get<string>(path)
+        const { data, status } = await resourcesService.get<string>(`${ApiEndpoints.ENABLEMENT_AREA_PATH}/${path}`)
         if (isStatusSuccessful(status)) {
           setLoading(false)
           const pageInfo = getFileInfo(path)

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

@@ -14,7 +14,7 @@ import {
   setWorkbenchEAGuideScrollTop
 } from 'uiSrc/slices/app/context'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
-import { workbenchEnablementAreaSelector } from 'uiSrc/slices/workbench/wb-enablement-area'
+import { workbenchGuidesSelector } from 'uiSrc/slices/workbench/wb-guides'
 
 import InternalPage from '../InternalPage'
 import { getFileInfo, getPagesInsideGroup, IFileInfo } from '../../utils/getFileInfo'
@@ -35,7 +35,7 @@ export interface Props {
 const LazyInternalPage = ({ onClose, title, path }: Props) => {
   const history = useHistory()
   const { guideScrollTop } = useSelector(appContextWorkbenchEA)
-  const enablementArea = useSelector(workbenchEnablementAreaSelector)
+  const guides = useSelector(workbenchGuidesSelector)
   const [isLoading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string>('')
   const [pageData, setPageData] = useState<IPageData>(DEFAULT_PAGE_DATA)
@@ -46,7 +46,7 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => {
     setLoading(true)
     setError('')
     const pageInfo = getFileInfo(path)
-    const relatedPages = getPagesInsideGroup(enablementArea.items, pageInfo.location)
+    const relatedPages = getPagesInsideGroup(guides.items, pageInfo.location)
     setPageData({ ...DEFAULT_PAGE_DATA, ...pageInfo, relatedPages })
     try {
       const formatter = FormatSelector.selectFor(pageInfo.extension)
@@ -67,11 +67,11 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => {
 
   useEffect(() => {
     (async function () {
-      if (!enablementArea.loading) {
+      if (!guides.loading) {
         await loadContent()
       }
     }())
-  }, [path, enablementArea.loading])
+  }, [path, guides.loading])
 
   const handlePageScroll = (top: number) => {
     dispatch(setWorkbenchEAGuideScrollTop(top))
@@ -84,7 +84,7 @@ const LazyInternalPage = ({ onClose, title, path }: Props) => {
       onClose={onClose}
       title={startCase(title || pageData.name)}
       backTitle={startCase(pageData?.parent)}
-      isLoading={isLoading || enablementArea.loading}
+      isLoading={isLoading || guides.loading}
       content={pageData.content}
       error={error}
       onScroll={handlePageScroll}