Merge with master, fix repeater block scope, fix grid block global actions

packages/builder/src/builderStore/dataBinding.js

@@ -254,7 +254,7 @@ export const getComponentContexts = (
     delete map[componentId]
   }
 
-  return Object.values(map)
+  return Object.values(map).filter(x => x.contexts.length > 0)
 }
 
 /**

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/utils.js

@@ -1,5 +1,4 @@
 import { getComponentContexts } from "builderStore/dataBinding"
-import { store } from "builderStore"
 import { capitalise } from "helpers"
 
 // Generates bindings for all components that provider "datasource like"
@@ -8,52 +7,51 @@ import { capitalise } from "helpers"
 // Some examples are saving rows or duplicating rows.
 export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
   // Get all form context providers
-  const formComponents = getComponentContexts(asset, componentId, "form", {
-    includeSelf: nested,
-  })
-
+  const formComponentContexts = getComponentContexts(
+    asset,
+    componentId,
+    "form",
+    {
+      includeSelf: nested,
+    }
+  )
   // Get all schema context providers
-  const schemaComponents = getComponentContexts(asset, componentId, "schema", {
-    includeSelf: nested,
-  })
+  const schemaComponentContexts = getComponentContexts(
+    asset,
+    componentId,
+    "schema",
+    {
+      includeSelf: nested,
+    }
+  )
 
-  // Generate contexts for all form providers
-  const formContexts = formComponents.map(component => ({
-    component,
-    context: extractComponentContext(component, "form"),
-  }))
-
-  // Generate contexts for all schema providers
-  const schemaContexts = schemaComponents.map(component => ({
-    component,
-    context: extractComponentContext(component, "schema"),
-  }))
+  console.log(formComponentContexts)
 
   // Check for duplicate contexts by the same component. In this case, attempt
   // to label contexts with their suffixes
-  schemaContexts.forEach(schemaContext => {
+  schemaComponentContexts.forEach(schemaContext => {
     // Check if we have a form context for this component
     const id = schemaContext.component._id
-    const existing = formContexts.find(x => x.component._id === id)
+    const existing = formComponentContexts.find(x => x.component._id === id)
     if (existing) {
-      if (existing.context.suffix) {
-        const suffix = capitalise(existing.context.suffix)
+      if (existing.contexts[0].suffix) {
+        const suffix = capitalise(existing.contexts[0].suffix)
         existing.readableSuffix = ` - ${suffix}`
       }
-      if (schemaContext.context.suffix) {
-        const suffix = capitalise(schemaContext.context.suffix)
+      if (schemaContext.contexts[0].suffix) {
+        const suffix = capitalise(schemaContext.contexts[0].suffix)
         schemaContext.readableSuffix = ` - ${suffix}`
       }
     }
   })
 
   // Generate bindings for all contexts
-  const allContexts = formContexts.concat(schemaContexts)
-  return allContexts.map(({ component, context, readableSuffix }) => {
+  const allContexts = formComponentContexts.concat(schemaComponentContexts)
+  return allContexts.map(({ component, contexts, readableSuffix }) => {
     let readableBinding = component._instanceName
     let runtimeBinding = component._id
-    if (context.suffix) {
-      runtimeBinding += `-${context.suffix}`
+    if (contexts[0].suffix) {
+      runtimeBinding += `-${contexts[0].suffix}`
     }
     if (readableSuffix) {
       readableBinding += readableSuffix
@@ -64,13 +62,3 @@ export const getDatasourceLikeProviders = ({ asset, componentId, nested }) => {
     }
   })
 }
-
-// Gets a context definition of a certain type from a component definition
-const extractComponentContext = (component, contextType) => {
-  const def = store.actions.components.getDefinition(component?._component)
-  if (!def) {
-    return null
-  }
-  const contexts = Array.isArray(def.context) ? def.context : [def.context]
-  return contexts.find(context => context?.type === contextType)
-}

packages/client/manifest.json

@@ -6003,7 +6003,8 @@
       },
       {
         "type": "schema",
-        "suffix": "repeater"
+        "suffix": "repeater",
+        "scope": "local"
       }
     ]
   },

packages/client/src/components/app/GridBlock.svelte

@@ -19,7 +19,36 @@
   export let onRowClick = null
   export let buttons = null
 
-  // parses columns to fix older formats
+  const context = getContext("context")
+  const component = getContext("component")
+  const {
+    styleable,
+    API,
+    builderStore,
+    notificationStore,
+    enrichButtonActions,
+    ActionTypes,
+    createContextStore,
+    Provider,
+  } = getContext("sdk")
+
+  let grid
+
+  $: columnWhitelist = parsedColumns
+    ?.filter(col => col.active)
+    ?.map(col => col.field)
+  $: schemaOverrides = getSchemaOverrides(parsedColumns)
+  $: enrichedButtons = enrichButtons(buttons)
+  $: parsedColumns = getParsedColumns(columns)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => grid?.getContext()?.rows.actions.refreshData(),
+      metadata: { dataSource: table },
+    },
+  ]
+
+  // Parses columns to fix older formats
   const getParsedColumns = columns => {
     // If the first element has an active key all elements should be in the new format
     if (columns?.length && columns[0]?.active !== undefined) {
@@ -33,28 +62,6 @@
     }))
   }
 
-  $: parsedColumns = getParsedColumns(columns)
-
-  const context = getContext("context")
-  const component = getContext("component")
-  const {
-    styleable,
-    API,
-    builderStore,
-    notificationStore,
-    enrichButtonActions,
-    ActionTypes,
-    createContextStore,
-  } = getContext("sdk")
-
-  let grid
-
-  $: columnWhitelist = parsedColumns
-    ?.filter(col => col.active)
-    ?.map(col => col.field)
-  $: schemaOverrides = getSchemaOverrides(parsedColumns)
-  $: enrichedButtons = enrichButtons(buttons)
-
   const getSchemaOverrides = columns => {
     let overrides = {}
     columns?.forEach(column => {
@@ -78,11 +85,6 @@
         const id = get(component).id
         const gridContext = createContextStore(context)
         gridContext.actions.provideData(id, row)
-        gridContext.actions.provideAction(
-          id,
-          ActionTypes.RefreshDatasource,
-          () => grid?.getContext()?.rows.actions.refreshData()
-        )
         const fn = enrichButtonActions(settings.onClick, get(gridContext))
         return await fn?.({ row })
       },
@@ -94,29 +96,31 @@
   use:styleable={$component.styles}
   class:in-builder={$builderStore.inBuilder}
 >
-  <Grid
-    bind:this={grid}
-    datasource={table}
-    {API}
-    {stripeRows}
-    {initialFilter}
-    {initialSortColumn}
-    {initialSortOrder}
-    {fixedRowHeight}
-    {columnWhitelist}
-    {schemaOverrides}
-    canAddRows={allowAddRows}
-    canEditRows={allowEditRows}
-    canDeleteRows={allowDeleteRows}
-    canEditColumns={false}
-    canExpandRows={false}
-    canSaveSchema={false}
-    showControls={false}
-    notifySuccess={notificationStore.actions.success}
-    notifyError={notificationStore.actions.error}
-    buttons={enrichedButtons}
-    on:rowclick={e => onRowClick?.({ row: e.detail })}
-  />
+  <Provider {actions}>
+    <Grid
+      bind:this={grid}
+      datasource={table}
+      {API}
+      {stripeRows}
+      {initialFilter}
+      {initialSortColumn}
+      {initialSortOrder}
+      {fixedRowHeight}
+      {columnWhitelist}
+      {schemaOverrides}
+      canAddRows={allowAddRows}
+      canEditRows={allowEditRows}
+      canDeleteRows={allowDeleteRows}
+      canEditColumns={false}
+      canExpandRows={false}
+      canSaveSchema={false}
+      showControls={false}
+      notifySuccess={notificationStore.actions.success}
+      notifyError={notificationStore.actions.error}
+      buttons={enrichedButtons}
+      on:rowclick={e => onRowClick?.({ row: e.detail })}
+    />
+  </Provider>
 </div>
 
 <style>