[Canvas] Use unique Id for Canvas Embeddables (elastic#56783) (elasti…

…c#56801)

* Use uniqueID for embeddable registry

* Adds type to renderer

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);
     }
   },
 });

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>

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 }));
       },

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: () => {},

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*/