rewrite relative image paths

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

@@ -9,8 +9,8 @@ import { PLUGIN } from '../../common/constants';
 import { API_ROOT } from '../../common/routes';
 import { patterns } from '../routes';
 import { useCore } from '.';
+import { removeRelativePath } from '../utils/remove_relative_path';
 import { DetailViewPanelName } from '..';
-
 // TODO: get this from server/packages/handlers.ts (move elsewhere?)
 // seems like part of the name@version change
 interface DetailParams {
@@ -33,6 +33,10 @@ export function useLinks() {
   return {
     toAssets: (path: string) => addBasePath(`/plugins/${PLUGIN.ID}/assets/${path}`),
     toImage: (path: string) => addBasePath(`${API_ROOT}${path}`),
+    toRelativeImage: ({ path, pkg }: { path: string; pkg: string }) => {
+      const imagePath = removeRelativePath(path);
+      return addBasePath(`${API_ROOT}/package/${pkg}/${imagePath}`);
+    },
     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

@@ -11,9 +11,10 @@ import {
   EuiTableRow,
   EuiTableRowCell,
   EuiLink,
+  EuiImage,
 } from '@elastic/eui';
 import React from 'react';
-// import { useLinks } from '../../hooks';
+import { useLinks } from '../../hooks';
 
 /** prevents links to the new pages from accessing `window.opener` */
 const REL_NOOPENER = 'noopener';
@@ -24,14 +25,24 @@ 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 WrappedEuiImage = ({
+  alt,
+  src,
+  title,
+  packageName,
+  version,
+}: {
+  alt: string;
+  src: string;
+  title: string;
+  packageName: string;
+  version: string;
+}) => {
+  const { toRelativeImage } = useLinks();
+  const pkg = `${packageName}-${version}`;
+  const fullSrc = toRelativeImage({ pkg, path: src });
+  return <EuiImage url={fullSrc} alt={alt} size="original" caption={title} />;
+};
 
 export const markdownRenderers = {
   root: ({ children }: { children: React.ReactNode[] }) => (
@@ -65,8 +76,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

@@ -10,10 +10,12 @@ 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>
+      <EuiText>
+        {readme && <Readme readmePath={readme} packageName={name} version={version} />}
+      </EuiText>
       <EuiSpacer size="xl" />
       {screenshots && <Screenshots images={screenshots} />}
     </Fragment>

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

@@ -7,9 +7,17 @@ import React, { useEffect, useState, Fragment } from 'react';
 import { EuiLoadingContent, EuiText } from '@elastic/eui';
 import ReactMarkdown from 'react-markdown';
 import { getFileByPath } from '../../data';
-import { markdownRenderers } from './markdown_renderers';
+import { markdownRenderers, WrappedEuiImage } from './markdown_renderers';
 
-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);
 
   useEffect(() => {
@@ -20,9 +28,17 @@ 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 ? (
+        // pass down package name and version props to the image renderer to create image path
+        <ReactMarkdown
+          renderers={{
+            image: ({ ...props }) => (
+              <WrappedEuiImage {...props} packageName={packageName} version={version} />
+            ),
+            ...markdownRenderers,
+          }}
+          source={markdown}
+        />
       ) : (
         <EuiText>
           {/* simulates a long page of text loading */}

x-pack/legacy/plugins/integrations_manager/public/utils/remove_relative_path.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const removeRelativePath = (relativePath: string): string | null => {
+  const path = /(\.*\/)*(.*)/.exec(relativePath);
+  if (path) {
+    return path[2];
+  }
+  return null;
+};