Enable capturing events for certain setting changes, and track usage of side panels inside table blocks

packages/builder/src/analytics/constants.js

@@ -1,5 +1,6 @@
 export const Events = {
   COMPONENT_CREATED: "component:created",
+  COMPONENT_UPDATED: "component:updated",
   APP_VIEW_PUBLISHED: "app:view_published",
 }
 

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -6,6 +6,7 @@
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   import { getComponentForSetting } from "components/design/settings/componentSettings"
+  import analytics, { Events } from "analytics"
 
   export let componentDefinition
   export let componentInstance
@@ -44,9 +45,18 @@
     return sections
   }
 
-  const updateSetting = async (key, value) => {
+  const updateSetting = async (setting, value) => {
     try {
-      await store.actions.components.updateSetting(key, value)
+      await store.actions.components.updateSetting(setting.key, value)
+
+      // Send event if required
+      if (setting.sendEvents) {
+        analytics.captureEvent(Events.COMPONENT_UPDATED, {
+          name: componentInstance._component,
+          setting: setting.key,
+          value,
+        })
+      }
     } catch (error) {
       notifications.error("Error updating component prop")
     }
@@ -113,7 +123,7 @@
           label="Name"
           key="_instanceName"
           value={componentInstance._instanceName}
-          onChange={val => updateSetting("_instanceName", val)}
+          onChange={val => updateSetting({ key: "_instanceName" }, val)}
         />
       {/if}
       {#each section.settings as setting (setting.key)}
@@ -126,7 +136,7 @@
             value={componentInstance[setting.key]}
             defaultValue={setting.defaultValue}
             nested={setting.nested}
-            onChange={val => updateSetting(setting.key, val)}
+            onChange={val => updateSetting(setting, val)}
             highlighted={$store.highlightedSettingKey === setting.key}
             info={setting.info}
             props={{

packages/client/manifest.json

@@ -4546,6 +4546,7 @@
           {
             "type": "radio",
             "key": "clickBehaviour",
+            "sendEvents": true,
             "defaultValue": "actions",
             "info": "Details side panel is only compatible with internal or SQL tables",
             "options": [