Add event context to button actions to allow passing in params at run time and add corresponding data bindings

packages/builder/src/builderStore/dataBinding.js

@@ -393,18 +393,45 @@ const getUrlBindings = asset => {
 
 /**
  * Gets all bindable properties exposed in a button actions flow up until
- * the specified action ID.
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
  */
-export const getButtonContextBindings = (actions, actionId) => {
+export const getButtonContextBindings = (
+  asset,
+  componentId,
+  settingKey,
+  actions,
+  actionId
+) => {
+  let bindings = []
+
+  // Check if any context bindings are provided by the component for this
+  // setting
+  const component = findComponent(asset.props, componentId)
+  const settings = getComponentSettings(component?._component)
+  const eventSetting = settings.find(setting => setting.key === settingKey)
+  if (!eventSetting) {
+    return bindings
+  }
+  if (eventSetting.context?.length) {
+    eventSetting.context.forEach(contextEntry => {
+      bindings.push({
+        readableBinding: contextEntry.label,
+        runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
+          contextEntry.key
+        )}`,
+      })
+    })
+  }
+
   // Get the steps leading up to this value
   const index = actions?.findIndex(action => action.id === actionId)
   if (index == null || index === -1) {
-    return []
+    return bindings
   }
   const prevActions = actions.slice(0, index)
 
   // Generate bindings for any steps which provide context
-  let bindings = []
   prevActions.forEach((action, idx) => {
     const def = ActionDefinitions.actions.find(
       x => x.name === action["##eventHandlerType"]
@@ -418,6 +445,7 @@ export const getButtonContextBindings = (actions, actionId) => {
       })
     }
   })
+
   return bindings
 }
 

packages/builder/src/builderStore/store/theme.js

@@ -2,9 +2,10 @@ import { createLocalStorageStore } from "@budibase/frontend-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
+
   const initialValue = {
     theme: "darkest",
-    options: ["lightest", "light", "dark", "darkest"],
+    options: ["lightest", "light", "dark", "darkest", "nord"],
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
 
@@ -21,6 +22,7 @@ export const getThemeStore = () => {
         `spectrum--${option}`,
         option === state.theme
       )
+      themeElement.classList.add("spectrum--darkest")
     })
   })
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -12,11 +12,13 @@
   import { getAvailableActions } from "./index"
   import { generate } from "shortid"
   import { getButtonContextBindings } from "builderStore/dataBinding"
+  import { currentAsset, store } from "builderStore"
 
   const flipDurationMs = 150
   const EVENT_TYPE_KEY = "##eventHandlerType"
   const actionTypes = getAvailableActions()
 
+  export let key
   export let actions
   export let bindings = []
 
@@ -24,6 +26,9 @@
 
   // These are ephemeral bindings which only exist while executing actions
   $: buttonContextBindings = getButtonContextBindings(
+    $currentAsset,
+    $store.selectedComponentId,
+    key,
     actions,
     selectedAction?.id
   )

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte

@@ -8,6 +8,7 @@
 
   const dispatch = createEventDispatcher()
 
+  export let key
   export let value = []
   export let name
   export let bindings
@@ -81,5 +82,6 @@
     bind:actions={tmpValue}
     eventType={name}
     {bindings}
+    {key}
   />
 </Drawer>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -79,6 +79,7 @@
       bindings={allBindings}
       name={key}
       text={label}
+      {key}
       {type}
       {...props}
     />

packages/client/manifest.json

@@ -264,7 +264,8 @@
           {
             "label": "Primary",
             "value": "primary"
-          }, {
+          },
+          {
             "label": "Secondary",
             "value": "secondary"
           },
@@ -626,28 +627,36 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
+        "options": [
+          {
             "label": "Extra Small",
             "value": "XS"
-        }, {
+          },
+          {
             "label": "Small",
             "value": "S"
-        }, {
+          },
+          {
             "label": "Medium",
             "value": "M"
-        }, {
+          },
+          {
             "label": "Large",
             "value": "L"
-        }, {
+          },
+          {
             "label": "Extra Large",
             "value": "XL"
-        }, {
+          },
+          {
             "label": "2XL",
             "value": "XXL"
-        }, {
+          },
+          {
             "label": "3XL",
             "value": "XXXL"
-        }]
+          }
+        ]
       },
       {
         "type": "color",
@@ -689,27 +698,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
+        "options": [
+          {
             "label": "Left",
             "value": "left",
             "barIcon": "TextAlignLeft",
             "barTitle": "Align left"
-        }, {
+          },
+          {
             "label": "Center",
             "value": "center",
             "barIcon": "TextAlignCenter",
             "barTitle": "Align center"
-        }, {
+          },
+          {
             "label": "Right",
             "value": "right",
             "barIcon": "TextAlignRight",
             "barTitle": "Align right"
-        }, {
+          },
+          {
             "label": "Justify",
             "value": "justify",
             "barIcon": "TextAlignJustify",
             "barTitle": "Justify text"
-        }]
+          }
+        ]
       }
     ]
   },
@@ -733,28 +747,36 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
+        "options": [
+          {
             "label": "Extra Small",
             "value": "XS"
-        }, {
+          },
+          {
             "label": "Small",
             "value": "S"
-        }, {
+          },
+          {
             "label": "Medium",
             "value": "M"
-        }, {
+          },
+          {
             "label": "Large",
             "value": "L"
-        }, {
+          },
+          {
             "label": "Extra Large",
             "value": "XL"
-        }, {
+          },
+          {
             "label": "2XL",
             "value": "XXL"
-        }, {
+          },
+          {
             "label": "3XL",
             "value": "XXXL"
-        }]
+          }
+        ]
       },
       {
         "type": "color",
@@ -796,27 +818,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
+        "options": [
+          {
             "label": "Left",
             "value": "left",
             "barIcon": "TextAlignLeft",
             "barTitle": "Align left"
-        }, {
+          },
+          {
             "label": "Center",
             "value": "center",
             "barIcon": "TextAlignCenter",
             "barTitle": "Align center"
-        }, {
+          },
+          {
             "label": "Right",
             "value": "right",
             "barIcon": "TextAlignRight",
             "barTitle": "Align right"
-        }, {
+          },
+          {
             "label": "Justify",
             "value": "justify",
             "barIcon": "TextAlignJustify",
             "barTitle": "Justify text"
-        }]
+          }
+        ]
       }
     ]
   },
@@ -837,16 +864,20 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
+        "options": [
+          {
             "label": "Small",
             "value": "S"
-        }, {
+          },
+          {
             "label": "Medium",
             "value": "M"
-        }, {
+          },
+          {
             "label": "Large",
             "value": "L"
-        }]
+          }
+        ]
       },
       {
         "type": "color",
@@ -1037,16 +1068,20 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
-        "options": [{
+        "options": [
+          {
             "label": "Small",
             "value": "S"
-        }, {
+          },
+          {
             "label": "Medium",
             "value": "M"
-        }, {
+          },
+          {
             "label": "Large",
             "value": "L"
-        }]
+          }
+        ]
       },
       {
         "type": "color",
@@ -1088,27 +1123,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
+        "options": [
+          {
             "label": "Left",
             "value": "left",
             "barIcon": "TextAlignLeft",
             "barTitle": "Align left"
-        }, {
+          },
+          {
             "label": "Center",
             "value": "center",
             "barIcon": "TextAlignCenter",
             "barTitle": "Align center"
-        }, {
+          },
+          {
             "label": "Right",
             "value": "right",
             "barIcon": "TextAlignRight",
             "barTitle": "Align right"
-        }, {
+          },
+          {
             "label": "Justify",
             "value": "justify",
             "barIcon": "TextAlignJustify",
             "barTitle": "Justify text"
-        }]
+          }
+        ]
       }
     ]
   },
@@ -1165,7 +1205,15 @@
         "type": "select",
         "label": "Card Width",
         "key": "cardWidth",
-        "options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
+        "options": [
+          "24rem",
+          "28rem",
+          "32rem",
+          "40rem",
+          "48rem",
+          "60rem",
+          "100%"
+        ],
         "defaultValue": "32rem"
       },
       {
@@ -1785,11 +1833,7 @@
     "icon": "Form",
     "hasChildren": true,
     "illegalChildren": ["section", "form"],
-    "actions": [
+    "actions": ["ValidateForm", "ClearForm", "ChangeFormStep"],
-      "ValidateForm",
-      "ClearForm",
-      "ChangeFormStep"
-    ],
     "styles": ["size"],
     "settings": [
       {
@@ -1816,7 +1860,8 @@
           {
             "label": "Medium",
             "value": "spectrum--medium"
-          }, {
+          },
+          {
             "label": "Large",
             "value": "spectrum--large"
           }
@@ -1947,27 +1992,32 @@
         "defaultValue": "left",
         "showInBar": true,
         "barStyle": "buttons",
-        "options": [{
+        "options": [
+          {
             "label": "Left",
             "value": "left",
             "barIcon": "TextAlignLeft",
             "barTitle": "Align left"
-        }, {
+          },
+          {
             "label": "Center",
             "value": "center",
             "barIcon": "TextAlignCenter",
             "barTitle": "Align center"
-        }, {
+          },
+          {
             "label": "Right",
             "value": "right",
             "barIcon": "TextAlignRight",
             "barTitle": "Align right"
-        }, {
+          },
+          {
             "label": "Justify",
             "value": "justify",
             "barIcon": "TextAlignJustify",
             "barTitle": "Justify text"
-        }]
+          }
+        ]
       }
     ]
   },
@@ -2480,15 +2530,42 @@
     "styles": ["size"],
     "editable": true,
     "draggable": false,
-    "illegalChildren": [
+    "illegalChildren": ["section"],
-      "section"
-    ],
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
         "key": "dataProvider"
       },
+      {
+        "type": "field",
+        "label": "Latitude Key",
+        "key": "latitudeKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "field",
+        "label": "Longitude Key",
+        "key": "longitudeKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "field",
+        "label": "Title Key",
+        "key": "titleKey",
+        "dependsOn": "dataProvider"
+      },
+      {
+        "type": "event",
+        "label": "On marker click",
+        "key": "onMarkerClick",
+        "context": [
+          {
+            "label": "Clicked marker",
+            "key": "marker"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Enable Fullscreen",
@@ -2515,21 +2592,6 @@
         "max": 100,
         "min": 0
       },
-      {
-        "type": "field",
-        "label": "Latitude Key",
-        "key": "latitudeKey"
-      },
-      {
-        "type": "field",
-        "label": "Longitude Key",
-        "key": "longitudeKey"
-      },
-      {
-        "type": "field",
-        "label": "Title Key",
-        "key": "titleKey"
-      },
       {
         "type": "text",
         "label": "Tile URL",
@@ -2538,7 +2600,7 @@
       },
       {
         "type": "text",
-        "label": "Default Location (lat,lng)",
+        "label": "Default Location",
         "key": "defaultLocation",
         "defaultValue": "51.5072,-0.1276"
       },
@@ -3192,7 +3254,6 @@
             "key": "cardDescription",
             "label": "Description",
             "nested": true
-
           },
           {
             "type": "text",

packages/client/src/components/Component.svelte

@@ -1,6 +1,7 @@
 <script context="module">
   // Cache the definition of settings for each component type
   let SettingsDefinitionCache = {}
+  let SettingsDefinitionMapCache = {}
 
   // Cache the settings of each component ID.
   // This speeds up remounting as well as repeaters.
@@ -74,6 +75,8 @@
   // Component information derived during initialisation
   let constructor
   let definition
+  let settingsDefinition
+  let settingsDefinitionMap
 
   // Set up initial state for each new component instance
   $: initialise(instance)
@@ -118,7 +121,7 @@
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings
-  $: enrichComponentSettings($context)
+  $: enrichComponentSettings($context, settingsDefinitionMap)
 
   // Evaluate conditional UI settings and store any component setting changes
   // which need to be made. This is broken into 2 lines to avoid svelte
@@ -168,12 +171,14 @@
     }
 
     // Get the settings definition for this component, and cache it
-    let settingsDefinition
     if (SettingsDefinitionCache[definition.name]) {
       settingsDefinition = SettingsDefinitionCache[definition.name]
+      settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
     } else {
       settingsDefinition = getSettingsDefinition(definition)
+      settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
       SettingsDefinitionCache[definition.name] = settingsDefinition
+      SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
     }
 
     // Parse the instance settings, and cache them
@@ -190,7 +195,9 @@
     dynamicSettings = instanceSettings.dynamicSettings
 
     // Force an initial enrichment of the new settings
-    enrichComponentSettings(get(context), { force: true })
+    enrichComponentSettings(get(context), settingsDefinitionMap, {
+      force: true,
+    })
   }
 
   // Gets the component constructor for the specified component
@@ -226,6 +233,14 @@
     return settings
   }
 
+  const getSettingsDefinitionMap = settingsDefinition => {
+    let map = {}
+    settingsDefinition?.forEach(setting => {
+      map[setting.key] = setting
+    })
+    return map
+  }
+
   const getInstanceSettings = (instance, settingsDefinition) => {
     // Get raw settings
     let settings = {}
@@ -248,7 +263,7 @@
         } else if (typeof value === "string" && value.includes("{{")) {
           // Strings can be trivially checked
           delete newStaticSettings[setting.key]
-        } else if (value[0]?.["##eventHandlerType"] != null) {
+        } else if (setting.type === "event") {
           // Always treat button actions as dynamic
           delete newStaticSettings[setting.key]
         } else if (typeof value === "object") {
@@ -273,7 +288,11 @@
   }
 
   // Enriches any string component props using handlebars
-  const enrichComponentSettings = (context, options = { force: false }) => {
+  const enrichComponentSettings = (
+    context,
+    settingsDefinitionMap,
+    options = { force: false }
+  ) => {
     const contextChanged = context.key !== lastContextKey
     if (!contextChanged && !options?.force) {
       return
@@ -285,7 +304,11 @@
     const enrichmentTime = latestUpdateTime
 
     // Enrich settings with context
-    const newEnrichedSettings = enrichProps(dynamicSettings, context)
+    const newEnrichedSettings = enrichProps(
+      dynamicSettings,
+      context,
+      settingsDefinitionMap
+    )
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {

packages/client/src/components/app/embedded-map/EmbeddedMap.svelte

@@ -24,6 +24,7 @@
   export let defaultLocation
   export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
   export let mapAttribution
+  export let onMarkerClick
 
   const { styleable, notificationStore } = getContext("sdk")
   const component = getContext("component")
@@ -55,7 +56,8 @@
     dataProvider?.rows,
     latitudeKey,
     longitudeKey,
-    titleKey
+    titleKey,
+    onMarkerClick
   )
   $: if (typeof mapInstance === "object" && mapMarkers.length > 0) {
     mapInstance.setZoom(0)
@@ -195,7 +197,7 @@
     maxZoomLevel,
   }
 
-  const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey) => {
+  const addMapMarkers = (mapInstance, rows, latKey, lngKey, titleKey, onClick) => {
     if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
       return
     }
@@ -220,6 +222,15 @@
         direction: "top",
         offset: [0, -25]
       }).addTo(mapMarkerGroup)
+
+      if (onClick) {
+        marker.on("click", () => {
+          onClick({
+            marker: row
+          })
+        })
+      }
+
       mapMarkers = [...mapMarkers, marker]
     })
   }

packages/client/src/utils/buttonActions.js

@@ -308,7 +308,7 @@ export const enrichButtonActions = (actions, context) => {
   let buttonContext = context.actions || []
 
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
-  return async () => {
+  return async eventContext => {
     for (let i = 0; i < handlers.length; i++) {
       try {
         // Skip any non-existent action definitions
@@ -317,7 +317,11 @@ export const enrichButtonActions = (actions, context) => {
         }
 
         // Built total context for this action
-        const totalContext = { ...context, actions: buttonContext }
+        const totalContext = {
+          ...context,
+          actions: buttonContext,
+          eventContext,
+        }
 
         // Get and enrich this button action with the total context
         let action = actions[i]

packages/client/src/utils/componentProps.js

@@ -22,7 +22,7 @@ export const propsAreSame = (a, b) => {
  * Enriches component props.
  * Data bindings are enriched, and button actions are enriched.
  */
-export const enrichProps = (props, context) => {
+export const enrichProps = (props, context, settingsDefinitionMap) => {
   // Create context of all bindings and data contexts
   // Duplicate the closest context as "data" which the builder requires
   const totalContext = {
@@ -38,7 +38,7 @@ export const enrichProps = (props, context) => {
   let normalProps = { ...props }
   let actionProps = {}
   Object.keys(normalProps).forEach(prop => {
-    if (prop?.toLowerCase().includes("onclick")) {
+    if (settingsDefinitionMap?.[prop]?.type === "event") {
       actionProps[prop] = normalProps[prop]
       delete normalProps[prop]
     }
@@ -61,7 +61,7 @@ export const enrichProps = (props, context) => {
   // Conditions
   if (enrichedProps._conditions?.length) {
     enrichedProps._conditions.forEach((condition, idx) => {
-      if (condition.setting?.toLowerCase().includes("onclick")) {
+      if (settingsDefinitionMap?.[condition.setting]?.type === "event") {
         // Use the original condition action value to enrich it to a button
         // action
         condition.settingValue = enrichButtonActions(