[8.13] [Fleet] add max width to markdown img tag (elastic#178937) (el…

…astic#178958)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[Fleet] add max width to markdown img tag
(elastic#178937)](elastic#178937)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Julia
Bardi","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-03-19T11:46:21Z","message":"[Fleet]
add max width to markdown img tag (elastic#178937)\n\n## Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/177749\r\n\r\nFixed weird
formatting for some integrations overview page, where there\r\nwere some
big resolution images part of the readme,
e.g.\r\nhttps://github.com/elastic/integrations/tree/main/packages/cribl\r\n\r\nAdded
a max width on the image tag (took inspiration from the
github\r\nreadme).\r\n\r\nTo verify:\r\n- Go to kibana integrations\r\n-
Enable beta integrations\r\n- Search on Cribl, and click on it to go to
overview page\r\n- Verify that the page is not weirdly wrapped, the
images should be\r\nfully visible\r\n- Same for Amazon Kinesis Data
Firehose integration\r\n\r\nCribl integration:\r\n<img width=\"1785\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/7eeb89d6-d08f-4ce9-bc35-56a7bc5d9bf1\">\r\n\r\nAmazon
Kinesis Data Firehose:\r\n<img width=\"1754\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/cb00d03f-15b1-408b-94c9-16841964f019\">\r\n\r\n<img
width=\"1756\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/2067dc1d-0dcf-45b2-96a7-f2325c3958fd\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"46777187542ffe751d5c819d5cc08543ce6eca32","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Fleet","backport:prev-minor","v8.14.0"],"title":"[Fleet]
add max width to markdown img
tag","number":178937,"url":"https://github.com/elastic/kibana/pull/178937","mergeCommit":{"message":"[Fleet]
add max width to markdown img tag (elastic#178937)\n\n## Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/177749\r\n\r\nFixed weird
formatting for some integrations overview page, where there\r\nwere some
big resolution images part of the readme,
e.g.\r\nhttps://github.com/elastic/integrations/tree/main/packages/cribl\r\n\r\nAdded
a max width on the image tag (took inspiration from the
github\r\nreadme).\r\n\r\nTo verify:\r\n- Go to kibana integrations\r\n-
Enable beta integrations\r\n- Search on Cribl, and click on it to go to
overview page\r\n- Verify that the page is not weirdly wrapped, the
images should be\r\nfully visible\r\n- Same for Amazon Kinesis Data
Firehose integration\r\n\r\nCribl integration:\r\n<img width=\"1785\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/7eeb89d6-d08f-4ce9-bc35-56a7bc5d9bf1\">\r\n\r\nAmazon
Kinesis Data Firehose:\r\n<img width=\"1754\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/cb00d03f-15b1-408b-94c9-16841964f019\">\r\n\r\n<img
width=\"1756\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/2067dc1d-0dcf-45b2-96a7-f2325c3958fd\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"46777187542ffe751d5c819d5cc08543ce6eca32"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/178937","number":178937,"mergeCommit":{"message":"[Fleet]
add max width to markdown img tag (elastic#178937)\n\n## Summary\r\n\r\nFix
https://github.com/elastic/kibana/issues/177749\r\n\r\nFixed weird
formatting for some integrations overview page, where there\r\nwere some
big resolution images part of the readme,
e.g.\r\nhttps://github.com/elastic/integrations/tree/main/packages/cribl\r\n\r\nAdded
a max width on the image tag (took inspiration from the
github\r\nreadme).\r\n\r\nTo verify:\r\n- Go to kibana integrations\r\n-
Enable beta integrations\r\n- Search on Cribl, and click on it to go to
overview page\r\n- Verify that the page is not weirdly wrapped, the
images should be\r\nfully visible\r\n- Same for Amazon Kinesis Data
Firehose integration\r\n\r\nCribl integration:\r\n<img width=\"1785\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/7eeb89d6-d08f-4ce9-bc35-56a7bc5d9bf1\">\r\n\r\nAmazon
Kinesis Data Firehose:\r\n<img width=\"1754\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/cb00d03f-15b1-408b-94c9-16841964f019\">\r\n\r\n<img
width=\"1756\"
alt=\"image\"\r\nsrc=\"https://github.com/elastic/kibana/assets/90178898/2067dc1d-0dcf-45b2-96a7-f2325c3958fd\">\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"46777187542ffe751d5c819d5cc08543ce6eca32"}}]}]
BACKPORT-->

Co-authored-by: Julia Bardi <[email protected]>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/markdown_renderers.tsx

@@ -111,5 +111,10 @@ export const markdownRenderers = (
         </EuiCodeBlock>
       );
     },
+    img: (
+      props: React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement>
+    ) => {
+      return <img style={{ maxWidth: '100%' }} {...props} alt={props.alt} />;
+    },
   };
 };

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/readme.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { createIntegrationsTestRendererMock } from '../../../../../../../mock';
+
+import { Readme } from './readme';
+
+describe('Readme', () => {
+  function render() {
+    const refs = {
+      current: {
+        set: jest.fn(),
+        get: jest.fn(),
+      },
+    } as any;
+    const testRenderer = createIntegrationsTestRendererMock();
+    return testRenderer.render(
+      <Readme
+        packageName="test"
+        version="1.0.0"
+        markdown="# Test ![Image](../img/image.png)>"
+        refs={refs}
+      />
+    );
+  }
+  it('should render img tag with max width', () => {
+    const result = render();
+
+    const img = result.getByAltText('Image');
+
+    expect(img).toHaveStyle('max-width: 100%');
+    expect(img).toHaveAttribute('src', '/mock/api/fleet/epm/packages/test/1.0.0//img/image.png');
+  });
+});