Hide table conditions for invalid column types

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,

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>
 

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

@@ -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>

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",

packages/client/manifest.json

@@ -2881,7 +2881,7 @@
         "max": 9999
       },
       {
-        "type": "cellConditions",
+        "type": "tableConditions",
         "label": "Conditions",
         "key": "conditions"
       }

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",
 ]