Merge pull request #15147 from Budibase/budi-8909-builder-crashes-when-incomplete-filters-are-saved

Disable filter value binding input when no column is selected in filter screen

packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte

@@ -19,7 +19,7 @@
   import FlowItemHeader from "./FlowItemHeader.svelte"
   import FlowItemActions from "./FlowItemActions.svelte"
   import { automationStore, selectedAutomation } from "stores/builder"
-  import { QueryUtils } from "@budibase/frontend-core"
+  import { QueryUtils, Utils } from "@budibase/frontend-core"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
   import DragZone from "./DragZone.svelte"
@@ -36,13 +36,11 @@
   const view = getContext("draggableView")
 
   let drawer
-  let condition
   let open = true
   let confirmDeleteModal
 
   $: branch = step.inputs?.branches?.[branchIdx]
-  $: editableConditionUI = cloneDeep(branch.conditionUI || {})
+  $: editableConditionUI = branch.conditionUI || {}
-  $: condition = QueryUtils.buildQuery(editableConditionUI)
 
   // Parse all the bindings into fields for the condition builder
   $: schemaFields = bindings.map(binding => {
@@ -80,9 +78,10 @@
     slot="buttons"
     on:click={() => {
       drawer.hide()
+      const updatedConditionsUI = Utils.parseFilter(editableConditionUI)
       dispatch("change", {
-        conditionUI: editableConditionUI,
+        conditionUI: updatedConditionsUI,
-        condition,
+        condition: QueryUtils.buildQuery(updatedConditionsUI),
       })
     }}
   >

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -594,10 +594,11 @@
   }
 
   function saveFilters(key) {
-    const query = QueryUtils.buildQuery(tempFilters)
+    const update = Utils.parseFilter(tempFilters)
+    const query = QueryUtils.buildQuery(update)
     onChange({
       [key]: query,
-      [`${key}-def`]: tempFilters, // need to store the builder definition in the automation
+      [`${key}-def`]: update, // need to store the builder definition in the automation
     })
 
     drawer.hide()

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -4,7 +4,7 @@
   import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
   import { getUserBindings } from "dataBinding"
   import { makePropSafe } from "@budibase/string-templates"
-  import { search } from "@budibase/frontend-core"
+  import { search, Utils } from "@budibase/frontend-core"
   import { tables } from "stores/builder"
   import DetailPopover from "components/common/DetailPopover.svelte"
 
@@ -73,7 +73,7 @@
       cta
       slot="buttons"
       on:click={() => {
-        dispatch("change", localFilters)
+        dispatch("change", Utils.parseFilter(localFilters))
         popover.hide()
       }}
     >

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

@@ -10,7 +10,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import FilterBuilder from "./FilterBuilder.svelte"
   import { tables, selectedScreen } from "stores/builder"
-  import { search } from "@budibase/frontend-core"
+  import { search, Utils } from "@budibase/frontend-core"
   import { utils } from "@budibase/shared-core"
 
   const dispatch = createEventDispatcher()
@@ -33,7 +33,8 @@
   $: text = getText(value)
 
   async function saveFilter() {
-    dispatch("change", localFilters)
+    const update = Utils.parseFilter(localFilters)
+    dispatch("change", update)
     notifications.success("Filters saved")
     drawer.hide()
   }

packages/client/src/components/app/dynamic-filter/DynamicFilter.svelte

@@ -6,6 +6,7 @@
     QueryUtils,
     Constants,
     CoreFilterBuilder,
+    Utils,
   } from "@budibase/frontend-core"
   import Button from "../Button.svelte"
 
@@ -95,7 +96,7 @@
   }
 
   const updateQuery = () => {
-    filters = editableFilters
+    filters = Utils.parseFilter(editableFilters)
   }
 
   onDestroy(() => {

packages/frontend-core/src/components/CoreFilterBuilder.svelte

@@ -407,6 +407,7 @@
                     />
                     <FilterField
                       placeholder="Value"
+                      disabled={!filter.field && builderType === "filter"}
                       drawerTitle={builderType === "condition"
                         ? "Edit binding"
                         : null}

packages/frontend-core/src/utils/utils.js

@@ -1,5 +1,6 @@
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { Helpers } from "@budibase/bbui"
+import { cloneDeep } from "lodash"
 
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
@@ -351,3 +352,27 @@ export const buildMultiStepFormBlockDefaultProps = props => {
     title,
   }
 }
+
+/**
+ * Parse out empty or invalid UI filters and clear empty groups
+ * @param {Object} filter UI filter
+ * @returns {Object} parsed filter
+ */
+export function parseFilter(filter) {
+  if (!filter?.groups) {
+    return filter
+  }
+
+  const update = cloneDeep(filter)
+
+  update.groups = update.groups
+    .map(group => {
+      group.filters = group.filters.filter(filter => {
+        return filter.field && filter.operator
+      })
+      return group.filters.length ? group : null
+    })
+    .filter(group => group)
+
+  return update
+}

packages/shared-core/src/filters.ts

@@ -298,7 +298,8 @@ export class ColumnSplitter {
 function buildCondition(filter: undefined): undefined
 function buildCondition(filter: SearchFilter): SearchFilters
 function buildCondition(filter?: SearchFilter): SearchFilters | undefined {
-  if (!filter) {
+  // Ignore empty or invalid filters
+  if (!filter || !filter?.operator || !filter?.field) {
     return
   }
 
@@ -475,7 +476,6 @@ export function buildQuery(
       if (group.logicalOperator) {
         operator = logicalOperatorFromUI(group.logicalOperator)
       }
-
       return {
         [operator]: { conditions: filters.map(buildCondition).filter(f => f) },
       }