PR Feedback updates

packages/builder/src/builderStore/dataBinding.js

@@ -6,7 +6,7 @@ import {
   findComponentPath,
   getComponentSettings,
 } from "./componentUtils"
-import { store } from "builderStore"
+import { store, currentAsset } from "builderStore"
 import {
   queries as queriesStores,
   tables as tablesStore,
@@ -629,24 +629,36 @@ const getRoleBindings = () => {
 }
 
 /**
- * Gets all bindable properties exposed in an event action flow up until
- * the specified action ID, as well as context provided for the action
- * setting as a whole by the component.
+ * Gets all bindable event context properties provided in the component
+ * setting
  */
-export const getEventContextBindings = (
-  asset,
-  componentId,
+export const getEventContextBindings = ({
   settingKey,
-  actions,
-  actionId
-) => {
+  componentInstance,
+  componentId,
+  componentDefinition,
+  asset,
+}) => {
   let bindings = []
+
+  const selectedAsset = asset ?? get(currentAsset)
+
   // 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 component =
+    componentInstance ?? findComponent(selectedAsset.props, componentId)
+
+  if (!component) {
+    return bindings
+  }
+
+  const definition =
+    componentDefinition ??
+    store.actions.components.getDefinition(component?._component)
+
   const settings = getComponentSettings(component?._component)
   const eventSetting = settings.find(setting => setting.key === settingKey)
+
   if (eventSetting?.context?.length) {
     eventSetting.context.forEach(contextEntry => {
       bindings.push({
@@ -655,14 +667,23 @@ export const getEventContextBindings = (
           contextEntry.key
         )}`,
         category: component._instanceName,
-        icon: def.icon,
+        icon: definition.icon,
         display: {
           name: contextEntry.label,
         },
       })
     })
   }
+  return bindings
+}
 
+/**
+ * Gets all bindable properties exposed in an event action flow up until
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
+ */
+export const getActionBindings = (actions, actionId) => {
+  let bindings = []
   // Get the steps leading up to this value
   const index = actions?.findIndex(action => action.id === actionId)
   if (index == null || index === -1) {
@@ -689,7 +710,6 @@ export const getEventContextBindings = (
       })
     }
   })
-
   return bindings
 }
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -13,9 +13,9 @@
   import { generate } from "shortid"
   import {
     getEventContextBindings,
+    getActionBindings,
     makeStateBinding,
   } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150
@@ -26,6 +26,7 @@
   export let actions
   export let bindings = []
   export let nested
+  export let componentInstance
 
   let actionQuery
   let selectedAction = actions?.length ? actions[0] : null
@@ -68,15 +69,19 @@
     acc[action.type].push(action)
     return acc
   }, {})
+
   // These are ephemeral bindings which only exist while executing actions
-  $: eventContexBindings = getEventContextBindings(
-    $currentAsset,
-    $store.selectedComponentId,
-    key,
-    actions,
-    selectedAction?.id
+  $: eventContextBindings = getEventContextBindings({
+    componentInstance,
+    settingKey: key,
+  })
+  $: actionContextBindings = getActionBindings(actions, selectedAction?.id)
+
+  $: allBindings = getAllBindings(
+    bindings,
+    [...eventContextBindings, ...actionContextBindings],
+    actions
   )
-  $: allBindings = getAllBindings(bindings, eventContexBindings, actions)
   $: {
     // Ensure each action has a unique ID
     if (actions) {

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte

@@ -13,6 +13,7 @@
   export let name
   export let bindings
   export let nested
+  export let componentInstance
 
   let drawer
   let tmpValue
@@ -86,6 +87,7 @@
     {bindings}
     {key}
     {nested}
+    {componentInstance}
   />
 </Drawer>
 

packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte

@@ -16,7 +16,7 @@
 
   let popover
   let drawers = []
-  let sudoComponentInstance
+  let pseudoComponentInstance
   let open = false
 
   $: if (open && $draggable.selected && $draggable.selected != field._id) {
@@ -24,10 +24,10 @@
   }
 
   $: if (field) {
-    sudoComponentInstance = field
+    pseudoComponentInstance = field
   }
   $: componentDef = store.actions.components.getDefinition(
-    sudoComponentInstance._component
+    pseudoComponentInstance._component
   )
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
 
@@ -46,7 +46,7 @@
   }
 
   const updateSetting = async (setting, value) => {
-    const nestedComponentInstance = cloneDeep(sudoComponentInstance)
+    const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
 
     const patchFn = store.actions.components.updateComponentSetting(
       setting.key,
@@ -56,7 +56,7 @@
 
     const update = {
       ...nestedComponentInstance,
-      active: sudoComponentInstance.active,
+      active: pseudoComponentInstance.active,
     }
 
     dispatch("change", update)
@@ -96,7 +96,7 @@
     let { left, top } = cfg
     let percentageOffset = 30
     // left-outside
-    left = anchorBounds.left - eleBounds.width - 5
+    left = anchorBounds.left - eleBounds.width - 18
 
     // shift up from the anchor, if space allows
     let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset
@@ -115,10 +115,10 @@
     <Layout noPadding noGap>
       <div class="type-icon">
         <Icon name={parsedComponentDef.icon} />
-        <span>{parsedComponentDef.name}</span>
+        <span>{field.field}</span>
       </div>
       <ComponentSettingsSection
-        componentInstance={sudoComponentInstance}
+        componentInstance={pseudoComponentInstance}
         componentDefinition={parsedComponentDef}
         isScreen={false}
         onUpdateSetting={updateSetting}
@@ -139,7 +139,7 @@
 
 <style>
   .popover-wrap {
-    background-color: var(--spectrum-alias-background-color-secondary);
+    background-color: var(--spectrum-alias-background-color-primary);
   }
   .type-icon {
     display: flex;

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -20,10 +20,7 @@
   let sanitisedFields
   let fieldList
   let schema
-  // let assetIdCache
   let cachedValue
-  // $: value, console.log("VALUE UPDATED")
-  // $: $currentAsset, console.log("currentAsset updated ", $currentAsset)
 
   $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
   $: actionType = componentInstance.actionType
@@ -46,7 +43,6 @@
   $: options = Object.keys(schema || {})
   $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options)
   $: updateSanitsedFields(sanitisedValue)
-
   $: unconfigured = buildUnconfiguredOptions(schema, sanitisedFields)
 
   // Builds unused ones only
@@ -105,7 +101,7 @@
     const type = getComponentForField(instance.field, schema)
     instance._component = `@budibase/standard-components/${type}`
 
-    const sudoComponentInstance = store.actions.components.createInstance(
+    const pseudoComponentInstance = store.actions.components.createInstance(
       instance._component,
       {
         _instanceName: instance.field,
@@ -116,7 +112,7 @@
       {}
     )
 
-    return { ...instance, ...sudoComponentInstance }
+    return { ...instance, ...pseudoComponentInstance }
   }
 
   $: if (sanitisedFields) {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte

@@ -60,4 +60,7 @@
   .info :global(a:hover) {
     color: var(--spectrum-global-color-gray-900);
   }
+  .info :global(a) {
+    text-decoration: underline;
+  }
 </style>

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -211,19 +211,17 @@
           {/if}
         </BlockComponent>
       {/if}
-      {#key fields}
-        <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
-          {#each fields as field, idx}
-            {#if getComponentForField(field) && field.active}
-              <BlockComponent
-                type={getComponentForField(field)}
-                props={getPropsForField(field)}
-                order={idx}
-              />
-            {/if}
-          {/each}
-        </BlockComponent>
-      {/key}
+      <BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}>
+        {#each fields as field, idx}
+          {#if getComponentForField(field) && field.active}
+            <BlockComponent
+              type={getComponentForField(field)}
+              props={getPropsForField(field)}
+              order={idx}
+            />
+          {/if}
+        {/each}
+      </BlockComponent>
     </BlockComponent>
   </BlockComponent>
 {:else}