Extract binding utils

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

@@ -31,6 +31,7 @@
   import IntegrationQueryEditor from "@/components/integration/index.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { findAllComponents } from "@/helpers/components"
+  import { extractFields, extractRelationships } from "@/helpers/bindings"
   import ClientBindingPanel from "@/components/common/bindings/ClientBindingPanel.svelte"
   import DataSourceCategory from "@/components/design/settings/controls/DataSourceSelect/DataSourceCategory.svelte"
   import { API } from "@/api"
@@ -81,46 +82,8 @@
       value: `{{ literal ${safe(provider._id)} }}`,
       type: "provider",
     }))
-  $: links = bindings
+  $: links = extractRelationships(bindings)
-    // Get only link bindings
+  $: fields = extractFields(bindings)
-    .filter(x => x.fieldSchema?.type === "link")
-    // Filter out bindings provided by forms
-    .filter(x => !x.component?.endsWith("/form"))
-    .map(binding => {
-      const { providerId, readableBinding, fieldSchema } = binding || {}
-      const { name, tableId } = fieldSchema || {}
-      const safeProviderId = safe(providerId)
-      return {
-        providerId,
-        label: readableBinding,
-        fieldName: name,
-        tableId,
-        type: "link",
-        // These properties will be enriched by the client library and provide
-        // details of the parent row of the relationship field, from context
-        rowId: `{{ ${safeProviderId}.${safe("_id")} }}`,
-        rowTableId: `{{ ${safeProviderId}.${safe("tableId")} }}`,
-      }
-    })
-  $: fields = bindings
-    .filter(
-      x =>
-        x.fieldSchema?.type === "attachment" ||
-        (x.fieldSchema?.type === "array" && x.tableId)
-    )
-    .map(binding => {
-      const { providerId, readableBinding, runtimeBinding } = binding
-      const { name, type, tableId } = binding.fieldSchema
-      return {
-        providerId,
-        label: readableBinding,
-        fieldName: name,
-        fieldType: type,
-        tableId,
-        type: "field",
-        value: `{{ literal ${runtimeBinding} }}`,
-      }
-    })
   $: jsonArrays = bindings
     .filter(
       x =>

packages/builder/src/helpers/bindings.ts

@@ -0,0 +1,50 @@
+import { makePropSafe } from "@budibase/string-templates"
+import { UIBinding } from "@budibase/types"
+
+export function extractRelationships(bindings: UIBinding[]) {
+  return (
+    bindings
+      // Get only link bindings
+      .filter(x => x.fieldSchema?.type === "link")
+      // Filter out bindings provided by forms
+      .filter(x => !x.component?.endsWith("/form"))
+      .map(binding => {
+        const { providerId, readableBinding, fieldSchema } = binding || {}
+        const { name, tableId } = fieldSchema || {}
+        const safeProviderId = makePropSafe(providerId)
+        return {
+          providerId,
+          label: readableBinding,
+          fieldName: name,
+          tableId,
+          type: "link",
+          // These properties will be enriched by the client library and provide
+          // details of the parent row of the relationship field, from context
+          rowId: `{{ ${safeProviderId}.${makePropSafe("_id")} }}`,
+          rowTableId: `{{ ${safeProviderId}.${makePropSafe("tableId")} }}`,
+        }
+      })
+  )
+}
+
+export function extractFields(bindings: UIBinding[]) {
+  return bindings
+    .filter(
+      x =>
+        x.fieldSchema?.type === "attachment" ||
+        (x.fieldSchema?.type === "array" && x.tableId)
+    )
+    .map(binding => {
+      const { providerId, readableBinding, runtimeBinding } = binding
+      const { name, type, tableId } = binding.fieldSchema!
+      return {
+        providerId,
+        label: readableBinding,
+        fieldName: name,
+        fieldType: type,
+        tableId,
+        type: "field",
+        value: `{{ literal ${runtimeBinding} }}`,
+      }
+    })
+}

packages/builder/src/helpers/index.ts

@@ -10,3 +10,4 @@ export {
   isBuilderInputFocused,
 } from "./helpers"
 export * as featureFlag from "./featureFlags"
+export * as bindings from "./bindings"

packages/types/src/ui/bindings/binding.ts

@@ -24,3 +24,16 @@ export type InsertAtPositionFn = (_: {
   value: string
   cursor?: { anchor: number }
 }) => void
+
+export interface UIBinding {
+  tableId?: string
+  fieldSchema?: {
+    name: string
+    tableId: string
+    type: string
+  }
+  component?: string
+  providerId: string
+  readableBinding?: string
+  runtimeBinding?: string
+}