fix(ui): adds multi select inputs for text fields in where builder (#12054)

### What?

The `in` & `not_in` operators were not properly working for `text`
fields as this operator requires an array of values for it's input.

### How?

Conditionally renders a multi select input for `text` fields when
filtering by `in` & `not_in` operators.

packages/ui/src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx

@@ -96,7 +96,7 @@ export const DefaultFilter: React.FC<Props> = ({
           field={internalField?.field as TextFieldClient}
           onChange={onChange}
           operator={operator}
-          value={value as string}
+          value={value as string | string[]}
         />
       )
     }

packages/ui/src/elements/WhereBuilder/Condition/Text/index.tsx

@@ -4,14 +4,77 @@ import React from 'react'
 import type { TextFilterProps as Props } from './types.js'
 
 import { useTranslation } from '../../../../providers/Translation/index.js'
+import { ReactSelect } from '../../../ReactSelect/index.js'
 import './index.scss'
 
 const baseClass = 'condition-value-text'
 
-export const Text: React.FC<Props> = ({ disabled, onChange, value }) => {
+export const Text: React.FC<Props> = (props) => {
+  const {
+    disabled,
+    field: { hasMany },
+    onChange,
+    operator,
+    value,
+  } = props
   const { t } = useTranslation()
 
-  return (
+  const isMulti = ['in', 'not_in'].includes(operator) || hasMany
+
+  const [valueToRender, setValueToRender] = React.useState<
+    { id: string; label: string; value: { value: string } }[]
+  >([])
+
+  const onSelect = React.useCallback(
+    (selectedOption) => {
+      let newValue
+      if (!selectedOption) {
+        newValue = []
+      } else if (isMulti) {
+        if (Array.isArray(selectedOption)) {
+          newValue = selectedOption.map((option) => option.value?.value || option.value)
+        } else {
+          newValue = [selectedOption.value?.value || selectedOption.value]
+        }
+      }
+
+      onChange(newValue)
+    },
+    [isMulti, onChange],
+  )
+
+  React.useEffect(() => {
+    if (Array.isArray(value)) {
+      setValueToRender(
+        value.map((val, index) => {
+          return {
+            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers
+            label: `${val}`,
+            value: {
+              toString: () => `${val}${index}`,
+              value: (val as any)?.value || val,
+            },
+          }
+        }),
+      )
+    } else {
+      setValueToRender([])
+    }
+  }, [value])
+
+  return isMulti ? (
+    <ReactSelect
+      disabled={disabled}
+      isClearable
+      isCreatable
+      isMulti={isMulti}
+      isSortable
+      onChange={onSelect}
+      options={[]}
+      placeholder={t('general:enterAValue')}
+      value={valueToRender || []}
+    />
+  ) : (
     <input
       className={baseClass}
       disabled={disabled}

packages/ui/src/elements/WhereBuilder/Condition/Text/types.ts

@@ -5,5 +5,5 @@ import type { DefaultFilterProps } from '../types.js'
 export type TextFilterProps = {
   readonly field: TextFieldClient
   readonly onChange: (val: string) => void
-  readonly value: string
+  readonly value: string | string[]
 } & DefaultFilterProps