Merge pull request #1936 from RedisInsight/fe/feature/RI-4318-tutorials_images

#RI-4318 tutorials images

Author: arthosofteq

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

@@ -64,7 +64,7 @@ const LazyInternalPage = ({ onClose, title, path, sourcePath, manifest, manifest
       const { data, status } = await fetchService.get<string>(path)
       if (isStatusSuccessful(status)) {
         dispatch(setWorkbenchEASearch(search))
-        const contentData = await formatter.format(data, { history })
+        const contentData = await formatter.format({ data, path }, { history })
         setPageData((prevState) => ({ ...prevState, content: contentData }))
         setLoading(false)
       }

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

@@ -11,13 +11,14 @@ import { remarkRedisCode } from '../transform/remarkRedisCode'
 import { remarkImage } from '../transform/remarkImage'
 
 class MarkdownToJsxString implements IFormatter {
-  format(data: any, config?: IFormatterConfig): Promise<string> {
+  format(input: any, config?: IFormatterConfig): Promise<string> {
+    const { data, path } = input
     return new Promise((resolve, reject) => {
       unified()
         .use(remarkParse)
         .use(remarkGfm) // support GitHub Flavored Markdown
         .use(remarkRedisCode) // Add custom component for Redis code block
-        .use(remarkImage, config ? { history: config.history } : undefined) // Add custom component for Redis code block
+        .use(remarkImage, path) // Add custom component for Redis code block
         .use(remarkRehype, { allowDangerousHtml: true }) // Pass raw HTML strings through.
         .use(rehypeLinks, config ? { history: config.history } : undefined) // Customise links
         .use(MarkdownToJsxString.rehypeWrapSymbols) // Wrap special symbols inside curly braces for JSX parse

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

@@ -0,0 +1,43 @@
+import { visit } from 'unist-util-visit'
+import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService'
+import { remarkImage } from '../transform/remarkImage'
+
+jest.mock('unist-util-visit')
+const TUTORIAL_PATH = 'static/custom-tutorials/tutorial-id'
+const testCases = [
+  {
+    url: '../../../_images/relative.png',
+    path: `${TUTORIAL_PATH}/lvl1/lvl2/lvl3/intro.md`,
+    result: `${RESOURCES_BASE_URL}${TUTORIAL_PATH}/_images/relative.png`,
+  },
+  {
+    url: '/../../../_images/relative.png', // NOTE: will not work in real. There is no sense to even support absolute paths
+    path: `${TUTORIAL_PATH}/lvl1/lvl2/lvl3/intro.md`,
+    result: `${RESOURCES_BASE_URL}_images/relative.png`,
+  },
+  {
+    url: 'https://somesite.test/image.png',
+    path: `${TUTORIAL_PATH}/lvl1/lvl2/lvl3/intro.md`,
+    result: 'https://somesite.test/image.png',
+  }
+]
+describe('remarkImage', () => {
+  testCases.forEach((tc) => {
+    it(`should return ${tc.result} for url:${tc.url}, path: ${tc.path} `, () => {
+      const node = {
+        url: tc.url,
+      };
+
+      // mock implementation
+      (visit as jest.Mock)
+        .mockImplementation((_tree: any, _name: string, callback: (node: any) => void) => { callback(node) })
+
+      const remark = remarkImage(tc.path)
+      remark({} as Node)
+      expect(node).toEqual({
+        ...node,
+        url: tc.result,
+      })
+    })
+  })
+})

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

@@ -1,26 +1,11 @@
 import { visit } from 'unist-util-visit'
-import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
 import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService'
-import { ApiEndpoints } from 'uiSrc/constants'
-import { IFormatterConfig } from './formatter/formatter.interfaces'
 
-const getSourcelPath = (search?: string) => {
-  switch (true) {
-    case search?.indexOf(ApiEndpoints.GUIDES_PATH) !== -1:
-      return 'static/guides/'
-    case search?.indexOf(ApiEndpoints.TUTORIALS_PATH) !== -1:
-      return 'static/tutorials/'
-    default:
-      return ''
-  }
-}
-
-const updateUrl = (url: string) => url.replace(/^\//, '')
-
-export const remarkImage = (config?: IFormatterConfig): (tree: Node) => void => (tree: any) => {
-  const sourcePath = getSourcelPath(config?.history?.location?.search)
+export const remarkImage = (path: string): (tree: Node) => void => (tree: any) => {
   // Find img node in syntax tree
   visit(tree, 'image', (node) => {
-    node.url = IS_ABSOLUTE_PATH.test(node.url || '') ? node.url : `${RESOURCES_BASE_URL}${sourcePath}${updateUrl(node.url)}`
+    const pathURL = new URL(path, RESOURCES_BASE_URL)
+    const url = new URL(node.url, pathURL)
+    node.url = url.toString()
   })
 }