Improve table condition editor handling of value types and missing values

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 = getValueTypeOptions(type)
-  $: valueTypeOptions = [
+  $: hasValueOption = type !== FieldType.STRING
-    {
-      label: "Binding",
-      value: FieldType.STRING,
-    },
-    {
-      label: "Value",
-      value: type,
-    },
-  ]
   $: 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
+                {#if hasValueOption}
-                  disabled={condition.noValue || condition.operator === "oneOf"}
+                  <Select
-                  options={valueTypeOptions}
+                    disabled={condition.noValue ||
-                  bind:value={condition.valueType}
+                      condition.operator === "oneOf"}
-                  placeholder={null}
+                    options={valueTypeOptions}
-                  on:change={() => onValueTypeChange(condition)}
+                    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>