@atlaskit/editor-plugin-card 0.3.4 → 0.3.6

package/dist/es2019/{pm-plugins/analytics → analytics}/events-from-tr.js

@@ -3,28 +3,24 @@ import { ACTION } from '@atlaskit/editor-common/analytics';
 import { getLinkMetadataFromTransaction } from '@atlaskit/editor-common/card';
 import { isLinkMark, pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { AddMarkStep, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { pluginKey } from '../plugin-key';
-import { getPluginState } from '../util/state';
-import { appearanceForLink, areSameLinks, findLinksAtPositions, getLinkNodeContext, getLinkUrl, isLink, linkObjectFromNode } from './utils';
-const findLinksInNodeRange = (doc, schema, from, to) => {
-  const links = [];
-  doc.nodesBetween(from, to, (node, pos) => {
-    if (isLink(schema, node)) {
-      const entireLinkInRange = pos >= from && pos + node.nodeSize <= to;
-      if (entireLinkInRange) {
-        const link = linkObjectFromNode(doc, schema, node, pos);
-        if (link) {
-          links.push(link);
-        }
-      }
-    }
-  });
-  return links;
-};
-export const findChangedLinks = (tr, state) => {
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { getPluginState } from '../pm-plugins/util/state';
+import { EVENT } from './types';
+import { appearanceForLink, areSameNodes, findAtPositions, findInNodeRange, getNodeContext, getNodeSubject } from './utils';
+
+/**
+ * Find the links, smartLinks, datasources that were changed in a transaction
+ */
+export const findChanged = (tr, state) => {
   const schema = tr.doc.type.schema;
   const removed = [];
   const inserted = [];
+  /**
+   * Ideally we have the "before" and "after" states of the "entity"
+   * being updated, but if the update is via a "queue for upgrade"
+   * then we no longer have access to the "before" state, because the "before"
+   * state was replaced with a blue link to be upgraded
+   */
   const updated = [];
   const queuedForUpgrade = isTransactionQueuedForUpgrade(tr);
   const isResolveReplace = isTransactionResolveReplace(tr);
@@ -51,26 +47,30 @@ export const findChangedLinks = (tr, state) => {
     if (step instanceof AddMarkStep) {
       const addMarkStep = step;
       if (isLinkMark(addMarkStep.mark, schema)) {
-        /**
-         * For url text pasted on plain text
-         */
-        insertedInStep.push({
-          type: 'mark',
-          pos: addMarkStep.from,
-          mark: addMarkStep.mark,
-          nodeContext: getLinkNodeContext(after, addMarkStep.from)
-        });
+        const node = after.nodeAt(addMarkStep.from);
+        if (node) {
+          /**
+           * For url text pasted on plain text
+           */
+          insertedInStep.push({
+            pos: addMarkStep.from,
+            node,
+            nodeContext: getNodeContext(after, addMarkStep.from)
+          });
+        }
       }
     }
     if (step instanceof RemoveMarkStep) {
       const removeMarkStep = step;
       if (isLinkMark(removeMarkStep.mark, schema)) {
-        removedInStep.push({
-          type: 'mark',
-          pos: removeMarkStep.from,
-          mark: removeMarkStep.mark,
-          nodeContext: getLinkNodeContext(before, removeMarkStep.from)
-        });
+        const node = before.nodeAt(removeMarkStep.from);
+        if (node) {
+          removedInStep.push({
+            pos: removeMarkStep.from,
+            node,
+            nodeContext: getNodeContext(before, removeMarkStep.from)
+          });
+        }
       }
     }
     stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
@@ -81,13 +81,13 @@ export const findChangedLinks = (tr, state) => {
       const insertedInRange = [];
 
       // Removed
-      removedInRange.push(...findLinksInNodeRange(before, schema, oldStart, oldEnd));
+      removedInRange.push(...findInNodeRange(before, oldStart, oldEnd, node => !!getNodeSubject(node)));
       // Inserted
-      insertedInRange.push(...findLinksInNodeRange(after, schema, newStart, newEnd));
+      insertedInRange.push(...findInNodeRange(after, newStart, newEnd, node => !!getNodeSubject(node)));
       removedInStep.push(...removedInRange);
       insertedInStep.push(...insertedInRange);
     });
-    const omitQueuedLinks = links => {
+    const omitRequestsForUpgrade = links => {
       if (!queuedForUpgrade) {
         return links;
       }
@@ -107,7 +107,7 @@ export const findChangedLinks = (tr, state) => {
     if (!isResolveReplace) {
       removed.push(...removedInStep);
     }
-    inserted.push(...omitQueuedLinks(insertedInStep));
+    inserted.push(...omitRequestsForUpgrade(insertedInStep));
   }
 
   /**
@@ -117,7 +117,7 @@ export const findChangedLinks = (tr, state) => {
    */
   if (inserted.length === 0 && isResolveReplace) {
     const positions = getResolvePositions(tr, state);
-    inserted.push(...findLinksAtPositions(tr, positions));
+    inserted.push(...findAtPositions(tr, positions));
   }
   if (!isUpdate) {
     const {
@@ -127,7 +127,7 @@ export const findChangedLinks = (tr, state) => {
      * If there is no identifiable input method, and the links inserted and removed appear to be the same,
      * then this transaction likely is not intended to be consided to be the insertion and removal of links
      */
-    if (!inputMethod && areSameLinks(removed, inserted)) {
+    if (!inputMethod && areSameNodes(removed, inserted)) {
       return {
         removed: [],
         inserted: [],
@@ -275,18 +275,11 @@ export function eventsFromTransaction(tr, state) {
       inputMethod,
       sourceEvent
     } = getLinkMetadataFromTransaction(tr);
-    const contextualData = {
-      action,
-      inputMethod,
-      sourceEvent,
-      isUndo,
-      isRedo
-    };
     const {
       removed,
       inserted,
       updated
-    } = findChangedLinks(tr, state);
+    } = findChanged(tr, state);
     const MAX_LINK_EVENTS = 50;
     if ([removed, inserted, updated].some(arr => arr.length > MAX_LINK_EVENTS)) {
       return [];
@@ -295,44 +288,61 @@ export function eventsFromTransaction(tr, state) {
       var _update$previous$disp;
       const update = updated[i];
       const {
-        inserted: link
+        inserted
       } = update;
-      const url = getLinkUrl(link);
-      const display = appearanceForLink(link);
-      const previousDisplay = 'removed' in update ? appearanceForLink(update.removed) : (_update$previous$disp = update.previous.display) !== null && _update$previous$disp !== void 0 ? _update$previous$disp : 'unknown';
-      if (url) {
+      const {
+        node,
+        nodeContext
+      } = inserted;
+      const subject = getNodeSubject(node);
+
+      /**
+       * Not great, wish we had the previous node but we never stored it
+       */
+      const previousDisplay = 'removed' in update ? appearanceForLink(update.removed.node) : (_update$previous$disp = update.previous.display) !== null && _update$previous$disp !== void 0 ? _update$previous$disp : 'unknown';
+      if (subject) {
         events.push({
-          type: 'updated',
+          event: EVENT.UPDATED,
+          subject,
           data: {
-            ...contextualData,
-            url,
-            display,
-            previousDisplay,
-            nodeContext: link.nodeContext
+            node,
+            nodeContext,
+            action,
+            inputMethod,
+            sourceEvent,
+            isUndo,
+            isRedo,
+            previousDisplay
           }
         });
       }
     }
-    const pushEvents = (links, type) => {
-      for (let i = 0; i < links.length; i++) {
-        const link = links[i];
-        const url = getLinkUrl(link);
-        const display = appearanceForLink(link);
-        if (url) {
+    const pushEvents = (entities, event) => {
+      for (let i = 0; i < entities.length; i++) {
+        const {
+          node,
+          nodeContext
+        } = entities[i];
+        const subject = getNodeSubject(node);
+        if (subject) {
           events.push({
-            type,
+            event,
+            subject,
             data: {
-              ...contextualData,
-              url,
-              display,
-              nodeContext: link.nodeContext
+              node,
+              nodeContext,
+              action,
+              inputMethod,
+              sourceEvent,
+              isUndo,
+              isRedo
             }
           });
         }
       }
     };
-    pushEvents(removed, 'deleted');
-    pushEvents(inserted, 'created');
+    pushEvents(removed, EVENT.DELETED);
+    pushEvents(inserted, EVENT.CREATED);
     return events;
   } catch (err) {
     return events;

package/dist/es2019/analytics/index.js

@@ -0,0 +1,2 @@
+export { createEventsQueue } from './create-events-queue';
+export { eventsFromTransaction } from './events-from-tr';

package/dist/es2019/analytics/types.js

@@ -0,0 +1,17 @@
+export let EVENT = /*#__PURE__*/function (EVENT) {
+  EVENT["CREATED"] = "created";
+  EVENT["UPDATED"] = "updated";
+  EVENT["DELETED"] = "deleted";
+  return EVENT;
+}({});
+export let EVENT_SUBJECT = /*#__PURE__*/function (EVENT_SUBJECT) {
+  EVENT_SUBJECT["LINK"] = "link";
+  EVENT_SUBJECT["DATASOURCE"] = "datasource";
+  return EVENT_SUBJECT;
+}({});
+
+/**
+ * These are not GASv3 events
+ * But they share a similar in shape so that GASv3
+ * events can be derived from them / think of them in the same way
+ */

package/dist/es2019/analytics/utils.js

@@ -0,0 +1,118 @@
+import { appearanceForNodeType } from '../utils';
+import { EVENT_SUBJECT } from './types';
+export function isDatasourceNode(node) {
+  return 'datasource' in node.attrs && !!node.attrs.datasource;
+}
+
+/**
+ * Determine if a node is considered to be a link
+ */
+export const isLinkNode = node => {
+  if (isDatasourceNode(node)) {
+    return false;
+  }
+  if (!!appearanceForNodeType(node.type)) {
+    return true;
+  }
+  return hasLinkMark(node);
+};
+export function getNodeSubject(node) {
+  if (isDatasourceNode(node)) {
+    return EVENT_SUBJECT.DATASOURCE;
+  }
+  if (isLinkNode(node)) {
+    return EVENT_SUBJECT.LINK;
+  }
+  return null;
+}
+
+/**
+ * Analytics appearance for link object
+ */
+export function appearanceForLink(node) {
+  const appearance = appearanceForNodeType(node.type);
+  if (appearance) {
+    return appearance;
+  }
+  return 'url';
+}
+const getLinkMark = node => {
+  if (node.marks) {
+    for (let i = 0; i < node.marks.length; i++) {
+      const mark = node.marks[i];
+      if (mark.type.name === 'link') {
+        return mark;
+      }
+    }
+  }
+};
+const hasLinkMark = node => {
+  return !!getLinkMark(node);
+};
+export function getUrl(node) {
+  var _node$attrs$url, _node$attrs, _getLinkMark, _getLinkMark$attrs;
+  return (_node$attrs$url = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) !== null && _node$attrs$url !== void 0 ? _node$attrs$url : (_getLinkMark = getLinkMark(node)) === null || _getLinkMark === void 0 ? void 0 : (_getLinkMark$attrs = _getLinkMark.attrs) === null || _getLinkMark$attrs === void 0 ? void 0 : _getLinkMark$attrs.href;
+}
+export const getNodeContext = (doc, pos) => {
+  const $pos = doc.resolve(pos);
+  const maxDepth = 3;
+  for (let i = 0; i <= maxDepth; i++) {
+    const node = $pos.node($pos.depth - i);
+    if (node && node.type.name !== 'paragraph') {
+      return node.type.name;
+    }
+  }
+  return 'unknown';
+};
+export const findAtPositions = (tr, positions) => {
+  const entities = [];
+  for (let i = 0; i < positions.length; i++) {
+    const pos = positions[i];
+    const node = tr.doc.nodeAt(pos);
+    if (!node) {
+      continue;
+    }
+    const nodeContext = getNodeContext(tr.doc, pos);
+    entities.push({
+      pos,
+      node,
+      nodeContext
+    });
+  }
+  return entities;
+};
+export const findInNodeRange = (doc, from, to, predicate) => {
+  const entities = [];
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (predicate(node)) {
+      const entirelyInRange = pos >= from && pos + node.nodeSize <= to;
+      if (entirelyInRange) {
+        const nodeContext = getNodeContext(doc, pos);
+        entities.push({
+          pos,
+          node,
+          nodeContext
+        });
+      }
+    }
+  });
+  return entities;
+};
+
+/**
+ * Returns whether or not two sets of links appear to likely be the same set of links
+ * That they are in the same order and that both their hrefs and appearances match
+ */
+export const areSameNodes = (setA, setB) => {
+  if (setA.length !== setB.length) {
+    return false;
+  }
+  for (let i = 0; i < setA.length; i++) {
+    const a = setA[i];
+    const b = setB[i];
+    if (getUrl(a.node) !== getUrl(b.node) || appearanceForLink(a.node) !== appearanceForLink(b.node)) {
+      return false;
+    }
+  }
+  return true;
+};

package/dist/es2019/nodeviews/datasource.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class DatasourceComponent extends React.PureComponent {
@@ -90,12 +90,6 @@ export class Datasource extends ReactNodeView {
   constructor(props) {
     var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
-    _defineProperty(this, "calcTableWidth", (layout, containerWidth) => {
-      if (layout === 'center') {
-        return 'inherit';
-      }
-      return calcBreakoutWidthPx(layout, containerWidth);
-    });
     const sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
     this.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
     sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
@@ -117,11 +111,10 @@ export class Datasource extends ReactNodeView {
     const {
       attrs
     } = this.node;
-    const calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
     return jsx("div", {
       className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
       style: {
-        minWidth: calculatedWidth
+        minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
       }
     }, jsx(DatasourceComponent, {
       node: this.node,

package/dist/es2019/plugin.js

@@ -3,6 +3,7 @@ import { blockCard, embedCard, inlineCard } from '@atlaskit/adf-schema';
 import { IconDatasourceAssetsObjects, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '@atlaskit/link-datasource';
+import { createEventsQueue } from './analytics/create-events-queue';
 import { messages } from './messages';
 import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
 import { changeSelectedCardToLink, queueCardsFromChangedTr, setSelectedCardAppearance } from './pm-plugins/doc';
@@ -12,12 +13,13 @@ import { mountHyperlinkPlugin } from './pm-plugins/mountHyperlink';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { floatingToolbar } from './toolbar';
 import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
+import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
-import { EditorSmartCardEventsNext } from './ui/EditorSmartCardEventsNext';
 import LayoutButton from './ui/LayoutButton';
 export const cardPlugin = (options, api) => {
   var _api$dependencies, _api$dependencies$fea;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
+  const cardPluginEvents = featureFlags !== null && featureFlags !== void 0 && featureFlags.lpAnalyticsEventsNext ? createEventsQueue() : undefined;
   return {
     name: 'card',
     getSharedState(editorState) {
@@ -59,7 +61,8 @@ export const cardPlugin = (options, api) => {
           useAlternativePreloader,
           allowWrapping,
           allowAlignment,
-          allowDatasource
+          allowDatasource,
+          cardPluginEvents
         }, api)
       }, {
         name: 'cardHyperlink',
@@ -81,12 +84,10 @@ export const cardPlugin = (options, api) => {
       popupsScrollableElement,
       popupsBoundariesElement
     }) {
-      const {
-        lpAnalyticsEventsNext
-      } = featureFlags;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
-      }), lpAnalyticsEventsNext && /*#__PURE__*/React.createElement(EditorSmartCardEventsNext, {
+      }), cardPluginEvents && /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
+        cardPluginEvents: cardPluginEvents,
         editorView: editorView
       }), /*#__PURE__*/React.createElement(LayoutButton, {
         api: api,

package/dist/es2019/pm-plugins/actions.js

@@ -18,10 +18,6 @@ export const registerSmartCardEvents = smartLinkEvents => tr => cardAction(tr, {
   type: 'REGISTER_EVENTS',
   smartLinkEvents
 });
-export const registerSmartCardEventsNext = smartLinkEvents => tr => cardAction(tr, {
-  type: 'REGISTER_EVENTS_NEXT',
-  smartLinkEvents
-});
 export const setProvider = cardProvider => tr => cardAction(tr, {
   type: 'SET_PROVIDER',
   provider: cardProvider

package/dist/es2019/pm-plugins/doc.js

@@ -419,6 +419,9 @@ export const updateExistingDatasource = (state, node, newAdf, view) => {
         ...node.attrs,
         ...newAdf.attrs
       });
+      addLinkMetadata(state.selection, tr, {
+        action: ACTION.UPDATED
+      });
     }
   } else if (newAdf.type === 'inlineCard') {
     // datasource to inline

package/dist/es2019/pm-plugins/main.js

@@ -5,29 +5,26 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/st
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { eventsFromTransaction } from '../analytics/events-from-tr';
 import { BlockCard } from '../nodeviews/blockCard';
 import { Datasource } from '../nodeviews/datasource';
 import { EmbedCard } from '../nodeviews/embedCard';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
 import { setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
-import { createAnalyticsQueue, eventsFromTransaction } from './analytics';
 import { pluginKey } from './plugin-key';
 import reducer from './reducers';
 import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 export { pluginKey } from './plugin-key';
 export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryParams => {
-  const {
-    lpAnalyticsEventsNext
-  } = pmPluginFactoryParams.featureFlags;
-  const analyticsQueue = createAnalyticsQueue(!!lpAnalyticsEventsNext);
   const {
     editorAppearance,
     platform,
     allowResizing,
     useAlternativePreloader,
     fullWidthMode,
-    showServerActions
+    showServerActions,
+    cardPluginEvents
   } = options;
   const inlineCardViewProducer = getInlineNodeViewProducer({
     pmPluginFactoryParams,
@@ -46,7 +43,6 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           cards: [],
           showLinkingToolbar: false,
           smartLinkEvents: undefined,
-          smartLinkEventsNext: undefined,
           editorAppearance,
           showDatasourceModal: false,
           datasourceModalType: undefined,
@@ -61,14 +57,12 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
 
         // apply any actions
         const meta = tr.getMeta(pluginKey);
-        const events = eventsFromTransaction(tr, prevEditorState);
-        analyticsQueue.push(...events);
+        if (cardPluginEvents) {
+          const events = eventsFromTransaction(tr, prevEditorState);
+          cardPluginEvents.push(...events);
+        }
         if (meta) {
-          const nextState = reducer(pluginStateWithUpdatedPos, meta);
-          if (!pluginState.smartLinkEventsNext && nextState.smartLinkEventsNext) {
-            analyticsQueue.setCallbacks(nextState.smartLinkEventsNext);
-          }
-          return nextState;
+          return reducer(pluginStateWithUpdatedPos, meta);
         }
         return pluginStateWithUpdatedPos;
       }
@@ -142,7 +136,13 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
               invoke();
             });
           }
-          analyticsQueue.flush();
+
+          /**
+           * If there have been any events queued, flush them
+           * so subscribers can now be notified and dispatch
+           * analytics events
+           */
+          cardPluginEvents === null || cardPluginEvents === void 0 ? void 0 : cardPluginEvents.flush();
         },
         destroy() {
           // Cancel any outstanding raf callbacks.

package/dist/es2019/pm-plugins/reducers.js

@@ -53,12 +53,6 @@ const registerEvents = (state, action) => {
     smartLinkEvents: action.smartLinkEvents
   };
 };
-const registerEventsNext = (state, action) => {
-  return {
-    ...state,
-    smartLinkEventsNext: action.smartLinkEvents
-  };
-};
 const setLinkToolbar = (state, action) => {
   return {
     ...state,
@@ -91,8 +85,6 @@ export default ((state, action) => {
       return register(state, action);
     case 'REGISTER_EVENTS':
       return registerEvents(state, action);
-    case 'REGISTER_EVENTS_NEXT':
-      return registerEventsNext(state, action);
     case 'SET_DATASOURCE_TABLE_REF':
       return setDatasourceTableRef(state, action);
     case 'SET_CARD_LAYOUT':

package/dist/es2019/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.js

@@ -0,0 +1,46 @@
+import { useEffect, useMemo } from 'react';
+import { EVENT, EVENT_SUBJECT } from '../../analytics/types';
+/**
+ * Subscribes to the events occuring in the card
+ * plugin and fires analytics events accordingly
+ */
+export const DatasourceEventsBinding = ({
+  cardPluginEvents
+}) => {
+  const eventHandlers = useMemo(() => {
+    return {
+      [EVENT.CREATED]: metadata => {
+        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+        // eslint-disable-next-line no-console
+        console.log('CREATED', metadata.node, metadata.nodeContext);
+      },
+      [EVENT.UPDATED]: metadata => {
+        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+        // eslint-disable-next-line no-console
+        console.log('UPDATED', metadata.node, metadata.nodeContext);
+      },
+      [EVENT.DELETED]: metadata => {
+        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+        // eslint-disable-next-line no-console
+        console.log('DELETED', metadata.node, metadata.nodeContext);
+      }
+    };
+  }, []);
+
+  /**
+   * Subscribe to datasource events
+   */
+  useEffect(() => {
+    const unsubscribe = cardPluginEvents.subscribe(({
+      event,
+      subject,
+      data
+    }) => {
+      if (subject === EVENT_SUBJECT.DATASOURCE) {
+        eventHandlers[event](data);
+      }
+    });
+    return () => unsubscribe();
+  }, [eventHandlers, cardPluginEvents]);
+  return null;
+};