[EPM] rewrite relative image paths (#49637)

* rewrite relative image paths

* remove EuiImage, use transformImageUri, clean up

x-pack/legacy/plugins/integrations_manager/public/hooks/use_links.tsx

@@ -6,7 +6,7 @@
 
 import { generatePath } from 'react-router-dom';
 import { PLUGIN } from '../../common/constants';
-import { API_ROOT } from '../../common/routes';
+import { getFilePath, getInfoPath } from '../../common/routes';
 import { patterns } from '../routes';
 import { useCore } from '.';
 import { DetailViewPanelName } from '..';
@@ -19,6 +19,9 @@ interface DetailParams {
   panel?: DetailViewPanelName;
 }
 
+const removeRelativePath = (relativePath: string): string =>
+  new URL(relativePath, 'http://example.com').pathname;
+
 function addBasePath(path: string) {
   const { http } = useCore();
   return http.basePath.prepend(path);
@@ -32,7 +35,21 @@ function appRoot(path: string) {
 export function useLinks() {
   return {
     toAssets: (path: string) => addBasePath(`/plugins/${PLUGIN.ID}/assets/${path}`),
-    toImage: (path: string) => addBasePath(`${API_ROOT}${path}`),
+    toImage: (path: string) => addBasePath(getFilePath(path)),
+    toRelativeImage: ({
+      path,
+      packageName,
+      version,
+    }: {
+      path: string;
+      packageName: string;
+      version: string;
+    }) => {
+      const imagePath = removeRelativePath(path);
+      const pkgkey = `${packageName}-${version}`;
+      const filePath = `${getInfoPath(pkgkey)}/${imagePath}`;
+      return addBasePath(filePath);
+    },
     toListView: () => appRoot(patterns.LIST_VIEW),
     toDetailView: ({ name, version, panel }: DetailParams) => {
       // panel is optional, but `generatePath` won't accept `path: undefined`

x-pack/legacy/plugins/integrations_manager/public/screens/detail/markdown_renderers.tsx

@@ -13,7 +13,6 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import React from 'react';
-// import { useLinks } from '../../hooks';
 
 /** prevents links to the new pages from accessing `window.opener` */
 const REL_NOOPENER = 'noopener';
@@ -24,15 +23,6 @@ const REL_NOFOLLOW = 'nofollow';
 /** prevents the browser from sending the current address as referrer via the Referer HTTP header */
 const REL_NOREFERRER = 'noreferrer';
 
-/*
-// skipping images for now
-const WrappedEuiImage = ({alt, src, title}: any) => {
-    const { toImage } = useLinks();
-    const url = toImage(src);
-    return <EuiImage url={url} alt={alt} size="original" caption={title} />
-}
-*/
-
 export const markdownRenderers = {
   root: ({ children }: { children: React.ReactNode[] }) => (
     <EuiText grow={true}>{children}</EuiText>
@@ -65,8 +55,6 @@ export const markdownRenderers = {
         return <h6>{children}</h6>;
     }
   },
-  // image: ({src, alt}: {src: string, alt: string}) => <WrappedEuiImage alt={alt} src={src} />,
-  image: () => null,
   link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
     <EuiLink href={href} target="_blank" rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}>
       {children}

x-pack/legacy/plugins/integrations_manager/public/screens/detail/overview_panel.tsx

@@ -4,16 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { Fragment } from 'react';
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSpacer } from '@elastic/eui';
 import { PackageInfo } from '../../../common/types';
 import { Screenshots } from './screenshots';
 import { Readme } from './readme';
 
 export function OverviewPanel(props: PackageInfo) {
-  const { screenshots, readme } = props;
+  const { screenshots, readme, name, version } = props;
   return (
     <Fragment>
-      <EuiText>{readme && <Readme readmePath={readme} />}</EuiText>
+      {readme && <Readme readmePath={readme} packageName={name} version={version} />}
       <EuiSpacer size="xl" />
       {screenshots && <Screenshots images={screenshots} />}
     </Fragment>

x-pack/legacy/plugins/integrations_manager/public/screens/detail/readme.tsx

@@ -8,10 +8,30 @@ import { EuiLoadingContent, EuiText } from '@elastic/eui';
 import ReactMarkdown from 'react-markdown';
 import { getFileByPath } from '../../data';
 import { markdownRenderers } from './markdown_renderers';
+import { useLinks } from '../../hooks';
 
-export function Readme({ readmePath }: { readmePath: string }) {
+export function Readme({
+  readmePath,
+  packageName,
+  version,
+}: {
+  readmePath: string;
+  packageName: string;
+  version: string;
+}) {
   const [markdown, setMarkdown] = useState<string | undefined>(undefined);
 
+  const handleImageUri = React.useCallback(
+    (uri: string) => {
+      const { toRelativeImage } = useLinks();
+      const isRelative =
+        uri.indexOf('http://') === 0 || uri.indexOf('https://') === 0 ? false : true;
+      const fullUri = isRelative ? toRelativeImage({ packageName, version, path: uri }) : uri;
+      return fullUri;
+    },
+    [packageName, version]
+  );
+
   useEffect(() => {
     getFileByPath(readmePath).then(res => {
       setMarkdown(res);
@@ -20,9 +40,12 @@ export function Readme({ readmePath }: { readmePath: string }) {
 
   return (
     <Fragment>
-      {// checking against undefined because currently some readme paths exist with empty response
-      markdown !== undefined ? (
-        <ReactMarkdown renderers={markdownRenderers} source={markdown} />
+      {markdown !== undefined ? (
+        <ReactMarkdown
+          transformImageUri={handleImageUri}
+          renderers={markdownRenderers}
+          source={markdown}
+        />
       ) : (
         <EuiText>
           {/* simulates a long page of text loading */}