remove EuiImage, use transformImageUri, clean up

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

@@ -6,11 +6,11 @@
 
 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 { 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 {
@@ -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,10 +35,20 @@ function appRoot(path: string) {
 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 }) => {
+    toImage: (path: string) => addBasePath(getFilePath(path)),
+    toRelativeImage: ({
+      path,
+      packageName,
+      version,
+    }: {
+      path: string;
+      packageName: string;
+      version: string;
+    }) => {
       const imagePath = removeRelativePath(path);
-      return addBasePath(`${API_ROOT}/package/${pkg}/${imagePath}`);
+      const pkgkey = `${packageName}-${version}`;
+      const filePath = `${getInfoPath(pkgkey)}/${imagePath}`;
+      return addBasePath(filePath);
     },
     toListView: () => appRoot(patterns.LIST_VIEW),
     toDetailView: ({ name, version, panel }: DetailParams) => {

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

@@ -11,10 +11,8 @@ import {
   EuiTableRow,
   EuiTableRowCell,
   EuiLink,
-  EuiImage,
 } 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';
@@ -25,25 +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';
 
-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[] }) => (
     <EuiText grow={true}>{children}</EuiText>

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

@@ -4,7 +4,7 @@
  * 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';
@@ -13,9 +13,7 @@ export function OverviewPanel(props: PackageInfo) {
   const { screenshots, readme, name, version } = props;
   return (
     <Fragment>
-      <EuiText>
-        {readme && <Readme readmePath={readme} packageName={name} version={version} />}
-      </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

@@ -7,7 +7,8 @@ import React, { useEffect, useState, Fragment } from 'react';
 import { EuiLoadingContent, EuiText } from '@elastic/eui';
 import ReactMarkdown from 'react-markdown';
 import { getFileByPath } from '../../data';
-import { markdownRenderers, WrappedEuiImage } from './markdown_renderers';
+import { markdownRenderers } from './markdown_renderers';
+import { useLinks } from '../../hooks';
 
 export function Readme({
   readmePath,
@@ -20,6 +21,17 @@ export function Readme({
 }) {
   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);
@@ -29,14 +41,9 @@ export function Readme({
   return (
     <Fragment>
       {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,
-          }}
+          transformImageUri={handleImageUri}
+          renderers={markdownRenderers}
           source={markdown}
         />
       ) : (