From 7c7d909d811919c809736447df0f5837195605e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Jul 2023 08:56:16 +0100
Subject: [PATCH 1/2] Update validation editor setting to be full width and
 have descriptive text

---
 .../ValidationEditor/ValidationEditor.svelte  | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
index 6c62c9f5af..6db24e8d69 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
@@ -8,16 +8,29 @@
   export let componentDefinition
   export let type
 
+  const dispatch = createEventDispatcher()
   let drawer
 
-  const dispatch = createEventDispatcher()
+  $: text = getText(value)
+
   const save = () => {
     dispatch("change", value)
     drawer.hide()
   }
+
+  const getText = rules => {
+    if (!rules?.length) {
+      return "No rules set"
+    } else {
+      return `${rules.length} rule${rules.length === 1 ? "" : "s"} set`
+    }
+  }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure validation</ActionButton>
+<div class="validation-editor">
+  <ActionButton on:click={drawer.show}>{text}</ActionButton>
+</div>
+
 <Drawer bind:this={drawer} title="Validation Rules">
   <svelte:fragment slot="description">
     Configure validation rules for this field.
@@ -31,3 +44,9 @@
     {componentDefinition}
   />
 </Drawer>
+
+<style>
+  .validation-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>

From ae8ed1a1e55bdea60e0d5fbd6ab37527a3e50a49 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Jul 2023 09:36:20 +0100
Subject: [PATCH 2/2] Add filtering to relationship picker

---
 .../design/settings/componentSettings.js      |  2 +
 .../controls/FilterEditor/FilterEditor.svelte |  5 ++-
 .../controls/RelationshipFilterEditor.svelte  | 35 ++++++++++++++++
 packages/client/manifest.json                 | 15 ++++---
 .../app/forms/RelationshipField.svelte        | 40 ++++++++-----------
 5 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 314391e77c..8b151564a1 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -23,6 +23,7 @@ import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import GridColumnEditor from "./controls/ColumnEditor/GridColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
+import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -44,6 +45,7 @@ const componentMap = {
   schema: SchemaSelect,
   section: SectionSelect,
   filter: FilterEditor,
+  "filter/relationship": RelationshipFilterEditor,
   url: URLSelect,
   fieldConfiguration: FieldConfiguration,
   columns: ColumnEditor,
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
index 88c3842f54..828d189850 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
@@ -13,13 +13,14 @@
   export let value = []
   export let componentInstance
   export let bindings = []
+  export let schema = null
 
   let drawer
 
   $: tempValue = value
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, datasource)?.schema
-  $: schemaFields = Object.values(schema || {})
+  $: dsSchema = getSchemaForDatasource($currentAsset, datasource)?.schema
+  $: schemaFields = Object.values(schema || dsSchema || {})
   $: text = getText(value?.filter(filter => filter.field))
 
   async function saveFilter() {
diff --git a/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte b/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte
new file mode 100644
index 0000000000..0010a22d15
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { currentAsset } from "builderStore"
+  import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import {
+    getDatasourceForProvider,
+    getSchemaForDatasource,
+  } from "builderStore/dataBinding"
+  import { tables } from "stores/backend"
+  import FilterEditor from "./FilterEditor/FilterEditor.svelte"
+
+  export let componentInstance
+
+  // Extract which relationship column we're using
+  $: column = componentInstance.field
+
+  // Find the closest parent form
+  $: form = findClosestMatchingComponent(
+    $currentAsset.props,
+    componentInstance._id,
+    component => component._component.endsWith("/form")
+  )
+
+  // Get that form's schema
+  $: datasource = getDatasourceForProvider($currentAsset, form)
+  $: formSchema = getSchemaForDatasource($currentAsset, datasource)?.schema
+
+  // Get the schema for the relationship field that this picker is using
+  $: columnSchema = formSchema?.[column]
+
+  // Get the schema for the table on the other side of this relationship
+  $: linkedTable = $tables.list.find(x => x._id === columnSchema?.tableId)
+  $: schema = linkedTable?.schema
+</script>
+
+<FilterEditor on:change {...$$props} {schema} />
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index e336ad3817..2c8bab6448 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3489,6 +3489,16 @@
           }
         ]
       },
+      {
+        "type": "validation/link",
+        "label": "Validation",
+        "key": "validation"
+      },
+      {
+        "type": "filter/relationship",
+        "label": "Filtering",
+        "key": "filter"
+      },
       {
         "type": "boolean",
         "label": "Autocomplete",
@@ -3500,11 +3510,6 @@
         "label": "Disabled",
         "key": "disabled",
         "defaultValue": false
-      },
-      {
-        "type": "validation/link",
-        "label": "Validation",
-        "key": "validation"
       }
     ]
   },
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index 735b44b9ae..0c8b076a67 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -1,5 +1,6 @@
 <script>
   import { CoreSelect, CoreMultiselect } from "@budibase/bbui"
+  import { fetchData } from "@budibase/frontend-core"
   import { getContext } from "svelte"
   import Field from "./Field.svelte"
   import { FieldTypes } from "../../../constants"
@@ -14,43 +15,34 @@
   export let autocomplete = false
   export let defaultValue
   export let onChange
+  export let filter
 
   let fieldState
   let fieldApi
   let fieldSchema
-
-  let options = []
   let tableDefinition
 
   $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
-  $: fetchRows(linkedTableId)
-  $: fetchTable(linkedTableId)
+  $: fetch = fetchData({
+    API,
+    datasource: {
+      type: "table",
+      tableId: linkedTableId,
+    },
+    options: {
+      filter,
+      limit: 100,
+    },
+  })
+  $: fetch.update({ filter })
+  $: options = $fetch.rows
+  $: tableDefinition = $fetch.definition
   $: singleValue = flatten(fieldState?.value)?.[0]
   $: multiValue = flatten(fieldState?.value) ?? []
   $: component = multiselect ? CoreMultiselect : CoreSelect
   $: expandedDefaultValue = expand(defaultValue)
 
-  const fetchTable = async id => {
-    if (id) {
-      try {
-        tableDefinition = await API.fetchTableDefinition(id)
-      } catch (error) {
-        tableDefinition = null
-      }
-    }
-  }
-
-  const fetchRows = async id => {
-    if (id) {
-      try {
-        options = await API.fetchTableData(id)
-      } catch (error) {
-        options = []
-      }
-    }
-  }
-
   const flatten = values => {
     if (!values) {
       return []