From 6ad3df2e7f4ef54d46a6ed50b307b55dec91d193 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 1 Nov 2021 17:18:38 +0000
Subject: [PATCH 01/24] Add initial structure of table with search block

---
 .../design/AppPreview/componentStructure.json |  7 ++
 packages/client/manifest.json                 | 83 ++++++++++++++++
 .../app/blocks/TableWithSearch.svelte         | 99 +++++++++++++++++++
 .../components/app/blocks/block-builder.js    | 14 +++
 .../app/blocks/component-builder.js           | 49 +++++++++
 .../client/src/components/app/blocks/index.js |  1 +
 packages/client/src/components/app/index.js   |  1 +
 7 files changed, 254 insertions(+)
 create mode 100644 packages/client/src/components/app/blocks/TableWithSearch.svelte
 create mode 100644 packages/client/src/components/app/blocks/block-builder.js
 create mode 100644 packages/client/src/components/app/blocks/component-builder.js
 create mode 100644 packages/client/src/components/app/blocks/index.js

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 3bc2554fde..b6675c2480 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -1,4 +1,11 @@
 [
+  {
+    "name": "Blocks",
+    "icon": "Article",
+    "children": [
+      "tablewithsearch"
+    ]
+  },
   "section",
   "container",
   "dataprovider",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2adfd96626..9b0bf7605c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2574,5 +2574,88 @@
         "label": "Horizontal"
       }
     ]
+  },
+  "tablewithsearch": {
+    "block": true,
+    "name": "Table with search",
+    "icon": "Table",
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "dataSource"
+      },
+      {
+        "type": "multifield",
+        "label": "Search Columns",
+        "key": "searchColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "filter"
+      },
+      {
+        "type": "field",
+        "label": "Sort Column",
+        "key": "sortColumn"
+      },
+      {
+        "type": "select",
+        "label": "Sort Order",
+        "key": "sortOrder",
+        "options": ["Ascending", "Descending"],
+        "defaultValue": "Descending"
+      },
+      {
+        "type": "boolean",
+        "label": "Paginate",
+        "key": "paginate",
+        "defaultValue": true
+      },
+      {
+        "type": "number",
+        "label": "Row Count",
+        "key": "rowCount",
+        "defaultValue": 8
+      },
+      {
+        "type": "multifield",
+        "label": "Table Columns",
+        "key": "tableColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Quiet",
+        "key": "quiet"
+      },
+      {
+        "type": "boolean",
+        "label": "Auto Columns",
+        "key": "showAutoColumns",
+        "defaultValue": false
+      }
+    ]
   }
 }
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
new file mode 100644
index 0000000000..dba50eb4b8
--- /dev/null
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -0,0 +1,99 @@
+<script>
+  import { getContext } from "svelte"
+  import { BlockBuilder } from "./block-builder"
+  import Component from "components/Component.svelte"
+
+  // Common props
+  export let searchColumns
+  export let dataSource
+
+  // Data provider props
+  export let filter
+  export let sortColumn
+  export let sortOrder
+  export let paginate
+
+  // Table props
+  export let tableColumns
+  export let showAutoColumns
+  export let rowCount
+  export let quiet
+  export let size
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  let instance
+  $: {
+    const builder = new BlockBuilder($component)
+
+    const form = builder.createComponent("form", {
+      dataSource,
+    })
+
+    let newFilter = [...(filter || [])]
+
+    // Add search bar if required
+    if (searchColumns?.length) {
+      const searchContainer = builder
+        .createComponent("container", {
+          direction: "row",
+          hAlign: "right",
+          vAlign: "middle",
+          gap: "M",
+          wrap: true,
+        })
+        .setStyles({
+          "margin-bottom": "20px",
+        })
+
+      searchColumns?.forEach(column => {
+        const field = builder.createComponent("stringfield", {
+          field: column,
+          placeholder: column,
+          label: column,
+        })
+
+        searchContainer.addChild(field)
+
+        newFilter.push({
+          field: column,
+          operator: "equal",
+          type: "string",
+          valueType: "Binding",
+          value: `{{ [${form.id}].[${column}] }}`,
+        })
+      })
+
+      form.addChild(searchContainer)
+    }
+
+    const dataProvider = builder.createComponent("dataprovider", {
+      dataSource,
+      filter: newFilter,
+      sortColumn,
+      sortOrder,
+      paginate,
+      limit: rowCount,
+    })
+
+    const table = builder.createComponent("table", {
+      dataProvider: `{{ literal [${dataProvider.id}] }}`,
+      columns: tableColumns,
+      showAutoColumns,
+      rowCount,
+      quiet,
+      size,
+    })
+
+    dataProvider.addChild(table)
+
+    form.addChild(dataProvider)
+    instance = form.build()
+    console.log("new instance")
+  }
+</script>
+
+<div use:styleable={$component.styles}>
+  <Component {instance} />
+</div>
diff --git a/packages/client/src/components/app/blocks/block-builder.js b/packages/client/src/components/app/blocks/block-builder.js
new file mode 100644
index 0000000000..2d56094806
--- /dev/null
+++ b/packages/client/src/components/app/blocks/block-builder.js
@@ -0,0 +1,14 @@
+import { ComponentBuilder } from "./component-builder"
+
+export class BlockBuilder {
+  context
+  componentCount = 0
+
+  constructor(context) {
+    this.context = context
+  }
+
+  createComponent(type, props) {
+    return new ComponentBuilder(this, type, props)
+  }
+}
diff --git a/packages/client/src/components/app/blocks/component-builder.js b/packages/client/src/components/app/blocks/component-builder.js
new file mode 100644
index 0000000000..90ce30c066
--- /dev/null
+++ b/packages/client/src/components/app/blocks/component-builder.js
@@ -0,0 +1,49 @@
+export class ComponentBuilder {
+  context
+
+  constructor(blockBuilder, type, props) {
+    this.blockBuilder = blockBuilder
+    this.type = type
+    this.id = `${blockBuilder.context.id}-${blockBuilder.componentCount++}`
+    this.props = props
+    this.children = []
+    this.styles = null
+  }
+
+  setProp(key, value) {
+    this.props[key] = value
+    return this
+  }
+
+  setProps(props) {
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+    return this
+  }
+
+  setStyles(styles) {
+    this.styles = styles
+    return this
+  }
+
+  addChild(component) {
+    this.children.push(component)
+    return this
+  }
+
+  build() {
+    return {
+      _component: `@budibase/standard-components/${this.type}`,
+      _id: this.id,
+      _children: this.children?.map(child => child.build()),
+      _styles: {
+        normal: {
+          ...this.styles,
+        },
+      },
+      ...this.props,
+    }
+  }
+}
diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js
new file mode 100644
index 0000000000..16b123d17e
--- /dev/null
+++ b/packages/client/src/components/app/blocks/index.js
@@ -0,0 +1 @@
+export { default as tablewithsearch } from "./TableWithSearch.svelte"
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index b01763e2f0..92725f0738 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -32,6 +32,7 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+export * from "./blocks"
 
 // Deprecated component left for compatibility in old apps
 export { default as navigation } from "./deprecated/Navigation.svelte"

From 808d2d0f731d10605ade46cfc23f6d9212f109bf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Nov 2021 08:45:27 +0000
Subject: [PATCH 02/24] Add generic block structure with support for writing
 blocks like normal svelte components rather than a JSON builder

