feat(User Interaction): Get closest ancestor react component

If internal components are not tracking-enabled, use data-attribute to target the closest React component upon a DOM event

Author: booleanhunter

dist/react/components/withTracking.d.ts.map

@@ -34,16 +34,17 @@ export function withTracking(Component) {
     return function (props) {
         var eventHandlers = {};
         var trackers = props.trackers, origin = props.origin, dataContextFromProps = props.dataContext, originalProps = __rest(props, ["trackers", "origin", "dataContext"]);
-        var dataContext = useContext(DataContext);
-        if (dataContextFromProps) {
-            dataContext = dataContextFromProps;
-        }
+        var dataContext = dataContextFromProps ? dataContextFromProps : useContext(DataContext);
         function trackUserInteraction(e, tracker) {
             var targetNode = e.target;
             var value = getValueFromNode(e);
-            var userInteractionResource = UserInteraction.generateResource(dataContext.app, tracker.action, __assign(__assign({ context: dataContext.context }, (originalProps.origin && {
-                origin: originalProps.origin
-            })), { component: Component.displayName || Component.name, element: __assign({ currentTarget: e.currentTarget.nodeName, target: targetNode.nodeName || e.currentTarget.nodeName, innerHTML: targetNode.innerHTML, innerText: targetNode.innerText }, (value && {
+            var closestComponent = targetNode.closest('[data-element-type="component"]');
+            var userInteractionResource = UserInteraction.generateResource(dataContext.app, tracker.action, __assign(__assign({ context: dataContext.context }, (origin && {
+                origin: origin,
+            })), { component: {
+                    currentTarget: Component.displayName || Component.name,
+                    target: closestComponent ? closestComponent.getAttribute('data-display-name') : null
+                }, element: __assign({ currentTarget: e.currentTarget.nodeName, target: targetNode.nodeName || e.currentTarget.nodeName, innerHTML: targetNode.innerHTML, innerText: targetNode.innerText }, (value && {
                     value: value,
                 })) }), tracker.data);
             tracker.track(e, userInteractionResource);

dist/react/components/withTracking.js

@@ -9,7 +9,10 @@ export interface UserInteractionResource extends BaseResource {
     source: {
         context: string;
         origin?: string;
-        component: string;
+        component: {
+            currentTarget: string;
+            target: string | null;
+        };
         element: {
             currentTarget: string;
             target: string;

dist/resources/userInteractionResource.d.ts

@@ -9,21 +9,24 @@
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/pako": "^1.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
     "localforage": "^1.9.0",
     "pako": "^2.0.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^2.0.1",
     "workerize-loader": "^1.3.0"
   },
+  "peerDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build-scripts": "react-scripts build",
+    "build": "npm run tsc",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
@@ -65,6 +68,8 @@
     "@storybook/react": "^6.1.18",
     "@types/styled-components": "^5.1.8",
     "antd": "^4.12.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "styled-components": "^5.2.1",
     "typedoc": "^0.21.2"
   }

dist/resources/userInteractionResource.d.ts.map

@@ -26,6 +26,8 @@ function Button(props: ButtonProps) {
 
     return (
         <AntButton
+            data-element-type="component"
+            data-display-name="Button"
             {...rest}
             onClick={onClick}
         >

package.json

@@ -11,6 +11,8 @@ function Header(props: HeaderProps) {
 
     return (
         <PageHeader
+            data-element-type="component"
+            data-display-name="Header"
             {...props}
         />
     );

src/examples/components/elements/Button/index.tsx

@@ -15,6 +15,8 @@ function Input(props: InputProps) {
 
     return (
         <AntInput
+            data-element-type="component"
+            data-display-name="Input"
             {...props}
         />
     );

src/examples/components/elements/Header/index.tsx

@@ -16,6 +16,8 @@ function Menu(props: MenuProps) {
 
     return (
         <AntMenu
+            data-element-type="component"
+            data-display-name="Menu"
             theme={theme}
             mode={mode}
             defaultSelectedKeys={defaultSelectedKeys}

src/examples/components/elements/Input/index.tsx

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import TrackingOnTopLevel from './index';
+
+export default {
+    title: 'Components/Pages/Tracking on top level',
+    component: TrackingOnTopLevel,
+    argTypes: {
+        mode: {
+            control: {
+                type: 'select',
+                options: [
+                    "horizontal",
+                    "vertical",
+                    "vertical-left",
+                    "vertical-right", 
+                    "inline",
+                ],
+            },
+        },
+        defaultSelectedKeys: {
+            control: {
+                type: 'array',
+            }
+        }
+    },
+};
+
+const Template: Story<any> = (args) => {
+    return (
+        <TrackingOnTopLevel />
+    )
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};