From bd954a087097ffee12b0a03fce5c285739e1d0a9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 29 Nov 2022 18:28:26 +0000
Subject: [PATCH] Enable capturing events for certain setting changes, and
 track usage of side panels inside table blocks

---
 packages/builder/src/analytics/constants.js    |  1 +
 .../settings/ComponentSettingsSection.svelte   | 18 ++++++++++++++----
 packages/client/manifest.json                  |  1 +
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/analytics/constants.js b/packages/builder/src/analytics/constants.js
index 424b32c8a4..1bb8517a2b 100644
--- a/packages/builder/src/analytics/constants.js
+++ b/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",
 }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index eafedd61b8..bf8bff1292 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/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={{
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4bd7bc2b5d..d7b0184876 100644
--- a/packages/client/manifest.json
+++ b/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": [