---
 packages/client/manifest.json                 |   1 -
 .../client/src/components/Component.svelte    |   6 +-
 .../src/components/app/DataProvider.svelte    |   2 +-
 .../src/components/app/blocks/Block.svelte    |  14 ++
 .../app/blocks/BlockComponent.svelte          |  33 ++++
 .../app/blocks/TableWithSearch.svelte         | 148 ++++++++----------
 packages/client/src/utils/styleable.js        |  12 +-
 7 files changed, 125 insertions(+), 91 deletions(-)
 create mode 100644 packages/client/src/components/app/blocks/Block.svelte
 create mode 100644 packages/client/src/components/app/blocks/BlockComponent.svelte

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 9b0bf7605c..08744c1952 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2576,7 +2576,6 @@
     ]
   },
   "tablewithsearch": {
-    "block": true,
     "name": "Table with search",
     "icon": "Table",
     "styles": ["size"],
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index faf0226604..c13a50d52e 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -40,6 +40,7 @@
   // Get contexts
   const context = getContext("context")
   const insideScreenslot = !!getContext("screenslot")
+  const insideBlock = !!getContext("block")
 
   // Create component context
   const componentStore = writable({})
@@ -53,7 +54,8 @@
   $: name = instance._instanceName
   $: interactive =
     $builderStore.inBuilder &&
-    ($builderStore.previewType === "layout" || insideScreenslot)
+    ($builderStore.previewType === "layout" || insideScreenslot) &&
+    !insideBlock
   $: empty = interactive && !children.length && definition?.hasChildren
   $: emptyState = empty && definition?.showEmptyState !== false
   $: rawProps = getRawProps(instance)
@@ -197,6 +199,8 @@
           {/each}
         {:else if emptyState}
           <Placeholder />
+        {:else if insideBlock}
+          <slot />
         {/if}
       </svelte:component>
     </div>
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 991c41b77d..df59820506 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -234,7 +234,7 @@
         <ProgressCircle />
       </div>
     {:else}
-      {#if !$component.children}
+      {#if $component.emptyState}
         <Placeholder />
       {:else}
         <slot />
diff --git a/packages/client/src/components/app/blocks/Block.svelte b/packages/client/src/components/app/blocks/Block.svelte
new file mode 100644
index 0000000000..112b2387a7
--- /dev/null
+++ b/packages/client/src/components/app/blocks/Block.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { getContext, setContext } from "svelte"
+
+  const component = getContext("component")
+  const { styleable } = getContext("sdk")
+
+  setContext("block", {
+    id: $component.id,
+  })
+</script>
+
+<div use:styleable={$component.styles}>
+  <slot />
+</div>
diff --git a/packages/client/src/components/app/blocks/BlockComponent.svelte b/packages/client/src/components/app/blocks/BlockComponent.svelte
new file mode 100644
index 0000000000..5ef0509391
--- /dev/null
+++ b/packages/client/src/components/app/blocks/BlockComponent.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { getContext } from "svelte"
+  import { generate } from "shortid"
+  import Component from "components/Component.svelte"
+
+  export let type
+  export let props
+  export let styles
+  export let id
+
+  const block = getContext("block")
+  const rand = generate()
+
+  $: id = block.id + rand
+  $: instance = createInstance(type, props, id)
+
+  const createInstance = (type, props, id) => {
+    return {
+      _component: `@budibase/standard-components/${type}`,
+      _id: id,
+      _styles: {
+        normal: {
+          ...styles,
+        },
+      },
+      ...props,
+    }
+  }
+</script>
+
+<Component {instance}>
+  <slot />
+</Component>
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index dba50eb4b8..95960e49af 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -1,99 +1,89 @@
 <script>
-  import { getContext } from "svelte"
-  import { BlockBuilder } from "./block-builder"
-  import Component from "components/Component.svelte"
+  import Block from "./Block.svelte"
+  import BlockComponent from "./BlockComponent.svelte"
 
-  // Common props
-  export let searchColumns
   export let dataSource
-
-  // Data provider props
+  export let searchColumns
   export let filter
   export let sortColumn
   export let sortOrder
   export let paginate
-
-  // Table props
   export let tableColumns
   export let showAutoColumns
   export let rowCount
   export let quiet
   export let size
 
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
+  let formId
+  let dataProviderId
 
-  let instance
-  $: {
-    const builder = new BlockBuilder($component)
+  $: enrichedFilter = enrichFilter(filter, searchColumns, formId)
 
-    const form = builder.createComponent("form", {
-      dataSource,
-    })
-
-    let newFilter = [...(filter || [])]
-
-    // Add search bar if required
-    if (searchColumns?.length) {
-      const searchContainer = builder
-        .createComponent("container", {
-          direction: "row",
-          hAlign: "right",
-          vAlign: "middle",
-          gap: "M",
-          wrap: true,
-        })
-        .setStyles({
-          "margin-bottom": "20px",
-        })
-
-      searchColumns?.forEach(column => {
-        const field = builder.createComponent("stringfield", {
-          field: column,
-          placeholder: column,
-          label: column,
-        })
-
-        searchContainer.addChild(field)
-
-        newFilter.push({
-          field: column,
-          operator: "equal",
-          type: "string",
-          valueType: "Binding",
-          value: `{{ [${form.id}].[${column}] }}`,
-        })
+  const enrichFilter = (filter, searchColumns, formId) => {
+    let enrichedFilter = [...(filter || [])]
+    searchColumns?.forEach(column => {
+      enrichedFilter.push({
+        field: column,
+        operator: "equal",
+        type: "string",
+        valueType: "Binding",
+        value: `{{ [${formId}].[${column}] }}`,
       })
-
-      form.addChild(searchContainer)
-    }
-
-    const dataProvider = builder.createComponent("dataprovider", {
-      dataSource,
-      filter: newFilter,
-      sortColumn,
-      sortOrder,
-      paginate,
-      limit: rowCount,
     })
-
-    const table = builder.createComponent("table", {
-      dataProvider: `{{ literal [${dataProvider.id}] }}`,
-      columns: tableColumns,
-      showAutoColumns,
-      rowCount,
-      quiet,
-      size,
-    })
-
-    dataProvider.addChild(table)
-
-    form.addChild(dataProvider)
-    instance = form.build()
-    console.log("new instance")
+    return enrichedFilter
   }
 </script>
 
-<div use:styleable={$component.styles}>
-  <Component {instance} />
-</div>
+<Block>
+  <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+    {#if searchColumns?.length}
+      <div class="search">
+        {#each searchColumns as column}
+          <BlockComponent
+            type="stringfield"
+            props={{
+              field: column,
+              placeholder: column,
+              label: column,
+            }}
+          />
+        {/each}
+      </div>
+    {/if}
+    <BlockComponent
+      type="dataprovider"
+      bind:id={dataProviderId}
+      props={{
+        dataSource,
+        filter: enrichedFilter,
+        sortColumn,
+        sortOrder,
+        paginate,
+        limit: rowCount,
+      }}
+    >
+      <BlockComponent
+        type="table"
+        props={{
+          dataProvider: `{{ literal [${dataProviderId}] }}`,
+          columns: tableColumns,
+          showAutoColumns,
+          rowCount,
+          quiet,
+          size,
+        }}
+      />
+    </BlockComponent>
+  </BlockComponent>
+</Block>
+
+<style>
+  .search {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 10px;
+  }
+</style>
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 6a2562fb48..f35e45d3fe 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -64,9 +64,7 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      if (newStyles.interactive) {
-        builderStore.actions.selectComponent(componentId)
-      }
+      builderStore.actions.selectComponent(componentId)
       event.preventDefault()
       event.stopPropagation()
       return false
@@ -77,7 +75,7 @@ export const styleable = (node, styles = {}) => {
     node.addEventListener("mouseout", applyNormalStyles)
 
     // Add builder preview click listener
-    if (get(builderStore).inBuilder) {
+    if (newStyles.interactive) {
       node.addEventListener("click", selectComponent, false)
     }
 
@@ -89,11 +87,7 @@ export const styleable = (node, styles = {}) => {
   const removeListeners = () => {
     node.removeEventListener("mouseover", applyHoverStyles)
     node.removeEventListener("mouseout", applyNormalStyles)
-
-    // Remove builder preview click listener
-    if (get(builderStore).inBuilder) {
-      node.removeEventListener("click", selectComponent)
-    }
+    node.removeEventListener("click", selectComponent)
   }
 
   // Apply initial styles

From 7bd46a6ecb985aaebee55c7ca45105872db7865f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Nov 2021 08:47:19 +0000
Subject: [PATCH 03/24] Remove old files and tidy up

---
 .../components/{app/blocks => }/Block.svelte  |  0
 .../{app/blocks => }/BlockComponent.svelte    |  0
 .../components/app/blocks/block-builder.js    | 14 ------
 .../app/blocks/component-builder.js           | 49 -------------------
 4 files changed, 63 deletions(-)
 rename packages/client/src/components/{app/blocks => }/Block.svelte (100%)
 rename packages/client/src/components/{app/blocks => }/BlockComponent.svelte (100%)
 delete mode 100644 packages/client/src/components/app/blocks/block-builder.js
 delete mode 100644 packages/client/src/components/app/blocks/component-builder.js

diff --git a/packages/client/src/components/app/blocks/Block.svelte b/packages/client/src/components/Block.svelte
similarity index 100%
rename from packages/client/src/components/app/blocks/Block.svelte
rename to packages/client/src/components/Block.svelte
diff --git a/packages/client/src/components/app/blocks/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
similarity index 100%
rename from packages/client/src/components/app/blocks/BlockComponent.svelte
rename to packages/client/src/components/BlockComponent.svelte
diff --git a/packages/client/src/components/app/blocks/block-builder.js b/packages/client/src/components/app/blocks/block-builder.js
deleted file mode 100644
index 2d56094806..0000000000
--- a/packages/client/src/components/app/blocks/block-builder.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ComponentBuilder } from "./component-builder"
-
-export class BlockBuilder {
-  context
-  componentCount = 0
-
-  constructor(context) {
-    this.context = context
-  }
-
-  createComponent(type, props) {
-    return new ComponentBuilder(this, type, props)
-  }
-}
diff --git a/packages/client/src/components/app/blocks/component-builder.js b/packages/client/src/components/app/blocks/component-builder.js
deleted file mode 100644
index 90ce30c066..0000000000
--- a/packages/client/src/components/app/blocks/component-builder.js
+++ /dev/null
@@ -1,49 +0,0 @@
-export class ComponentBuilder {
-  context
-
-  constructor(blockBuilder, type, props) {
-    this.blockBuilder = blockBuilder
-    this.type = type
-    this.id = `${blockBuilder.context.id}-${blockBuilder.componentCount++}`
-    this.props = props
-    this.children = []
-    this.styles = null
-  }
-
-  setProp(key, value) {
-    this.props[key] = value
-    return this
-  }
-
-  setProps(props) {
-    this.props = {
-      ...this.props,
-      ...props,
-    }
-    return this
-  }
-
-  setStyles(styles) {
-    this.styles = styles
-    return this
-  }
-
-  addChild(component) {
-    this.children.push(component)
-    return this
-  }
-
-  build() {
-    return {
-      _component: `@budibase/standard-components/${this.type}`,
-      _id: this.id,
-      _children: this.children?.map(child => child.build()),
-      _styles: {
-        normal: {
-          ...this.styles,
-        },
-      },
-      ...this.props,
-    }
-  }
-}

From 4cbe82c1db82697de4c17d5f21d172de33bbeb11 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Nov 2021 08:51:48 +0000
Subject: [PATCH 04/24] Add title setting to table with search block and fix
 import paths

---
 packages/client/manifest.json                      |  5 +++++
 .../components/app/blocks/TableWithSearch.svelte   | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 08744c1952..541bd80a18 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2580,6 +2580,11 @@
     "icon": "Table",
     "styles": ["size"],
     "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
       {
         "type": "dataSource",
         "label": "Data",
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index 95960e49af..a11f11be26 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -1,7 +1,9 @@
 <script>
-  import Block from "./Block.svelte"
-  import BlockComponent from "./BlockComponent.svelte"
+  import Block from "components/Block.svelte"
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { Heading } from "@budibase/bbui"
 
+  export let title
   export let dataSource
   export let searchColumns
   export let filter
@@ -38,6 +40,11 @@
   <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
     {#if searchColumns?.length}
       <div class="search">
+        {#if title}
+          <div class="title">
+            <Heading>{title}</Heading>
+          </div>
+        {/if}
         {#each searchColumns as column}
           <BlockComponent
             type="stringfield"
@@ -86,4 +93,7 @@
     margin-bottom: 20px;
     gap: 10px;
   }
+  .title {
+    flex: 1 1 auto;
+  }
 </style>

From ee7ab70f4d3fa672a9f5e514d2117d9b0c355c61 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Nov 2021 08:58:50 +0000
Subject: [PATCH 05/24] Comment some parts of blocks implementation for clarity

---
 packages/client/src/components/Block.svelte                  | 3 +++
 packages/client/src/components/BlockComponent.svelte         | 5 +++++
 .../client/src/components/app/blocks/TableWithSearch.svelte  | 1 +
 3 files changed, 9 insertions(+)

diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 112b2387a7..412dd6588a 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -4,6 +4,9 @@
   const component = getContext("component")
   const { styleable } = getContext("sdk")
 
+  // We need to set a block context to know we're inside a block, but also
+  // to be able to reference the actual component ID of the block from
+  // any depth
   setContext("block", {
     id: $component.id,
   })
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 5ef0509391..e12c6eb86e 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -6,6 +6,9 @@
   export let type
   export let props
   export let styles
+
+  // ID is only exposed as a prop so that it can be bound to from parent
+  // block components
   export let id
 
   const block = getContext("block")
@@ -14,6 +17,8 @@
   $: id = block.id + rand
   $: instance = createInstance(type, props, id)
 
+  // Create a fake component instance so that we can use the core Component
+  // to render this part of the block, taking advantage of binding enrichment
   const createInstance = (type, props, id) => {
     return {
       _component: `@budibase/standard-components/${type}`,
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index a11f11be26..f5f84b664a 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -21,6 +21,7 @@
 
   $: enrichedFilter = enrichFilter(filter, searchColumns, formId)
 
+  // Enrich the default filter with the specified search fields
   const enrichFilter = (filter, searchColumns, formId) => {
     let enrichedFilter = [...(filter || [])]
     searchColumns?.forEach(column => {

From 212e62b62e5e19d877a8fb0019fa8ac69d9f3b63 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 2 Nov 2021 12:58:38 +0000
Subject: [PATCH 06/24] Simplify some block logic

---
 packages/client/src/components/Block.svelte   |  4 +---
 .../src/components/BlockComponent.svelte      | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 412dd6588a..d8698a1d2c 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -7,9 +7,7 @@
   // We need to set a block context to know we're inside a block, but also
   // to be able to reference the actual component ID of the block from
   // any depth
-  setContext("block", {
-    id: $component.id,
-  })
+  setContext("block", { id: $component.id })
 </script>
 
 <div use:styleable={$component.styles}>
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index e12c6eb86e..02456322da 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -14,22 +14,18 @@
   const block = getContext("block")
   const rand = generate()
 
-  $: id = block.id + rand
-  $: instance = createInstance(type, props, id)
-
   // Create a fake component instance so that we can use the core Component
   // to render this part of the block, taking advantage of binding enrichment
-  const createInstance = (type, props, id) => {
-    return {
-      _component: `@budibase/standard-components/${type}`,
-      _id: id,
-      _styles: {
-        normal: {
-          ...styles,
-        },
+  $: id = block.id + rand
+  $: instance = {
+    _component: `@budibase/standard-components/${type}`,
+    _id: id,
+    _styles: {
+      normal: {
+        ...styles,
       },
-      ...props,
-    }
+    },
+    ...props,
   }
 </script>
 

From bea7a5955ec40f9908321d7a6c4a95716b3c42e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 11:02:59 +0000
Subject: [PATCH 07/24] Fix spectrum bug with larger checkboxes

---
 packages/bbui/src/Form/Core/Checkbox.svelte | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index ca3cef383f..4290984331 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -21,6 +21,7 @@
 <label
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
   class:is-invalid={!!error}
+  class:checked={value}
 >
   <input
     checked={value}
@@ -50,6 +51,21 @@
 </label>
 
 <style>
+  .spectrum-Checkbox--sizeM .spectrum-Checkbox-checkmark {
+    transform: scale(1);
+    left: 49%;
+    top: 50%;
+  }
+  .spectrum-Checkbox--sizeL .spectrum-Checkbox-checkmark {
+    transform: scale(1.1);
+    left: 55%;
+    top: 55%;
+  }
+  .spectrum-Checkbox--sizeXL .spectrum-Checkbox-checkmark {
+    transform: scale(1.2);
+    left: 60%;
+    top: 60%;
+  }
   .spectrum-Checkbox-input {
     opacity: 0;
   }

From 73d5d1289b1aab25e46991fad2dc1c24d03fe347 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 11:57:47 +0000
Subject: [PATCH 08/24] Standardise fetching schema from client apps to fix
 issues with determing schema for certain data sources

---
 packages/client/src/api/datasources.js        | 36 +++++++++++++++-
 packages/client/src/api/queries.js            |  9 +++-
 .../src/components/app/DataProvider.svelte    | 20 +++------
 .../src/components/app/forms/Form.svelte      | 41 +++++++++++--------
 4 files changed, 72 insertions(+), 34 deletions(-)

diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 508e1e8db0..467f9d8683 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -1,8 +1,8 @@
 import { cloneDeep } from "lodash/fp"
-import { fetchTableData } from "./tables"
+import { fetchTableData, fetchTableDefinition } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
-import { executeQuery } from "./queries"
+import { executeQuery, fetchQueryDefinition } from "./queries"
 
 /**
  * Fetches all rows for a particular Budibase data source.
@@ -39,3 +39,35 @@ export const fetchDatasource = async dataSource => {
   // Enrich the result is always an array
   return Array.isArray(rows) ? rows : []
 }
+
+/**
+ * Fetches the schema of any kind of datasource.
+ */
+export const fetchDatasourceSchema = async dataSource => {
+  if (!dataSource) {
+    return null
+  }
+  const { type } = dataSource
+
+  // Nested providers should already have exposed their own schema
+  if (type === "provider") {
+    return dataSource.value?.schema
+  }
+
+  // Tables, views and links can be fetched by table ID
+  if (
+    (type === "table" || type === "view" || type === "link") &&
+    dataSource.tableId
+  ) {
+    const table = await fetchTableDefinition(dataSource.tableId)
+    return table?.schema
+  }
+
+  // Queries can be fetched by query ID
+  if (type === "query" && dataSource._id) {
+    const definition = await fetchQueryDefinition(dataSource._id)
+    return definition?.schema
+  }
+
+  return null
+}
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 8735d9587b..257d07f8ef 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -5,7 +5,7 @@ import API from "./api"
  * Executes a query against an external data connector.
  */
 export const executeQuery = async ({ queryId, parameters }) => {
-  const query = await API.get({ url: `/api/queries/${queryId}` })
+  const query = await fetchQueryDefinition(queryId)
   if (query?.datasourceId == null) {
     notificationStore.actions.error("That query couldn't be found")
     return
@@ -24,3 +24,10 @@ export const executeQuery = async ({ queryId, parameters }) => {
   }
   return res
 }
+
+/**
+ * Fetches the definition of an external query.
+ */
+export const fetchQueryDefinition = async queryId => {
+  return await API.get({ url: `/api/queries/${queryId}`, cache: true })
+}
diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index df59820506..54e758ad3c 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -156,34 +156,24 @@
   }
 
   const getSchema = async dataSource => {
-    if (dataSource?.schema) {
-      schema = dataSource.schema
-    } else if (dataSource?.tableId) {
-      const definition = await API.fetchTableDefinition(dataSource.tableId)
-      schema = definition?.schema ?? {}
-    } else if (dataSource?.type === "provider") {
-      schema = dataSource.value?.schema ?? {}
-    } else {
-      schema = {}
-    }
+    let newSchema = (await API.fetchDatasourceSchema(dataSource)) || {}
 
     // Ensure there are "name" properties for all fields and that field schema
     // are objects
-    let fixedSchema = {}
-    Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
+    Object.entries(newSchema).forEach(([fieldName, fieldSchema]) => {
       if (typeof fieldSchema === "string") {
-        fixedSchema[fieldName] = {
+        newSchema[fieldName] = {
           type: fieldSchema,
           name: fieldName,
         }
       } else {
-        fixedSchema[fieldName] = {
+        newSchema[fieldName] = {
           ...fieldSchema,
           name: fieldName,
         }
       }
     })
-    schema = fixedSchema
+    schema = newSchema
     schemaLoaded = true
   }
 
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index 1fa8d7aa15..65cf7dc88b 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -34,25 +34,34 @@
     return closestContext || {}
   }
 
-  // Fetches the form schema from this form's dataSource, if one exists
+  // Fetches the form schema from this form's dataSource
   const fetchSchema = async () => {
-    if (!dataSource?.tableId) {
+    if (!dataSource) {
       schema = {}
-      table = null
-    } else {
-      table = await API.fetchTableDefinition(dataSource?.tableId)
-      if (table) {
-        if (dataSource?.type === "query") {
-          schema = {}
-          const params = table.parameters || []
-          params.forEach(param => {
-            schema[param.name] = { ...param, type: "string" }
-          })
-        } else {
-          schema = table.schema || {}
-        }
-      }
     }
+
+    // If the datasource is a query, then we instead use a schema of the query
+    // parameters rather than the output schema
+    else if (
+      dataSource.type === "query" &&
+      dataSource._id &&
+      actionType === "Create"
+    ) {
+      const query = await API.fetchQueryDefinition(dataSource._id)
+      let paramSchema = {}
+      const params = query.parameters || []
+      params.forEach(param => {
+        paramSchema[param.name] = { ...param, type: "string" }
+      })
+      schema = paramSchema
+    }
+
+    // For all other cases, just grab the normal schema
+    else {
+      const dataSourceSchema = await API.fetchDatasourceSchema(dataSource)
+      schema = dataSourceSchema || {}
+    }
+
     loaded = true
   }
 

From 7ec5c2b1f2cf9b462ad360cb1d7ceb2f5b1738ab Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 11:58:06 +0000
Subject: [PATCH 09/24] Allow table with search block to render correct
 components for all relevant field types

---
 packages/client/manifest.json                 |  18 +-
 packages/client/src/components/Block.svelte   |   5 +-
 .../app/blocks/TableWithSearch.svelte         | 166 +++++++++++++-----
 3 files changed, 129 insertions(+), 60 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 541bd80a18..fe6db323cb 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2626,13 +2626,6 @@
         "key": "rowCount",
         "defaultValue": 8
       },
-      {
-        "type": "multifield",
-        "label": "Table Columns",
-        "key": "tableColumns",
-        "dependsOn": "dataSource",
-        "placeholder": "All columns"
-      },
       {
         "type": "select",
         "label": "Size",
@@ -2649,14 +2642,21 @@
           }
         ]
       },
+      {
+        "type": "multifield",
+        "label": "Table Columns",
+        "key": "tableColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
       {
         "type": "boolean",
-        "label": "Quiet",
+        "label": "Quiet table variant",
         "key": "quiet"
       },
       {
         "type": "boolean",
-        "label": "Auto Columns",
+        "label": "Show auto columns",
         "key": "showAutoColumns",
         "defaultValue": false
       }
diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index d8698a1d2c..b5e610c1bb 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -2,7 +2,6 @@
   import { getContext, setContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
 
   // We need to set a block context to know we're inside a block, but also
   // to be able to reference the actual component ID of the block from
@@ -10,6 +9,4 @@
   setContext("block", { id: $component.id })
 </script>
 
-<div use:styleable={$component.styles}>
-  <slot />
-</div>
+<slot />
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index f5f84b664a..b3b6598cee 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount, getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -16,85 +17,156 @@
   export let quiet
   export let size
 
+  const { API, styleable } = getContext("sdk")
+  const context = getContext("context")
+  const component = getContext("component")
+  const schemaComponentMap = {
+    string: "stringfield",
+    options: "optionsfield",
+    number: "numberfield",
+    datetime: "datetimefield",
+    boolean: "booleanfield",
+  }
+
   let formId
   let dataProviderId
+  let schema
 
-  $: enrichedFilter = enrichFilter(filter, searchColumns, formId)
+  $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
+  $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
 
   // Enrich the default filter with the specified search fields
-  const enrichFilter = (filter, searchColumns, formId) => {
+  const enrichFilter = (filter, columns, formId) => {
     let enrichedFilter = [...(filter || [])]
-    searchColumns?.forEach(column => {
+    columns?.forEach(column => {
       enrichedFilter.push({
-        field: column,
+        field: column.name,
         operator: "equal",
         type: "string",
         valueType: "Binding",
-        value: `{{ [${formId}].[${column}] }}`,
+        value: `{{ [${formId}].[${column.name}] }}`,
       })
     })
     return enrichedFilter
   }
+
+  // Determine data types for search fields and only use those that are valid
+  const enrichSearchColumns = (searchColumns, schema) => {
+    let enrichedColumns = []
+    searchColumns?.forEach(column => {
+      const schemaType = schema?.[column]?.type
+      const componentType = schemaComponentMap[schemaType]
+      if (componentType) {
+        enrichedColumns.push({
+          name: column,
+          componentType,
+        })
+      }
+    })
+    return enrichedColumns
+  }
+
+  // Load the datasource schema on mount so we can determine column types
+  onMount(async () => {
+    if (dataSource) {
+      schema = await API.fetchDatasourceSchema(dataSource)
+    }
+  })
 </script>
 
 <Block>
-  <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-    {#if searchColumns?.length}
-      <div class="search">
-        {#if title}
+  <div class={size} use:styleable={$component.styles}>
+    <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+      {#if title || enrichedSearchColumns?.length}
+        <div class="header">
           <div class="title">
-            <Heading>{title}</Heading>
+            <Heading>{title || ""}</Heading>
           </div>
-        {/if}
-        {#each searchColumns as column}
-          <BlockComponent
-            type="stringfield"
-            props={{
-              field: column,
-              placeholder: column,
-              label: column,
-            }}
-          />
-        {/each}
-      </div>
-    {/if}
-    <BlockComponent
-      type="dataprovider"
-      bind:id={dataProviderId}
-      props={{
-        dataSource,
-        filter: enrichedFilter,
-        sortColumn,
-        sortOrder,
-        paginate,
-        limit: rowCount,
-      }}
-    >
+          {#if enrichedSearchColumns?.length}
+            <div class="search" class:mobile={$context.device.mobile}>
+              {#each enrichedSearchColumns as column}
+                <BlockComponent
+                  type={column.componentType}
+                  props={{
+                    field: column.name,
+                    placeholder: column.name,
+                    text: column.name,
+                    autoWidth: true,
+                  }}
+                />
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
       <BlockComponent
-        type="table"
+        type="dataprovider"
+        bind:id={dataProviderId}
         props={{
-          dataProvider: `{{ literal [${dataProviderId}] }}`,
-          columns: tableColumns,
-          showAutoColumns,
-          rowCount,
-          quiet,
-          size,
+          dataSource,
+          filter: enrichedFilter,
+          sortColumn,
+          sortOrder,
+          paginate,
+          limit: rowCount,
         }}
-      />
+      >
+        <BlockComponent
+          type="table"
+          props={{
+            dataProvider: `{{ literal [${dataProviderId}] }}`,
+            columns: tableColumns,
+            showAutoColumns,
+            rowCount,
+            quiet,
+            size,
+          }}
+        />
+      </BlockComponent>
     </BlockComponent>
-  </BlockComponent>
+  </div>
 </Block>
 
 <style>
-  .search {
+  .header {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
     margin-bottom: 20px;
-    gap: 10px;
   }
   .title {
     flex: 1 1 auto;
   }
+  .search {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    max-width: 100%;
+    flex-wrap: wrap;
+  }
+  .search :global(.component > *) {
+    width: 200px;
+  }
+  .search :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
+    width: 100%;
+  }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 0;
+  }
+  .search.mobile {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    width: 100%;
+  }
+  .search.mobile :global(.component > *) {
+    width: 100%;
+  }
 </style>

From c5433e6ef8bb4b4227fdc772438450be5f3ab511 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 15:26:15 +0000
Subject: [PATCH 10/24] Add support for tables updating server-side sorting

---
 .../src/components/app/DataProvider.svelte    | 68 +++++++++++++++----
 .../src/components/app/table/Table.svelte     | 15 +++-
 packages/client/src/constants.js              |  1 +
 3 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/app/DataProvider.svelte b/packages/client/src/components/app/DataProvider.svelte
index 54e758ad3c..a8e53f4906 100644
--- a/packages/client/src/components/app/DataProvider.svelte
+++ b/packages/client/src/components/app/DataProvider.svelte
@@ -35,28 +35,36 @@
   let pageNumber = 0
   let query = null
 
+  // Sorting can be overridden at run time, so we can't use the prop directly
+  let currentSortColumn = sortColumn
+  let currentSortOrder = sortOrder
+
   $: query = buildLuceneQuery(filter)
   $: internalTable = dataSource?.type === "table"
   $: nestedProvider = dataSource?.type === "provider"
   $: hasNextPage = bookmarks[pageNumber + 1] != null
   $: hasPrevPage = pageNumber > 0
   $: getSchema(dataSource)
-  $: sortType = getSortType(schema, sortColumn)
+  $: sortType = getSortType(schema, currentSortColumn)
+
+  // Wait until schema loads before loading data, so that we can determine
+  // the correct sort type first time
   $: {
-    // Wait until schema loads before loading data, so that we can determine
-    // the correct sort type first time
     if (schemaLoaded) {
       fetchData(
         dataSource,
+        schema,
         query,
         limit,
-        sortColumn,
-        sortOrder,
+        currentSortColumn,
+        currentSortOrder,
         sortType,
         paginate
       )
     }
   }
+
+  // Reactively filter and sort rows if required
   $: {
     if (internalTable) {
       // Internal tables are already processed server-side
@@ -65,10 +73,17 @@
       // For anything else we use client-side implementations to filter, sort
       // and limit
       const filtered = luceneQuery(allRows, query)
-      const sorted = luceneSort(filtered, sortColumn, sortOrder, sortType)
+      const sorted = luceneSort(
+        filtered,
+        currentSortColumn,
+        currentSortOrder,
+        sortType
+      )
       rows = luceneLimit(sorted, limit)
     }
   }
+
+  // Build our action context
   $: actions = [
     {
       type: ActionTypes.RefreshDatasource,
@@ -79,7 +94,20 @@
       type: ActionTypes.SetDataProviderQuery,
       callback: newQuery => (query = newQuery),
     },
+    {
+      type: ActionTypes.SetDataProviderSorting,
+      callback: ({ column, order }) => {
+        if (column) {
+          currentSortColumn = column
+        }
+        if (order) {
+          currentSortOrder = order
+        }
+      },
+    },
   ]
+
+  // Build our data context
   $: dataContext = {
     rows,
     schema,
@@ -88,7 +116,11 @@
     // Undocumented properties. These aren't supposed to be used in builder
     // bindings, but are used internally by other components
     id: $component?.id,
-    state: { query },
+    state: {
+      query,
+      sortColumn: currentSortColumn,
+      sortOrder: currentSortOrder,
+    },
     loaded,
   }
 
@@ -104,10 +136,11 @@
     if (schemaLoaded && !nestedProvider) {
       fetchData(
         dataSource,
+        schema,
         query,
         limit,
-        sortColumn,
-        sortOrder,
+        currentSortColumn,
+        currentSortOrder,
         sortType,
         paginate
       )
@@ -116,6 +149,7 @@
 
   const fetchData = async (
     dataSource,
+    schema,
     query,
     limit,
     sortColumn,
@@ -125,12 +159,16 @@
   ) => {
     loading = true
     if (dataSource?.type === "table") {
+      // Sanity check sort column, as using a non-existant column will prevent
+      // results coming back at all
+      const sort = schema?.[sortColumn] ? sortColumn : undefined
+
       // For internal tables we use server-side processing
       const res = await API.searchTable({
         tableId: dataSource.tableId,
         query,
         limit,
-        sort: sortColumn,
+        sort,
         sortOrder: sortOrder?.toLowerCase() ?? "ascending",
         sortType,
         paginate,
@@ -181,13 +219,14 @@
     if (!hasNextPage || !internalTable) {
       return
     }
+    const sort = schema?.[currentSortColumn] ? currentSortColumn : undefined
     const res = await API.searchTable({
       tableId: dataSource?.tableId,
       query,
       bookmark: bookmarks[pageNumber + 1],
       limit,
-      sort: sortColumn,
-      sortOrder: sortOrder?.toLowerCase() ?? "ascending",
+      sort,
+      sortOrder: currentSortOrder?.toLowerCase() ?? "ascending",
       sortType,
       paginate: true,
     })
@@ -202,13 +241,14 @@
     if (!hasPrevPage || !internalTable) {
       return
     }
+    const sort = schema?.[currentSortColumn] ? currentSortColumn : undefined
     const res = await API.searchTable({
       tableId: dataSource?.tableId,
       query,
       bookmark: bookmarks[pageNumber - 1],
       limit,
-      sort: sortColumn,
-      sortOrder: sortOrder?.toLowerCase() ?? "ascending",
+      sort,
+      sortOrder: currentSortOrder?.toLowerCase() ?? "ascending",
       sortType,
       paginate: true,
     })
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index ba9f3aae97..a6508c5763 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -11,7 +11,11 @@
   export let size
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+  const { styleable, getAction, ActionTypes } = getContext("sdk")
+  const setSorting = getAction(
+    dataProvider?.id,
+    ActionTypes.SetDataProviderSorting
+  )
   const customColumnKey = `custom-${Math.random()}`
   const customRenderers = [
     {
@@ -70,6 +74,13 @@
     })
     return newSchema
   }
+
+  const onSort = e => {
+    setSorting({
+      column: e.detail.column,
+      order: e.detail.order,
+    })
+  }
 </script>
 
 <div use:styleable={$component.styles} class={size}>
@@ -84,6 +95,8 @@
     allowEditRows={false}
     allowEditColumns={false}
     showAutoColumns={true}
+    disableSorting
+    on:sort={onSort}
   >
     <slot />
   </Table>
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index d2237ba3b9..c660d8d86c 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -6,6 +6,7 @@ export const ActionTypes = {
   ValidateForm: "ValidateForm",
   RefreshDatasource: "RefreshDatasource",
   SetDataProviderQuery: "SetDataProviderQuery",
+  SetDataProviderSorting: "SetDataProviderSorting",
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",
 }

From 3acc937ddc9a44936c0e4dac3464e9b91f45fb20 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 15:53:45 +0000
Subject: [PATCH 11/24] Fix picker width in table with search block and enable
 autosizing of other search components

---
 .../client/src/components/app/blocks/TableWithSearch.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index b3b6598cee..09fa43934d 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -150,7 +150,7 @@
     max-width: 100%;
     flex-wrap: wrap;
   }
-  .search :global(.component > *) {
+  .search:not(.mobile) :global(.spectrum-Form-itemField > .spectrum-Picker) {
     width: 200px;
   }
   .search :global(.spectrum-InputGroup .spectrum-InputGroup-input) {

From 7fc5851b4c49a2ac1216aadc7133101cdd9a4585 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 16:17:45 +0000
Subject: [PATCH 12/24] Revert changes to medium sized checkbox

---
 packages/bbui/src/Form/Core/Checkbox.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
index 4290984331..a5b366c262 100644
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -51,11 +51,6 @@
 </label>
 
 <style>
-  .spectrum-Checkbox--sizeM .spectrum-Checkbox-checkmark {
-    transform: scale(1);
-    left: 49%;
-    top: 50%;
-  }
   .spectrum-Checkbox--sizeL .spectrum-Checkbox-checkmark {
     transform: scale(1.1);
     left: 55%;

From df9f061d66639bbda23b573c598e99a5b65b24e6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 3 Nov 2021 16:18:12 +0000
Subject: [PATCH 13/24] Remove conditional props from manifest for table with
 search block

---
 packages/client/manifest.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fe6db323cb..c348ccef57 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2594,8 +2594,7 @@
         "type": "multifield",
         "label": "Search Columns",
         "key": "searchColumns",
-        "dependsOn": "dataSource",
-        "placeholder": "All columns"
+        "placeholder": "Choose search columns"
       },
       {
         "type": "filter",

From dc9b1a2a8cb1bf3a7648bbbd5753f2ce49b8f2d6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Nov 2021 11:30:43 +0000
Subject: [PATCH 14/24] Add button to table with search block and support
 defining multiple settings sections in component manifest entries

---
 .../builder/src/builderStore/dataBinding.js   |  14 +--
 .../src/builderStore/store/frontend.js        |  14 +--
 .../builder/src/builderStore/storeUtils.js    |  19 ++++
 .../ComponentSettingsSection.svelte           |  40 ++++++-
 packages/client/manifest.json                 |  83 +++++++++-----
 .../client/src/components/app/Button.svelte   |   3 +
 .../app/blocks/TableWithSearch.svelte         | 106 ++++++++++++------
 packages/client/src/utils/buttonActions.js    |   8 +-
 packages/client/src/utils/componentProps.js   |  16 +--
 9 files changed, 218 insertions(+), 85 deletions(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index a19646e6fd..9003b3e06c 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -4,6 +4,7 @@ import {
   findAllMatchingComponents,
   findComponent,
   findComponentPath,
+  getComponentSettings,
 } from "./storeUtils"
 import { store } from "builderStore"
 import { queries as queriesStores, tables as tablesStore } from "stores/backend"
@@ -82,13 +83,10 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
  * Gets a datasource object for a certain data provider component
  */
 export const getDatasourceForProvider = (asset, component) => {
-  const def = store.actions.components.getDefinition(component?._component)
-  if (!def) {
-    return null
-  }
+  const settings = getComponentSettings(component._component)
 
   // If this component has a dataProvider setting, go up the stack and use it
-  const dataProviderSetting = def.settings.find(setting => {
+  const dataProviderSetting = settings.find(setting => {
     return setting.type === "dataProvider"
   })
   if (dataProviderSetting) {
@@ -100,7 +98,7 @@ export const getDatasourceForProvider = (asset, component) => {
 
   // Extract datasource from component instance
   const validSettingTypes = ["dataSource", "table", "schema"]
-  const datasourceSetting = def.settings.find(setting => {
+  const datasourceSetting = settings.find(setting => {
     return validSettingTypes.includes(setting.type)
   })
   if (!datasourceSetting) {
@@ -374,8 +372,8 @@ const buildFormSchema = component => {
   if (!component) {
     return schema
   }
-  const def = store.actions.components.getDefinition(component._component)
-  const fieldSetting = def?.settings?.find(
+  const settings = getComponentSettings(component._component)
+  const fieldSetting = settings.find(
     setting => setting.key === "field" && setting.type.startsWith("field/")
   )
   if (fieldSetting && component.field) {
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9110aa1430..1a5c4523e3 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -25,6 +25,7 @@ import {
   findClosestMatchingComponent,
   findAllMatchingComponents,
   findComponent,
+  getComponentSettings,
 } from "../storeUtils"
 import { uuid } from "../uuid"
 import { removeBindings } from "../dataBinding"
@@ -368,14 +369,13 @@ export const getFrontendStore = () => {
         }
 
         // Generate default props
+        const settings = getComponentSettings(componentName)
         let props = { ...presetProps }
-        if (definition.settings) {
-          definition.settings.forEach(setting => {
-            if (setting.defaultValue !== undefined) {
-              props[setting.key] = setting.defaultValue
-            }
-          })
-        }
+        settings.forEach(setting => {
+          if (setting.defaultValue !== undefined) {
+            props[setting.key] = setting.defaultValue
+          }
+        })
 
         // Add any extra properties the component needs
         let extras = {}
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 6d0f0beab0..e25949000f 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -1,3 +1,5 @@
+import { store } from "./index"
+
 /**
  * Recursively searches for a specific component ID
  */
@@ -123,3 +125,20 @@ const searchComponentTree = (rootComponent, matchComponent) => {
   }
   return null
 }
+
+/**
+ * Searches a component's definition for a setting matching a certin predicate.
+ */
+export const getComponentSettings = componentType => {
+  const def = store.actions.components.getDefinition(componentType)
+  if (!def) {
+    return []
+  }
+  let settings = def.settings?.filter(setting => !setting.section) ?? []
+  def.settings
+    ?.filter(setting => setting.section)
+    .forEach(section => {
+      settings = settings.concat(section.settings || [])
+    })
+  return settings
+}
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index f047e9316b..f7123eb9e3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -22,6 +22,8 @@
   ]
 
   $: settings = componentDefinition?.settings ?? []
+  $: generalSettings = settings.filter(setting => !setting.section)
+  $: sections = settings.filter(setting => setting.section)
   $: isLayout = assetInstance && assetInstance.favicon
   $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
@@ -70,8 +72,8 @@
       onChange={val => updateProp("_instanceName", val)}
     />
   {/if}
-  {#if settings && settings.length > 0}
-    {#each settings as setting (setting.key)}
+  {#if generalSettings.length}
+    {#each generalSettings as setting (setting.key)}
       {#if canRenderControl(setting)}
         <PropertyControl
           type={setting.type}
@@ -99,11 +101,43 @@
   {/if}
   {#if componentDefinition?.info}
     <div class="text">
-      {@html componentDefinition?.info}
+      {@html componentDefinition.info}
     </div>
   {/if}
 </DetailSummary>
 
+{#each sections as section (section.name)}
+  <DetailSummary name={section.name} collapsible={false}>
+    {#each section.settings as setting (setting.key)}
+      {#if canRenderControl(setting)}
+        <PropertyControl
+          type={setting.type}
+          control={getComponentForSettingType(setting.type)}
+          label={setting.label}
+          key={setting.key}
+          value={componentInstance[setting.key] ??
+            componentInstance[setting.key]?.defaultValue}
+          {componentInstance}
+          onChange={val => updateProp(setting.key, val)}
+          props={{
+            options: setting.options || [],
+            placeholder: setting.placeholder || null,
+            min: setting.min || null,
+            max: setting.max || null,
+          }}
+          {bindings}
+          {componentDefinition}
+        />
+      {/if}
+    {/each}
+    {#if section?.info}
+      <div class="text">
+        {@html section.info}
+      </div>
+    {/if}
+  </DetailSummary>
+{/each}
+
 <style>
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c348ccef57..46f87818ff 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2576,9 +2576,11 @@
     ]
   },
   "tablewithsearch": {
+    "block": true,
     "name": "Table with search",
     "icon": "Table",
     "styles": ["size"],
+    "info": "Only the first 3 search columns will be used.",
     "settings": [
       {
         "type": "text",
@@ -2613,18 +2615,6 @@
         "options": ["Ascending", "Descending"],
         "defaultValue": "Descending"
       },
-      {
-        "type": "boolean",
-        "label": "Paginate",
-        "key": "paginate",
-        "defaultValue": true
-      },
-      {
-        "type": "number",
-        "label": "Row Count",
-        "key": "rowCount",
-        "defaultValue": 8
-      },
       {
         "type": "select",
         "label": "Size",
@@ -2642,23 +2632,66 @@
         ]
       },
       {
-        "type": "multifield",
-        "label": "Table Columns",
-        "key": "tableColumns",
-        "dependsOn": "dataSource",
-        "placeholder": "All columns"
+        "type": "boolean",
+        "label": "Paginate",
+        "key": "paginate",
+        "defaultValue": true
       },
       {
-        "type": "boolean",
-        "label": "Quiet table variant",
-        "key": "quiet"
+        "section": true,
+        "name": "Table",
+        "settings": [
+          {
+            "type": "number",
+            "label": "Row Count",
+            "key": "rowCount",
+            "defaultValue": 8
+          },
+          {
+            "type": "multifield",
+            "label": "Table Columns",
+            "key": "tableColumns",
+            "dependsOn": "dataSource",
+            "placeholder": "All columns"
+          },
+          {
+            "type": "boolean",
+            "label": "Quiet table variant",
+            "key": "quiet"
+          },
+          {
+            "type": "boolean",
+            "label": "Show auto columns",
+            "key": "showAutoColumns",
+            "defaultValue": false
+          }
+        ]
       },
       {
-        "type": "boolean",
-        "label": "Show auto columns",
-        "key": "showAutoColumns",
-        "defaultValue": false
+        "section": true,
+        "name": "Button",
+        "settings": [
+          {
+            "type": "boolean",
+            "key": "showTitleButton",
+            "label": "Show title button",
+            "defaultValue": false
+          },
+          {
+            "type": "text",
+            "key": "titleButtonText",
+            "label": "Title button text"
+          },
+          {
+            "type": "event",
+            "label": "Title Button Action",
+            "key": "titleButtonOnClick"
+          }
+        ]
       }
-    ]
+    ],
+    "context": {
+      "type": "schema"
+    }
   }
 }
diff --git a/packages/client/src/components/app/Button.svelte b/packages/client/src/components/app/Button.svelte
index 9900c740d2..ed5e2e50a6 100644
--- a/packages/client/src/components/app/Button.svelte
+++ b/packages/client/src/components/app/Button.svelte
@@ -27,6 +27,9 @@
   button {
     width: fit-content;
     width: -moz-fit-content;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .spectrum-Button--overBackground:hover {
     color: #555;
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index 09fa43934d..c4143df986 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -16,6 +16,9 @@
   export let rowCount
   export let quiet
   export let size
+  export let showTitleButton
+  export let titleButtonText
+  export let titleButtonOnClick
 
   const { API, styleable } = getContext("sdk")
   const context = getContext("context")
@@ -63,7 +66,7 @@
         })
       }
     })
-    return enrichedColumns
+    return enrichedColumns.slice(0, 3)
   }
 
   // Load the datasource schema on mount so we can determine column types
@@ -77,26 +80,41 @@
 <Block>
   <div class={size} use:styleable={$component.styles}>
     <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-      {#if title || enrichedSearchColumns?.length}
-        <div class="header">
+      {#if title || enrichedSearchColumns?.length || showTitleButton}
+        <div class="header" class:mobile={$context.device.mobile}>
           <div class="title">
             <Heading>{title || ""}</Heading>
           </div>
-          {#if enrichedSearchColumns?.length}
-            <div class="search" class:mobile={$context.device.mobile}>
-              {#each enrichedSearchColumns as column}
-                <BlockComponent
-                  type={column.componentType}
-                  props={{
-                    field: column.name,
-                    placeholder: column.name,
-                    text: column.name,
-                    autoWidth: true,
-                  }}
-                />
-              {/each}
-            </div>
-          {/if}
+          <div class="controls">
+            {#if enrichedSearchColumns?.length}
+              <div
+                class="search"
+                style="--cols:{enrichedSearchColumns?.length}"
+              >
+                {#each enrichedSearchColumns as column}
+                  <BlockComponent
+                    type={column.componentType}
+                    props={{
+                      field: column.name,
+                      placeholder: column.name,
+                      text: column.name,
+                      autoWidth: true,
+                    }}
+                  />
+                {/each}
+              </div>
+            {/if}
+            {#if showTitleButton}
+              <BlockComponent
+                type="button"
+                props={{
+                  onClick: titleButtonOnClick,
+                  text: titleButtonText,
+                  type: "cta",
+                }}
+              />
+            {/if}
+          </div>
         </div>
       {/if}
       <BlockComponent
@@ -134,39 +152,59 @@
     justify-content: space-between;
     align-items: center;
     gap: 20px;
-    flex-wrap: wrap;
     margin-bottom: 20px;
   }
+
   .title {
-    flex: 1 1 auto;
+    overflow: hidden;
   }
-  .search {
-    flex: 0 0 auto;
+  .title :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .controls {
+    flex: 0 1 auto;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: flex-end;
     align-items: center;
+    gap: 20px;
+  }
+  .controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
+    width: 100%;
+  }
+
+  .search {
+    flex: 0 1 auto;
     gap: 10px;
     max-width: 100%;
-    flex-wrap: wrap;
-  }
-  .search:not(.mobile) :global(.spectrum-Form-itemField > .spectrum-Picker) {
-    width: 200px;
-  }
-  .search :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
-    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(var(--cols), minmax(120px, 200px));
   }
   .search :global(.spectrum-InputGroup) {
     min-width: 0;
   }
-  .search.mobile {
+
+  /* Mobile styles */
+  .mobile {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .mobile .controls {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .mobile .search {
+    display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     position: relative;
     width: 100%;
   }
-  .search.mobile :global(.component > *) {
-    width: 100%;
-  }
 </style>
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 11aa033c1d..655f2f32e5 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -161,9 +161,15 @@ const confirmTextMap = {
  */
 export const enrichButtonActions = (actions, context) => {
   // Prevent button actions in the builder preview
-  if (get(builderStore).inBuilder) {
+  if (!actions || get(builderStore).inBuilder) {
     return () => {}
   }
+
+  // If this is a function then it has already been enriched
+  if (typeof actions === "function") {
+    return actions
+  }
+
   const handlers = actions.map(def => handlerMap[def["##eventHandlerType"]])
   return async () => {
     for (let i = 0; i < handlers.length; i++) {
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index a181d1ea4d..d600fdef04 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -36,17 +36,19 @@ export const enrichProps = (props, context) => {
   let enrichedProps = enrichDataBindings(props, totalContext)
 
   // Enrich click actions if they exist
-  if (enrichedProps.onClick) {
-    enrichedProps.onClick = enrichButtonActions(
-      enrichedProps.onClick,
-      totalContext
-    )
-  }
+  Object.keys(enrichedProps).forEach(prop => {
+    if (prop?.toLowerCase().includes("onclick")) {
+      enrichedProps[prop] = enrichButtonActions(
+        enrichedProps[prop],
+        totalContext
+      )
+    }
+  })
 
   // Enrich any click actions in conditions
   if (enrichedProps._conditions) {
     enrichedProps._conditions.forEach(condition => {
-      if (condition.setting === "onClick") {
+      if (condition.setting?.toLowerCase().includes("onclick")) {
         condition.settingValue = enrichButtonActions(
           condition.settingValue,
           totalContext

From 9d473e9a34aa5e7e643ea77aa5c2881cbb4ca84a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 4 Nov 2021 11:31:43 +0000
Subject: [PATCH 15/24] Lint

---
 packages/client/src/utils/styleable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index f35e45d3fe..c93742d560 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -1,4 +1,3 @@
-import { get } from "svelte/store"
 import { builderStore } from "stores"
 
 /**

From dd73ed3e1aa428456aa44e780701977fc5774f9e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Nov 2021 12:37:16 +0000
Subject: [PATCH 16/24] Fix issue saving a doc with a multi-options datatype
 that was not defined

---
 packages/server/src/api/controllers/row/utils.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/row/utils.js b/packages/server/src/api/controllers/row/utils.js
index ca6c782713..6bbc6474ee 100644
--- a/packages/server/src/api/controllers/row/utils.js
+++ b/packages/server/src/api/controllers/row/utils.js
@@ -68,7 +68,11 @@ exports.validate = async ({ appId, tableId, row, table }) => {
     let res
 
     // Validate.js doesn't seem to handle array
-    if (table.schema[fieldName].type === FieldTypes.ARRAY) {
+    if (
+      table.schema[fieldName].type === FieldTypes.ARRAY &&
+      row[fieldName] &&
+      row[fieldName].length
+    ) {
       row[fieldName].map(val => {
         if (!constraints.inclusion.includes(val)) {
           errors[fieldName] = "Field not in list"

From cb263cd1e417dda3f520999efe600c3f638c8649 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Nov 2021 12:37:42 +0000
Subject: [PATCH 17/24] Fix issue getting bindable properties when selecting a
 screen

---
 packages/builder/src/builderStore/dataBinding.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 9003b3e06c..742c9052ad 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -83,7 +83,7 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
  * Gets a datasource object for a certain data provider component
  */
 export const getDatasourceForProvider = (asset, component) => {
-  const settings = getComponentSettings(component._component)
+  const settings = getComponentSettings(component?._component)
 
   // If this component has a dataProvider setting, go up the stack and use it
   const dataProviderSetting = settings.find(setting => {

From f08b30b65e4a204776bc6a39350a9d905f1dd93c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Nov 2021 12:38:15 +0000
Subject: [PATCH 18/24] Remove forced capitalisation of setting labels

---
 .../PropertiesPanel/PropertyControls/PropertyControl.svelte      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index 91e67c1685..ea0fdead78 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -122,7 +122,6 @@
   }
 
   .label {
-    text-transform: capitalize;
     padding-bottom: var(--spectrum-global-dimension-size-65);
   }
 

From f8f906b9de0c6c8c149bf97fbd3ee74561ff764b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Nov 2021 12:38:33 +0000
Subject: [PATCH 19/24] Add ability to link rows in tables, and link rows in
 the table with search block

---
 packages/client/manifest.json                 | 65 +++++++++++++++++--
 .../app/blocks/TableWithSearch.svelte         |  8 +++
 .../src/components/app/table/Table.svelte     | 20 +++++-
 packages/client/src/stores/routes.js          | 24 ++++++-
 packages/client/src/utils/buttonActions.js    | 15 +----
 5 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 46f87818ff..982f96ef90 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2457,12 +2457,12 @@
     "settings": [
       {
         "type": "dataProvider",
-        "label": "Provider",
+        "label": "Data provider",
         "key": "dataProvider"
       },
       {
         "type": "number",
-        "label": "Row Count",
+        "label": "Row count",
         "key": "rowCount",
         "defaultValue": 8
       },
@@ -2496,9 +2496,36 @@
       },
       {
         "type": "boolean",
-        "label": "Auto Columns",
+        "label": "Show auto columns",
         "key": "showAutoColumns",
         "defaultValue": false
+      },
+      {
+        "type": "boolean",
+        "label": "Link table rows",
+        "key": "linkRows"
+      },
+      {
+        "type": "boolean",
+        "label": "Open link screens in modal",
+        "key": "linkPeek"
+      },
+      {
+        "type": "url",
+        "label": "Link screen",
+        "key": "linkURL"
+      },
+      {
+        "section": true,
+        "name": "Advanced",
+        "settings": [
+          {
+            "type": "field",
+            "label": "ID column for linking (appended to URL)",
+            "key": "linkColumn",
+            "placeholder": "Default"
+          }
+        ]
       }
     ],
     "context": {
@@ -2662,8 +2689,22 @@
           {
             "type": "boolean",
             "label": "Show auto columns",
-            "key": "showAutoColumns",
-            "defaultValue": false
+            "key": "showAutoColumns"
+          },
+          {
+            "type": "boolean",
+            "label": "Link table rows",
+            "key": "linkRows"
+          },
+          {
+            "type": "boolean",
+            "label": "Open link in modal",
+            "key": "linkPeek"
+          },
+          {
+            "type": "url",
+            "label": "Link screen",
+            "key": "linkURL"
           }
         ]
       },
@@ -2684,10 +2725,22 @@
           },
           {
             "type": "event",
-            "label": "Title Button Action",
+            "label": "Title button action",
             "key": "titleButtonOnClick"
           }
         ]
+      },
+      {
+        "section": true,
+        "name": "Advanced",
+        "settings": [
+          {
+            "type": "field",
+            "label": "ID column for linking (appended to URL)",
+            "key": "linkColumn",
+            "placeholder": "Default"
+          }
+        ]
       }
     ],
     "context": {
diff --git a/packages/client/src/components/app/blocks/TableWithSearch.svelte b/packages/client/src/components/app/blocks/TableWithSearch.svelte
index c4143df986..378a111571 100644
--- a/packages/client/src/components/app/blocks/TableWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/TableWithSearch.svelte
@@ -16,6 +16,10 @@
   export let rowCount
   export let quiet
   export let size
+  export let linkRows
+  export let linkURL
+  export let linkColumn
+  export let linkPeek
   export let showTitleButton
   export let titleButtonText
   export let titleButtonOnClick
@@ -138,6 +142,10 @@
             rowCount,
             quiet,
             size,
+            linkRows,
+            linkURL,
+            linkColumn,
+            linkPeek,
           }}
         />
       </BlockComponent>
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index a6508c5763..4178ca2bb2 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -9,9 +9,13 @@
   export let rowCount
   export let quiet
   export let size
+  export let linkRows
+  export let linkURL
+  export let linkColumn
+  export let linkPeek
 
   const component = getContext("component")
-  const { styleable, getAction, ActionTypes } = getContext("sdk")
+  const { styleable, getAction, ActionTypes, routeStore } = getContext("sdk")
   const setSorting = getAction(
     dataProvider?.id,
     ActionTypes.SetDataProviderSorting
@@ -81,6 +85,19 @@
       order: e.detail.order,
     })
   }
+
+  const onClick = e => {
+    if (!linkRows || !linkURL) {
+      return
+    }
+    const col = linkColumn || "_id"
+    const id = e.detail?.[col]
+    if (!id) {
+      return
+    }
+    const split = linkURL.split("/:")
+    routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
+  }
 </script>
 
 <div use:styleable={$component.styles} class={size}>
@@ -97,6 +114,7 @@
     showAutoColumns={true}
     disableSorting
     on:sort={onSort}
+    on:click={onClick}
   >
     <slot />
   </Table>
diff --git a/packages/client/src/stores/routes.js b/packages/client/src/stores/routes.js
index e6473fb40c..1d5dca1645 100644
--- a/packages/client/src/stores/routes.js
+++ b/packages/client/src/stores/routes.js
@@ -1,6 +1,8 @@
-import { writable } from "svelte/store"
+import { get, writable } from "svelte/store"
 import { push } from "svelte-spa-router"
 import * as API from "../api"
+import { peekStore } from "./peek"
+import { builderStore } from "./builder"
 
 const createRouteStore = () => {
   const initialState = {
@@ -59,7 +61,25 @@ const createRouteStore = () => {
       return state
     })
   }
-  const navigate = push
+  const navigate = (url, peek) => {
+    if (get(builderStore).inBuilder) {
+      return
+    }
+    if (url) {
+      // If we're already peeking, don't peek again
+      const isPeeking = get(store).queryParams?.peek
+      if (peek && !isPeeking) {
+        peekStore.actions.showPeek(url)
+      } else {
+        const external = !url.startsWith("/")
+        if (external) {
+          window.location.href = url
+        } else {
+          push(url)
+        }
+      }
+    }
+  }
   const setRouterLoaded = () => {
     store.update(state => ({ ...state, routerLoaded: true }))
   }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 655f2f32e5..01b330d74f 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -42,20 +42,7 @@ const triggerAutomationHandler = async action => {
 
 const navigationHandler = action => {
   const { url, peek } = action.parameters
-  if (url) {
-    // If we're already peeking, don't peek again
-    const isPeeking = get(routeStore).queryParams?.peek
-    if (peek && !isPeeking) {
-      peekStore.actions.showPeek(url)
-    } else {
-      const external = !url.startsWith("/")
-      if (external) {
-        window.location.href = url
-      } else {
-        routeStore.actions.navigate(action.parameters.url)
-      }
-    }
-  }
+  routeStore.actions.navigate(url, peek)
 }
 
 const queryExecutionHandler = async action => {

From 2f949bad85ac407411859291bba139dc1e30dbfa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 5 Nov 2021 12:43:26 +0000
Subject: [PATCH 20/24] Lint

---
 packages/client/src/utils/buttonActions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 01b330d74f..233a526062 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -4,7 +4,6 @@ import {
   builderStore,
   confirmationStore,
   authStore,
-  peekStore,
   stateStore,
 } from "stores"
 import { saveRow, deleteRow, executeQuery, triggerAutomation } from "api"

From aa56d6fd63d02a05269c85afe566f201be3e21dd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Nov 2021 14:35:58 +0000
Subject: [PATCH 21/24] Add card list with search block. Add concept of nested
 settings which can consume their own contexts and are not enriched at the top
 level

---
 .../builder/src/builderStore/dataBinding.js   |  48 +++-
 .../design/AppPreview/componentStructure.json |   3 +-
 .../ComponentSettingsSection.svelte           |  83 +++---
 .../PropertiesPanel/PropertiesPanel.svelte    |  10 +-
 .../PropertyControls/PropertyControl.svelte   |  18 +-
 packages/client/manifest.json                 | 155 ++++++++++-
 .../src/components/BlockComponent.svelte      |   3 +-
 .../client/src/components/Component.svelte    | 135 +++++++---
 .../src/components/app/SpectrumCard.svelte    |  13 +
 .../app/blocks/CardListWithSearch.svelte      | 240 ++++++++++++++++++
 .../client/src/components/app/blocks/index.js |   1 +
 packages/client/src/stores/context.js         |   3 +-
 12 files changed, 616 insertions(+), 96 deletions(-)
 create mode 100644 packages/client/src/components/app/blocks/CardListWithSearch.svelte

diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 742c9052ad..165ed37fbb 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -39,6 +39,25 @@ export const getBindableProperties = (asset, componentId) => {
   ]
 }
 
+/**
+ * Gets the bindable properties exposed by a certain component.
+ */
+export const getComponentBindableProperties = (asset, componentId) => {
+  if (!asset || !componentId) {
+    return []
+  }
+
+  // Ensure that the component exists and exposes context
+  const component = findComponent(asset.props, componentId)
+  const def = store.actions.components.getDefinition(component?._component)
+  if (!def?.context) {
+    return []
+  }
+
+  // Get the bindings for the component
+  return getProviderContextBindings(asset, component)
+}
+
 /**
  * Gets all data provider components above a component.
  */
@@ -125,9 +144,26 @@ export const getDatasourceForProvider = (asset, component) => {
 const getContextBindings = (asset, componentId) => {
   // Extract any components which provide data contexts
   const dataProviders = getDataProviderComponents(asset, componentId)
-  let bindings = []
+
+  // Generate bindings for all matching components
+  return getProviderContextBindings(asset, dataProviders)
+}
+
+/**
+ * Gets the context bindings exposed by a set of data provider components.
+ */
+const getProviderContextBindings = (asset, dataProviders) => {
+  if (!asset || !dataProviders) {
+    return []
+  }
+
+  // Ensure providers is an array
+  if (!Array.isArray(dataProviders)) {
+    dataProviders = [dataProviders]
+  }
 
   // Create bindings for each data provider
+  let bindings = []
   dataProviders.forEach(component => {
     const def = store.actions.components.getDefinition(component._component)
     const contexts = Array.isArray(def.context) ? def.context : [def.context]
@@ -140,6 +176,7 @@ const getContextBindings = (asset, componentId) => {
 
       let schema
       let readablePrefix
+      let runtimeSuffix = context.suffix
 
       if (context.type === "form") {
         // Forms do not need table schemas
@@ -169,8 +206,14 @@ const getContextBindings = (asset, componentId) => {
 
       const keys = Object.keys(schema).sort()
 
+      // Generate safe unique runtime prefix
+      let runtimeId = component._id
+      if (runtimeSuffix) {
+        runtimeId += `-${runtimeSuffix}`
+      }
+      const safeComponentId = makePropSafe(runtimeId)
+
       // Create bindable properties for each schema field
-      const safeComponentId = makePropSafe(component._id)
       keys.forEach(key => {
         const fieldSchema = schema[key]
 
@@ -182,6 +225,7 @@ const getContextBindings = (asset, componentId) => {
         } else if (fieldSchema.type === "attachment") {
           runtimeBoundKey = `${key}_first`
         }
+
         const runtimeBinding = `${safeComponentId}.${makePropSafe(
           runtimeBoundKey
         )}`
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index b6675c2480..9a87bb5761 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -3,7 +3,8 @@
     "name": "Blocks",
     "icon": "Article",
     "children": [
-      "tablewithsearch"
+      "tablewithsearch",
+      "cardlistwithsearch"
     ]
   },
   "section",
diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
index f7123eb9e3..356e86b20a 100644
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@@ -12,6 +12,7 @@
   export let componentInstance
   export let assetInstance
   export let bindings
+  export let componentBindings
 
   const layoutDefinition = []
   const screenDefinition = [
@@ -21,12 +22,24 @@
     { key: "layoutId", label: "Layout", control: LayoutSelect },
   ]
 
-  $: settings = componentDefinition?.settings ?? []
-  $: generalSettings = settings.filter(setting => !setting.section)
-  $: sections = settings.filter(setting => setting.section)
+  $: sections = getSections(componentDefinition)
   $: isLayout = assetInstance && assetInstance.favicon
   $: assetDefinition = isLayout ? layoutDefinition : screenDefinition
 
+  const getSections = definition => {
+    const settings = definition?.settings ?? []
+    const generalSettings = settings.filter(setting => !setting.section)
+    const customSections = settings.filter(setting => setting.section)
+    return [
+      {
+        name: "General",
+        info: componentDefinition?.info,
+        settings: generalSettings,
+      },
+      ...(customSections || []),
+    ]
+  }
+
   const updateProp = store.actions.components.updateProp
 
   const canRenderControl = setting => {
@@ -61,53 +74,18 @@
   }
 </script>
 
-<DetailSummary name="General" collapsible={false}>
-  {#if !componentInstance._component.endsWith("/layout")}
-    <PropertyControl
-      bindable={false}
-      control={Input}
-      label="Name"
-      key="_instanceName"
-      value={componentInstance._instanceName}
-      onChange={val => updateProp("_instanceName", val)}
-    />
-  {/if}
-  {#if generalSettings.length}
-    {#each generalSettings as setting (setting.key)}
-      {#if canRenderControl(setting)}
-        <PropertyControl
-          type={setting.type}
-          control={getComponentForSettingType(setting.type)}
-          label={setting.label}
-          key={setting.key}
-          value={componentInstance[setting.key] ??
-            componentInstance[setting.key]?.defaultValue}
-          {componentInstance}
-          onChange={val => updateProp(setting.key, val)}
-          props={{
-            options: setting.options || [],
-            placeholder: setting.placeholder || null,
-            min: setting.min || null,
-            max: setting.max || null,
-          }}
-          {bindings}
-          {componentDefinition}
-        />
-      {/if}
-    {/each}
-  {/if}
-  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <ResetFieldsButton {componentInstance} />
-  {/if}
-  {#if componentDefinition?.info}
-    <div class="text">
-      {@html componentDefinition.info}
-    </div>
-  {/if}
-</DetailSummary>
-
-{#each sections as section (section.name)}
+{#each sections as section, idx (section.name)}
   <DetailSummary name={section.name} collapsible={false}>
+    {#if idx === 0 && !componentInstance._component.endsWith("/layout")}
+      <PropertyControl
+        bindable={false}
+        control={Input}
+        label="Name"
+        key="_instanceName"
+        value={componentInstance._instanceName}
+        onChange={val => updateProp("_instanceName", val)}
+      />
+    {/if}
     {#each section.settings as setting (setting.key)}
       {#if canRenderControl(setting)}
         <PropertyControl
@@ -117,7 +95,7 @@
           key={setting.key}
           value={componentInstance[setting.key] ??
             componentInstance[setting.key]?.defaultValue}
-          {componentInstance}
+          nested={setting.nested}
           onChange={val => updateProp(setting.key, val)}
           props={{
             options: setting.options || [],
@@ -126,10 +104,15 @@
             max: setting.max || null,
           }}
           {bindings}
+          {componentBindings}
+          {componentInstance}
           {componentDefinition}
         />
       {/if}
     {/each}
+    {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
+      <ResetFieldsButton {componentInstance} />
+    {/if}
     {#if section?.info}
       <div class="text">
         {@html section.info}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 27f6650cde..df91a87456 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -6,13 +6,20 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
-  import { getBindableProperties } from "builderStore/dataBinding"
+  import {
+    getBindableProperties,
+    getComponentBindableProperties,
+  } from "builderStore/dataBinding"
 
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
   $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
+  $: componentBindings = getComponentBindableProperties(
+    $currentAsset,
+    $store.selectedComponentId
+  )
 </script>
 
 <Tabs selected="Settings" noPadding>
@@ -28,6 +35,7 @@
           {componentInstance}
           {componentDefinition}
           {bindings}
+          {componentBindings}
         />
         <DesignSection {componentInstance} {componentDefinition} {bindings} />
         <CustomStylesSection
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index ea0fdead78..73385b73f5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@@ -17,14 +17,24 @@
   export let props = {}
   export let onChange = () => {}
   export let bindings = []
+  export let componentBindings = []
+  export let nested = false
 
   let bindingDrawer
   let anchor
   let valid
 
-  $: safeValue = getSafeValue(value, props.defaultValue, bindings)
+  $: allBindings = getAllBindings(bindings, componentBindings, nested)
+  $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
   $: tempValue = safeValue
-  $: replaceBindings = val => readableToRuntimeBinding(bindings, val)
+  $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
+
+  const getAllBindings = (bindings, componentBindings, nested) => {
+    if (!nested) {
+      return bindings
+    }
+    return [...(bindings || []), ...(componentBindings || [])]
+  }
 
   const handleClose = () => {
     handleChange(tempValue)
@@ -78,7 +88,7 @@
       updateOnChange={false}
       on:change={handleChange}
       onChange={handleChange}
-      {bindings}
+      bindings={allBindings}
       name={key}
       text={label}
       {type}
@@ -104,7 +114,7 @@
           bind:valid
           value={safeValue}
           on:change={e => (tempValue = e.detail)}
-          bindableProperties={bindings}
+          bindableProperties={allBindings}
           allowJS
         />
       </Drawer>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 982f96ef90..f3ba71223c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2599,6 +2599,21 @@
         "type": "boolean",
         "key": "horizontal",
         "label": "Horizontal"
+      },
+      {
+        "type": "boolean",
+        "label": "Show button",
+        "key": "showButton"
+      },
+      {
+        "type": "text",
+        "key": "buttonText",
+        "label": "Button text"
+      },
+      {
+        "type": "event",
+        "label": "Button action",
+        "key": "buttonOnClick"
       }
     ]
   },
@@ -2710,22 +2725,22 @@
       },
       {
         "section": true,
-        "name": "Button",
+        "name": "Title button",
         "settings": [
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show title button",
+            "label": "Show button",
             "defaultValue": false
           },
           {
             "type": "text",
             "key": "titleButtonText",
-            "label": "Title button text"
+            "label": "Button text"
           },
           {
             "type": "event",
-            "label": "Title button action",
+            "label": "Button action",
             "key": "titleButtonOnClick"
           }
         ]
@@ -2742,9 +2757,139 @@
           }
         ]
       }
+    ]
+  },
+  "cardlistwithsearch": {
+    "block": true,
+    "name": "Card list with search",
+    "icon": "Table",
+    "styles": ["size"],
+    "info": "Only the first 3 search columns will be used.",
+    "settings": [
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title"
+      },
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "dataSource"
+      },
+      {
+        "type": "multifield",
+        "label": "Search Columns",
+        "key": "searchColumns",
+        "placeholder": "Choose search columns"
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "filter"
+      },
+      {
+        "type": "field",
+        "label": "Sort Column",
+        "key": "sortColumn"
+      },
+      {
+        "type": "select",
+        "label": "Sort Order",
+        "key": "sortOrder",
+        "options": ["Ascending", "Descending"],
+        "defaultValue": "Descending"
+      },
+      {
+        "type": "number",
+        "label": "Limit",
+        "key": "limit",
+        "defaultValue": 10
+      },
+      {
+        "type": "boolean",
+        "label": "Paginate",
+        "key": "paginate"
+      },
+      {
+        "section": true,
+        "name": "Cards",
+        "settings": [
+          {
+            "type": "text",
+            "key": "cardTitle",
+            "label": "Title",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "key": "cardSubtitle",
+            "label": "Subtitle",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "key": "cardDescription",
+            "label": "Description",
+            "nested": true
+
+          },
+          {
+            "type": "text",
+            "key": "cardImageURL",
+            "label": "Image URL",
+            "nested": true
+
+          },
+          {
+            "type": "boolean",
+            "key": "cardHorizontal",
+            "label": "Horizontal"
+          },
+          {
+            "type": "boolean",
+            "label": "Show button",
+            "key": "showCardButton"
+          },
+          {
+            "type": "text",
+            "key": "cardButtonText",
+            "label": "Button text",
+            "nested": true
+
+          },
+          {
+            "type": "event",
+            "label": "Button action",
+            "key": "cardButtonOnClick",
+            "nested": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Title button",
+        "settings": [
+          {
+            "type": "boolean",
+            "key": "showTitleButton",
+            "label": "Show button"
+          },
+          {
+            "type": "text",
+            "key": "titleButtonText",
+            "label": "Button text"
+          },
+          {
+            "type": "event",
+            "label": "Button action",
+            "key": "titleButtonOnClick"
+          }
+        ]
+      }
     ],
     "context": {
-      "type": "schema"
+      "type": "schema",
+      "suffix": "repeater"
     }
   }
 }
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index 02456322da..589998994d 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -6,6 +6,7 @@
   export let type
   export let props
   export let styles
+  export let context
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
@@ -16,7 +17,7 @@
 
   // Create a fake component instance so that we can use the core Component
   // to render this part of the block, taking advantage of binding enrichment
-  $: id = block.id + rand
+  $: id = `${block.id}-${context ?? rand}`
   $: instance = {
     _component: `@budibase/standard-components/${type}`,
     _id: id,
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index c13a50d52e..346de98f2f 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,3 +1,7 @@
+<script context="module">
+  let SettingsDefinitionCache = {}
+</script>
+
 <script>
   import { getContext, setContext } from "svelte"
   import { writable, get } from "svelte/store"
@@ -20,13 +24,13 @@
   // Any prop overrides that need to be applied due to conditional UI
   let conditionalSettings
 
-  // Props are hashed when inside the builder preview and used as a key, so that
-  // components fully remount whenever any props change
-  let propsHash = 0
+  // Settings are hashed when inside the builder preview and used as a key,
+  // so that components fully remount whenever any settings change
+  let hash = 0
 
   // Latest timestamp that we started a props update.
   // Due to enrichment now being async, we need to avoid overwriting newer
-  // props with old ones, depending on how long enrichment takes.
+  // settings with old ones, depending on how long enrichment takes.
   let latestUpdateTime
 
   // Keep track of stringified representations of context and instance
@@ -49,25 +53,59 @@
   // Extract component instance info
   $: constructor = getComponentConstructor(instance._component)
   $: definition = getComponentDefinition(instance._component)
+  $: settingsDefinition = getSettingsDefinition(definition)
   $: children = instance._children || []
   $: id = instance._id
   $: name = instance._instanceName
+
+  // Determine if the component is selected or is part of the critical path
+  // leading to the selected component
+  $: selected =
+    $builderStore.inBuilder && $builderStore.selectedComponentId === id
+  $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
+
+  // Interactive components can be selected, dragged and highlighted inside
+  // the builder preview
   $: interactive =
     $builderStore.inBuilder &&
     ($builderStore.previewType === "layout" || insideScreenslot) &&
     !insideBlock
+  $: draggable = interactive && !isLayout && !isScreen
+  $: droppable = interactive && !isLayout && !isScreen
+
+  // Empty components are those which accept children but do not have any.
+  // Empty states can be shown for these components, but can be disabled
+  // in the component manifest.
   $: empty = interactive && !children.length && definition?.hasChildren
   $: emptyState = empty && definition?.showEmptyState !== false
-  $: rawProps = getRawProps(instance)
-  $: instanceKey = JSON.stringify(rawProps)
-  $: updateComponentProps(rawProps, instanceKey, $context)
-  $: selected =
-    $builderStore.inBuilder &&
-    $builderStore.selectedComponentId === instance._id
-  $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
+
+  // Raw props are all props excluding internal props and children
+  $: rawSettings = getRawSettings(instance)
+  $: instanceKey = hashString(JSON.stringify(rawSettings))
+
+  // Component settings are those which are intended for this component and
+  // which need to be enriched
+  $: componentSettings = getComponentSettings(rawSettings, settingsDefinition)
+  $: enrichComponentSettings(rawSettings, instanceKey, $context)
+
+  // Nested settings are those which are intended for child components inside
+  // blocks and which should not be enriched at this level
+  $: nestedSettings = getNestedSettings(rawSettings, settingsDefinition)
+
+  // Evaluate conditional UI settings and store any component setting changes
+  // which need to be made
   $: evaluateConditions(enrichedSettings?._conditions)
-  $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
-  $: renderKey = `${propsHash}-${emptyState}`
+
+  // Build up the final settings object to be passed to the component
+  $: settings = {
+    ...enrichedSettings,
+    ...nestedSettings,
+    ...conditionalSettings,
+  }
+
+  // Render key is used when in the builder preview to fully remount
+  // components when settings are changed
+  $: renderKey = `${hash}-${emptyState}`
 
   // Update component context
   $: componentStore.set({
@@ -79,14 +117,14 @@
     name,
   })
 
-  const getRawProps = instance => {
-    let validProps = {}
+  const getRawSettings = instance => {
+    let validSettings = {}
     Object.entries(instance)
       .filter(([name]) => name === "_conditions" || !name.startsWith("_"))
       .forEach(([key, value]) => {
-        validProps[key] = value
+        validSettings[key] = value
       })
-    return validProps
+    return validSettings
   }
 
   // Gets the component constructor for the specified component
@@ -105,8 +143,47 @@
     return type ? Manifest[type] : null
   }
 
+  const getSettingsDefinition = definition => {
+    if (!definition) {
+      return []
+    }
+    if (SettingsDefinitionCache[definition.name]) {
+      return SettingsDefinitionCache[definition.name]
+    }
+    let settings = []
+    definition.settings?.forEach(setting => {
+      if (setting.section) {
+        settings = settings.concat(setting.settings || [])
+      } else {
+        settings.push(setting)
+      }
+    })
+    SettingsDefinitionCache[definition] = settings
+    return settings
+  }
+
+  const getComponentSettings = (rawSettings, settingsDefinition) => {
+    let clone = { ...rawSettings }
+    settingsDefinition?.forEach(setting => {
+      if (setting.nested) {
+        delete clone[setting.key]
+      }
+    })
+    return clone
+  }
+
+  const getNestedSettings = (rawSettings, settingsDefinition) => {
+    let clone = { ...rawSettings }
+    settingsDefinition?.forEach(setting => {
+      if (!setting.nested) {
+        delete clone[setting.key]
+      }
+    })
+    return clone
+  }
+
   // Enriches any string component props using handlebars
-  const updateComponentProps = (rawProps, instanceKey, context) => {
+  const enrichComponentSettings = (rawSettings, instanceKey, context) => {
     const instanceSame = instanceKey === lastInstanceKey
     const contextSame = context.key === lastContextKey
 
@@ -121,8 +198,8 @@
     latestUpdateTime = Date.now()
     const enrichmentTime = latestUpdateTime
 
-    // Enrich props with context
-    const enrichedProps = enrichProps(rawProps, context)
+    // Enrich settings with context
+    const newEnrichedSettings = enrichProps(rawSettings, context)
 
     // Abandon this update if a newer update has started
     if (enrichmentTime !== latestUpdateTime) {
@@ -132,7 +209,7 @@
     // Update the component props.
     // Most props are deeply compared so that svelte will only trigger reactive
     // statements on props that have actually changed.
-    if (!enrichedProps) {
+    if (!newEnrichedSettings) {
       return
     }
     let propsChanged = false
@@ -140,17 +217,17 @@
       enrichedSettings = {}
       propsChanged = true
     }
-    Object.keys(enrichedProps).forEach(key => {
-      if (!propsAreSame(enrichedProps[key], enrichedSettings[key])) {
+    Object.keys(newEnrichedSettings).forEach(key => {
+      if (!propsAreSame(newEnrichedSettings[key], enrichedSettings[key])) {
         propsChanged = true
-        enrichedSettings[key] = enrichedProps[key]
+        enrichedSettings[key] = newEnrichedSettings[key]
       }
     })
 
     // Update the hash if we're in the builder so we can fully remount this
     // component
     if (get(builderStore).inBuilder && propsChanged) {
-      propsHash = hashString(JSON.stringify(enrichedSettings))
+      hash = hashString(JSON.stringify(enrichedSettings))
     }
   }
 
@@ -173,14 +250,10 @@
     conditionalSettings = result.settingUpdates
     visible = nextVisible
   }
-
-  // Drag and drop helper tags
-  $: draggable = interactive && !isLayout && !isScreen
-  $: droppable = interactive && !isLayout && !isScreen
 </script>
 
 {#key renderKey}
-  {#if constructor && componentSettings && (visible || inSelectedPath)}
+  {#if constructor && settings && (visible || inSelectedPath)}
     <!-- The ID is used as a class because getElementsByClassName is O(1) -->
     <!-- and the performance matters for the selection indicators -->
     <div
@@ -192,7 +265,7 @@
       data-id={id}
       data-name={name}
     >
-      <svelte:component this={constructor} {...componentSettings}>
+      <svelte:component this={constructor} {...settings}>
         {#if children.length}
           {#each children as child (child._id)}
             <svelte:self instance={child} />
diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte
index bac0a81fb3..ba3e919cdd 100644
--- a/packages/client/src/components/app/SpectrumCard.svelte
+++ b/packages/client/src/components/app/SpectrumCard.svelte
@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/card/dist/index-vars.css"
   import { getContext } from "svelte"
+  import { Button } from "@budibase/bbui"
 
   export let title
   export let subtitle
@@ -8,6 +9,9 @@
   export let imageURL
   export let linkURL
   export let horizontal
+  export let showButton
+  export let buttonText
+  export let buttonOnClick
 
   const { styleable, linkable } = getContext("sdk")
   const component = getContext("component")
@@ -60,6 +64,11 @@
         {description}
       </div>
     {/if}
+    {#if showButton}
+      <div class="spectrum-Card-footer button-container">
+        <Button on:click={buttonOnClick} secondary>{buttonText}</Button>
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -116,4 +125,8 @@
     padding-top: 0;
     margin-top: -8px;
   }
+
+  .button-container {
+    margin-top: -3px;
+  }
 </style>
diff --git a/packages/client/src/components/app/blocks/CardListWithSearch.svelte b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
new file mode 100644
index 0000000000..3e320bfee4
--- /dev/null
+++ b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
@@ -0,0 +1,240 @@
+<script>
+  import { onMount, getContext } from "svelte"
+  import Block from "components/Block.svelte"
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+  export let dataSource
+  export let searchColumns
+  export let filter
+  export let sortColumn
+  export let sortOrder
+  export let paginate
+  export let limit
+  export let showTitleButton
+  export let titleButtonText
+  export let titleButtonOnClick
+  export let cardTitle
+  export let cardSubtitle
+  export let cardDescription
+  export let cardImageURL
+  export let cardHorizontal
+  export let showCardButton
+  export let cardButtonText
+  export let cardButtonOnClick
+
+  const { API, styleable } = getContext("sdk")
+  const context = getContext("context")
+  const component = getContext("component")
+  const schemaComponentMap = {
+    string: "stringfield",
+    options: "optionsfield",
+    number: "numberfield",
+    datetime: "datetimefield",
+    boolean: "booleanfield",
+  }
+
+  let formId
+  let dataProviderId
+  let schema
+
+  $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
+  $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
+  $: cardWidth = cardHorizontal ? 420 : 240
+
+  // Enrich the default filter with the specified search fields
+  const enrichFilter = (filter, columns, formId) => {
+    let enrichedFilter = [...(filter || [])]
+    columns?.forEach(column => {
+      enrichedFilter.push({
+        field: column.name,
+        operator: "equal",
+        type: "string",
+        valueType: "Binding",
+        value: `{{ [${formId}].[${column.name}] }}`,
+      })
+    })
+    return enrichedFilter
+  }
+
+  // Determine data types for search fields and only use those that are valid
+  const enrichSearchColumns = (searchColumns, schema) => {
+    let enrichedColumns = []
+    searchColumns?.forEach(column => {
+      const schemaType = schema?.[column]?.type
+      const componentType = schemaComponentMap[schemaType]
+      if (componentType) {
+        enrichedColumns.push({
+          name: column,
+          componentType,
+        })
+      }
+    })
+    return enrichedColumns.slice(0, 3)
+  }
+
+  // Load the datasource schema on mount so we can determine column types
+  onMount(async () => {
+    if (dataSource) {
+      schema = await API.fetchDatasourceSchema(dataSource)
+    }
+  })
+</script>
+
+<Block>
+  <div class="card-list" use:styleable={$component.styles}>
+    <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+      {#if title || enrichedSearchColumns?.length || showTitleButton}
+        <div class="header" class:mobile={$context.device.mobile}>
+          <div class="title">
+            <Heading>{title || ""}</Heading>
+          </div>
+          <div class="controls">
+            {#if enrichedSearchColumns?.length}
+              <div
+                class="search"
+                style="--cols:{enrichedSearchColumns?.length}"
+              >
+                {#each enrichedSearchColumns as column}
+                  <BlockComponent
+                    type={column.componentType}
+                    props={{
+                      field: column.name,
+                      placeholder: column.name,
+                      text: column.name,
+                      autoWidth: true,
+                    }}
+                  />
+                {/each}
+              </div>
+            {/if}
+            {#if showTitleButton}
+              <BlockComponent
+                type="button"
+                props={{
+                  onClick: titleButtonOnClick,
+                  text: titleButtonText,
+                  type: "cta",
+                }}
+              />
+            {/if}
+          </div>
+        </div>
+      {/if}
+      <BlockComponent
+        type="dataprovider"
+        bind:id={dataProviderId}
+        props={{
+          dataSource,
+          filter: enrichedFilter,
+          sortColumn,
+          sortOrder,
+          paginate,
+          limit,
+        }}
+      >
+        <BlockComponent
+          type="repeater"
+          context="repeater"
+          props={{
+            dataProvider: `{{ literal [${dataProviderId}] }}`,
+            direction: "row",
+            hAlign: "left",
+            vAlign: "top",
+            gap: "M",
+          }}
+          styles={{
+            display: "grid",
+            "grid-template-columns": `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
+          }}
+        >
+          <BlockComponent
+            type="spectrumcard"
+            props={{
+              title: cardTitle,
+              subtitle: cardSubtitle,
+              description: cardDescription,
+              imageURL: cardImageURL,
+              horizontal: cardHorizontal,
+              showButton: showCardButton,
+              buttonText: cardButtonText,
+              buttonOnClick: cardButtonOnClick,
+            }}
+            styles={{
+              width: "auto",
+            }}
+          />
+        </BlockComponent>
+      </BlockComponent>
+    </BlockComponent>
+  </div>
+</Block>
+
+<style>
+  .card-list :global(.spectrum-Card) {
+    width: auto !important;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    overflow: hidden;
+  }
+  .title :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .controls {
+    flex: 0 1 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 20px;
+  }
+  .controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
+    width: 100%;
+  }
+
+  .search {
+    flex: 0 1 auto;
+    gap: 10px;
+    max-width: 100%;
+    display: grid;
+    grid-template-columns: repeat(var(--cols), minmax(120px, 200px));
+  }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 0;
+  }
+
+  /* Mobile styles */
+  .mobile {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .mobile .controls {
+    flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .mobile .search {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    width: 100%;
+  }
+</style>
diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js
index 16b123d17e..7d0d15080a 100644
--- a/packages/client/src/components/app/blocks/index.js
+++ b/packages/client/src/components/app/blocks/index.js
@@ -1 +1,2 @@
 export { default as tablewithsearch } from "./TableWithSearch.svelte"
+export { default as cardlistwithsearch } from "./CardListWithSearch.svelte"
diff --git a/packages/client/src/stores/context.js b/packages/client/src/stores/context.js
index e372b837bd..fcbcf0f592 100644
--- a/packages/client/src/stores/context.js
+++ b/packages/client/src/stores/context.js
@@ -1,4 +1,5 @@
 import { writable, derived } from "svelte/store"
+import { hashString } from "../utils/helpers"
 
 export const createContextStore = oldContext => {
   const newContext = writable({})
@@ -9,7 +10,7 @@ export const createContextStore = oldContext => {
     for (let i = 0; i < $contexts.length - 1; i++) {
       key += $contexts[i].key
     }
-    key += JSON.stringify($contexts[$contexts.length - 1])
+    key = hashString(key + JSON.stringify($contexts[$contexts.length - 1]))
 
     // Reduce global state
     const reducer = (total, context) => ({ ...total, ...context })

From 3e5980082fe9b2a929f146b447fdebe0062dd4c1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Nov 2021 14:51:13 +0000
Subject: [PATCH 22/24] Fix card button text potentially showing as undefined

---
 packages/client/src/components/app/SpectrumCard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte
index ba3e919cdd..981ac98d9e 100644
--- a/packages/client/src/components/app/SpectrumCard.svelte
+++ b/packages/client/src/components/app/SpectrumCard.svelte
@@ -66,7 +66,7 @@
     {/if}
     {#if showButton}
       <div class="spectrum-Card-footer button-container">
-        <Button on:click={buttonOnClick} secondary>{buttonText}</Button>
+        <Button on:click={buttonOnClick} secondary>{buttonText || ""}</Button>
       </div>
     {/if}
   </div>

From de9c0381503cf6bc83b10e62882408098e578c1b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Nov 2021 16:40:45 +0000
Subject: [PATCH 23/24] Fix card list block empty state and update size

---
 .../client/src/components/app/Repeater.svelte    |  1 +
 .../src/components/app/SpectrumCard.svelte       | 16 ++++++++++++++--
 .../app/blocks/CardListWithSearch.svelte         |  9 +++------
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/app/Repeater.svelte b/packages/client/src/components/app/Repeater.svelte
index 79f044f402..ff077f359b 100644
--- a/packages/client/src/components/app/Repeater.svelte
+++ b/packages/client/src/components/app/Repeater.svelte
@@ -38,6 +38,7 @@
     padding: var(--spacing-l);
     display: grid;
     place-items: center;
+    grid-column: 1 / -1;
   }
   .noRows i {
     margin-bottom: var(--spacing-m);
diff --git a/packages/client/src/components/app/SpectrumCard.svelte b/packages/client/src/components/app/SpectrumCard.svelte
index 981ac98d9e..d8353eea7e 100644
--- a/packages/client/src/components/app/SpectrumCard.svelte
+++ b/packages/client/src/components/app/SpectrumCard.svelte
@@ -74,7 +74,7 @@
 
 <style>
   .spectrum-Card {
-    width: 240px;
+    width: 300px;
     border-color: var(--spectrum-global-color-gray-300) !important;
     display: flex;
     flex-direction: column;
@@ -85,6 +85,9 @@
     flex-direction: row;
     width: 420px;
   }
+  .spectrum-Card-container {
+    padding: var(--spectrum-global-dimension-size-50) 0;
+  }
   .spectrum-Card-title :global(a) {
     text-overflow: ellipsis;
     overflow: hidden;
@@ -123,10 +126,19 @@
   .spectrum-Card-footer {
     border-top: none;
     padding-top: 0;
+    padding-bottom: 0;
     margin-top: -8px;
+    margin-bottom: var(
+      --spectrum-card-body-padding-bottom,
+      var(--spectrum-global-dimension-size-300)
+    );
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 
   .button-container {
-    margin-top: -3px;
+    margin-bottom: var(--spectrum-global-dimension-size-300);
   }
 </style>
diff --git a/packages/client/src/components/app/blocks/CardListWithSearch.svelte b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
index 3e320bfee4..a750a37361 100644
--- a/packages/client/src/components/app/blocks/CardListWithSearch.svelte
+++ b/packages/client/src/components/app/blocks/CardListWithSearch.svelte
@@ -41,7 +41,7 @@
 
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
-  $: cardWidth = cardHorizontal ? 420 : 240
+  $: cardWidth = cardHorizontal ? 420 : 300
 
   // Enrich the default filter with the specified search fields
   const enrichFilter = (filter, columns, formId) => {
@@ -140,9 +140,10 @@
           props={{
             dataProvider: `{{ literal [${dataProviderId}] }}`,
             direction: "row",
-            hAlign: "left",
+            hAlign: "stretch",
             vAlign: "top",
             gap: "M",
+            noRowsMessage: "No rows found",
           }}
           styles={{
             display: "grid",
@@ -172,10 +173,6 @@
 </Block>
 
 <style>
-  .card-list :global(.spectrum-Card) {
-    width: auto !important;
-  }
-
   .header {
     display: flex;
     flex-direction: row;

From 08ae5507916cb0f7bd46df661fd8496c4cceadce Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 8 Nov 2021 16:54:43 +0000
Subject: [PATCH 24/24] Update default number of cards in card list block to 8

---
 packages/client/manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index f3ba71223c..e75150ca42 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2803,7 +2803,7 @@
         "type": "number",
         "label": "Limit",
         "key": "limit",
-        "defaultValue": 10
+        "defaultValue": 8
       },
       {
         "type": "boolean",