Merge pull request #2064 from RedisInsight/fe/bugfix/RI-4494

#RI-4494 - fix url parsing for docker builds

Author: rsergeenko

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

@@ -1,9 +1,9 @@
 import { visit } from 'unist-util-visit'
-import { prepareTutorialDataFileUrlFromMd } from 'uiSrc/utils/pathUtil'
+import { getFileUrlFromMd } from 'uiSrc/utils/pathUtil'
 
 export const remarkImage = (path: string): (tree: Node) => void => (tree: any) => {
   // Find img node in syntax tree
   visit(tree, 'image', (node) => {
-    node.url = prepareTutorialDataFileUrlFromMd(node.url, path)
+    node.url = getFileUrlFromMd(node.url, path)
   })
 }

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

@@ -1,5 +1,5 @@
 import { visit } from 'unist-util-visit'
-import { prepareTutorialDataFileUrlFromMd } from 'uiSrc/utils/pathUtil'
+import { getFileUrlFromMd } from 'uiSrc/utils/pathUtil'
 
 export const remarkRedisUpload = (path: string): (tree: Node) => void => (tree: any) => {
   // Find code node in syntax tree
@@ -10,7 +10,7 @@ export const remarkRedisUpload = (path: string): (tree: Node) => void => (tree:
       const value: string = `${lang} ${meta}`
       const [, filePath, label] = value.match(/^redis-upload:\[(.*)] (.*)/i) || []
 
-      const { pathname } = new URL(prepareTutorialDataFileUrlFromMd(filePath, path))
+      const { pathname } = new URL(getFileUrlFromMd(filePath, path))
       const decodedPath = decodeURI(pathname)
 
       if (path && label) {

redisinsight/ui/src/services/resourcesService.ts

@@ -13,6 +13,10 @@ const resourcesService = axios.create({
   baseURL: RESOURCES_BASE_URL,
 })
 
+export const getOriginUrl = () => (IS_ABSOLUTE_PATH.test(RESOURCES_BASE_URL)
+  ? RESOURCES_BASE_URL
+  : (window?.location?.origin || RESOURCES_BASE_URL))
+
 export const getPathToResource = (url: string = ''): string => (IS_ABSOLUTE_PATH.test(url)
   ? url
   : new URL(url, resourcesService.defaults.baseURL).toString())

redisinsight/ui/src/utils/pathUtil.ts

@@ -1,4 +1,4 @@
-import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService'
+import { getOriginUrl } from 'uiSrc/services/resourcesService'
 import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
 
 enum TutorialsPaths {
@@ -7,37 +7,36 @@ enum TutorialsPaths {
   Tutorials = 'tutorials',
 }
 
-export const prepareTutorialDataFileUrlFromMd = (nodeUrl: string, mdPath: string): string => {
-  // process external link
-  if (IS_ABSOLUTE_PATH.test(nodeUrl)) {
-    return nodeUrl
+export const getRootStaticPath = (mdPath: string) => {
+  const paths = mdPath?.split('/') || []
+  const tutorialFolder = paths[1]
+
+  if (tutorialFolder === TutorialsPaths.CustomTutorials) return paths.slice(0, 3).join('/')
+  if (tutorialFolder === TutorialsPaths.Guide || tutorialFolder === TutorialsPaths.Tutorials) {
+    return paths.slice(0, 2).join('/')
   }
 
-  // process absolute path
+  return mdPath
+}
+
+const processAbsolutePath = (nodeUrl: string, mdPath: string) => {
+  // todo: quick fix. find the root cause why path has both '/' and '\'
+  const normalizedMdPath = mdPath.replaceAll('\\', '/')
+  const tutorialRootPath = getRootStaticPath(normalizedMdPath)
+
+  return new URL(tutorialRootPath + nodeUrl, getOriginUrl()).toString()
+}
+
+export const getFileUrlFromMd = (nodeUrl: string, mdPath: string): string => {
+  // process external link
+  if (IS_ABSOLUTE_PATH.test(nodeUrl)) return nodeUrl
+
   if (nodeUrl.startsWith('/') || nodeUrl.startsWith('\\')) {
-    // todo: quick fix. find the root cause why path has both '/' and '\'
-    const normalizedMdPath = mdPath.replaceAll('\\', '/')
-
-    const paths = normalizedMdPath?.split('/') || []
-    let tutorialRootPath
-    switch (paths[1]) {
-      case TutorialsPaths.CustomTutorials:
-        tutorialRootPath = paths.slice(0, 3).join('/')
-        break
-      case TutorialsPaths.Guide:
-      case TutorialsPaths.Tutorials:
-        tutorialRootPath = paths.slice(0, 2).join('/')
-        break
-      default:
-        tutorialRootPath = normalizedMdPath
-        break
-    }
-
-    return new URL(tutorialRootPath + nodeUrl, RESOURCES_BASE_URL).toString()
+    return processAbsolutePath(nodeUrl, mdPath)
   }
 
   // process relative path
-  const pathUrl = new URL(mdPath, RESOURCES_BASE_URL)
+  const pathUrl = new URL(mdPath, getOriginUrl())
   return new URL(nodeUrl, pathUrl).toString()
 }
 

redisinsight/ui/src/utils/tests/pathUtil.spec.ts

@@ -1,5 +1,5 @@
 import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService'
-import { prepareTutorialDataFileUrlFromMd } from '../pathUtil'
+import { getFileUrlFromMd } from '../pathUtil'
 
 jest.mock('unist-util-visit')
 const TUTORIAL_PATH = 'static/custom-tutorials/tutorial-id'
@@ -31,10 +31,10 @@ const testCases = [
     result: 'https://somesite.test/image.png',
   }
 ]
-describe('prepareTutorialDataFileUrlFromMd', () => {
+describe('getFileUrlFromMd', () => {
   testCases.forEach((tc) => {
     it(`should return ${tc.result} for url:${tc.url}, path: ${tc.path} `, () => {
-      const url = prepareTutorialDataFileUrlFromMd(tc.url, tc.path)
+      const url = getFileUrlFromMd(tc.url, tc.path)
       expect(url).toEqual(tc.result)
     })
   })