[8.14] [Embeddable rebuild] Fix kibana reporting screenshot issue (#1…

…81392) (#181913)

# Backport

This will backport the following commits from `main` to `8.14`:
- [[Embeddable rebuild] Fix kibana reporting screenshot issue
(#181392)](#181392)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Panagiota
Mitsopoulou","email":"panagiota.mitsopoulou@elastic.co"},"sourceCommit":{"committedDate":"2024-04-26T13:31:24Z","message":"[Embeddable
rebuild] Fix kibana reporting screenshot issue (#181392)\n\nFixes
https://github.com/elastic/kibana/issues/181389\r\n\r\nIt turns out that
a [data-shared-item
is\r\nneeded](https://github.com/elastic/kibana/pull/169929/files#r1373148068),\r\notherwise
reporting doesn't work properly. This PR is adding the\r\nrequired
`data-shared-item` to the presentation panel component, and\r\nfixes the
reporting screenshot issue.\r\n\r\n**UPDATE**: Adding `data-shared-item`
to the presentation panel caused\r\nsome test failures. The approach we
followed for now, was to add this\r\nattribute to each migrated
embeddable, the `image` and `swim lane`\r\nembeddables. As part of
this\r\nhttps://github.com//issues/179376, Kibana
presentation\r\nteam will investigate further the proper use of data-*
attributes\r\n\r\n## Before the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 10 41
59\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/cee076a1-b989-4d5f-8462-4021ce9e5e4d\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 10 41
27\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/83677ad1-b1d2-4915-a747-9afe5a1d447a\">\r\n\r\n\r\n##
✔️ Acceptance criteria\r\n- No timeout error should appear in the
generated PDF reports\r\n\r\n## After the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 11 02
32\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/e0452e32-8c1e-4075-b9c9-b1225f9bd852\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 19
54\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/08284774-a4ff-47b0-b496-3570416f0e57\">\r\n\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 07
43\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/95e9adae-cd07-42fe-9dea-cd22b9711155\">\r\n\r\ncc
@Heenawter \r\n@darnautov Can you check the swim lane embeddable with
real data and see\r\nif reporting works properly with the change I
added?\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Hannah Mudge
<hannah.wright@elastic.co>","sha":"f1e02f642247620b90770591297efccb957eee1e","branchLabelMapping":{"^v8.15.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","Feature:Embeddables","Team:obs-ux-management","project:embeddableRebuild","v8.14.0","v8.15.0"],"number":181392,"url":"https://github.com/elastic/kibana/pull/181392","mergeCommit":{"message":"[Embeddable
rebuild] Fix kibana reporting screenshot issue (#181392)\n\nFixes
https://github.com/elastic/kibana/issues/181389\r\n\r\nIt turns out that
a [data-shared-item
is\r\nneeded](https://github.com/elastic/kibana/pull/169929/files#r1373148068),\r\notherwise
reporting doesn't work properly. This PR is adding the\r\nrequired
`data-shared-item` to the presentation panel component, and\r\nfixes the
reporting screenshot issue.\r\n\r\n**UPDATE**: Adding `data-shared-item`
to the presentation panel caused\r\nsome test failures. The approach we
followed for now, was to add this\r\nattribute to each migrated
embeddable, the `image` and `swim lane`\r\nembeddables. As part of
this\r\nhttps://github.com//issues/179376, Kibana
presentation\r\nteam will investigate further the proper use of data-*
attributes\r\n\r\n## Before the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 10 41
59\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/cee076a1-b989-4d5f-8462-4021ce9e5e4d\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 10 41
27\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/83677ad1-b1d2-4915-a747-9afe5a1d447a\">\r\n\r\n\r\n##
✔️ Acceptance criteria\r\n- No timeout error should appear in the
generated PDF reports\r\n\r\n## After the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 11 02
32\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/e0452e32-8c1e-4075-b9c9-b1225f9bd852\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 19
54\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/08284774-a4ff-47b0-b496-3570416f0e57\">\r\n\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 07
43\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/95e9adae-cd07-42fe-9dea-cd22b9711155\">\r\n\r\ncc
@Heenawter \r\n@darnautov Can you check the swim lane embeddable with
real data and see\r\nif reporting works properly with the change I
added?\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Hannah Mudge
<hannah.wright@elastic.co>","sha":"f1e02f642247620b90770591297efccb957eee1e"}},"sourceBranch":"main","suggestedTargetBranches":["8.14"],"targetPullRequestStates":[{"branch":"8.14","label":"v8.14.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.15.0","labelRegex":"^v8.15.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/181392","number":181392,"mergeCommit":{"message":"[Embeddable
rebuild] Fix kibana reporting screenshot issue (#181392)\n\nFixes
https://github.com/elastic/kibana/issues/181389\r\n\r\nIt turns out that
a [data-shared-item
is\r\nneeded](https://github.com/elastic/kibana/pull/169929/files#r1373148068),\r\notherwise
reporting doesn't work properly. This PR is adding the\r\nrequired
`data-shared-item` to the presentation panel component, and\r\nfixes the
reporting screenshot issue.\r\n\r\n**UPDATE**: Adding `data-shared-item`
to the presentation panel caused\r\nsome test failures. The approach we
followed for now, was to add this\r\nattribute to each migrated
embeddable, the `image` and `swim lane`\r\nembeddables. As part of
this\r\nhttps://github.com//issues/179376, Kibana
presentation\r\nteam will investigate further the proper use of data-*
attributes\r\n\r\n## Before the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 10 41
59\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/cee076a1-b989-4d5f-8462-4021ce9e5e4d\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 10 41
27\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/83677ad1-b1d2-4915-a747-9afe5a1d447a\">\r\n\r\n\r\n##
✔️ Acceptance criteria\r\n- No timeout error should appear in the
generated PDF reports\r\n\r\n## After the fix\r\n<img width=\"600\"
alt=\"Screenshot 2024-04-23 at 11 02
32\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/e0452e32-8c1e-4075-b9c9-b1225f9bd852\">\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 19
54\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/08284774-a4ff-47b0-b496-3570416f0e57\">\r\n\r\n\r\n<img
width=\"600\" alt=\"Screenshot 2024-04-23 at 11 07
43\"\r\nsrc=\"https://github.com/elastic/kibana/assets/2852703/95e9adae-cd07-42fe-9dea-cd22b9711155\">\r\n\r\ncc
@Heenawter \r\n@darnautov Can you check the swim lane embeddable with
real data and see\r\nif reporting works properly with the change I
added?\r\n\r\n---------\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Hannah Mudge
<hannah.wright@elastic.co>","sha":"f1e02f642247620b90770591297efccb957eee1e"}}]}]
BACKPORT-->

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/image_embeddable/public/components/image_embeddable.tsx

@@ -63,7 +63,9 @@ export const ImageEmbeddable = ({ api, filesClient }: ImageEmbeddableProps) => {
       }}
     >
       <ImageViewer
-        data-rendering-count={1} // TODO: Remove this as part of https://github.com/elastic/kibana/issues/179376
+        // TODO: Remove data-shared-item and data-rendering-count as part of https://github.com/elastic/kibana/issues/179376
+        data-shared-item={''}
+        data-rendering-count={1}
         className="imageEmbeddableImage"
         imageConfig={imageConfig}
         isScreenshotMode={screenshotModeService?.isScreenshotMode()}

src/plugins/image_embeddable/public/components/image_viewer/image_viewer.tsx

@@ -50,6 +50,7 @@ export function ImageViewer({
   className,
   containerCSS,
   isScreenshotMode,
+  ...rest
 }: ImageViewerProps) {
   const { getImageDownloadHref, validateUrl } = useImageViewerContext();
 
@@ -68,6 +69,7 @@ export function ImageViewer({
 
   return (
     <div
+      {...rest}
       css={[
         css`
           position: relative;

x-pack/plugins/ml/public/embeddables/anomaly_swimlane/anomaly_swimlane_embeddable_factory.tsx

@@ -288,6 +288,7 @@ export const getAnomalySwimLaneEmbeddableFactory = (
                       padding: 8px;
                     `}
                     data-test-subj="mlAnomalySwimlaneEmbeddableWrapper"
+                    data-shared-item="" // TODO: Remove data-shared-item as part of https://github.com/elastic/kibana/issues/179376
                   >
                     <SwimlaneContainer
                       id={uuid}