From b060de98d0dae31a9c015da071f415d6e9b20f31 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 26 Jun 2024 16:12:44 +0100
Subject: [PATCH 01/31] Add UI for configuring conditions on table columns

---
 .../design/settings/componentSettings.js      |   2 +
 .../controls/CellConditionEditor.svelte       | 183 ++++++++++++++++++
 .../GridColumnConfiguration/getColumns.js     |   2 +
 packages/client/manifest.json                 |   5 +
 4 files changed, 192 insertions(+)
 create mode 100644 packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index e174a2e6f7..3540c8b990 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -30,6 +30,7 @@ import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte
 import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
 import FormStepControls from "./controls/FormStepControls.svelte"
 import PaywalledSetting from "./controls/PaywalledSetting.svelte"
+import CellConditionEditor from "./controls/CellConditionEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -61,6 +62,7 @@ const componentMap = {
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,
+  cellConditions: CellConditionEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
new file mode 100644
index 0000000000..fb0c98df9e
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -0,0 +1,183 @@
+<script>
+  import {
+    ActionButton,
+    Drawer,
+    Button,
+    DrawerContent,
+    Layout,
+    Select,
+    Icon,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash"
+  import ColorPicker from "./ColorPicker.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { QueryUtils, Constants } from "@budibase/frontend-core"
+  import { generate } from "shortid"
+  import { FieldType } from "@budibase/types"
+
+  export let componentInstance
+  export let bindings
+  export let value
+
+  const dispatch = createEventDispatcher()
+
+  let tempValue = []
+  let drawer
+
+  $: conditionCount = value?.length
+  $: conditionText = `${conditionCount || "No"} condition${
+    conditionCount !== 1 ? "s" : ""
+  } set`
+  $: valueTypeOptions = getValueTypeOptions(componentInstance.columnType)
+
+  const openDrawer = () => {
+    tempValue = cloneDeep(value || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    dispatch("change", tempValue)
+    drawer.hide()
+  }
+
+  const getValueTypeOptions = type => {
+    let options = [
+      {
+        label: "Binding",
+        value: FieldType.STRING,
+      },
+    ]
+    const operatorOptions = QueryUtils.getValidOperatorsForType({ type })
+    if (operatorOptions.length) {
+      options.push({
+        label: "Value",
+        value: type,
+      })
+    }
+    return options
+  }
+
+  const addCondition = () => {
+    const condition = {
+      id: generate(),
+      operator: Constants.OperatorOptions.Equals.value,
+      valueType: FieldType.STRING,
+    }
+    tempValue = [...tempValue, condition]
+  }
+
+  const duplicateCondition = condition => {
+    const dupe = { ...condition, id: generate() }
+    tempValue = [...tempValue, dupe]
+  }
+
+  const removeCondition = condition => {
+    tempValue = tempValue.filter(c => c.id !== condition.id)
+  }
+
+  const getOperatorOptions = condition => {
+    return QueryUtils.getValidOperatorsForType({ type: condition.valueType })
+  }
+
+  const onOperatorChange = (condition, newOperator) => {
+    const noValueOptions = [
+      Constants.OperatorOptions.Empty.value,
+      Constants.OperatorOptions.NotEmpty.value,
+    ]
+    condition.noValue = noValueOptions.includes(newOperator)
+    if (condition.noValue || newOperator === "oneOf") {
+      condition.referenceValue = null
+      condition.valueType = "string"
+    }
+  }
+
+  const onValueTypeChange = (condition, newType) => {
+    condition.referenceValue = null
+
+    // Ensure a valid operator is set
+    const validOperators = QueryUtils.getValidOperatorsForType({
+      type: newType,
+    }).map(x => x.value)
+    if (!validOperators.includes(condition.operator)) {
+      condition.operator =
+        validOperators[0] ?? Constants.OperatorOptions.Equals.value
+      onOperatorChange(condition, condition.operator)
+    }
+  }
+</script>
+
+<ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+
+<Drawer bind:this={drawer} title="Conditions" on:drawerShow on:drawerHide>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="container">
+      <Layout noPadding>
+        {#if tempValue.length}
+          <div class="conditions">
+            {#each tempValue as condition}
+              <span>Set background color to</span>
+              <ColorPicker
+                value={condition.color}
+                on:change={e => (condition.color = e.detail)}
+              />
+              <span>if value</span>
+              <Select
+                placeholder={null}
+                options={getOperatorOptions(condition)}
+                bind:value={condition.operator}
+                on:change={e => onOperatorChange(condition, e.detail)}
+              />
+              <Select
+                disabled={condition.noValue || condition.operator === "oneOf"}
+                options={valueTypeOptions}
+                bind:value={condition.valueType}
+                placeholder={null}
+                on:change={e => onValueTypeChange(condition, e.detail)}
+              />
+              <DrawerBindableInput
+                {bindings}
+                placeholder="Value"
+                value={condition.referenceValue}
+                on:change={e => (condition.referenceValue = e.detail)}
+              />
+              <Icon
+                name="Duplicate"
+                hoverable
+                size="S"
+                on:click={() => duplicateCondition(condition)}
+              />
+              <Icon
+                name="Close"
+                hoverable
+                size="S"
+                on:click={() => removeCondition(condition)}
+              />
+            {/each}
+          </div>
+        {/if}
+        <div>
+          <Button secondary icon="Add" on:click={addCondition}>
+            Add condition
+          </Button>
+        </div>
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .conditions {
+    display: grid;
+    grid-template-columns: auto auto auto 1fr 1fr 1fr auto auto;
+    align-items: center;
+    grid-column-gap: var(--spacing-l);
+    grid-row-gap: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 4af3e48110..4fbe6fc9e7 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -68,6 +68,7 @@ const toGridFormat = draggableListColumns => {
     field: entry.field,
     active: entry.active,
     width: entry.width,
+    conditions: entry.conditions,
   }))
 }
 
@@ -83,6 +84,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         label: column.label,
         columnType: schema[column.field].type,
         width: column.width,
+        conditions: column.conditions,
       },
       {}
     )
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 7a9d1a5695..c8a5f8e1a4 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2879,6 +2879,11 @@
         "placeholder": "Auto",
         "min": 80,
         "max": 9999
+      },
+      {
+        "type": "cellConditions",
+        "label": "Conditions",
+        "key": "conditions"
       }
     ]
   },

