From 618732429dc8553d744d608cb9a4bba2551aaa40 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 24 Aug 2022 16:38:08 +0100
Subject: [PATCH] Added sections for UI component event bindings

---
 packages/builder/src/builderStore/dataBinding.js  | 15 +++++++++++++--
 .../common/bindings/BindingPanel.svelte           |  6 +-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 0466f95476..d961a3a1cd 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -299,7 +299,10 @@ const getProviderContextBindings = (asset, dataProviders) => {
         schema = {}
         const values = context.values || []
         values.forEach(value => {
-          schema[value.key] = { name: value.label, type: "string" }
+          schema[value.key] = {
+            name: value.label,
+            type: value.type || "string",
+          }
         })
       } else if (context.type === "schema") {
         // Schema contexts are generated dynamically depending on their data
@@ -361,7 +364,10 @@ const getProviderContextBindings = (asset, dataProviders) => {
           tableId: table?._id,
           category: component._instanceName,
           icon: def.icon,
-          display: { name: fieldSchema.name || key, type: fieldSchema.type },
+          display: {
+            name: fieldSchema.name || key,
+            type: fieldSchema.type,
+          },
         })
       })
     })
@@ -544,6 +550,7 @@ export const getEventContextBindings = (
   // Check if any context bindings are provided by the component for this
   // setting
   const component = findComponent(asset.props, componentId)
+  const def = store.actions.components.getDefinition(component?._component)
   const settings = getComponentSettings(component?._component)
   const eventSetting = settings.find(setting => setting.key === settingKey)
   if (eventSetting?.context?.length) {
@@ -553,6 +560,8 @@ export const getEventContextBindings = (
         runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
           contextEntry.key
         )}`,
+        category: component._instanceName,
+        icon: def.icon,
       })
     })
   }
@@ -574,6 +583,8 @@ export const getEventContextBindings = (
         bindings.push({
           readableBinding: `Action ${idx + 1}.${contextValue.label}`,
           runtimeBinding: `actions.${idx}.${contextValue.value}`,
+          category: "Actions",
+          icon: "JourneyAction",
         })
       })
     }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 959a565542..ffa0e98819 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -458,11 +458,7 @@
     font-weight: 600;
     text-transform: capitalize;
   }
-  .binding__description {
-    color: var(--spectrum-global-color-gray-700);
-    margin: 0.5rem 0 0 0;
-    white-space: normal;
-  }
+
   .binding__type {
     font-family: monospace;
     background-color: var(--spectrum-global-color-gray-200);