feat(mixpanel): add formFieldTypes to diagram closed event

Closes #3132

client/src/plugins/user-journey-statistics/event-handlers/TabEventHandler.js

@@ -9,7 +9,8 @@
  */
 
 import {
-  getEngineProfile
+  getEngineProfile,
+  parseFormFieldCounts
 } from '../../../util/parse';
 
 import { getTemplateIds } from '../util';
@@ -65,7 +66,7 @@ export default class TabEventHandler {
 
       const engineProfile = await getEngineProfile(contents, type);
 
-      let payload = { diagramType: tab.type };
+      let payload = { diagramType: type };
 
       if (engineProfile) {
         payload = {
@@ -74,6 +75,13 @@ export default class TabEventHandler {
         };
       }
 
+      if (type === types.FORM) {
+        payload = {
+          ...payload,
+          formFieldTypes: parseFormFieldCounts(contents)
+        };
+      }
+
       this.track('diagram:closed', payload);
     });
   };

client/src/plugins/user-journey-statistics/event-handlers/__tests__/TabEventHandlerSpec.js

@@ -31,6 +31,8 @@ import engineProfilePlatformDMN from './fixtures/engine-platform.dmn';
 
 import engineProfileCloudDMN from './fixtures/engine-cloud.dmn';
 
+import nestedForm from './fixtures/nested.form';
+
 
 describe('<TabEventHandler>', () => {
 
@@ -501,6 +503,72 @@ describe('<TabEventHandler>', () => {
     expect(templateIds).to.have.length(2);
   });
 
+
+  describe('should send form field types', () => {
+
+    it('closed - simple form', async () => {
+
+      // given
+      const tab = createTab({
+        file: {
+          contents: engineProfileCloud
+        },
+        type: 'form'
+      });
+
+      // when
+      const callback = subscribe.getCall(3).args[1];
+
+      await callback({
+        tab
+      });
+
+      // then
+      expect(track).to.have.been.calledWith('diagram:closed', {
+        diagramType: 'form',
+        executionPlatform: 'Camunda Cloud',
+        executionPlatformVersion: '1.1',
+        formFieldTypes: {
+          textfield: 1,
+          button: 1
+        }
+      });
+    });
+
+
+    it('closed - nested form', async () => {
+
+      // given
+      const tab = createTab({
+        file: {
+          contents: nestedForm
+        },
+        type: 'form'
+      });
+
+      // when
+      const callback = subscribe.getCall(3).args[1];
+
+      await callback({
+        tab
+      });
+
+      // then
+      expect(track).to.have.been.calledWith('diagram:closed', {
+        diagramType: 'form',
+        executionPlatform: 'Camunda Cloud',
+        executionPlatformVersion: '8.4',
+        formFieldTypes: {
+          group: 5,
+          image: 5,
+          textfield: 6
+        }
+      });
+    });
+
+  });
+
+
 });
 
 

client/src/plugins/user-journey-statistics/event-handlers/__tests__/fixtures/nested.form

@@ -0,0 +1,87 @@
+{
+  "components": [
+    {
+      "key": "text_root",
+      "type": "textfield"
+    },
+    {
+      "alt": "=alt_root",
+      "type": "image"
+    },
+    {
+      "label": "flat group",
+      "path": "",
+      "type": "group",
+      "components": [
+        {
+          "key": "text_flat",
+          "type": "textfield"
+        },
+        {
+          "alt": "=alt_flat",
+          "type": "image"
+        }
+      ]
+    },
+    {
+      "label": "nested group",
+      "path": "",
+      "type": "group",
+      "components": [
+        {
+          "label": "nested group",
+          "path": "",
+          "type": "group",
+          "components": [
+            {
+              "key": "text_nested",
+              "type": "textfield"
+            },
+            {
+              "alt": "=alt_nested",
+              "type": "image"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "pathed group",
+      "path": "pathed",
+      "type": "group",
+      "components": [
+        {
+          "key": "text_pathed",
+          "type": "textfield"
+        },
+        {
+          "alt": "=alt_pathed",
+          "type": "image"
+        }
+      ]
+    },
+    {
+      "label": "separated path group",
+      "path": "separated.path",
+      "type": "group",
+      "components": [
+        {
+          "key": "text_separated",
+          "type": "textfield"
+        },
+        {
+          "alt": "=alt_separated",
+          "type": "image"
+        }
+      ]
+    },
+    {
+      "label": "separated key textfield",
+      "key": "separated2.key",
+      "type": "textfield"
+    }
+  ],
+  "type": "default",
+  "executionPlatform": "Camunda Cloud",
+  "executionPlatformVersion": "8.4"
+}

client/src/util/parse.js

@@ -93,6 +93,55 @@ export async function getAllElementsByType(xml, elementType, diagramType) {
   return elements;
 }
 
+export function parseFormFieldCounts(contents) {
+
+  if (!contents) {
+    return {};
+  }
+
+  // parse form content
+  let form;
+  try {
+    form = JSON.parse(contents);
+  } catch (error) {
+    return {};
+  }
+
+  // flatten nested components
+  const components = form.components || [];
+
+  function getComponents(components) {
+    const formFields = [];
+
+    components.forEach((component) => {
+      formFields.push(component);
+
+      if (component.components && component.components.length > 0) {
+        formFields.push(...getComponents(component.components));
+      }
+    });
+
+    return formFields;
+  }
+
+  const formFields = getComponents(components);
+
+  // collect form field counts by type
+  const typeCounts = {};
+
+  formFields.forEach((component) => {
+    const { type } = component;
+
+    if (typeCounts[type]) {
+      typeCounts[type]++;
+    } else {
+      typeCounts[type] = 1;
+    }
+  });
+
+  return typeCounts;
+}
+
 function getDefaultExecutionPlatform(type) {
   if (/^cloud/.test(type)) {
     return ENGINES.CLOUD;