From 42162e711ad8f332e0aea0200a08231893f6b909 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 08:23:18 +0100
Subject: [PATCH 02/31] Add initial work on conditional cell colours and add
 new 100 variant spectrum colours

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   |  16 ++-
 packages/bbui/src/bbui.css                    |  34 ++++--
 .../src/components/app/GridBlock.svelte       |   1 +
 .../src/components/grid/cells/DataCell.svelte |   1 +
 .../src/components/grid/cells/GridCell.svelte |  45 ++++---
 .../src/components/grid/stores/columns.js     |   1 +
 .../src/components/grid/stores/rows.js        | 110 ++++++++++++++----
 .../frontend-core/src/themes/midnight.css     |   2 +-
 packages/frontend-core/src/themes/nord.css    |   2 +-
 9 files changed, 161 insertions(+), 51 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index eb235ad153..7bedc769c8 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -40,6 +40,15 @@
     {
       label: "Colors",
       colors: [
+        "red-100",
+        "orange-100",
+        "yellow-100",
+        "green-100",
+        "seafoam-100",
+        "blue-100",
+        "indigo-100",
+        "magenta-100",
+
         "red-400",
         "orange-400",
         "yellow-400",
@@ -108,12 +117,17 @@
 
   const getCheckColor = value => {
     // Use dynamic color for theme grays
-    if (value?.includes("gray")) {
+    if (value?.includes("-gray-")) {
       return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
         ? "var(--spectrum-global-color-gray-900)"
         : "var(--spectrum-global-color-gray-50)"
     }
 
+    // Use contrasating check for the dim colours
+    if (value?.includes("-100")) {
+      return "var(--spectrum-global-color-gray-900)"
+    }
+
     // Use black check for static white
     if (value?.includes("static-black")) {
       return "var(--spectrum-global-color-static-gray-50)"
diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index d60a3e18ea..f707a75975 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -111,17 +111,35 @@ a {
 /* Custom theme additions */
 .spectrum--darkest {
   --drop-shadow: rgba(0, 0, 0, 0.6);
-  --spectrum-global-color-blue-100: rgb(30, 36, 50);
+  --spectrum-global-color-red-100: #570000;
+  --spectrum-global-color-orange-100: #481801;
+  --spectrum-global-color-yellow-100: #352400;
+  --spectrum-global-color-green-100: #002f07;
+  --spectrum-global-color-seafoam-100: #122b2a;
+  --spectrum-global-color-blue-100: #002651;
+  --spectrum-global-color-indigo-100: #1a1d61;
+  --spectrum-global-color-magenta-100: #530329;
 }
 .spectrum--dark {
   --drop-shadow: rgba(0, 0, 0, 0.3);
-  --spectrum-global-color-blue-100: rgb(42, 47, 57);
-}
-.spectrum--light {
-  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+  --spectrum-global-color-red-100: #7b0000;
+  --spectrum-global-color-orange-100: #662500;
+  --spectrum-global-color-yellow-100: #4c3600;
+  --spectrum-global-color-green-100: #00450a;
+  --spectrum-global-color-seafoam-100: #12413f;
+  --spectrum-global-color-blue-100: #003877;
+  --spectrum-global-color-indigo-100: #282c8c;
+  --spectrum-global-color-magenta-100: #76003a;
 }
+.spectrum--light,
 .spectrum--lightest {
-  --drop-shadow: rgba(0, 0, 0, 0.05);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-red-100: #ffebe7;
+  --spectrum-global-color-orange-100: #ffeccc;
+  --spectrum-global-color-yellow-100: #fbf198;
+  --spectrum-global-color-green-100: #cef8e0;
+  --spectrum-global-color-seafoam-100: #cef7f3;
+  --spectrum-global-color-blue-100: #e0f2ff;
+  --spectrum-global-color-indigo-100: #edeeff;
+  --spectrum-global-color-magenta-100: #ffeaf1;
 }
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 2035b03391..cc914324c7 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -91,6 +91,7 @@
       overrides[column.field] = {
         displayName: column.label,
         order: idx,
+        conditions: column.conditions,
       }
       if (column.width) {
         overrides[column.field].width = column.width
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index 372563995a..67a0cb6adc 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -130,6 +130,7 @@
   on:mouseup={stopSelectionCallback}
   on:click={handleClick}
   width={column.width}
+  metadata={row.__metadata?.[column.name]}
 >
   <svelte:component
     this={getCellRenderer(column)}
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 4e914e2b80..10f195fecf 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -11,13 +11,17 @@
   export let center = false
   export let readonly = false
   export let hidden = false
+  export let metadata = null
 
-  $: style = getStyle(width, selectedUser)
+  $: style = getStyle(width, selectedUser, metadata)
 
-  const getStyle = (width, selectedUser) => {
+  const getStyle = (width, selectedUser, metadata) => {
     let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--user-color:${selectedUser.color};`
+      style += `--user-color :${selectedUser.color};`
+    }
+    if (metadata?.background) {
+      style += `--cell-background: ${metadata.background};`
     }
     return style
   }
@@ -94,9 +98,9 @@
   }
 
   /* Cell border */
-  .cell.focused:after,
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
+  .cell.focused::after,
+  .cell.error::after,
+  .cell.selected-other:not(.focused)::after {
     content: " ";
     position: absolute;
     top: 0;
@@ -109,14 +113,30 @@
     box-sizing: border-box;
   }
 
+  /* Cell background overlay */
+  .cell.selected::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    height: calc(100% + 1px);
+    width: calc(100% + 1px);
+    opacity: 0.16;
+    background: var(--spectrum-global-color-blue-400);
+    z-index: 2;
+    pointer-events: none;
+  }
+
   /* Cell border for cells with labels */
-  .cell.error:after {
+  .cell.error::after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell.top.error:after {
+  .cell.top.error::after {
     border-radius: 2px 2px 2px 0;
   }
-  .cell.selected-other:not(.focused):after {
+  .cell.selected-other:not(.focused)::after {
     border-radius: 2px;
   }
 
@@ -151,15 +171,10 @@
   .cell.focused.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
   }
-
-  .cell.highlighted:not(.focused),
+  .cell.highlighted:not(.focused):not(.selected),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
   }
-  .cell.selected.focused,
-  .cell.selected:not(.focused) {
-    --cell-background: var(--spectrum-global-color-blue-100);
-  }
 
   /* Label for additional text */
   .label {
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index 085f6e4387..0073754a5d 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -144,6 +144,7 @@ export const initialise = context => {
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
+            conditions: fieldSchema.conditions,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 7459059d1e..54d00510d3 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -5,6 +5,51 @@ import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
+import { QueryUtils } from "../../../utils"
+
+const evaluateConditions = (row, column) => {
+  if (!column.conditions?.length) {
+    return
+  }
+  for (let condition of column.conditions) {
+    let value = row[column.name]
+    let referenceValue = condition.referenceValue
+
+    // Parse values into correct types
+    if (condition.valueType === "number") {
+      referenceValue = parseFloat(referenceValue)
+      value = parseFloat(value)
+    } else if (condition.valueType === "datetime") {
+      if (referenceValue) {
+        referenceValue = new Date(referenceValue).toISOString()
+      }
+      if (value) {
+        value = new Date(value).toISOString()
+      }
+    } else if (condition.valueType === "boolean") {
+      referenceValue = `${referenceValue}`.toLowerCase() === "true"
+      value = `${value}`.toLowerCase() === "true"
+    }
+
+    // Build lucene compatible condition expression
+    const luceneCondition = {
+      operator: condition.operator,
+      type: condition.valueType,
+      field: "value",
+      value: referenceValue,
+    }
+    const query = QueryUtils.buildQuery([luceneCondition])
+    const result = QueryUtils.runQuery([{ value }], query)
+    if (result.length > 0) {
+      if (!row.__metadata) {
+        row.__metadata = {}
+      }
+      row.__metadata[column.name] = {
+        background: condition.color,
+      }
+    }
+  }
+}
 
 export const createStores = () => {
   const rows = writable([])
@@ -17,15 +62,47 @@ export const createStores = () => {
   const error = writable(null)
   const fetch = writable(null)
 
+  // Mark loaded as true if we've ever stopped loading
+  let hasStartedLoading = false
+  loading.subscribe($loading => {
+    if ($loading) {
+      hasStartedLoading = true
+    } else if (hasStartedLoading) {
+      loaded.set(true)
+    }
+  })
+
+  return {
+    rows,
+    fetch,
+    loaded,
+    refreshing,
+    loading,
+    rowChangeCache,
+    inProgressChanges,
+    hasNextPage,
+    error,
+  }
+}
+
+export const deriveStores = context => {
+  const { rows, columns, rowChangeCache } = context
+
   // Enrich rows with an index property and any pending changes
   const enrichedRows = derived(
-    [rows, rowChangeCache],
-    ([$rows, $rowChangeCache]) => {
-      return $rows.map((row, idx) => ({
-        ...row,
-        ...$rowChangeCache[row._id],
-        __idx: idx,
-      }))
+    [rows, rowChangeCache, columns],
+    ([$rows, $rowChangeCache, $columns]) => {
+      return $rows.map((row, idx) => {
+        let enriched = {
+          ...row,
+          ...$rowChangeCache[row._id],
+          __idx: idx,
+        }
+        for (let column of $columns) {
+          evaluateConditions(enriched, column)
+        }
+        return enriched
+      })
     }
   )
 
@@ -38,30 +115,12 @@ export const createStores = () => {
     return map
   })
 
-  // Mark loaded as true if we've ever stopped loading
-  let hasStartedLoading = false
-  loading.subscribe($loading => {
-    if ($loading) {
-      hasStartedLoading = true
-    } else if (hasStartedLoading) {
-      loaded.set(true)
-    }
-  })
-
   return {
     rows: {
       ...rows,
       subscribe: enrichedRows.subscribe,
     },
-    fetch,
     rowLookupMap,
-    loaded,
-    refreshing,
-    loading,
-    rowChangeCache,
-    inProgressChanges,
-    hasNextPage,
-    error,
   }
 }
 
@@ -643,6 +702,7 @@ export const createActions = context => {
   const cleanRow = row => {
     let clone = { ...row }
     delete clone.__idx
+    delete clone.__metadata
     if (!get(hasBudibaseIdentifiers)) {
       delete clone._id
     }
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index 30132e11e2..7b68966f31 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -16,5 +16,5 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.25) !important;
-  --spectrum-global-color-blue-100: rgba(36, 44, 64) !important;
+  --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
 }
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index a99812b146..c8716744e9 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -49,5 +49,5 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.15) !important;
-  --spectrum-global-color-blue-100: rgb(56, 65, 90) !important;
+  --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
 }

From feffd80d11f354dfa30209497f7a345e11286de8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 09:10:25 +0100
Subject: [PATCH 03/31] Standardise cell condition operators

---
 packages/bbui/src/bbui.css                    |   4 +-
 .../controls/CellConditionEditor.svelte       | 169 ++++++++++--------
 2 files changed, 98 insertions(+), 75 deletions(-)

diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index f707a75975..8851527ae9 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -134,8 +134,8 @@ a {
 .spectrum--light,
 .spectrum--lightest {
   --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-red-100: #ffebe7;
-  --spectrum-global-color-orange-100: #ffeccc;
+  --spectrum-global-color-red-100: #ffddd6;
+  --spectrum-global-color-orange-100: #ffdfad;
   --spectrum-global-color-yellow-100: #fbf198;
   --spectrum-global-color-green-100: #cef8e0;
   --spectrum-global-color-seafoam-100: #cef7f3;
diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index fb0c98df9e..06ecac6235 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -15,21 +15,36 @@
   import { QueryUtils, Constants } from "@budibase/frontend-core"
   import { generate } from "shortid"
   import { FieldType } from "@budibase/types"
+  import { dndzone } from "svelte-dnd-action"
+  import { flip } from "svelte/animate"
 
   export let componentInstance
   export let bindings
   export let value
 
   const dispatch = createEventDispatcher()
+  const flipDuration = 130
 
   let tempValue = []
   let drawer
+  let dragDisabled = true
 
   $: conditionCount = value?.length
   $: conditionText = `${conditionCount || "No"} condition${
     conditionCount !== 1 ? "s" : ""
   } set`
-  $: valueTypeOptions = getValueTypeOptions(componentInstance.columnType)
+  $: type = componentInstance.columnType
+  $: valueTypeOptions = [
+    {
+      label: "Binding",
+      value: FieldType.STRING,
+    },
+    {
+      label: "Value",
+      value: type,
+    },
+  ]
+  $: operatorOptions = QueryUtils.getValidOperatorsForType({ type })
 
   const openDrawer = () => {
     tempValue = cloneDeep(value || [])
@@ -41,23 +56,6 @@
     drawer.hide()
   }
 
-  const getValueTypeOptions = type => {
-    let options = [
-      {
-        label: "Binding",
-        value: FieldType.STRING,
-      },
-    ]
-    const operatorOptions = QueryUtils.getValidOperatorsForType({ type })
-    if (operatorOptions.length) {
-      options.push({
-        label: "Value",
-        value: type,
-      })
-    }
-    return options
-  }
-
   const addCondition = () => {
     const condition = {
       id: generate(),
@@ -76,10 +74,6 @@
     tempValue = tempValue.filter(c => c.id !== condition.id)
   }
 
-  const getOperatorOptions = condition => {
-    return QueryUtils.getValidOperatorsForType({ type: condition.valueType })
-  }
-
   const onOperatorChange = (condition, newOperator) => {
     const noValueOptions = [
       Constants.OperatorOptions.Empty.value,
@@ -92,68 +86,93 @@
     }
   }
 
-  const onValueTypeChange = (condition, newType) => {
+  const onValueTypeChange = condition => {
     condition.referenceValue = null
+  }
 
-    // Ensure a valid operator is set
-    const validOperators = QueryUtils.getValidOperatorsForType({
-      type: newType,
-    }).map(x => x.value)
-    if (!validOperators.includes(condition.operator)) {
-      condition.operator =
-        validOperators[0] ?? Constants.OperatorOptions.Equals.value
-      onOperatorChange(condition, condition.operator)
-    }
+  const updateConditions = e => {
+    tempValue = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateConditions(e)
+    dragDisabled = true
   }
 </script>
 
 <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <Drawer bind:this={drawer} title="Conditions" on:drawerShow on:drawerHide>
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <DrawerContent slot="body">
     <div class="container">
       <Layout noPadding>
         {#if tempValue.length}
-          <div class="conditions">
-            {#each tempValue as condition}
-              <span>Set background color to</span>
-              <ColorPicker
-                value={condition.color}
-                on:change={e => (condition.color = e.detail)}
-              />
-              <span>if value</span>
-              <Select
-                placeholder={null}
-                options={getOperatorOptions(condition)}
-                bind:value={condition.operator}
-                on:change={e => onOperatorChange(condition, e.detail)}
-              />
-              <Select
-                disabled={condition.noValue || condition.operator === "oneOf"}
-                options={valueTypeOptions}
-                bind:value={condition.valueType}
-                placeholder={null}
-                on:change={e => onValueTypeChange(condition, e.detail)}
-              />
-              <DrawerBindableInput
-                {bindings}
-                placeholder="Value"
-                value={condition.referenceValue}
-                on:change={e => (condition.referenceValue = e.detail)}
-              />
-              <Icon
-                name="Duplicate"
-                hoverable
-                size="S"
-                on:click={() => duplicateCondition(condition)}
-              />
-              <Icon
-                name="Close"
-                hoverable
-                size="S"
-                on:click={() => removeCondition(condition)}
-              />
+          <div
+            class="conditions"
+            use:dndzone={{
+              items: tempValue,
+              flipDurationMs: flipDuration,
+              dropTargetStyle: { outline: "none" },
+              dragDisabled,
+            }}
+            on:consider={updateConditions}
+            on:finalize={handleFinalize}
+          >
+            {#each tempValue as condition (condition.id)}
+              <div
+                class="condition"
+                class:update={condition.action === "update"}
+                animate:flip={{ duration: flipDuration }}
+              >
+                <div
+                  class="handle"
+                  aria-label="drag-handle"
+                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                  on:mousedown={() => (dragDisabled = false)}
+                >
+                  <Icon name="DragHandle" size="XL" />
+                </div>
+                <span>Set background color to</span>
+                <ColorPicker
+                  value={condition.color}
+                  on:change={e => (condition.color = e.detail)}
+                />
+                <span>if value</span>
+                <Select
+                  placeholder={null}
+                  options={operatorOptions}
+                  bind:value={condition.operator}
+                  on:change={e => onOperatorChange(condition, e.detail)}
+                />
+                <Select
+                  disabled={condition.noValue || condition.operator === "oneOf"}
+                  options={valueTypeOptions}
+                  bind:value={condition.valueType}
+                  placeholder={null}
+                  on:change={() => onValueTypeChange(condition)}
+                />
+                <DrawerBindableInput
+                  {bindings}
+                  disabled={condition.noValue}
+                  placeholder="Value"
+                  value={condition.referenceValue}
+                  on:change={e => (condition.referenceValue = e.detail)}
+                />
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateCondition(condition)}
+                />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeCondition(condition)}
+                />
+              </div>
             {/each}
           </div>
         {/if}
@@ -174,10 +193,14 @@
     margin: 0 auto;
   }
   .conditions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .condition {
     display: grid;
-    grid-template-columns: auto auto auto 1fr 1fr 1fr auto auto;
+    grid-template-columns: auto auto auto auto 1fr 1fr 1fr auto auto;
     align-items: center;
     grid-column-gap: var(--spacing-l);
-    grid-row-gap: var(--spacing-l);
   }
 </style>

From c9bcda0bd52939f2dec01a78b508e31d403a4263 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 12:38:03 +0100
Subject: [PATCH 04/31] Update condition evaluation in tables

---
 .../controls/CellConditionEditor.svelte       |  6 +-
 .../src/components/grid/stores/rows.js        | 69 +++++++++++--------
 2 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index 06ecac6235..eb7e70f887 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -29,10 +29,8 @@
   let drawer
   let dragDisabled = true
 
-  $: conditionCount = value?.length
-  $: conditionText = `${conditionCount || "No"} condition${
-    conditionCount !== 1 ? "s" : ""
-  } set`
+  $: count = value?.length
+  $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
   $: type = componentInstance.columnType
   $: valueTypeOptions = [
     {
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 54d00510d3..1c6ea68c2b 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -12,41 +12,46 @@ const evaluateConditions = (row, column) => {
     return
   }
   for (let condition of column.conditions) {
-    let value = row[column.name]
-    let referenceValue = condition.referenceValue
+    try {
+      const type = column.schema.type
+      let value = row[column.name]
+      let referenceValue = condition.referenceValue
 
-    // Parse values into correct types
-    if (condition.valueType === "number") {
-      referenceValue = parseFloat(referenceValue)
-      value = parseFloat(value)
-    } else if (condition.valueType === "datetime") {
-      if (referenceValue) {
-        referenceValue = new Date(referenceValue).toISOString()
+      // Coerce values into correct types for primitives
+      if (type === "number") {
+        referenceValue = parseFloat(referenceValue)
+        value = parseFloat(value)
+      } else if (type === "datetime") {
+        if (referenceValue) {
+          referenceValue = new Date(referenceValue).toISOString()
+        }
+        if (value) {
+          value = new Date(value).toISOString()
+        }
+      } else if (type === "boolean") {
+        referenceValue = `${referenceValue}`.toLowerCase() === "true"
+        value = `${value}`.toLowerCase() === "true"
       }
-      if (value) {
-        value = new Date(value).toISOString()
-      }
-    } else if (condition.valueType === "boolean") {
-      referenceValue = `${referenceValue}`.toLowerCase() === "true"
-      value = `${value}`.toLowerCase() === "true"
-    }
 
-    // Build lucene compatible condition expression
-    const luceneCondition = {
-      operator: condition.operator,
-      type: condition.valueType,
-      field: "value",
-      value: referenceValue,
-    }
-    const query = QueryUtils.buildQuery([luceneCondition])
-    const result = QueryUtils.runQuery([{ value }], query)
-    if (result.length > 0) {
-      if (!row.__metadata) {
-        row.__metadata = {}
+      // Build lucene compatible condition expression
+      const luceneFilter = {
+        operator: condition.operator,
+        type,
+        field: "value",
+        value: referenceValue,
       }
-      row.__metadata[column.name] = {
-        background: condition.color,
+      const query = QueryUtils.buildQuery([luceneFilter])
+      const result = QueryUtils.runQuery([{ value }], query)
+      if (result.length > 0) {
+        if (!row.__metadata) {
+          row.__metadata = {}
+        }
+        row.__metadata[column.name] = {
+          background: condition.color,
+        }
       }
+    } catch {
+      // Swallow
     }
   }
 }
@@ -92,6 +97,10 @@ export const deriveStores = context => {
   const enrichedRows = derived(
     [rows, rowChangeCache, columns],
     ([$rows, $rowChangeCache, $columns]) => {
+      if (!$rows?.length || !$columns?.length) {
+        return []
+      }
+      console.log("ENRICH ROWS", $rows, $rowChangeCache, $columns)
       return $rows.map((row, idx) => {
         let enriched = {
           ...row,

From 99b522b32de21d1fe47928028b3ced6ed3658cf0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 14:23:05 +0100
Subject: [PATCH 05/31] Optimise condition evaluation performance and add
 support for conditionally setting text color

---
 .../controls/CellConditionEditor.svelte       |  24 +++-
 .../src/components/grid/cells/GridCell.svelte |   9 +-
 .../src/components/grid/layout/Grid.svelte    |   1 +
 .../grid/layout/StickyColumn.svelte           |   2 +-
 .../src/components/grid/stores/conditions.js  | 125 ++++++++++++++++++
 .../src/components/grid/stores/index.js       |   2 +
 .../src/components/grid/stores/rows.js        |  78 +----------
 .../src/components/grid/stores/viewport.js    |  29 +++-
 8 files changed, 185 insertions(+), 85 deletions(-)
 create mode 100644 packages/frontend-core/src/components/grid/stores/conditions.js

diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index eb7e70f887..5f19739f9d 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -24,6 +24,16 @@
 
   const dispatch = createEventDispatcher()
   const flipDuration = 130
+  const conditionOptions = [
+    {
+      label: "Update background color",
+      value: "backgroundColor",
+    },
+    {
+      label: "Update text color",
+      value: "textColor",
+    },
+  ]
 
   let tempValue = []
   let drawer
@@ -57,6 +67,7 @@
   const addCondition = () => {
     const condition = {
       id: generate(),
+      metadataKey: conditionOptions[0].value,
       operator: Constants.OperatorOptions.Equals.value,
       valueType: FieldType.STRING,
     }
@@ -132,10 +143,15 @@
                 >
                   <Icon name="DragHandle" size="XL" />
                 </div>
-                <span>Set background color to</span>
+                <Select
+                  placeholder={null}
+                  options={conditionOptions}
+                  bind:value={condition.metadataKey}
+                />
+                <span>to</span>
                 <ColorPicker
-                  value={condition.color}
-                  on:change={e => (condition.color = e.detail)}
+                  value={condition.metadataValue}
+                  on:change={e => (condition.metadataValue = e.detail)}
                 />
                 <span>if value</span>
                 <Select
@@ -197,7 +213,7 @@
   }
   .condition {
     display: grid;
-    grid-template-columns: auto auto auto auto 1fr 1fr 1fr auto auto;
+    grid-template-columns: auto 1fr auto auto auto 1fr 1fr 1fr auto auto;
     align-items: center;
     grid-column-gap: var(--spacing-l);
   }
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 10f195fecf..5f2d471382 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -20,8 +20,11 @@
     if (selectedUser) {
       style += `--user-color :${selectedUser.color};`
     }
-    if (metadata?.background) {
-      style += `--cell-background: ${metadata.background};`
+    if (metadata?.backgroundColor) {
+      style += `--cell-background: ${metadata.backgroundColor};`
+    }
+    if (metadata?.textColor) {
+      style += `--cell-font-color: ${metadata.textColor};`
     }
     return style
   }
@@ -76,7 +79,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--cell-font-color);
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 1ec785b166..58adb5551d 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -231,6 +231,7 @@
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
+    --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index c971e98521..2a7d93ded6 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -166,7 +166,7 @@
 
   /* Don't show borders between cells in the sticky column */
   .sticky-column :global(.cell:not(:last-child)) {
-    border-right: none;
+    border-right-color: transparent;
   }
 
   .header {
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
new file mode 100644
index 0000000000..127cd24bcb
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -0,0 +1,125 @@
+import { writable, get } from "svelte/store"
+import { derivedMemo, QueryUtils } from "../../../utils"
+
+export const createStores = () => {
+  const conditionMetadata = writable({})
+  return {
+    conditionMetadata,
+  }
+}
+
+export const deriveStores = context => {
+  const { columns } = context
+
+  // Derive and memoize the conditions present in our columns so that we only
+  // recompute condition metdata when absolutely necessary
+  const conditions = derivedMemo(columns, $columns => {
+    let newConditions = []
+    for (let column of $columns) {
+      for (let condition of column.conditions || []) {
+        newConditions.push({
+          ...condition,
+          column: column.name,
+          type: column.schema.type,
+        })
+      }
+    }
+    return newConditions
+  })
+
+  return {
+    conditions,
+  }
+}
+
+export const initialise = context => {
+  const { conditionMetadata, conditions, rows } = context
+
+  // Evaluates an array of conditions against a certain row and returns the
+  // resultant metadata
+  const evaluateConditions = (row, conditions) => {
+    let metadata = { version: row._rev }
+    for (let condition of conditions) {
+      try {
+        let {
+          column,
+          type,
+          referenceValue,
+          operator,
+          metadataKey,
+          metadataValue,
+        } = condition
+        let value = row[column]
+
+        // Coerce values into correct types for primitives
+        if (type === "number") {
+          referenceValue = parseFloat(referenceValue)
+          value = parseFloat(value)
+        } else if (type === "datetime") {
+          if (referenceValue) {
+            referenceValue = new Date(referenceValue).toISOString()
+          }
+          if (value) {
+            value = new Date(value).toISOString()
+          }
+        } else if (type === "boolean") {
+          referenceValue = `${referenceValue}`.toLowerCase() === "true"
+          value = `${value}`.toLowerCase() === "true"
+        }
+
+        // Build lucene compatible condition expression
+        const luceneFilter = {
+          operator,
+          type,
+          field: "value",
+          value: referenceValue,
+        }
+        const query = QueryUtils.buildQuery([luceneFilter])
+        const result = QueryUtils.runQuery([{ value }], query)
+        if (result.length > 0) {
+          if (!metadata[column]) {
+            metadata[column] = {}
+          }
+          metadata[column][metadataKey] = metadataValue
+        }
+      } catch {
+        // Swallow
+      }
+    }
+    return metadata
+  }
+
+  // Recompute all metadata if conditions change
+  conditions.subscribe($conditions => {
+    console.log("recomputing all conditions")
+    let metadata = {}
+    if ($conditions.length) {
+      for (let row of get(rows)) {
+        metadata[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    conditionMetadata.set(metadata)
+  })
+
+  // Recompute specific rows when they change
+  rows.subscribe($rows => {
+    const $conditions = get(conditions)
+    if (!$conditions.length) {
+      return
+    }
+    const metadata = get(conditionMetadata)
+    let updates = {}
+    for (let row of $rows) {
+      if (!row._rev || metadata[row._id]?.version !== row._rev) {
+        console.log("recompute row", row._id)
+        updates[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    if (Object.keys(updates).length) {
+      conditionMetadata.update(state => ({
+        ...state,
+        ...updates,
+      }))
+    }
+  })
+}
diff --git a/packages/frontend-core/src/components/grid/stores/index.js b/packages/frontend-core/src/components/grid/stores/index.js
index f086f0a51b..6671cc729c 100644
--- a/packages/frontend-core/src/components/grid/stores/index.js
+++ b/packages/frontend-core/src/components/grid/stores/index.js
@@ -20,6 +20,7 @@ import * as Table from "./datasources/table"
 import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
+import * as Conditions from "./conditions"
 
 const DependencyOrderedStores = [
   Sort,
@@ -33,6 +34,7 @@ const DependencyOrderedStores = [
   Scroll,
   Validation,
   Rows,
+  Conditions,
   UI,
   Resize,
   Viewport,
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index 1c6ea68c2b..fdd91d2270 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -5,56 +5,6 @@ import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
-import { QueryUtils } from "../../../utils"
-
-const evaluateConditions = (row, column) => {
-  if (!column.conditions?.length) {
-    return
-  }
-  for (let condition of column.conditions) {
-    try {
-      const type = column.schema.type
-      let value = row[column.name]
-      let referenceValue = condition.referenceValue
-
-      // Coerce values into correct types for primitives
-      if (type === "number") {
-        referenceValue = parseFloat(referenceValue)
-        value = parseFloat(value)
-      } else if (type === "datetime") {
-        if (referenceValue) {
-          referenceValue = new Date(referenceValue).toISOString()
-        }
-        if (value) {
-          value = new Date(value).toISOString()
-        }
-      } else if (type === "boolean") {
-        referenceValue = `${referenceValue}`.toLowerCase() === "true"
-        value = `${value}`.toLowerCase() === "true"
-      }
-
-      // Build lucene compatible condition expression
-      const luceneFilter = {
-        operator: condition.operator,
-        type,
-        field: "value",
-        value: referenceValue,
-      }
-      const query = QueryUtils.buildQuery([luceneFilter])
-      const result = QueryUtils.runQuery([{ value }], query)
-      if (result.length > 0) {
-        if (!row.__metadata) {
-          row.__metadata = {}
-        }
-        row.__metadata[column.name] = {
-          background: condition.color,
-        }
-      }
-    } catch {
-      // Swallow
-    }
-  }
-}
 
 export const createStores = () => {
   const rows = writable([])
@@ -91,29 +41,15 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { rows, columns, rowChangeCache } = context
+  const { rows } = context
 
   // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(
-    [rows, rowChangeCache, columns],
-    ([$rows, $rowChangeCache, $columns]) => {
-      if (!$rows?.length || !$columns?.length) {
-        return []
-      }
-      console.log("ENRICH ROWS", $rows, $rowChangeCache, $columns)
-      return $rows.map((row, idx) => {
-        let enriched = {
-          ...row,
-          ...$rowChangeCache[row._id],
-          __idx: idx,
-        }
-        for (let column of $columns) {
-          evaluateConditions(enriched, column)
-        }
-        return enriched
-      })
-    }
-  )
+  const enrichedRows = derived(rows, $rows => {
+    return $rows.map((row, idx) => ({
+      ...row,
+      __idx: idx,
+    }))
+  })
 
   // Generate a lookup map to quick find a row by ID
   const rowLookupMap = derived(enrichedRows, $enrichedRows => {
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index a5079d3c11..93eb7df0a2 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -10,6 +10,8 @@ export const deriveStores = context => {
     scrollLeft,
     width,
     height,
+    rowChangeCache,
+    conditionMetadata,
   } = context
 
   // Derive visible rows
@@ -30,12 +32,27 @@ export const deriveStores = context => {
     0
   )
   const renderedRows = derived(
-    [rows, scrolledRowCount, visualRowCapacity],
-    ([$rows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $rows.slice(
-        $scrolledRowCount,
-        $scrolledRowCount + $visualRowCapacity
-      )
+    [
+      rows,
+      scrolledRowCount,
+      visualRowCapacity,
+      rowChangeCache,
+      conditionMetadata,
+    ],
+    ([
+      $rows,
+      $scrolledRowCount,
+      $visualRowCapacity,
+      $rowChangeCache,
+      $conditionMetadata,
+    ]) => {
+      return $rows
+        .slice($scrolledRowCount, $scrolledRowCount + $visualRowCapacity)
+        .map(row => ({
+          ...row,
+          ...$rowChangeCache[row._id],
+          __metadata: $conditionMetadata[row._id],
+        }))
     },
     []
   )

From 094e4951a7616ad099741ef9844dfa8e8b33287b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 14:25:09 +0100
Subject: [PATCH 06/31] Remove some redundant initial derived store values

---
 .../frontend-core/src/components/grid/stores/viewport.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index 93eb7df0a2..e6a8205580 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -21,15 +21,13 @@ export const deriveStores = context => {
     [scrollTop, rowHeight],
     ([$scrollTop, $rowHeight]) => {
       return Math.floor($scrollTop / $rowHeight)
-    },
-    0
+    }
   )
   const visualRowCapacity = derived(
     [height, rowHeight],
     ([$height, $rowHeight]) => {
       return Math.ceil($height / $rowHeight) + 1
-    },
-    0
+    }
   )
   const renderedRows = derived(
     [
@@ -53,8 +51,7 @@ export const deriveStores = context => {
           ...$rowChangeCache[row._id],
           __metadata: $conditionMetadata[row._id],
         }))
-    },
-    []
+    }
   )
 
   // Derive visible columns

From 8e830463211d79fd17eb6e4a56137108d486baf5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 15:38:22 +0100
Subject: [PATCH 07/31] Fix bindings not working with grid conditions

---
 .../settings/controls/DraggableList/DraggableList.svelte      | 2 ++
 .../controls/GridColumnConfiguration/FieldSetting.svelte      | 4 +++-
 .../GridColumnConfiguration/GridColumnConfiguration.svelte    | 2 ++
 packages/client/manifest.json                                 | 1 -
 .../frontend-core/src/components/grid/stores/conditions.js    | 1 +
 5 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
index 0ba7de42c2..2bfa7d39fd 100644
--- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
+++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte
@@ -12,6 +12,7 @@
   export let listItemKey
   export let draggable = true
   export let focus
+  export let bindings = []
 
   let zoneType = generate()
 
@@ -126,6 +127,7 @@
           anchor={anchors[draggableItem.id]}
           item={draggableItem.item}
           {...listTypeProps}
+          {bindings}
           on:change={onItemChanged}
         />
       </div>
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index a16fe9273e..85eb4603e1 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -7,6 +7,7 @@
 
   export let item
   export let anchor
+  export let bindings
 
   const dispatch = createEventDispatcher()
 
@@ -39,8 +40,9 @@
 <div class="list-item-body">
   <div class="list-item-left">
     <EditComponentPopover
-      {anchor}
       componentInstance={item}
+      {bindings}
+      {anchor}
       {parseSettings}
       on:change
     >
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
index 19d61e1f2a..87a4174e60 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte
@@ -9,6 +9,7 @@
 
   export let value
   export let componentInstance
+  export let bindings
 
   const dispatch = createEventDispatcher()
   let primaryDisplayColumnAnchor
@@ -63,6 +64,7 @@
   items={columns.sortable}
   listItemKey={"_id"}
   listType={FieldSetting}
+  {bindings}
 />
 
 <style>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index c8a5f8e1a4..b4061c7043 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -7308,7 +7308,6 @@
           {
             "type": "columns/grid",
             "key": "columns",
-            "nested": true,
             "resetOn": "table"
           }
         ]
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index 127cd24bcb..100e6e665c 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -91,6 +91,7 @@ export const initialise = context => {
 
   // Recompute all metadata if conditions change
   conditions.subscribe($conditions => {
+    console.log($conditions)
     console.log("recomputing all conditions")
     let metadata = {}
     if ($conditions.length) {

From c62e6d776c7abffe4da43bd2fa11f7093c6ce22a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 15:51:57 +0100
Subject: [PATCH 08/31] Round grid scroll wrapper offsets to the nearest pixel

---
 .../src/components/grid/layout/GridScrollWrapper.svelte   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
index e1f3339169..fba14905f8 100644
--- a/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridScrollWrapper.svelte
@@ -27,9 +27,11 @@
   $: style = generateStyle($scroll, $rowHeight)
 
   const generateStyle = (scroll, rowHeight) => {
-    const offsetX = scrollHorizontally ? -1 * scroll.left : 0
-    const offsetY = scrollVertically ? -1 * (scroll.top % rowHeight) : 0
-    return `transform: translate3d(${offsetX}px, ${offsetY}px, 0);`
+    const offsetX = Math.round(scrollHorizontally ? -1 * scroll.left : 0)
+    const offsetY = Math.round(
+      scrollVertically ? -1 * (scroll.top % rowHeight) : 0
+    )
+    return `transform: translate(${offsetX}px, ${offsetY}px);`
   }
 
   // Handles a mouse wheel event and updates scroll state

From c41232bc12729a1c9b2d8feb5a261a4e666808bb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 27 Jun 2024 16:06:47 +0100
Subject: [PATCH 09/31] Add proper components for dates and boolean types in
 grid condition editor and fix highlight showing in sticky column gutter cell

---
 .../controls/CellConditionEditor.svelte       | 30 ++++++++++++++-----
 .../grid/layout/StickyColumn.svelte           |  3 ++
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index 5f19739f9d..997155fbdf 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -7,6 +7,7 @@
     Layout,
     Select,
     Icon,
+    DatePicker,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
@@ -167,13 +168,28 @@
                   placeholder={null}
                   on:change={() => onValueTypeChange(condition)}
                 />
-                <DrawerBindableInput
-                  {bindings}
-                  disabled={condition.noValue}
-                  placeholder="Value"
-                  value={condition.referenceValue}
-                  on:change={e => (condition.referenceValue = e.detail)}
-                />
+                {#if type === FieldType.DATETIME && condition.valueType === type}
+                  <DatePicker
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    bind:value={condition.referenceValue}
+                  />
+                {:else if type === FieldType.BOOLEAN && condition.valueType === type}
+                  <Select
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    options={["True", "False"]}
+                    bind:value={condition.referenceValue}
+                  />
+                {:else}
+                  <DrawerBindableInput
+                    {bindings}
+                    placeholder="Value"
+                    disabled={condition.noValue}
+                    value={condition.referenceValue}
+                    on:change={e => (condition.referenceValue = e.detail)}
+                  />
+                {/if}
                 <Icon
                   name="Duplicate"
                   hoverable
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 2a7d93ded6..b4cf542a74 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -175,6 +175,9 @@
   .header :global(.cell) {
     background: var(--grid-background-alt);
   }
+  .header :global(.cell::before) {
+    display: none;
+  }
   .row {
     display: flex;
     flex-direction: row;

From b9ad0876912af79083f8407934fec743b74a1ca6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Jun 2024 08:31:31 +0100
Subject: [PATCH 10/31] Remove logs

---
 .../frontend-core/src/components/grid/stores/conditions.js     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index 100e6e665c..9fcec770dc 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -91,8 +91,6 @@ export const initialise = context => {
 
   // Recompute all metadata if conditions change
   conditions.subscribe($conditions => {
-    console.log($conditions)
-    console.log("recomputing all conditions")
     let metadata = {}
     if ($conditions.length) {
       for (let row of get(rows)) {
@@ -112,7 +110,6 @@ export const initialise = context => {
     let updates = {}
     for (let row of $rows) {
       if (!row._rev || metadata[row._id]?.version !== row._rev) {
-        console.log("recompute row", row._id)
         updates[row._id] = evaluateConditions(row, $conditions)
       }
     }

From 06e7517529fa1dca5d50f469bb69b69cc9d49c3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 28 Jun 2024 11:25:00 +0100
Subject: [PATCH 11/31] Add row conditions

---
 .../common/bindings/ClientBindingPanel.svelte |   2 +
 .../bindings/DrawerBindableInput.svelte       |   2 +
 .../design/settings/componentSettings.js      |   2 +
 .../controls/CellConditionEditor.svelte       |   8 +-
 .../controls/RowConditionEditor.svelte        | 200 ++++++++++++++++
 .../Component/ConditionalUISection.svelte     |  16 ++
 packages/client/manifest.json                 |  12 +
 .../src/components/app/GridBlock.svelte       |   8 +
 .../src/components/grid/cells/DataCell.svelte |   5 +-
 .../components/grid/cells/GutterCell.svelte   |   1 +
 .../grid/layout/ButtonColumn.svelte           |   1 +
 .../src/components/grid/layout/Grid.svelte    |   3 +
 .../src/components/grid/stores/conditions.js  | 216 +++++++++++-------
 .../src/components/grid/stores/config.js      |   2 +
 .../src/components/grid/stores/viewport.js    |  12 +-
 15 files changed, 404 insertions(+), 86 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte

diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
index 4e5789b563..4aa7ced9dc 100644
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@@ -5,6 +5,7 @@
 
   export let bindings = []
   export let value = ""
+  export let allowHBS = true
   export let allowJS = false
   export let allowHelpers = true
   export let autofocusEditor = false
@@ -31,6 +32,7 @@
   context={{ ...$previewStore.selectedComponentContext, ...context }}
   snippets={$snippets}
   {value}
+  {allowHBS}
   {allowJS}
   {allowHelpers}
   {autofocusEditor}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index 0cb10d1aa5..65a9b2f8c7 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -16,6 +16,7 @@
   export let placeholder
   export let label
   export let disabled = false
+  export let allowHBS = true
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
@@ -98,6 +99,7 @@
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}
+    {allowHBS}
     {allowJS}
     {allowHelpers}
     {context}
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 3540c8b990..b397cba7d1 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -31,6 +31,7 @@ import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
 import FormStepControls from "./controls/FormStepControls.svelte"
 import PaywalledSetting from "./controls/PaywalledSetting.svelte"
 import CellConditionEditor from "./controls/CellConditionEditor.svelte"
+import RowConditionEditor from "./controls/RowConditionEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -63,6 +64,7 @@ const componentMap = {
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,
   cellConditions: CellConditionEditor,
+  rowConditions: RowConditionEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index 997155fbdf..b901437cba 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -113,11 +113,17 @@
 <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<Drawer bind:this={drawer} title="Conditions" on:drawerShow on:drawerHide>
+<Drawer
+  bind:this={drawer}
+  title="{componentInstance.field} conditions"
+  on:drawerShow
+  on:drawerHide
+>
   <Button cta slot="buttons" on:click={save}>Save</Button>
   <DrawerContent slot="body">
     <div class="container">
       <Layout noPadding>
+        Update the appearance of cells based on their value.
         {#if tempValue.length}
           <div
             class="conditions"
diff --git a/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte
new file mode 100644
index 0000000000..93278a1f45
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte
@@ -0,0 +1,200 @@
+<script>
+  import {
+    ActionButton,
+    Drawer,
+    Button,
+    DrawerContent,
+    Layout,
+    Select,
+    Icon,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash"
+  import ColorPicker from "./ColorPicker.svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { Constants } from "@budibase/frontend-core"
+  import { generate } from "shortid"
+  import { dndzone } from "svelte-dnd-action"
+  import { flip } from "svelte/animate"
+  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
+  import { selectedScreen, selectedComponent } from "stores/builder"
+  import { makePropSafe } from "@budibase/string-templates"
+
+  export let value
+
+  const dispatch = createEventDispatcher()
+  const flipDuration = 130
+  const conditionOptions = [
+    {
+      label: "Update background color",
+      value: "backgroundColor",
+    },
+    {
+      label: "Update text color",
+      value: "textColor",
+    },
+  ]
+
+  let tempValue = []
+  let drawer
+  let dragDisabled = true
+
+  $: count = value?.length
+  $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
+  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
+  $: schema = getSchemaForDatasource($selectedScreen, datasource)?.schema
+  $: rowBindings = generateRowBindings(schema)
+
+  const generateRowBindings = schema => {
+    let bindings = []
+    for (let key of Object.keys(schema || {})) {
+      bindings.push({
+        type: "context",
+        runtimeBinding: `${makePropSafe("row")}.${makePropSafe(key)}`,
+        readableBinding: `Row.${key}`,
+        category: "Row",
+        icon: "RailTop",
+        display: { name: key },
+      })
+    }
+
+    return bindings
+  }
+
+  const openDrawer = () => {
+    tempValue = cloneDeep(value || [])
+    drawer.show()
+  }
+
+  const save = async () => {
+    dispatch("change", tempValue)
+    drawer.hide()
+  }
+
+  const addCondition = () => {
+    const condition = {
+      id: generate(),
+      metadataKey: conditionOptions[0].value,
+      operator: Constants.OperatorOptions.Equals.value,
+      referenceValue: true,
+    }
+    tempValue = [...tempValue, condition]
+  }
+
+  const duplicateCondition = condition => {
+    const dupe = { ...condition, id: generate() }
+    tempValue = [...tempValue, dupe]
+  }
+
+  const removeCondition = condition => {
+    tempValue = tempValue.filter(c => c.id !== condition.id)
+  }
+
+  const updateConditions = e => {
+    tempValue = e.detail.items
+  }
+
+  const handleFinalize = e => {
+    updateConditions(e)
+    dragDisabled = true
+  }
+</script>
+
+<ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<Drawer bind:this={drawer} title="Row conditions" on:drawerShow on:drawerHide>
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="container">
+      <Layout noPadding>
+        Update the appearance of rows based on the entire row value.
+        {#if tempValue.length}
+          <div
+            class="conditions"
+            use:dndzone={{
+              items: tempValue,
+              flipDurationMs: flipDuration,
+              dropTargetStyle: { outline: "none" },
+              dragDisabled,
+            }}
+            on:consider={updateConditions}
+            on:finalize={handleFinalize}
+          >
+            {#each tempValue as condition (condition.id)}
+              <div
+                class="condition"
+                class:update={condition.action === "update"}
+                animate:flip={{ duration: flipDuration }}
+              >
+                <div
+                  class="handle"
+                  aria-label="drag-handle"
+                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+                  on:mousedown={() => (dragDisabled = false)}
+                >
+                  <Icon name="DragHandle" size="XL" />
+                </div>
+                <Select
+                  placeholder={null}
+                  options={conditionOptions}
+                  bind:value={condition.metadataKey}
+                />
+                <span>to</span>
+                <ColorPicker
+                  value={condition.metadataValue}
+                  on:change={e => (condition.metadataValue = e.detail)}
+                />
+                <span>if</span>
+                <DrawerBindableInput
+                  bindings={rowBindings}
+                  allowHBS={false}
+                  placeholder="Expression"
+                  value={condition.value}
+                  on:change={e => (condition.value = e.detail)}
+                />
+                <span>returns true</span>
+                <Icon
+                  name="Duplicate"
+                  hoverable
+                  size="S"
+                  on:click={() => duplicateCondition(condition)}
+                />
+                <Icon
+                  name="Close"
+                  hoverable
+                  size="S"
+                  on:click={() => removeCondition(condition)}
+                />
+              </div>
+            {/each}
+          </div>
+        {/if}
+        <div>
+          <Button secondary icon="Add" on:click={addCondition}>
+            Add condition
+          </Button>
+        </div>
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>
+
+<style>
+  .container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .conditions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .condition {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto auto 1fr auto auto auto;
+    align-items: center;
+    grid-column-gap: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
index bc71f8b696..fc862a19c8 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
@@ -8,8 +8,11 @@
   } from "@budibase/bbui"
   import { componentStore } from "stores/builder"
   import ConditionalUIDrawer from "./ConditionalUIDrawer.svelte"
+  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
 
   export let componentInstance
+  export let componentDefinition
+  export let componentBindings
   export let bindings
 
   let tempValue
@@ -35,6 +38,19 @@
   } set`
 </script>
 
+<!--
+  Load any general settings or sections tagged as "condition"
+-->
+<ComponentSettingsSection
+  {componentInstance}
+  {componentDefinition}
+  isScreen={false}
+  showInstanceName={false}
+  {bindings}
+  {componentBindings}
+  tag="condition"
+/>
+
 <DetailSummary name={"Conditions"} collapsible={false}>
   <ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
 </DetailSummary>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b4061c7043..00bcd7d12d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -7329,6 +7329,18 @@
             ]
           }
         ]
+      },
+      {
+        "section": true,
+        "tag": "condition",
+        "name": "Row conditions",
+        "settings": [
+          {
+            "type": "rowConditions",
+            "key": "rowConditions",
+            "nested": true
+          }
+        ]
       }
     ],
     "context": [
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index cc914324c7..b8c2e375e6 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -19,6 +19,7 @@
   export let columns = null
   export let onRowClick = null
   export let buttons = null
+  export let rowConditions = null
 
   const context = getContext("context")
   const component = getContext("component")
@@ -62,7 +63,13 @@
     const goldenRow = generateGoldenSample(rows)
     const id = get(component).id
     return {
+      // Not sure what this one is for...
       [id]: goldenRow,
+
+      // For row conditions context
+      row: goldenRow,
+
+      // For button action context
       eventContext: {
         row: goldenRow,
       },
@@ -166,6 +173,7 @@
     {fixedRowHeight}
     {columnWhitelist}
     {schemaOverrides}
+    {rowConditions}
     canAddRows={allowAddRows}
     canEditRows={allowEditRows}
     canDeleteRows={allowDeleteRows}
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index 67a0cb6adc..c013d58872 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -130,7 +130,10 @@
   on:mouseup={stopSelectionCallback}
   on:click={handleClick}
   width={column.width}
-  metadata={row.__metadata?.[column.name]}
+  metadata={{
+    ...row.__metadata,
+    ...row.__cellMetadata?.[column.name],
+  }}
 >
   <svelte:component
     this={getCellRenderer(column)}
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 0cb9502322..3a16af558b 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -54,6 +54,7 @@
   selected={rowSelected}
   {defaultHeight}
   rowIdx={row?.__idx}
+  metadata={row?.__metadata}
 >
   <div class="gutter">
     {#if $$slots.default}
diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index 159f0dbd45..d059c160ae 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -70,6 +70,7 @@
             rowIdx={row.__idx}
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
+            metadata={row.__metadata}
           >
             <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 8d73ee3028..f80f05b87c 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -59,6 +59,7 @@
   export let darkMode
   export let isCloud = null
   export let allowViewReadonlyColumns = false
+  export let rowConditions = null
 
   // Unique identifier for DOM nodes inside this instance
   const gridID = `grid-${Math.random().toString().slice(2)}`
@@ -114,6 +115,8 @@
     buttons,
     darkMode,
     isCloud,
+    allowViewReadonlyColumns,
+    rowConditions,
   })
 
   // Derive min height and make available in context
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index 9fcec770dc..04eb10b89b 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -1,19 +1,24 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
+import { OperatorOptions } from "@budibase/shared-core"
+import { FieldType } from "@budibase/types"
+import { processString, processStringSync } from "@budibase/string-templates"
 
 export const createStores = () => {
-  const conditionMetadata = writable({})
+  const cellMetadata = writable({})
+  const rowMetadata = writable({})
   return {
-    conditionMetadata,
+    cellMetadata,
+    rowMetadata,
   }
 }
 
 export const deriveStores = context => {
   const { columns } = context
 
-  // Derive and memoize the conditions present in our columns so that we only
-  // recompute condition metdata when absolutely necessary
-  const conditions = derivedMemo(columns, $columns => {
+  // Derive and memoize the cell conditions present in our columns so that we
+  // only recompute condition metadata when absolutely necessary
+  const cellConditions = derivedMemo(columns, $columns => {
     let newConditions = []
     for (let column of $columns) {
       for (let condition of column.conditions || []) {
@@ -28,96 +33,147 @@ export const deriveStores = context => {
   })
 
   return {
-    conditions,
+    cellConditions,
   }
 }
 
 export const initialise = context => {
-  const { conditionMetadata, conditions, rows } = context
+  const { cellMetadata, cellConditions, rowConditions, rowMetadata, rows } =
+    context
 
-  // Evaluates an array of conditions against a certain row and returns the
-  // resultant metadata
-  const evaluateConditions = (row, conditions) => {
-    let metadata = { version: row._rev }
-    for (let condition of conditions) {
-      try {
-        let {
-          column,
-          type,
-          referenceValue,
-          operator,
-          metadataKey,
-          metadataValue,
-        } = condition
-        let value = row[column]
-
-        // Coerce values into correct types for primitives
-        if (type === "number") {
-          referenceValue = parseFloat(referenceValue)
-          value = parseFloat(value)
-        } else if (type === "datetime") {
-          if (referenceValue) {
-            referenceValue = new Date(referenceValue).toISOString()
-          }
-          if (value) {
-            value = new Date(value).toISOString()
-          }
-        } else if (type === "boolean") {
-          referenceValue = `${referenceValue}`.toLowerCase() === "true"
-          value = `${value}`.toLowerCase() === "true"
-        }
-
-        // Build lucene compatible condition expression
-        const luceneFilter = {
-          operator,
-          type,
-          field: "value",
-          value: referenceValue,
-        }
-        const query = QueryUtils.buildQuery([luceneFilter])
-        const result = QueryUtils.runQuery([{ value }], query)
-        if (result.length > 0) {
-          if (!metadata[column]) {
-            metadata[column] = {}
-          }
-          metadata[column][metadataKey] = metadataValue
-        }
-      } catch {
-        // Swallow
-      }
-    }
-    return metadata
-  }
-
-  // Recompute all metadata if conditions change
-  conditions.subscribe($conditions => {
+  // Recompute all cell metadata if cell conditions change
+  cellConditions.subscribe($conditions => {
     let metadata = {}
-    if ($conditions.length) {
+    if ($conditions?.length) {
       for (let row of get(rows)) {
-        metadata[row._id] = evaluateConditions(row, $conditions)
+        metadata[row._id] = evaluateCellConditions(row, $conditions)
       }
     }
-    conditionMetadata.set(metadata)
+    cellMetadata.set(metadata)
   })
 
-  // Recompute specific rows when they change
-  rows.subscribe($rows => {
-    const $conditions = get(conditions)
-    if (!$conditions.length) {
-      return
-    }
-    const metadata = get(conditionMetadata)
-    let updates = {}
-    for (let row of $rows) {
-      if (!row._rev || metadata[row._id]?.version !== row._rev) {
-        updates[row._id] = evaluateConditions(row, $conditions)
+  // Recompute all row metadata if row conditions change
+  rowConditions.subscribe($conditions => {
+    let metadata = {}
+    if ($conditions?.length) {
+      for (let row of get(rows)) {
+        metadata[row._id] = evaluateRowConditions(row, $conditions)
       }
     }
-    if (Object.keys(updates).length) {
-      conditionMetadata.update(state => ({
+    rowMetadata.set(metadata)
+  })
+
+  // Recompute metadata for specific rows when they change
+  rows.subscribe($rows => {
+    const $cellConditions = get(cellConditions)
+    const $rowConditions = get(rowConditions)
+    const processCells = $cellConditions?.length > 0
+    const processRows = $rowConditions?.length > 0
+    if (!processCells && !processRows) {
+      return
+    }
+    const $cellMetadata = get(cellMetadata)
+    const $rowMetadata = get(rowMetadata)
+    let cellUpdates = {}
+    let rowUpdates = {}
+    for (let row of $rows) {
+      // Process cell metadata
+      if (processCells) {
+        if (!row._rev || $cellMetadata[row._id]?.version !== row._rev) {
+          cellUpdates[row._id] = evaluateCellConditions(row, $cellConditions)
+        }
+      }
+      // Process row metadata
+      if (processRows) {
+        if (!row._rev || $rowMetadata[row._id]?.version !== row._rev) {
+          rowUpdates[row._id] = evaluateRowConditions(row, $rowConditions)
+        }
+      }
+    }
+    if (Object.keys(cellUpdates).length) {
+      cellMetadata.update(state => ({
         ...state,
-        ...updates,
+        ...cellUpdates,
+      }))
+    }
+    if (Object.keys(rowUpdates).length) {
+      rowMetadata.update(state => ({
+        ...state,
+        ...rowUpdates,
       }))
     }
   })
 }
+
+// Evaluates an array of cell conditions against a certain row and returns the
+// resultant metadata
+const evaluateCellConditions = (row, conditions) => {
+  let metadata = { version: row._rev }
+  for (let condition of conditions) {
+    try {
+      let {
+        column,
+        type,
+        referenceValue,
+        operator,
+        metadataKey,
+        metadataValue,
+      } = condition
+      let value = row[column]
+
+      // Coerce values into correct types for primitives
+      if (type === "number") {
+        referenceValue = parseFloat(referenceValue)
+        value = parseFloat(value)
+      } else if (type === "datetime") {
+        if (referenceValue) {
+          referenceValue = new Date(referenceValue).toISOString()
+        }
+        if (value) {
+          value = new Date(value).toISOString()
+        }
+      } else if (type === "boolean") {
+        referenceValue = `${referenceValue}`.toLowerCase() === "true"
+        value = `${value}`.toLowerCase() === "true"
+      }
+
+      // Build lucene compatible condition expression
+      const luceneFilter = {
+        operator,
+        type,
+        field: "value",
+        value: referenceValue,
+      }
+      const query = QueryUtils.buildQuery([luceneFilter])
+      const result = QueryUtils.runQuery([{ value }], query)
+      if (result.length > 0) {
+        if (!metadata[column]) {
+          metadata[column] = {}
+        }
+        metadata[column][metadataKey] = metadataValue
+      }
+    } catch {
+      // Swallow
+    }
+  }
+  return metadata
+}
+
+// Evaluates an array of row conditions against a certain row and returns the
+// resultant metadata
+const evaluateRowConditions = (row, conditions) => {
+  let metadata = { version: row._rev }
+  for (let condition of conditions) {
+    try {
+      const { metadataKey, metadataValue, value } = condition
+      console.log("JS")
+      const result = processStringSync(value, { row })
+      if (result === true) {
+        metadata[metadataKey] = metadataValue
+      }
+    } catch {
+      // Swallow
+    }
+  }
+  return metadata
+}
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js
index 6da6ebf11e..d2d07c630e 100644
--- a/packages/frontend-core/src/components/grid/stores/config.js
+++ b/packages/frontend-core/src/components/grid/stores/config.js
@@ -15,6 +15,7 @@ export const createStores = context => {
   const columnWhitelist = getProp("columnWhitelist")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
+  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -26,6 +27,7 @@ export const createStores = context => {
     columnWhitelist,
     notifySuccess,
     notifyError,
+    rowConditions,
   }
 }
 
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index e2eb5a4821..fc5960f14c 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -11,7 +11,8 @@ export const deriveStores = context => {
     width,
     height,
     rowChangeCache,
-    conditionMetadata,
+    cellMetadata,
+    rowMetadata,
   } = context
 
   // Derive visible rows
@@ -35,21 +36,24 @@ export const deriveStores = context => {
       scrolledRowCount,
       visualRowCapacity,
       rowChangeCache,
-      conditionMetadata,
+      cellMetadata,
+      rowMetadata,
     ],
     ([
       $rows,
       $scrolledRowCount,
       $visualRowCapacity,
       $rowChangeCache,
-      $conditionMetadata,
+      $cellMetadata,
+      $rowMetadata,
     ]) => {
       return $rows
         .slice($scrolledRowCount, $scrolledRowCount + $visualRowCapacity)
         .map(row => ({
           ...row,
           ...$rowChangeCache[row._id],
-          __metadata: $conditionMetadata[row._id],
+          __metadata: $rowMetadata[row._id],
+          __cellMetadata: $cellMetadata[row._id],
         }))
     }
   )

From ee984b6a191c52722d4138df7b3c742fff6d4d77 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 16 Jul 2024 14:01:50 +0100
Subject: [PATCH 12/31] Update table conditions to apply both row and cell
 conditions via same configuration

---
 packages/bbui/src/Form/Core/Select.svelte     |   4 +-
 .../controls/CellConditionEditor.svelte       |  25 +++-
 packages/client/manifest.json                 |  12 --
 .../src/components/app/GridBlock.svelte       |   2 -
 .../src/components/grid/cells/DataCell.svelte |   4 +-
 .../components/grid/cells/GutterCell.svelte   |   2 +-
 .../src/components/grid/stores/conditions.js  | 119 ++++++------------
 .../src/components/grid/stores/viewport.js    |  18 +--
 8 files changed, 71 insertions(+), 115 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 0111bd6bcf..3806281438 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -62,7 +62,9 @@
       return placeholder || "Choose an option"
     }
 
-    return getFieldAttribute(getOptionLabel, value, options)
+    return (
+      getFieldAttribute(getOptionLabel, value, options) || "Choose an option"
+    )
   }
 
   const selectOption = value => {
diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index b901437cba..69b65fb449 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -25,13 +25,23 @@
 
   const dispatch = createEventDispatcher()
   const flipDuration = 130
+  const targetOptions = [
+    {
+      label: "Cell",
+      value: "cell",
+    },
+    {
+      label: "Row",
+      value: "row",
+    },
+  ]
   const conditionOptions = [
     {
-      label: "Update background color",
+      label: "Background color",
       value: "backgroundColor",
     },
     {
-      label: "Update text color",
+      label: "Text color",
       value: "textColor",
     },
   ]
@@ -68,6 +78,7 @@
   const addCondition = () => {
     const condition = {
       id: generate(),
+      target: targetOptions[0].value,
       metadataKey: conditionOptions[0].value,
       operator: Constants.OperatorOptions.Equals.value,
       valueType: FieldType.STRING,
@@ -123,7 +134,7 @@
   <DrawerContent slot="body">
     <div class="container">
       <Layout noPadding>
-        Update the appearance of cells based on their value.
+        Update the appearance of cells and rows based on their value.
         {#if tempValue.length}
           <div
             class="conditions"
@@ -150,6 +161,12 @@
                 >
                   <Icon name="DragHandle" size="XL" />
                 </div>
+                <span>Update</span>
+                <Select
+                  placeholder={null}
+                  options={targetOptions}
+                  bind:value={condition.target}
+                />
                 <Select
                   placeholder={null}
                   options={conditionOptions}
@@ -235,7 +252,7 @@
   }
   .condition {
     display: grid;
-    grid-template-columns: auto 1fr auto auto auto 1fr 1fr 1fr auto auto;
+    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr 1fr auto auto;
     align-items: center;
     grid-column-gap: var(--spacing-l);
   }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 00bcd7d12d..b4061c7043 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -7329,18 +7329,6 @@
             ]
           }
         ]
-      },
-      {
-        "section": true,
-        "tag": "condition",
-        "name": "Row conditions",
-        "settings": [
-          {
-            "type": "rowConditions",
-            "key": "rowConditions",
-            "nested": true
-          }
-        ]
       }
     ],
     "context": [
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index b8c2e375e6..17b3ad5bba 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -19,7 +19,6 @@
   export let columns = null
   export let onRowClick = null
   export let buttons = null
-  export let rowConditions = null
 
   const context = getContext("context")
   const component = getContext("component")
@@ -173,7 +172,6 @@
     {fixedRowHeight}
     {columnWhitelist}
     {schemaOverrides}
-    {rowConditions}
     canAddRows={allowAddRows}
     canEditRows={allowEditRows}
     canDeleteRows={allowDeleteRows}
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index c013d58872..5d5f06872d 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -131,8 +131,8 @@
   on:click={handleClick}
   width={column.width}
   metadata={{
-    ...row.__metadata,
-    ...row.__cellMetadata?.[column.name],
+    ...row.__metadata?.row,
+    ...row.__metadata?.cell[column.name],
   }}
 >
   <svelte:component
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 3a16af558b..48993e3f0d 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -54,7 +54,7 @@
   selected={rowSelected}
   {defaultHeight}
   rowIdx={row?.__idx}
-  metadata={row?.__metadata}
+  metadata={row?.__metadata?.row}
 >
   <div class="gutter">
     {#if $$slots.default}
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index 04eb10b89b..ad4fc9fa84 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -1,15 +1,13 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
-import { OperatorOptions } from "@budibase/shared-core"
-import { FieldType } from "@budibase/types"
-import { processString, processStringSync } from "@budibase/string-templates"
 
 export const createStores = () => {
-  const cellMetadata = writable({})
-  const rowMetadata = writable({})
+  const metadata = writable({})
+
+  metadata.subscribe(console.log)
+
   return {
-    cellMetadata,
-    rowMetadata,
+    metadata,
   }
 }
 
@@ -18,7 +16,7 @@ export const deriveStores = context => {
 
   // Derive and memoize the cell conditions present in our columns so that we
   // only recompute condition metadata when absolutely necessary
-  const cellConditions = derivedMemo(columns, $columns => {
+  const conditions = derivedMemo(columns, $columns => {
     let newConditions = []
     for (let column of $columns) {
       for (let condition of column.conditions || []) {
@@ -33,73 +31,43 @@ export const deriveStores = context => {
   })
 
   return {
-    cellConditions,
+    conditions,
   }
 }
 
 export const initialise = context => {
-  const { cellMetadata, cellConditions, rowConditions, rowMetadata, rows } =
-    context
+  const { metadata, conditions, rows } = context
 
   // Recompute all cell metadata if cell conditions change
-  cellConditions.subscribe($conditions => {
-    let metadata = {}
+  conditions.subscribe($conditions => {
+    // Build new metadata
+    let newMetadata = {}
     if ($conditions?.length) {
       for (let row of get(rows)) {
-        metadata[row._id] = evaluateCellConditions(row, $conditions)
+        newMetadata[row._id] = evaluateConditions(row, $conditions)
       }
     }
-    cellMetadata.set(metadata)
-  })
-
-  // Recompute all row metadata if row conditions change
-  rowConditions.subscribe($conditions => {
-    let metadata = {}
-    if ($conditions?.length) {
-      for (let row of get(rows)) {
-        metadata[row._id] = evaluateRowConditions(row, $conditions)
-      }
-    }
-    rowMetadata.set(metadata)
+    metadata.set(newMetadata)
   })
 
   // Recompute metadata for specific rows when they change
   rows.subscribe($rows => {
-    const $cellConditions = get(cellConditions)
-    const $rowConditions = get(rowConditions)
-    const processCells = $cellConditions?.length > 0
-    const processRows = $rowConditions?.length > 0
-    if (!processCells && !processRows) {
+    const $conditions = get(conditions)
+    if (!$conditions?.length) {
       return
     }
-    const $cellMetadata = get(cellMetadata)
-    const $rowMetadata = get(rowMetadata)
-    let cellUpdates = {}
-    let rowUpdates = {}
+    const $metadata = get(metadata)
+    let metadataUpdates = {}
     for (let row of $rows) {
-      // Process cell metadata
-      if (processCells) {
-        if (!row._rev || $cellMetadata[row._id]?.version !== row._rev) {
-          cellUpdates[row._id] = evaluateCellConditions(row, $cellConditions)
-        }
-      }
-      // Process row metadata
-      if (processRows) {
-        if (!row._rev || $rowMetadata[row._id]?.version !== row._rev) {
-          rowUpdates[row._id] = evaluateRowConditions(row, $rowConditions)
-        }
+      if (!row._rev || $metadata[row._id]?.version !== row._rev) {
+        console.log("reevalute", row._id)
+        metadataUpdates[row._id] = evaluateConditions(row, $conditions)
       }
     }
-    if (Object.keys(cellUpdates).length) {
-      cellMetadata.update(state => ({
+    if (Object.keys(metadataUpdates).length) {
+      metadata.update(state => ({
         ...state,
-        ...cellUpdates,
-      }))
-    }
-    if (Object.keys(rowUpdates).length) {
-      rowMetadata.update(state => ({
-        ...state,
-        ...rowUpdates,
+        ...metadataUpdates,
       }))
     }
   })
@@ -107,8 +75,12 @@ export const initialise = context => {
 
 // Evaluates an array of cell conditions against a certain row and returns the
 // resultant metadata
-const evaluateCellConditions = (row, conditions) => {
-  let metadata = { version: row._rev }
+const evaluateConditions = (row, conditions) => {
+  let metadata = {
+    version: row._rev,
+    row: {},
+    cell: {},
+  }
   for (let condition of conditions) {
     try {
       let {
@@ -118,6 +90,7 @@ const evaluateCellConditions = (row, conditions) => {
         operator,
         metadataKey,
         metadataValue,
+        target,
       } = condition
       let value = row[column]
 
@@ -147,29 +120,17 @@ const evaluateCellConditions = (row, conditions) => {
       const query = QueryUtils.buildQuery([luceneFilter])
       const result = QueryUtils.runQuery([{ value }], query)
       if (result.length > 0) {
-        if (!metadata[column]) {
-          metadata[column] = {}
+        if (target === "row") {
+          metadata.row = {
+            ...metadata.row,
+            [metadataKey]: metadataValue,
+          }
+        } else {
+          metadata.cell[column] = {
+            ...metadata.cell[column],
+            [metadataKey]: metadataValue,
+          }
         }
-        metadata[column][metadataKey] = metadataValue
-      }
-    } catch {
-      // Swallow
-    }
-  }
-  return metadata
-}
-
-// Evaluates an array of row conditions against a certain row and returns the
-// resultant metadata
-const evaluateRowConditions = (row, conditions) => {
-  let metadata = { version: row._rev }
-  for (let condition of conditions) {
-    try {
-      const { metadataKey, metadataValue, value } = condition
-      console.log("JS")
-      const result = processStringSync(value, { row })
-      if (result === true) {
-        metadata[metadataKey] = metadataValue
       }
     } catch {
       // Swallow
diff --git a/packages/frontend-core/src/components/grid/stores/viewport.js b/packages/frontend-core/src/components/grid/stores/viewport.js
index fc5960f14c..0797f38b55 100644
--- a/packages/frontend-core/src/components/grid/stores/viewport.js
+++ b/packages/frontend-core/src/components/grid/stores/viewport.js
@@ -11,8 +11,7 @@ export const deriveStores = context => {
     width,
     height,
     rowChangeCache,
-    cellMetadata,
-    rowMetadata,
+    metadata,
   } = context
 
   // Derive visible rows
@@ -31,29 +30,20 @@ export const deriveStores = context => {
     }
   )
   const renderedRows = derived(
-    [
-      rows,
-      scrolledRowCount,
-      visualRowCapacity,
-      rowChangeCache,
-      cellMetadata,
-      rowMetadata,
-    ],
+    [rows, scrolledRowCount, visualRowCapacity, rowChangeCache, metadata],
     ([
       $rows,
       $scrolledRowCount,
       $visualRowCapacity,
       $rowChangeCache,
-      $cellMetadata,
-      $rowMetadata,
+      $metadata,
     ]) => {
       return $rows
         .slice($scrolledRowCount, $scrolledRowCount + $visualRowCapacity)
         .map(row => ({
           ...row,
           ...$rowChangeCache[row._id],
-          __metadata: $rowMetadata[row._id],
-          __cellMetadata: $cellMetadata[row._id],
+          __metadata: $metadata[row._id],
         }))
     }
   )

From d6a10e2dabb35ea8c044bca387e98d6da0c028a4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 16 Jul 2024 14:03:12 +0100
Subject: [PATCH 13/31] Add row metadata to button column

---
 .../src/components/grid/layout/ButtonColumn.svelte              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
index d059c160ae..f448460a96 100644
--- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
@@ -70,7 +70,7 @@
             rowIdx={row.__idx}
             selected={rowSelected}
             highlighted={rowHovered || rowFocused}
-            metadata={row.__metadata}
+            metadata={row.__metadata?.row}
           >
             <div class="buttons" class:offset={$showVScrollbar}>
               {#each buttons as button}

From 2338783f225d461570d31ee5612bf82e791fa5f8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 16 Jul 2024 14:10:19 +0100
Subject: [PATCH 14/31] Fix error when another user updates a row not inside
 our grid

---
 packages/frontend-core/src/components/grid/stores/rows.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index fdd91d2270..bfd91fb237 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -371,7 +371,7 @@ export const createActions = context => {
     // Get index of row to check if it exists
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
-    const index = $rowLookupMap[id].__idx
+    const index = $rowLookupMap[id]?.__idx
 
     // Process as either an update, addition or deletion
     if (row) {

From 479e3247df49a4bb826d227558069c9f2f963319 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 16 Jul 2024 14:11:29 +0100
Subject: [PATCH 15/31] Remove logs

---
 .../frontend-core/src/components/grid/stores/conditions.js    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index ad4fc9fa84..c1493bea4e 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -3,9 +3,6 @@ import { derivedMemo, QueryUtils } from "../../../utils"
 
 export const createStores = () => {
   const metadata = writable({})
-
-  metadata.subscribe(console.log)
-
   return {
     metadata,
   }
@@ -60,7 +57,6 @@ export const initialise = context => {
     let metadataUpdates = {}
     for (let row of $rows) {
       if (!row._rev || $metadata[row._id]?.version !== row._rev) {
-        console.log("reevalute", row._id)
         metadataUpdates[row._id] = evaluateConditions(row, $conditions)
       }
     }

From 4575dd300fed3855a9cf9076af1b0850fbd03383 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 16 Jul 2024 16:47:11 +0100
Subject: [PATCH 16/31] Update table border colour to work better with coloured
 cells

---
 packages/bbui/src/bbui.css                                    | 3 +++
 packages/client/src/components/app/GridBlock.svelte           | 2 +-
 .../frontend-core/src/components/grid/cells/GridCell.svelte   | 2 +-
 packages/frontend-core/src/components/grid/layout/Grid.svelte | 4 ++--
 packages/frontend-core/src/themes/midnight.css                | 1 +
 packages/frontend-core/src/themes/nord.css                    | 1 +
 6 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css
index 8851527ae9..dd0588818e 100644
--- a/packages/bbui/src/bbui.css
+++ b/packages/bbui/src/bbui.css
@@ -119,6 +119,7 @@ a {
   --spectrum-global-color-blue-100: #002651;
   --spectrum-global-color-indigo-100: #1a1d61;
   --spectrum-global-color-magenta-100: #530329;
+  --translucent-grey: rgba(255, 255, 255, 0.1);
 }
 .spectrum--dark {
   --drop-shadow: rgba(0, 0, 0, 0.3);
@@ -130,6 +131,7 @@ a {
   --spectrum-global-color-blue-100: #003877;
   --spectrum-global-color-indigo-100: #282c8c;
   --spectrum-global-color-magenta-100: #76003a;
+  --translucent-grey: rgba(255, 255, 255, 0.065);
 }
 .spectrum--light,
 .spectrum--lightest {
@@ -142,4 +144,5 @@ a {
   --spectrum-global-color-blue-100: #e0f2ff;
   --spectrum-global-color-indigo-100: #edeeff;
   --spectrum-global-color-magenta-100: #ffeaf1;
+  --translucent-grey: rgba(0, 0, 0, 0.085);
 }
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 17b3ad5bba..bd210e5998 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -194,7 +194,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    border: 1px solid var(--spectrum-global-color-gray-300);
+    border: 1px solid var(--translucent-grey);
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 5f2d471382..7b5deccb35 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -50,7 +50,7 @@
   on:mouseup
   on:click
   on:contextmenu
-  on:touchstart
+  on:touchstart|passive
   on:touchend
   on:touchcancel
   on:mouseenter
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index f80f05b87c..ba72900ef1 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -232,7 +232,7 @@
     --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
-    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-border: 1px solid var(--grid-border-color, var(--translucent-grey));
     --cell-font-size: 14px;
     --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;
@@ -290,7 +290,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    border-bottom: var(--cell-border);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
     background: var(--grid-background-alt);
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index 7b68966f31..b2b9bd2ac6 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -17,4 +17,5 @@
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.25) !important;
   --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
+  --translucent-grey: rgba(255, 255, 255, 0.075) !important;
 }
diff --git a/packages/frontend-core/src/themes/nord.css b/packages/frontend-core/src/themes/nord.css
index c8716744e9..5cf73e8238 100644
--- a/packages/frontend-core/src/themes/nord.css
+++ b/packages/frontend-core/src/themes/nord.css
@@ -50,4 +50,5 @@
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.15) !important;
   --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
+  --translucent-grey: hsla(213, 36%, 80%, 0.11) !important;
 }

From 1fd4b983e567be71231b3bd1d629a2c724dff7c3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Jul 2024 10:39:56 +0100
Subject: [PATCH 17/31] Update comments

---
 .../frontend-core/src/components/grid/stores/conditions.js     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index c1493bea4e..e5d8d89824 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -35,9 +35,8 @@ export const deriveStores = context => {
 export const initialise = context => {
   const { metadata, conditions, rows } = context
 
-  // Recompute all cell metadata if cell conditions change
+  // Recompute all metadata if conditions change
   conditions.subscribe($conditions => {
-    // Build new metadata
     let newMetadata = {}
     if ($conditions?.length) {
       for (let row of get(rows)) {

From 7faa6188c4b26940f0fea0c55dedaa2e083ef792 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Jul 2024 12:33:05 +0100
Subject: [PATCH 18/31] Improve support for formula columns when using table
 conditional colouring

---
 .../controls/CellConditionEditor.svelte         | 10 ++++++++--
 .../src/components/grid/stores/conditions.js    | 17 ++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
index 69b65fb449..0b9a8a74a2 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
@@ -15,7 +15,7 @@
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { QueryUtils, Constants } from "@budibase/frontend-core"
   import { generate } from "shortid"
-  import { FieldType } from "@budibase/types"
+  import { FieldType, FormulaType } from "@budibase/types"
   import { dndzone } from "svelte-dnd-action"
   import { flip } from "svelte/animate"
 
@@ -63,7 +63,13 @@
       value: type,
     },
   ]
-  $: operatorOptions = QueryUtils.getValidOperatorsForType({ type })
+  $: operatorOptions = QueryUtils.getValidOperatorsForType({
+    type,
+
+    // We can filter on any formula columns here since we already have the data
+    // on the page, so adding this ensures formula columns get operators
+    formulaType: FormulaType.STATIC,
+  })
 
   const openDrawer = () => {
     tempValue = cloneDeep(value || [])
diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index e5d8d89824..99b403d776 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -1,5 +1,6 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
+import { FieldType } from "@budibase/types"
 
 export const createStores = () => {
   const metadata = writable({})
@@ -90,17 +91,27 @@ const evaluateConditions = (row, conditions) => {
       let value = row[column]
 
       // Coerce values into correct types for primitives
-      if (type === "number") {
+      let coercedType = type
+      if (type === FieldType.FORMULA) {
+        // For formulas we want to ensure that the reference type matches the
+        // real type
+        if (value === true || value === false) {
+          coercedType = FieldType.BOOLEAN
+        } else if (typeof value === "number") {
+          coercedType = FieldType.NUMBER
+        }
+      }
+      if (coercedType === FieldType.NUMBER) {
         referenceValue = parseFloat(referenceValue)
         value = parseFloat(value)
-      } else if (type === "datetime") {
+      } else if (coercedType === FieldType.DATETIME) {
         if (referenceValue) {
           referenceValue = new Date(referenceValue).toISOString()
         }
         if (value) {
           value = new Date(value).toISOString()
         }
-      } else if (type === "boolean") {
+      } else if (coercedType === FieldType.BOOLEAN) {
         referenceValue = `${referenceValue}`.toLowerCase() === "true"
         value = `${value}`.toLowerCase() === "true"
       }

From 94fec5b62be7557a0eaab4446e62e0f1ac44a2d5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Jul 2024 12:45:31 +0100
Subject: [PATCH 19/31] Update how grid blocks handle visible columns to ensure
 conditions work on hidden columns

---
 .../client/src/components/app/GridBlock.svelte |  3 +--
 .../src/components/grid/layout/Grid.svelte     |  2 --
 .../src/components/grid/stores/config.js       |  2 --
 .../src/components/grid/stores/datasource.js   | 18 ++++--------------
 4 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index bd210e5998..cfc42692ea 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -42,7 +42,6 @@
   $: currentTheme = $context?.device?.theme
   $: darkMode = !currentTheme?.includes("light")
   $: parsedColumns = getParsedColumns(columns)
-  $: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
   $: schemaOverrides = getSchemaOverrides(parsedColumns)
   $: enrichedButtons = enrichButtons(buttons)
   $: selectedRows = deriveSelectedRows(gridContext)
@@ -98,6 +97,7 @@
         displayName: column.label,
         order: idx,
         conditions: column.conditions,
+        visible: !!column.active,
       }
       if (column.width) {
         overrides[column.field].width = column.width
@@ -170,7 +170,6 @@
     {initialSortColumn}
     {initialSortOrder}
     {fixedRowHeight}
-    {columnWhitelist}
     {schemaOverrides}
     canAddRows={allowAddRows}
     canEditRows={allowEditRows}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index ba72900ef1..007ad0f8fb 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -37,7 +37,6 @@
   export let API = null
   export let datasource = null
   export let schemaOverrides = null
-  export let columnWhitelist = null
   export let canAddRows = true
   export let canExpandRows = true
   export let canEditRows = true
@@ -94,7 +93,6 @@
   $: props.set({
     datasource,
     schemaOverrides,
-    columnWhitelist,
     canAddRows,
     canExpandRows,
     canEditRows,
diff --git a/packages/frontend-core/src/components/grid/stores/config.js b/packages/frontend-core/src/components/grid/stores/config.js
index d2d07c630e..fc0435f92d 100644
--- a/packages/frontend-core/src/components/grid/stores/config.js
+++ b/packages/frontend-core/src/components/grid/stores/config.js
@@ -12,7 +12,6 @@ export const createStores = context => {
   const initialFilter = getProp("initialFilter")
   const fixedRowHeight = getProp("fixedRowHeight")
   const schemaOverrides = getProp("schemaOverrides")
-  const columnWhitelist = getProp("columnWhitelist")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
   const rowConditions = getProp("rowConditions")
@@ -24,7 +23,6 @@ export const createStores = context => {
     initialFilter,
     fixedRowHeight,
     schemaOverrides,
-    columnWhitelist,
     notifySuccess,
     notifyError,
     rowConditions,
diff --git a/packages/frontend-core/src/components/grid/stores/datasource.js b/packages/frontend-core/src/components/grid/stores/datasource.js
index 8b8ffdf2cf..12a3bd5afe 100644
--- a/packages/frontend-core/src/components/grid/stores/datasource.js
+++ b/packages/frontend-core/src/components/grid/stores/datasource.js
@@ -13,14 +13,8 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const {
-    API,
-    definition,
-    schemaOverrides,
-    columnWhitelist,
-    datasource,
-    schemaMutations,
-  } = context
+  const { API, definition, schemaOverrides, datasource, schemaMutations } =
+    context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -46,17 +40,13 @@ export const deriveStores = context => {
   // Derives the total enriched schema, made up of the saved schema and any
   // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, schemaMutations, columnWhitelist],
-    ([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
+    [schema, schemaOverrides, schemaMutations],
+    ([$schema, $schemaOverrides, $schemaMutations]) => {
       if (!$schema) {
         return null
       }
       let enrichedSchema = {}
       Object.keys($schema).forEach(field => {
-        // Apply whitelist if provided
-        if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
-          return
-        }
         enrichedSchema[field] = {
           ...$schema[field],
           ...$schemaOverrides?.[field],

From 2473b82ba5e3a37401fa9aeb378759323b7364cd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 17 Jul 2024 15:06:06 +0100
Subject: [PATCH 20/31] Revert to using solid border colours

---
 packages/client/src/components/app/GridBlock.svelte           | 2 +-
 packages/frontend-core/src/components/grid/layout/Grid.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index cfc42692ea..e86f163dba 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -193,7 +193,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    border: 1px solid var(--translucent-grey);
+    border: 1px solid var(--spectrum-global-color-gray-200);
     border-radius: 4px;
     overflow: hidden;
     height: 410px;
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 007ad0f8fb..04a11da812 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -230,7 +230,7 @@
     --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
-    --cell-border: 1px solid var(--grid-border-color, var(--translucent-grey));
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
     --cell-font-size: 14px;
     --cell-font-color: var(--spectrum-global-color-gray-800);
     flex: 1 1 auto;

From 2ecedcea7c90b9130ff0fb7ecf33f027b34d7ae3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 19 Jul 2024 16:34:20 +0100
Subject: [PATCH 21/31] Stringify non strings when pasting into text cells

---
 .../src/components/grid/stores/rows.js             | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index bfd91fb237..fb7a487c8e 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -5,6 +5,7 @@ import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
+import { FieldType } from "@budibase/types"
 
 export const createStores = () => {
   const rows = writable([])
@@ -421,8 +422,21 @@ export const createActions = context => {
   // valid pending change was made or not
   const stashRowChanges = (rowId, changes) => {
     const $rowLookupMap = get(rowLookupMap)
+    const $columnLookupMap = get(columnLookupMap)
     const row = $rowLookupMap[rowId]
 
+    // Coerce some values into the correct types
+    for (let column of Object.keys(changes || {})) {
+      const type = $columnLookupMap[column]?.schema?.type
+
+      // Stringify objects
+      if (type === FieldType.STRING || type == FieldType.LONGFORM) {
+        if (changes[column] != null && typeof changes[column] !== "string") {
+          changes[column] = JSON.stringify(changes[column])
+        }
+      }
+    }
+
     // Check this is a valid change
     if (!row || !changesAreValid(row, changes)) {
       return false

From 0e9a89b49be48e939eed8d035838d2c6657bd3c2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 19 Jul 2024 16:34:46 +0100
Subject: [PATCH 22/31] Add the onEmptyFilter flag to table conditions to
 ensure we don't match empty values

---
 .../frontend-core/src/components/grid/stores/conditions.js   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index 99b403d776..b10342a376 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -1,6 +1,6 @@
 import { writable, get } from "svelte/store"
 import { derivedMemo, QueryUtils } from "../../../utils"
-import { FieldType } from "@budibase/types"
+import { FieldType, EmptyFilterOption } from "@budibase/types"
 
 export const createStores = () => {
   const metadata = writable({})
@@ -123,7 +123,8 @@ const evaluateConditions = (row, conditions) => {
         field: "value",
         value: referenceValue,
       }
-      const query = QueryUtils.buildQuery([luceneFilter])
+      let query = QueryUtils.buildQuery([luceneFilter])
+      query.onEmptyFilter = EmptyFilterOption.RETURN_NONE
       const result = QueryUtils.runQuery([{ value }], query)
       if (result.length > 0) {
         if (target === "row") {

From 10b0e46e4d8b5c3c5f502d8658b84d4e8dfd88c4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 08:07:48 +0100
Subject: [PATCH 23/31] Use row condition colour for gutter cell

---
 .../frontend-core/src/components/grid/cells/GutterCell.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 48993e3f0d..349fea332c 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -116,7 +116,7 @@
     margin: 3px 0 0 0;
   }
   .number {
-    color: var(--spectrum-global-color-gray-500);
+    color: val(--cell-font-color, var(--spectrum-global-color-gray-500));
   }
   .checkbox.visible,
   .number.visible {

From 34cd0e1d8156849467d2c0daab9e826cb46590cb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 08:52:42 +0100
Subject: [PATCH 24/31] Improve type coercion in table conditions

---
 .../src/components/grid/stores/conditions.js  | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/stores/conditions.js b/packages/frontend-core/src/components/grid/stores/conditions.js
index b10342a376..3800f21df1 100644
--- a/packages/frontend-core/src/components/grid/stores/conditions.js
+++ b/packages/frontend-core/src/components/grid/stores/conditions.js
@@ -69,6 +69,25 @@ export const initialise = context => {
   })
 }
 
+const TypeCoercionMap = {
+  [FieldType.NUMBER]: parseFloat,
+  [FieldType.DATETIME]: val => {
+    if (val) {
+      return new Date(val).toISOString()
+    }
+    return null
+  },
+  [FieldType.BOOLEAN]: val => {
+    if (`${val}`.toLowerCase().trim() === "true") {
+      return true
+    }
+    if (`${val}`.toLowerCase().trim() === "false") {
+      return false
+    }
+    return null
+  },
+}
+
 // Evaluates an array of cell conditions against a certain row and returns the
 // resultant metadata
 const evaluateConditions = (row, conditions) => {
@@ -101,19 +120,10 @@ const evaluateConditions = (row, conditions) => {
           coercedType = FieldType.NUMBER
         }
       }
-      if (coercedType === FieldType.NUMBER) {
-        referenceValue = parseFloat(referenceValue)
-        value = parseFloat(value)
-      } else if (coercedType === FieldType.DATETIME) {
-        if (referenceValue) {
-          referenceValue = new Date(referenceValue).toISOString()
-        }
-        if (value) {
-          value = new Date(value).toISOString()
-        }
-      } else if (coercedType === FieldType.BOOLEAN) {
-        referenceValue = `${referenceValue}`.toLowerCase() === "true"
-        value = `${value}`.toLowerCase() === "true"
+      const coerce = TypeCoercionMap[coercedType]
+      if (coerce) {
+        value = coerce(value)
+        referenceValue = coerce(referenceValue)
       }
 
       // Build lucene compatible condition expression

From 27789a59d167caf69a1865ef6550e3bfd1a789c1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:13:13 +0100
Subject: [PATCH 25/31] Hide table conditions for invalid column types

---
 .../design/settings/componentSettings.js      |   6 +-
 .../FieldSetting.svelte                       |  14 +-
 .../controls/RowConditionEditor.svelte        | 200 ------------------
 ...tor.svelte => TableConditionEditor.svelte} |   1 +
 packages/client/manifest.json                 |   2 +-
 packages/frontend-core/src/constants.js       |   2 +
 6 files changed, 19 insertions(+), 206 deletions(-)
 delete mode 100644 packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte
 rename packages/builder/src/components/design/settings/controls/{CellConditionEditor.svelte => TableConditionEditor.svelte} (99%)

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index b397cba7d1..f5ab1cb157 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -30,8 +30,7 @@ import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte
 import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
 import FormStepControls from "./controls/FormStepControls.svelte"
 import PaywalledSetting from "./controls/PaywalledSetting.svelte"
-import CellConditionEditor from "./controls/CellConditionEditor.svelte"
-import RowConditionEditor from "./controls/RowConditionEditor.svelte"
+import TableConditionEditor from "./controls/TableConditionEditor.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -63,8 +62,7 @@ const componentMap = {
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,
-  cellConditions: CellConditionEditor,
-  rowConditions: RowConditionEditor,
+  tableConditions: TableConditionEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
index 85eb4603e1..149ec7265a 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte
@@ -4,6 +4,8 @@
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash/fp"
   import { FIELDS } from "constants/backend"
+  import { Constants } from "@budibase/frontend-core"
+  import { FieldType } from "@budibase/types"
 
   export let item
   export let anchor
@@ -29,11 +31,21 @@
   }
 
   const parseSettings = settings => {
-    return settings
+    let columnSettings = settings
       .filter(setting => setting.key !== "field")
       .map(setting => {
         return { ...setting, nested: true }
       })
+
+    // Filter out conditions for invalid types.
+    // Allow formulas as we have all the data already loaded in the table.
+    if (
+      Constants.BannedSearchTypes.includes(item.columnType) &&
+      item.columnType !== FieldType.FORMULA
+    ) {
+      return columnSettings.filter(x => x.key !== "conditions")
+    }
+    return columnSettings
   }
 </script>
 
diff --git a/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte
deleted file mode 100644
index 93278a1f45..0000000000
--- a/packages/builder/src/components/design/settings/controls/RowConditionEditor.svelte
+++ /dev/null
@@ -1,200 +0,0 @@
-<script>
-  import {
-    ActionButton,
-    Drawer,
-    Button,
-    DrawerContent,
-    Layout,
-    Select,
-    Icon,
-  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-  import { cloneDeep } from "lodash"
-  import ColorPicker from "./ColorPicker.svelte"
-  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { Constants } from "@budibase/frontend-core"
-  import { generate } from "shortid"
-  import { dndzone } from "svelte-dnd-action"
-  import { flip } from "svelte/animate"
-  import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
-  import { selectedScreen, selectedComponent } from "stores/builder"
-  import { makePropSafe } from "@budibase/string-templates"
-
-  export let value
-
-  const dispatch = createEventDispatcher()
-  const flipDuration = 130
-  const conditionOptions = [
-    {
-      label: "Update background color",
-      value: "backgroundColor",
-    },
-    {
-      label: "Update text color",
-      value: "textColor",
-    },
-  ]
-
-  let tempValue = []
-  let drawer
-  let dragDisabled = true
-
-  $: count = value?.length
-  $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
-  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
-  $: schema = getSchemaForDatasource($selectedScreen, datasource)?.schema
-  $: rowBindings = generateRowBindings(schema)
-
-  const generateRowBindings = schema => {
-    let bindings = []
-    for (let key of Object.keys(schema || {})) {
-      bindings.push({
-        type: "context",
-        runtimeBinding: `${makePropSafe("row")}.${makePropSafe(key)}`,
-        readableBinding: `Row.${key}`,
-        category: "Row",
-        icon: "RailTop",
-        display: { name: key },
-      })
-    }
-
-    return bindings
-  }
-
-  const openDrawer = () => {
-    tempValue = cloneDeep(value || [])
-    drawer.show()
-  }
-
-  const save = async () => {
-    dispatch("change", tempValue)
-    drawer.hide()
-  }
-
-  const addCondition = () => {
-    const condition = {
-      id: generate(),
-      metadataKey: conditionOptions[0].value,
-      operator: Constants.OperatorOptions.Equals.value,
-      referenceValue: true,
-    }
-    tempValue = [...tempValue, condition]
-  }
-
-  const duplicateCondition = condition => {
-    const dupe = { ...condition, id: generate() }
-    tempValue = [...tempValue, dupe]
-  }
-
-  const removeCondition = condition => {
-    tempValue = tempValue.filter(c => c.id !== condition.id)
-  }
-
-  const updateConditions = e => {
-    tempValue = e.detail.items
-  }
-
-  const handleFinalize = e => {
-    updateConditions(e)
-    dragDisabled = true
-  }
-</script>
-
-<ActionButton on:click={openDrawer}>{conditionText}</ActionButton>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<Drawer bind:this={drawer} title="Row conditions" on:drawerShow on:drawerHide>
-  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <DrawerContent slot="body">
-    <div class="container">
-      <Layout noPadding>
-        Update the appearance of rows based on the entire row value.
-        {#if tempValue.length}
-          <div
-            class="conditions"
-            use:dndzone={{
-              items: tempValue,
-              flipDurationMs: flipDuration,
-              dropTargetStyle: { outline: "none" },
-              dragDisabled,
-            }}
-            on:consider={updateConditions}
-            on:finalize={handleFinalize}
-          >
-            {#each tempValue as condition (condition.id)}
-              <div
-                class="condition"
-                class:update={condition.action === "update"}
-                animate:flip={{ duration: flipDuration }}
-              >
-                <div
-                  class="handle"
-                  aria-label="drag-handle"
-                  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
-                  on:mousedown={() => (dragDisabled = false)}
-                >
-                  <Icon name="DragHandle" size="XL" />
-                </div>
-                <Select
-                  placeholder={null}
-                  options={conditionOptions}
-                  bind:value={condition.metadataKey}
-                />
-                <span>to</span>
-                <ColorPicker
-                  value={condition.metadataValue}
-                  on:change={e => (condition.metadataValue = e.detail)}
-                />
-                <span>if</span>
-                <DrawerBindableInput
-                  bindings={rowBindings}
-                  allowHBS={false}
-                  placeholder="Expression"
-                  value={condition.value}
-                  on:change={e => (condition.value = e.detail)}
-                />
-                <span>returns true</span>
-                <Icon
-                  name="Duplicate"
-                  hoverable
-                  size="S"
-                  on:click={() => duplicateCondition(condition)}
-                />
-                <Icon
-                  name="Close"
-                  hoverable
-                  size="S"
-                  on:click={() => removeCondition(condition)}
-                />
-              </div>
-            {/each}
-          </div>
-        {/if}
-        <div>
-          <Button secondary icon="Add" on:click={addCondition}>
-            Add condition
-          </Button>
-        </div>
-      </Layout>
-    </div>
-  </DrawerContent>
-</Drawer>
-
-<style>
-  .container {
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .conditions {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-l);
-  }
-  .condition {
-    display: grid;
-    grid-template-columns: auto 1fr auto auto auto 1fr auto auto auto;
-    align-items: center;
-    grid-column-gap: var(--spacing-l);
-  }
-</style>
diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
similarity index 99%
rename from packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
rename to packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 0b9a8a74a2..b75a4358aa 100644
--- a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -53,6 +53,7 @@
   $: count = value?.length
   $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
   $: type = componentInstance.columnType
+  $: invalidType = Constants.BannedSearchTypes.includes(type)
   $: valueTypeOptions = [
     {
       label: "Binding",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b4061c7043..37f9c681d6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2881,7 +2881,7 @@
         "max": 9999
       },
       {
-        "type": "cellConditions",
+        "type": "tableConditions",
         "label": "Conditions",
         "key": "conditions"
       }
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index e5869a3b98..7b3e69e495 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -12,9 +12,11 @@ import { FieldType, BBReferenceFieldSubType } from "@budibase/types"
 
 export const BannedSearchTypes = [
   FieldType.LINK,
+  FieldType.ATTACHMENT_SINGLE,
   FieldType.ATTACHMENTS,
   FieldType.FORMULA,
   FieldType.JSON,
+  FieldType.SIGNATURE_SINGLE,
   "jsonarray",
   "queryarray",
 ]

From d774e30a0a680cde96571979ffb8e80549801ea4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:21:46 +0100
Subject: [PATCH 26/31] Improve table condition editor handling of value types
 and missing values

---
 .../controls/TableConditionEditor.svelte      | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index b75a4358aa..0d93d3dc1d 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -53,17 +53,8 @@
   $: count = value?.length
   $: conditionText = `${count || "No"} condition${count !== 1 ? "s" : ""} set`
   $: type = componentInstance.columnType
-  $: invalidType = Constants.BannedSearchTypes.includes(type)
-  $: valueTypeOptions = [
-    {
-      label: "Binding",
-      value: FieldType.STRING,
-    },
-    {
-      label: "Value",
-      value: type,
-    },
-  ]
+  $: valueTypeOptions = getValueTypeOptions(type)
+  $: hasValueOption = type !== FieldType.STRING
   $: operatorOptions = QueryUtils.getValidOperatorsForType({
     type,
 
@@ -72,6 +63,22 @@
     formulaType: FormulaType.STATIC,
   })
 
+  const getValueTypeOptions = type => {
+    let options = [
+      {
+        label: "Binding",
+        value: FieldType.STRING,
+      },
+    ]
+    if (type !== FieldType.STRING) {
+      options.push({
+        label: "Value",
+        value: type,
+      })
+    }
+    return options
+  }
+
   const openDrawer = () => {
     tempValue = cloneDeep(value || [])
     drawer.show()
@@ -87,7 +94,7 @@
       id: generate(),
       target: targetOptions[0].value,
       metadataKey: conditionOptions[0].value,
-      operator: Constants.OperatorOptions.Equals.value,
+      operator: operatorOptions[0]?.value,
       valueType: FieldType.STRING,
     }
     tempValue = [...tempValue, condition]
@@ -158,6 +165,7 @@
               <div
                 class="condition"
                 class:update={condition.action === "update"}
+                class:with-value-option={hasValueOption}
                 animate:flip={{ duration: flipDuration }}
               >
                 <div
@@ -191,13 +199,16 @@
                   bind:value={condition.operator}
                   on:change={e => onOperatorChange(condition, e.detail)}
                 />
-                <Select
-                  disabled={condition.noValue || condition.operator === "oneOf"}
-                  options={valueTypeOptions}
-                  bind:value={condition.valueType}
-                  placeholder={null}
-                  on:change={() => onValueTypeChange(condition)}
-                />
+                {#if hasValueOption}
+                  <Select
+                    disabled={condition.noValue ||
+                      condition.operator === "oneOf"}
+                    options={valueTypeOptions}
+                    bind:value={condition.valueType}
+                    placeholder={null}
+                    on:change={() => onValueTypeChange(condition)}
+                  />
+                {/if}
                 {#if type === FieldType.DATETIME && condition.valueType === type}
                   <DatePicker
                     placeholder="Value"
@@ -259,8 +270,11 @@
   }
   .condition {
     display: grid;
-    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr 1fr auto auto;
+    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr auto auto;
     align-items: center;
     grid-column-gap: var(--spacing-l);
   }
+  .condition.with-value-option {
+    grid-template-columns: auto auto 1fr 1fr auto auto auto 1fr 1fr 1fr auto auto;
+  }
 </style>

From 26a552ac5c2711c24fe71c253979f924c155fbf7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:35:36 +0100
Subject: [PATCH 27/31] Add options picker for values when configuring
 conditions on options columns

---
 .../settings/controls/EditComponentPopover.svelte    |  1 -
 .../controls/GridColumnConfiguration/getColumns.js   | 12 ++++++------
 .../settings/controls/TableConditionEditor.svelte    | 12 ++++++++++++
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
index 116867caf8..a491561f93 100644
--- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
+++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte
@@ -10,7 +10,6 @@
   export let componentBindings
   export let bindings
   export let parseSettings
-  export let disabled
 
   const draggable = getContext("draggable")
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
index 4fbe6fc9e7..148055d727 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js
@@ -108,12 +108,12 @@ const getColumns = ({
     createComponent,
     schema
   )
-  const primary = draggableList.find(
-    entry => entry.field === primaryDisplayColumnName
-  )
-  const sortable = draggableList.filter(
-    entry => entry.field !== primaryDisplayColumnName
-  )
+  const primary = draggableList
+    .filter(entry => entry.field === primaryDisplayColumnName)
+    .map(instance => ({ ...instance, schema }))[0]
+  const sortable = draggableList
+    .filter(entry => entry.field !== primaryDisplayColumnName)
+    .map(instance => ({ ...instance, schema }))
 
   return {
     primary,
diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 0d93d3dc1d..13250ab43d 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -8,6 +8,7 @@
     Select,
     Icon,
     DatePicker,
+    Combobox,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
@@ -18,6 +19,8 @@
   import { FieldType, FormulaType } from "@budibase/types"
   import { dndzone } from "svelte-dnd-action"
   import { flip } from "svelte/animate"
+  import { getDatasourceForProvider } from "dataBinding"
+  import { selectedScreen } from "stores/builder"
 
   export let componentInstance
   export let bindings
@@ -62,6 +65,8 @@
     // on the page, so adding this ensures formula columns get operators
     formulaType: FormulaType.STATIC,
   })
+  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
+  $: console.log(componentInstance)
 
   const getValueTypeOptions = type => {
     let options = [
@@ -222,6 +227,13 @@
                     options={["True", "False"]}
                     bind:value={condition.referenceValue}
                   />
+                {:else if type === FieldType.OPTIONS && condition.valueType === type}
+                  <Combobox
+                    disabled={condition.noValue}
+                    options={componentInstance.schema?.[componentInstance.field]
+                      ?.constraints?.inclusion || []}
+                    bind:value={condition.referenceValue}
+                  />
                 {:else}
                   <DrawerBindableInput
                     {bindings}

From e4cd71feab573704bab5c69e4bf91b375602746d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:38:43 +0100
Subject: [PATCH 28/31] Add options picker for multiselect columns

---
 .../design/settings/controls/TableConditionEditor.svelte       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 13250ab43d..4edeaa37bb 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -9,6 +9,7 @@
     Icon,
     DatePicker,
     Combobox,
+    Multiselect,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
@@ -227,7 +228,7 @@
                     options={["True", "False"]}
                     bind:value={condition.referenceValue}
                   />
-                {:else if type === FieldType.OPTIONS && condition.valueType === type}
+                {:else if (type === FieldType.OPTIONS || type === FieldType.ARRAY) && condition.valueType === type}
                   <Combobox
                     disabled={condition.noValue}
                     options={componentInstance.schema?.[componentInstance.field]

From 6fd265776d20e9c58b036aa744b3b8cd4fcc1072 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 09:58:59 +0100
Subject: [PATCH 29/31] Add bespoke component for selecting users in table
 conditions

---
 .../controls/TableConditionEditor.svelte        | 17 +++++++++++------
 packages/frontend-core/src/components/index.js  |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 4edeaa37bb..7928e0300c 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -9,19 +9,16 @@
     Icon,
     DatePicker,
     Combobox,
-    Multiselect,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
   import ColorPicker from "./ColorPicker.svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { QueryUtils, Constants } from "@budibase/frontend-core"
+  import { QueryUtils, Constants, FilterUsers } from "@budibase/frontend-core"
   import { generate } from "shortid"
   import { FieldType, FormulaType } from "@budibase/types"
   import { dndzone } from "svelte-dnd-action"
   import { flip } from "svelte/animate"
-  import { getDatasourceForProvider } from "dataBinding"
-  import { selectedScreen } from "stores/builder"
 
   export let componentInstance
   export let bindings
@@ -66,8 +63,6 @@
     // on the page, so adding this ensures formula columns get operators
     formulaType: FormulaType.STATIC,
   })
-  $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)
-  $: console.log(componentInstance)
 
   const getValueTypeOptions = type => {
     let options = [
@@ -235,6 +230,16 @@
                       ?.constraints?.inclusion || []}
                     bind:value={condition.referenceValue}
                   />
+                {:else if (type === FieldType.BB_REFERENCE || type === FieldType.BB_REFERENCE_SINGLE) && condition.valueType === type}
+                  <FilterUsers
+                    bind:value={condition.referenceValue}
+                    multiselect={[
+                      Constants.OperatorOptions.In.value,
+                      Constants.OperatorOptions.ContainsAny.value,
+                    ].includes(condition.operator)}
+                    disabled={condition.noValue}
+                    type={condition.valueType}
+                  />
                 {:else}
                   <DrawerBindableInput
                     {bindings}
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 06e1348988..d494abb82d 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -8,3 +8,4 @@ export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as FilterBuilder } from "./FilterBuilder.svelte"
+export { default as FilterUsers } from "./FilterUsers.svelte"

From 98d55db959168be48d7ec7a685f27ef0b0be9ad8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 11:30:06 +0100
Subject: [PATCH 30/31] Update tests

---
 .../getColumns.test.js                        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
index 8b1875b389..1d5d2feaa9 100644
--- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
+++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.test.js
@@ -72,6 +72,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -81,6 +83,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -90,6 +94,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -101,6 +107,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })
@@ -126,6 +134,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "three",
@@ -135,6 +145,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -144,6 +156,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -155,6 +169,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
 
@@ -188,6 +204,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -197,6 +215,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -206,6 +226,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -217,6 +239,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })
@@ -247,6 +271,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "three",
           label: "three label",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "two",
@@ -256,6 +282,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "two",
           label: "two",
+          conditions: undefined,
+          schema: ctx.schema,
         },
         {
           _id: "one",
@@ -265,6 +293,8 @@ describe("getColumns", () => {
           componentName: "@budibase/standard-components/labelfield",
           field: "one",
           label: "one",
+          conditions: undefined,
+          schema: ctx.schema,
         },
       ])
 
@@ -276,6 +306,8 @@ describe("getColumns", () => {
         componentName: "@budibase/standard-components/labelfield",
         field: "four",
         label: "four",
+        conditions: undefined,
+        schema: ctx.schema,
       })
     })
   })

From dbe321155fcd3c546b818cb79d0d207ca5bf5ff7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 22 Jul 2024 11:55:03 +0100
Subject: [PATCH 31/31] Use multiselect for options fields in conditions using
 the 'in' operator

---
 .../controls/TableConditionEditor.svelte      | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
index 7928e0300c..d58cb1d4ba 100644
--- a/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/TableConditionEditor.svelte
@@ -9,6 +9,7 @@
     Icon,
     DatePicker,
     Combobox,
+    Multiselect,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { cloneDeep } from "lodash"
@@ -116,7 +117,7 @@
       Constants.OperatorOptions.NotEmpty.value,
     ]
     condition.noValue = noValueOptions.includes(newOperator)
-    if (condition.noValue || newOperator === "oneOf") {
+    if (condition.noValue) {
       condition.referenceValue = null
       condition.valueType = "string"
     }
@@ -202,8 +203,7 @@
                 />
                 {#if hasValueOption}
                   <Select
-                    disabled={condition.noValue ||
-                      condition.operator === "oneOf"}
+                    disabled={condition.noValue}
                     options={valueTypeOptions}
                     bind:value={condition.valueType}
                     placeholder={null}
@@ -224,12 +224,23 @@
                     bind:value={condition.referenceValue}
                   />
                 {:else if (type === FieldType.OPTIONS || type === FieldType.ARRAY) && condition.valueType === type}
-                  <Combobox
-                    disabled={condition.noValue}
-                    options={componentInstance.schema?.[componentInstance.field]
-                      ?.constraints?.inclusion || []}
-                    bind:value={condition.referenceValue}
-                  />
+                  {#if condition.operator === Constants.OperatorOptions.In.value}
+                    <Multiselect
+                      disabled={condition.noValue}
+                      options={componentInstance.schema?.[
+                        componentInstance.field
+                      ]?.constraints?.inclusion || []}
+                      bind:value={condition.referenceValue}
+                    />
+                  {:else}
+                    <Combobox
+                      disabled={condition.noValue}
+                      options={componentInstance.schema?.[
+                        componentInstance.field
+                      ]?.constraints?.inclusion || []}
+                      bind:value={condition.referenceValue}
+                    />
+                  {/if}
                 {:else if (type === FieldType.BB_REFERENCE || type === FieldType.BB_REFERENCE_SINGLE) && condition.valueType === type}
                   <FilterUsers
                     bind:value={condition.referenceValue}