From 48f82a7c8b3ca652d5ec12d8850cd612016e780e Mon Sep 17 00:00:00 2001
From: Corey Robertson <corey.robertson@elastic.co>
Date: Tue, 4 Feb 2020 16:41:02 -0500
Subject: [PATCH] [Canvas] Use unique Id for Canvas Embeddables (#56783)

* Use uniqueID for embeddable registry

* Adds type to renderer
---
 .../renderers/embeddable/embeddable.tsx                | 10 ++++++----
 .../components/element_content/element_content.js      | 10 +++++++++-
 .../public/components/element_wrapper/lib/handlers.js  |  2 ++
 .../shareable_runtime/components/rendered_element.tsx  |  1 +
 x-pack/legacy/plugins/canvas/types/renderers.ts        |  2 ++
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
index 8642ebd901bb4d..c8cc1fe389619b 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx
@@ -70,7 +70,9 @@ const embeddable = () => ({
     { input, embeddableType }: EmbeddableExpression<EmbeddableInput>,
     handlers: RendererHandlers
   ) => {
-    if (!embeddablesRegistry[input.id]) {
+    const uniqueId = handlers.getElementId();
+
+    if (!embeddablesRegistry[uniqueId]) {
       const factory = Array.from(start.getEmbeddableFactories()).find(
         embeddableFactory => embeddableFactory.type === embeddableType
       ) as EmbeddableFactory<EmbeddableInput>;
@@ -82,7 +84,7 @@ const embeddable = () => ({
 
       const embeddableObject = await factory.createFromSavedObject(input.id, input);
 
-      embeddablesRegistry[input.id] = embeddableObject;
+      embeddablesRegistry[uniqueId] = embeddableObject;
       ReactDOM.unmountComponentAtNode(domNode);
 
       const subscription = embeddableObject.getInput$().subscribe(function(updatedInput) {
@@ -100,12 +102,12 @@ const embeddable = () => ({
         subscription.unsubscribe();
         handlers.onEmbeddableDestroyed();
 
-        delete embeddablesRegistry[input.id];
+        delete embeddablesRegistry[uniqueId];
 
         return ReactDOM.unmountComponentAtNode(domNode);
       });
     } else {
-      embeddablesRegistry[input.id].updateInput(input);
+      embeddablesRegistry[uniqueId].updateInput(input);
     }
   },
 });
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_content/element_content.js b/x-pack/legacy/plugins/canvas/public/components/element_content/element_content.js
index 1926fb4aaa5eb8..114a457d167e77 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_content/element_content.js
+++ b/x-pack/legacy/plugins/canvas/public/components/element_content/element_content.js
@@ -54,6 +54,7 @@ export const ElementContent = compose(
     onComplete,
     onEmbeddableInputChange,
     onEmbeddableDestroyed,
+    getElementId,
   } = handlers;
 
   return Style.it(
@@ -76,7 +77,14 @@ export const ElementContent = compose(
           config={renderable.value}
           css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
           size={size} // Size is only passed for the purpose of triggering the resize event, it isn't really used otherwise
-          handlers={{ getFilter, setFilter, done, onEmbeddableInputChange, onEmbeddableDestroyed }}
+          handlers={{
+            getFilter,
+            setFilter,
+            done,
+            onEmbeddableInputChange,
+            onEmbeddableDestroyed,
+            getElementId,
+          }}
         />
       </ElementShareContainer>
     </div>
diff --git a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
index e93cea597901f9..d71c5ead2c8021 100644
--- a/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
+++ b/x-pack/legacy/plugins/canvas/public/components/element_wrapper/lib/handlers.js
@@ -36,6 +36,8 @@ export const createHandlers = dispatch => {
         completeFn = fn;
       },
 
+      getElementId: () => element.id,
+
       onEmbeddableInputChange(embeddableExpression) {
         dispatch(updateEmbeddableExpression({ elementId: element.id, embeddableExpression }));
       },
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/rendered_element.tsx b/x-pack/legacy/plugins/canvas/shareable_runtime/components/rendered_element.tsx
index 317a3417841b8b..c4a009db3a376c 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/rendered_element.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/rendered_element.tsx
@@ -67,6 +67,7 @@ export class RenderedElementComponent extends PureComponent<Props> {
         done: () => {},
         onDestroy: () => {},
         onResize: () => {},
+        getElementId: () => '',
         setFilter: () => {},
         getFilter: () => '',
         onEmbeddableInputChange: () => {},
diff --git a/x-pack/legacy/plugins/canvas/types/renderers.ts b/x-pack/legacy/plugins/canvas/types/renderers.ts
index af1710e69c2578..2564b045d1cf75 100644
--- a/x-pack/legacy/plugins/canvas/types/renderers.ts
+++ b/x-pack/legacy/plugins/canvas/types/renderers.ts
@@ -9,6 +9,8 @@ type GenericCallback = (callback: () => void) => void;
 export interface RendererHandlers {
   /** Handler to invoke when an element has finished rendering */
   done: () => void;
+  /** Get the id of the element being rendered.  Can be used as a unique ID in a render function */
+  getElementId: () => string;
   /** Handler to invoke when an element is deleted or changes to a different render type */
   onDestroy: GenericCallback;
   /** Handler to invoke when an element's dimensions have changed*/