From 95b39bcb767539fedc5db31c748ce79bd10cb6ed Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 16 Oct 2023 15:08:44 +0200
Subject: [PATCH 01/39] Add filter component

---
 .../components/Filter/CombinatorSelect.vue    | 38 +++++++++
 .../src/components/Filter/Condition.vue       | 71 ++++++++++++++++
 .../src/components/Filter/Filter.vue          | 57 +++++++++++++
 .../src/components/Filter/OperatorSelect.vue  | 40 +++++++++
 .../src/components/Filter/constants.ts        | 82 +++++++++++++++++++
 .../editor-ui/src/components/Filter/types.ts  | 21 +++++
 .../src/plugins/i18n/locales/en.json          | 42 +++++++++-
 packages/workflow/src/Interfaces.ts           | 44 ++++++++--
 8 files changed, 385 insertions(+), 10 deletions(-)
 create mode 100644 packages/editor-ui/src/components/Filter/CombinatorSelect.vue
 create mode 100644 packages/editor-ui/src/components/Filter/Condition.vue
 create mode 100644 packages/editor-ui/src/components/Filter/Filter.vue
 create mode 100644 packages/editor-ui/src/components/Filter/OperatorSelect.vue
 create mode 100644 packages/editor-ui/src/components/Filter/constants.ts
 create mode 100644 packages/editor-ui/src/components/Filter/types.ts

diff --git a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
new file mode 100644
index 0000000000000..e1565775dfb0b
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables';
+import type { FilterTypeCombinator } from 'n8n-workflow';
+
+interface Props {
+	options: FilterTypeCombinator[];
+	selected: FilterTypeCombinator;
+	readOnly: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+	(event: 'combinatorChanged', value: FilterTypeCombinator): void;
+}>();
+
+const i18n = useI18n();
+
+const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
+	emit('combinatorChanged', combinator);
+};
+</script>
+
+<template>
+	<div data-test-id="combinator-select">
+		<n8n-select :modelValue="selected" @update:modelValue="onCombinatorChange">
+			<n8n-option
+				v-for="option in options"
+				:key="option"
+				:value="option"
+				:label="i18n.baseText(`filter.combinator.${option}`)"
+			>
+			</n8n-option>
+		</n8n-select>
+	</div>
+</template>
+
+<style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/Filter/Condition.vue
new file mode 100644
index 0000000000000..241546b70cc9b
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/Condition.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { INodeProperties } from 'n8n-workflow';
+import { reactive } from 'vue';
+import { type FilterOperatorId, OPERATORS_BY_ID } from './constants';
+import type { FilterOperator } from './types';
+
+interface Props {
+	path: string;
+	fixedLeftValue: boolean;
+	initialLeftValue: string;
+	initialRightValue: string;
+	initialOperator: FilterOperatorId;
+}
+
+const props = defineProps<Props>();
+
+const state = reactive({
+	operator: OPERATORS_BY_ID[props.initialOperator] as FilterOperator,
+	leftValue: props.initialLeftValue,
+	rightValue: props.initialRightValue,
+});
+
+const emit = defineEmits<{
+	(event: 'operatorChanged', value: string): void;
+	(event: 'leftValueChanged', value: string): void;
+	(event: 'rightValueChanged', value: string): void;
+}>();
+
+const parameter: INodeProperties = { name: '', displayName: '', default: '', type: 'string' };
+
+const onOperatorChange = (operator: FilterOperator): void => {
+	state.operator = operator;
+	emit('operatorChanged', operator.id);
+};
+
+const onLeftValueChange = (value: string): void => {
+	emit('leftValueChanged', value);
+};
+
+const onRightValueChange = (value: string): void => {
+	emit('rightValueChanged', value);
+};
+</script>
+
+<template>
+	<div class="$style.condition" data-test-id="condition">
+		<parameter-input-full
+			v-if="!fixedLeftValue"
+			:parameter="parameter"
+			:value="state.leftValue"
+			:path="`${path}.left`"
+			:hideLabel="true"
+			@update="onLeftValueChange"
+		/>
+		<operator-select @operatorChanged="onOperatorChange"></operator-select>
+		<parameter-input-full
+			v-if="!state.operator.singleValue"
+			:parameter="parameter"
+			:value="state.rightValue"
+			:path="`${path}.right`"
+			:hideLabel="true"
+			@update="onRightValueChange"
+		/>
+	</div>
+</template>
+
+<style lang="scss" module>
+.condition {
+	display: flex;
+}
+</style>
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/Filter/Filter.vue
new file mode 100644
index 0000000000000..0b35e77c67333
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/Filter.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { FilterConditionValue, FilterValue, INodeProperties } from 'n8n-workflow';
+import { reactive } from 'vue';
+import { DEFAULT_MAX_CONDITIONS, DEFAULT_OPERATOR } from './constants';
+import { useI18n } from '@/composables';
+
+interface Props {
+	parameter: INodeProperties;
+	value: FilterValue;
+}
+
+const props = defineProps<Props>();
+
+const state = reactive({ paramValue: props.value });
+
+const maxConditions = props.parameter.typeOptions?.filter?.maxConditions ?? DEFAULT_MAX_CONDITIONS;
+const maxConditionsReached = maxConditions <= state.paramValue.conditions.length;
+
+const emit = defineEmits<{
+	(event: 'valueChanged', value: FilterValue): void;
+}>();
+
+function createCondition(): FilterConditionValue {
+	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR };
+}
+
+function addCondition(): void {
+	state.paramValue.conditions.push(createCondition());
+}
+
+const i18n = useI18n();
+</script>
+
+<template>
+	<div data-test-id="filter">
+		<n8n-input-label
+			:label="parameter.displayName"
+			:underline="true"
+			:showOptions="true"
+			:showExpressionSelector="false"
+			color="text-dark"
+		>
+		</n8n-input-label>
+		<div>
+			<condition v-for="condition of state.paramValue.conditions" :key="condition.id"></condition>
+		</div>
+		<n8n-button
+			type="tertiary"
+			block
+			@click="addCondition"
+			:label="i18n.baseText('filter.addCondition')"
+			:disabled=""
+		/>
+	</div>
+</template>
+
+<style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
new file mode 100644
index 0000000000000..cf38d80d76ccf
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables';
+import type { FilterTypeCombinator } from 'n8n-workflow';
+import { FilterOperator, OPERATORS } from './constants';
+
+interface Props {
+	selected: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+	(event: 'operatorChanged', value: string): void;
+}>();
+
+const i18n = useI18n();
+
+// TODO: Make select nested
+const operators = OPERATORS.map((group) => group.children as FilterOperator[]).flat();
+
+const onOperatorChange = (operator: string): void => {
+	emit('operatorChanged', operator);
+};
+</script>
+
+<template>
+	<div data-test-id="operator-select">
+		<n8n-select :modelValue="selected" @update:modelValue="onOperatorChange">
+			<n8n-option
+				v-for="operator in operators"
+				:key="operator.id"
+				:value="operator.id"
+				:label="i18n.baseText(operator.name)"
+			>
+			</n8n-option>
+		</n8n-select>
+	</div>
+</template>
+
+<style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/Filter/constants.ts b/packages/editor-ui/src/components/Filter/constants.ts
new file mode 100644
index 0000000000000..b9bd8e154729f
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/constants.ts
@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { FilterOperator, FilterOperatorGroup } from './types';
+
+export const DEFAULT_MAX_CONDITIONS = 5;
+
+export const OPERATORS_BY_ID = {
+	'any:exists': { id: 'any:exists', name: 'filter.operator.exists', singleValue: true },
+	'any:notExists': { id: 'any:notExists', name: 'filter.operator.notExists', singleValue: true },
+	'string:equals': { id: 'string:equals', name: 'filter.operator.equals' },
+	'string:notEquals': { id: 'string:notEquals', name: 'filter.operator.notEquals' },
+	'string:contains': { id: 'string:contains', name: 'filter.operator.contains' },
+	'string:notContains': { id: 'string:notContains', name: 'filter.operator.notContains' },
+	'string:startsWith': { id: 'string:startsWith', name: 'filter.operator.startsWith' },
+	'string:notStartsWith': { id: 'string:notStartsWith', name: 'filter.operator.notStartsWith' },
+	'string:endsWith': { id: 'string:endsWith', name: 'filter.operator.endsWith' },
+	'string:notEndsWith': { id: 'string:notEndsWith', name: 'filter.operator.notEndsWith' },
+	'string:regex': { id: 'string:regex', name: 'filter.operator.regex' },
+	'string:notRegex': { id: 'string:notRegex', name: 'filter.operator.notRegex' },
+	'number:equals': { id: 'number:equals', name: 'filter.operator.equals' },
+	'number:notEquals': { id: 'number:notEquals', name: 'filter.operator.notEquals' },
+	'number:gt': { id: 'number:gt', name: 'filter.operator.gt' },
+	'number:lt': { id: 'number:lt', name: 'filter.operator.lt' },
+	'number:gte': { id: 'number:gte', name: 'filter.operator.gte' },
+	'number:lte': { id: 'number:lte', name: 'filter.operator.lte' },
+	'date:equals': { id: 'date:equals', name: 'filter.operator.equals' },
+	'date:notEquals': { id: 'date:notEquals', name: 'filter.operator.notEquals' },
+	'date:after': { id: 'date:after', name: 'filter.operator.after' },
+	'date:before': { id: 'date:before', name: 'filter.operator.before' },
+	'date:afterOrEquals': { id: 'date:afterOrEquals', name: 'filter.operator.afterOrEquals' },
+	'date:beforeOrEquals': { id: 'date:beforeOrEquals', name: 'filter.operator.beforeOrEquals' },
+	'boolean:true': { id: 'boolean:true', name: 'filter.operator.true', singleValue: true },
+	'boolean:false': { id: 'boolean:false', name: 'filter.operator.false', singleValue: true },
+	'boolean:equals': { id: 'boolean:equals', name: 'filter.operator.equals' },
+	'boolean:notEquals': { id: 'boolean:notEquals', name: 'filter.operator.notEquals' },
+	'array:contains': { id: 'array:contains', name: 'filter.operator.contains' },
+	'array:notContains': { id: 'array:notContains', name: 'filter.operator.notContains' },
+	'array:lengthEquals': { id: 'array:lengthEquals', name: 'filter.operator.lengthEquals' },
+	'array:lengthNotEquals': { id: 'array:lengthNotEquals', name: 'filter.operator.lengthNotEquals' },
+	'array:lengthGt': { id: 'array:lengthGt', name: 'filter.operator.lengthGt' },
+	'array:lengthLt': { id: 'array:lengthLt', name: 'filter.operator.lengthLt' },
+	'array:lengthGte': { id: 'array:lengthGte', name: 'filter.operator.lengthGte' },
+	'array:lengthLte': { id: 'array:lengthLte', name: 'filter.operator.lengthLte' },
+	'object:empty': { id: 'object:empty', name: 'filter.operator.empty', singleValue: true },
+	'object:notEmpty': { id: 'object:notEmpty', name: 'filter.operator.notEmpty', singleValue: true },
+} as const satisfies Record<string, FilterOperator>;
+
+export const OPERATORS = Object.values(OPERATORS_BY_ID);
+
+export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
+
+export const DEFAULT_OPERATOR: FilterOperatorId = 'any:exists';
+
+export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
+	{
+		name: 'filter.operatorGroup.basic',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('any')),
+	},
+	{
+		name: 'filter.operatorGroup.string',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('string')),
+	},
+	{
+		name: 'filter.operatorGroup.number',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('number')),
+	},
+	{
+		name: 'filter.operatorGroup.date',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('date')),
+	},
+	{
+		name: 'filter.operatorGroup.boolean',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('boolean')),
+	},
+	{
+		name: 'filter.operatorGroup.array',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('array')),
+	},
+	{
+		name: 'filter.operatorGroup.object',
+		children: OPERATORS.filter((operator) => operator.id.startsWith('object')),
+	},
+];
diff --git a/packages/editor-ui/src/components/Filter/types.ts b/packages/editor-ui/src/components/Filter/types.ts
new file mode 100644
index 0000000000000..848780d10056a
--- /dev/null
+++ b/packages/editor-ui/src/components/Filter/types.ts
@@ -0,0 +1,21 @@
+import type { BaseTextKey } from '@/plugins/i18n';
+export type OperatorSubjectType =
+	| 'string'
+	| 'number'
+	| 'boolean'
+	| 'array'
+	| 'object'
+	| 'date'
+	| 'other'
+	| 'any';
+
+export interface FilterOperator {
+	id: `${OperatorSubjectType}:${string}`;
+	name: BaseTextKey;
+	singleValue?: boolean; // default = false
+}
+
+export interface FilterOperatorGroup {
+	name: BaseTextKey;
+	children: Array<FilterOperator | FilterOperatorGroup>;
+}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 3d4739bd728a2..12aeb1fff63be 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2197,5 +2197,45 @@
 	"executionUsage.label.executions": "Executions",
 	"executionUsage.button.upgrade": "Upgrade plan",
 	"executionUsage.expired.text": "Your trial is over. Upgrade now to keep your data.",
-	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating."
+	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating.",
+	"filter.operatorGroup.basic": "Basic",
+	"filter.operatorGroup.string": "Text",
+	"filter.operatorGroup.number": "Numbers",
+	"filter.operatorGroup.date": "Dates",
+	"filter.operatorGroup.boolean": "Boolean",
+	"filter.operatorGroup.array": "Array",
+	"filter.operatorGroup.object": "Object",
+	"filter.operator.equals": "Equal to",
+	"filter.operator.notEquals": "Not equal to",
+	"filter.operator.contains": "Contains",
+	"filter.operator.notContains": "Does not contain",
+	"filter.operator.startsWith": "Starts with",
+	"filter.operator.notStartsWith": "Does not start with",
+	"filter.operator.endsWith": "Ends with",
+	"filter.operator.notEndsWith": "Does not end with",
+	"filter.operator.exists": "Exists",
+	"filter.operator.notExists": "Does not exist",
+	"filter.operator.regex": "Matches pattern",
+	"filter.operator.notRegex": "Does not match pattern",
+	"filter.operator.gt": "Greater than",
+	"filter.operator.lt": "Less than",
+	"filter.operator.gte": "Greater than or equal",
+	"filter.operator.lte": "Less than or equal",
+	"filter.operator.after": "Is after",
+	"filter.operator.before": "Is before",
+	"filter.operator.afterOrEquals": "Is after or equal",
+	"filter.operator.beforeOrEquals": "Is before or equal",
+	"filter.operator.true": "True",
+	"filter.operator.false": "False",
+	"filter.operator.lengthEquals": "Length equal to",
+	"filter.operator.lengthNotEquals": "Length not equal to",
+	"filter.operator.lengthGt": "Length greater than",
+	"filter.operator.lengthLt": "Length less than",
+	"filter.operator.lengthGte": "Length greater than or equal",
+	"filter.operator.lengthLte": "Length less than or equal",
+	"filter.operator.empty": "Empty",
+	"filter.operator.notEmpty": "Not empty",
+	"filter.combinator.or": "Or",
+	"filter.combinator.and": "And",
+	"filter.addCondition": "Add condition"
 }
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index 595b4b65f24b7..1873441be6b87 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -2,23 +2,23 @@
 
 import type * as express from 'express';
 import type FormData from 'form-data';
+import type { PathLike } from 'fs';
 import type { IncomingHttpHeaders } from 'http';
-import type { Readable } from 'stream';
-import type { URLSearchParams } from 'url';
 import type { OptionsWithUri, OptionsWithUrl } from 'request';
 import type { RequestPromiseOptions } from 'request-promise-native';
-import type { PathLike } from 'fs';
+import type { Readable } from 'stream';
+import type { URLSearchParams } from 'url';
 
+import type { AuthenticationMethod } from './Authentication';
 import type { CODE_EXECUTION_MODES, CODE_LANGUAGES } from './Constants';
 import type { IDeferredPromise } from './DeferredPromise';
+import type { ExecutionStatus } from './ExecutionStatus';
+import type { ExpressionError } from './ExpressionError';
+import type { NodeApiError, NodeOperationError } from './NodeErrors';
 import type { Workflow } from './Workflow';
-import type { WorkflowHooks } from './WorkflowHooks';
 import type { WorkflowActivationError } from './WorkflowActivationError';
 import type { WorkflowOperationError } from './WorkflowErrors';
-import type { NodeApiError, NodeOperationError } from './NodeErrors';
-import type { ExpressionError } from './ExpressionError';
-import type { ExecutionStatus } from './ExecutionStatus';
-import type { AuthenticationMethod } from './Authentication';
+import type { WorkflowHooks } from './WorkflowHooks';
 
 export interface IAdditionalCredentialOptions {
 	oauth2?: IOAuth2Options;
@@ -1047,7 +1047,8 @@ export type NodePropertyTypes =
 	| 'credentialsSelect'
 	| 'resourceLocator'
 	| 'curlImport'
-	| 'resourceMapper';
+	| 'resourceMapper'
+	| 'filter';
 
 export type CodeAutocompleteTypes = 'function' | 'functionItem';
 
@@ -1093,6 +1094,7 @@ export interface INodePropertyTypeOptions {
 	sortable?: boolean; // Supported when "multipleValues" set to true
 	expirable?: boolean; // Supported by: hidden (only in the credentials)
 	resourceMapper?: ResourceMapperTypeOptions;
+	filter?: FilterTypeOptions;
 	[key: string]: any;
 }
 
@@ -1112,6 +1114,17 @@ export interface ResourceMapperTypeOptions {
 	};
 }
 
+type NonEmptyArray<T> = [T, ...T[]];
+
+export type FilterTypeCombinator = 'and' | 'or';
+
+export interface FilterTypeOptions {
+	caseSensitive?: boolean; // default = false
+	leftValue?: string; // when set, user can't edit left side of condition
+	allowedCombinators?: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
+	maxConditions?: number; // default = 5
+}
+
 export interface IDisplayOptions {
 	hide?: {
 		[key: string]: NodeParameterValue[] | undefined;
@@ -2174,6 +2187,19 @@ export type ResourceMapperValue = {
 	matchingColumns: string[];
 	schema: ResourceMapperField[];
 };
+
+export type FilterConditionValue = {
+	leftValue: string;
+	rightValue: string;
+	operator: string;
+};
+
+export type FilterValue = {
+	value: boolean;
+	conditions: FilterConditionValue[];
+	combinator: FilterTypeCombinator;
+};
+
 export interface ExecutionOptions {
 	limit?: number;
 }

From edadc73e93e596eac13bb128762867ca7554c8f4 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 23 Oct 2023 10:10:48 +0200
Subject: [PATCH 02/39] Filter component UI

---
 .../components/N8nInputLabel/InputLabel.vue   |  17 +-
 .../design-system/src/css/common/var.scss     |  21 +
 packages/design-system/src/css/input.scss     |  10 +
 .../src/components/Filter/Condition.vue       |  96 +++-
 .../src/components/Filter/Filter.vue          |  91 +++-
 .../src/components/Filter/OperatorSelect.vue  |  54 +-
 .../src/components/Filter/constants.ts        |  13 +
 .../editor-ui/src/components/Filter/types.ts  |   4 +-
 .../src/components/ParameterInputFull.vue     |   6 +-
 .../src/components/ParameterInputList.vue     |   9 +
 .../src/components/ParameterInputWrapper.vue  |  51 +-
 .../src/plugins/i18n/locales/en.json          |  46 +-
 packages/nodes-base/nodes/If/If.node.ts       | 502 +-----------------
 packages/nodes-base/nodes/If/V1/IfV1.node.ts  | 486 +++++++++++++++++
 packages/nodes-base/nodes/If/V2/IfV2.node.ts  |  41 ++
 15 files changed, 865 insertions(+), 582 deletions(-)
 create mode 100644 packages/nodes-base/nodes/If/V1/IfV1.node.ts
 create mode 100644 packages/nodes-base/nodes/If/V2/IfV2.node.ts

diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index f029f16722a9f..11278557c3364 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -190,21 +190,20 @@ export default defineComponent({
 	opacity: 1;
 }
 
-.heading {
-	display: flex;
-}
-
 .overflow {
 	overflow-x: hidden;
 	overflow-y: clip;
 }
 
-.small {
-	margin-bottom: var(--spacing-5xs);
-}
+.heading {
+	display: flex;
 
-.medium {
-	margin-bottom: var(--spacing-2xs);
+	&.small {
+		margin-bottom: var(--spacing-5xs);
+	}
+	&.medium {
+		margin-bottom: var(--spacing-2xs);
+	}
 }
 
 .underline {
diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index 24ea1e8cad5b1..1a3d015d354ca 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@@ -530,6 +530,10 @@ $input-border-color: var(--input-border-color, var(--border-color-base));
 $input-border-style: var(--input-border-style, var(--border-style-base));
 $input-border-width: var(--border-width-base);
 $input-border: $input-border-color $input-border-style $input-border-width;
+$input-border-right-color: var(
+	--input-border-right-color,
+	var(--input-border-color, var(--border-color-base))
+);
 
 $input-font-size: var(--input-font-size, var(--font-size-s));
 /// color||Color|0
@@ -540,6 +544,23 @@ $input-width: 140px;
 $input-height: 40px;
 /// borderRadius||Border|2
 $input-border-radius: var(--input-border-radius, var(--border-radius-base));
+$input-border-top-left-radius: var(
+	--input-border-top-left-radius,
+	var(--input-border-radius, var(--border-radius-base))
+);
+$input-border-top-right-radius: var(
+	--input-border-top-right-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-bottom-left-radius: var(
+	--input-border-bottom-left-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-bottom-right-radius: var(
+	--input-border-bottom-right-radius,
+	var(--input-border-radius, var(--border-radius-base)),
+);
+$input-border-radius: var(--input-border-radius, var(--border-radius-base));
 $input-border-color-hover: $border-color-hover;
 /// color||Color|0
 $input-background-color: var(--input-background-color, var(--color-foreground-xlight));
diff --git a/packages/design-system/src/css/input.scss b/packages/design-system/src/css/input.scss
index cab4d87b28690..f008565939359 100644
--- a/packages/design-system/src/css/input.scss
+++ b/packages/design-system/src/css/input.scss
@@ -20,6 +20,11 @@
 		background-color: var.$input-background-color;
 		background-image: none;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+
 		transition: var.$border-transition-base;
 
 		&,
@@ -108,7 +113,12 @@
 		background-color: var.$input-background-color;
 		background-image: none;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
 		border: var.$input-border;
+		border-right-color: var.$input-border-right-color;
 		box-sizing: border-box;
 		color: var.$input-font-color;
 		display: inline-block;
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/Filter/Condition.vue
index 241546b70cc9b..752960702f51b 100644
--- a/packages/editor-ui/src/components/Filter/Condition.vue
+++ b/packages/editor-ui/src/components/Filter/Condition.vue
@@ -1,63 +1,73 @@
 <script setup lang="ts">
-import type { INodeProperties } from 'n8n-workflow';
-import { reactive } from 'vue';
-import { type FilterOperatorId, OPERATORS_BY_ID } from './constants';
+import type { FilterConditionValue, INodeProperties } from 'n8n-workflow';
+import { computed } from 'vue';
+import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
 import type { FilterOperator } from './types';
+import OperatorSelect from './OperatorSelect.vue';
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import type { IUpdateInformation } from '@/Interface';
 
 interface Props {
 	path: string;
 	fixedLeftValue: boolean;
-	initialLeftValue: string;
-	initialRightValue: string;
-	initialOperator: FilterOperatorId;
+	condition: FilterConditionValue;
 }
 
 const props = defineProps<Props>();
 
-const state = reactive({
-	operator: OPERATORS_BY_ID[props.initialOperator] as FilterOperator,
-	leftValue: props.initialLeftValue,
-	rightValue: props.initialRightValue,
-});
-
 const emit = defineEmits<{
 	(event: 'operatorChanged', value: string): void;
 	(event: 'leftValueChanged', value: string): void;
 	(event: 'rightValueChanged', value: string): void;
 }>();
 
+const operator = computed<FilterOperator>(
+	() => OPERATORS_BY_ID[props.condition.operator as FilterOperatorId],
+);
+
 const parameter: INodeProperties = { name: '', displayName: '', default: '', type: 'string' };
 
-const onOperatorChange = (operator: FilterOperator): void => {
-	state.operator = operator;
-	emit('operatorChanged', operator.id);
+const onOperatorChange = (value: string): void => {
+	emit('operatorChanged', value);
 };
 
-const onLeftValueChange = (value: string): void => {
-	emit('leftValueChanged', value);
+const onLeftValueChange = (update: IUpdateInformation): void => {
+	emit('leftValueChanged', update.value);
 };
 
-const onRightValueChange = (value: string): void => {
-	emit('rightValueChanged', value);
+const onRightValueChange = (update: IUpdateInformation): void => {
+	emit('rightValueChanged', update.value);
 };
 </script>
 
 <template>
-	<div class="$style.condition" data-test-id="condition">
+	<div
+		:class="{ [$style.condition]: true, [$style.hideRightInput]: operator.singleValue }"
+		data-test-id="condition"
+	>
 		<parameter-input-full
 			v-if="!fixedLeftValue"
+			:displayOptions="true"
 			:parameter="parameter"
-			:value="state.leftValue"
+			:value="condition.leftValue"
 			:path="`${path}.left`"
+			:class="[$style.input, $style.inputLeft]"
 			:hideLabel="true"
 			@update="onLeftValueChange"
 		/>
-		<operator-select @operatorChanged="onOperatorChange"></operator-select>
+		<operator-select
+			:class="$style.select"
+			:selected="condition.operator"
+			@operatorChanged="onOperatorChange"
+		></operator-select>
 		<parameter-input-full
-			v-if="!state.operator.singleValue"
+			v-if="!operator.singleValue"
+			displayOptions
+			optionsPosition="bottom"
 			:parameter="parameter"
-			:value="state.rightValue"
+			:value="condition.rightValue"
 			:path="`${path}.right`"
+			:class="[$style.input, $style.inputRight]"
 			:hideLabel="true"
 			@update="onRightValueChange"
 		/>
@@ -66,6 +76,44 @@ const onRightValueChange = (value: string): void => {
 
 <style lang="scss" module>
 .condition {
+	--condition-select-width: 160px;
+	--condition-input-width: 160px;
+	container: condition / inline-size;
 	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+}
+
+.select {
+	flex-basis: var(--condition-select-width);
+	flex-shrink: 0;
+	flex-grow: 1;
+	--input-border-radius: 0;
+	--input-border-right-color: transparent;
+}
+
+.hideRightInput .select {
+	--input-border-top-right-radius: var(--border-radius-base);
+	--input-border-bottom-right-radius: var(--border-radius-base);
+	--input-border-right-color: var(--input-border-color-base);
+}
+
+.input {
+	flex-grow: 10;
+	flex-basis: var(--condition-input-width);
+}
+
+.inputLeft {
+	--input-border-top-right-radius: 0;
+	--input-border-bottom-right-radius: 0;
+	--input-border-right-color: transparent;
+}
+
+.inputRight {
+	--input-border-top-left-radius: 0;
+	--input-border-bottom-left-radius: 0;
+}
+
+@container condition (min-width: 700px) {
 }
 </style>
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/Filter/Filter.vue
index 0b35e77c67333..cf7bb865049ad 100644
--- a/packages/editor-ui/src/components/Filter/Filter.vue
+++ b/packages/editor-ui/src/components/Filter/Filter.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import type { FilterConditionValue, FilterValue, INodeProperties } from 'n8n-workflow';
-import { reactive } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { DEFAULT_MAX_CONDITIONS, DEFAULT_OPERATOR } from './constants';
 import { useI18n } from '@/composables';
+import Condition from './Condition.vue';
 
 interface Props {
 	parameter: INodeProperties;
 	value: FilterValue;
+	path: string;
 }
 
 const props = defineProps<Props>();
 
-const state = reactive({ paramValue: props.value });
-
-const maxConditions = props.parameter.typeOptions?.filter?.maxConditions ?? DEFAULT_MAX_CONDITIONS;
-const maxConditionsReached = maxConditions <= state.paramValue.conditions.length;
-
 const emit = defineEmits<{
 	(event: 'valueChanged', value: FilterValue): void;
 }>();
@@ -24,15 +21,55 @@ function createCondition(): FilterConditionValue {
 	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR };
 }
 
+const allowedCombinators = computed(
+	() => props.parameter.typeOptions?.filter?.allowedCombinators ?? ['and', 'or'],
+);
+
+const state = reactive<{ paramValue: FilterValue }>({
+	paramValue: {
+		conditions: props.value.conditions ?? [createCondition()],
+		combinator: props.value.combinator ?? allowedCombinators.value[0],
+		value: props.value.value,
+	},
+});
+
+const maxConditions = computed(
+	() => props.parameter.typeOptions?.filter?.maxConditions ?? DEFAULT_MAX_CONDITIONS,
+);
+const maxConditionsReached = computed(
+	() => maxConditions.value <= state.paramValue.conditions.length,
+);
+
+watch(
+	() => state.paramValue,
+	(value) => emit('valueChanged', value),
+);
+
 function addCondition(): void {
 	state.paramValue.conditions.push(createCondition());
 }
 
+function onOperatorChanged(index: number, value: string): void {
+	state.paramValue.conditions[index].operator = value;
+}
+
+function onLeftValueChanged(index: number, value: string): void {
+	state.paramValue.conditions[index].leftValue = value;
+}
+
+function onRightValueChanged(index: number, value: string): void {
+	state.paramValue.conditions[index].rightValue = value;
+}
+
+function onCombinatorChange(combinator: FilterTypeCombinator): void {
+	state.paramValue.combinator = combinator;
+}
+
 const i18n = useI18n();
 </script>
 
 <template>
-	<div data-test-id="filter">
+	<div :class="$style.filter" data-test-id="filter">
 		<n8n-input-label
 			:label="parameter.displayName"
 			:underline="true"
@@ -41,17 +78,49 @@ const i18n = useI18n();
 			color="text-dark"
 		>
 		</n8n-input-label>
-		<div>
-			<condition v-for="condition of state.paramValue.conditions" :key="condition.id"></condition>
+		<div :class="$style.conditions">
+			<div v-for="(condition, index) of state.paramValue.conditions" :key="index">
+				<condition
+					:condition="condition"
+					:fixed-left-value="!!parameter.typeOptions?.filter?.leftValue"
+					:path="path"
+					@operator-changed="(value) => onOperatorChanged(index, value)"
+					@left-value-changed="(value) => onLeftValueChanged(index, value)"
+					@right-value-changed="(value) => onRightValueChanged(index, value)"
+				></condition>
+
+				<combinator-select
+					:options="allowedCombinators"
+					:selected="state.paramValue.combinator"
+					@combinator-change="onCombinatorChange"
+				/>
+			</div>
 		</div>
 		<n8n-button
 			type="tertiary"
 			block
 			@click="addCondition"
+			:class="$style.addCondition"
 			:label="i18n.baseText('filter.addCondition')"
-			:disabled=""
+			:disabled="maxConditionsReached"
 		/>
 	</div>
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.filter {
+	display: flex;
+	flex-direction: column;
+	margin-top: var(--spacing-4xs);
+}
+
+.conditions {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4xs);
+}
+
+.addCondition {
+	margin-top: var(--spacing-2xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
index cf38d80d76ccf..b941b8ad0dcd3 100644
--- a/packages/editor-ui/src/components/Filter/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -1,40 +1,66 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables';
-import type { FilterTypeCombinator } from 'n8n-workflow';
-import { FilterOperator, OPERATORS } from './constants';
+import { OPERATOR_GROUPS } from './constants';
+import { reactive, computed } from 'vue';
 
 interface Props {
 	selected: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
+const state = reactive({ selected: props.selected });
 const emit = defineEmits<{
 	(event: 'operatorChanged', value: string): void;
 }>();
 
 const i18n = useI18n();
 
-// TODO: Make select nested
-const operators = OPERATORS.map((group) => group.children as FilterOperator[]).flat();
+const groups = OPERATOR_GROUPS;
 
 const onOperatorChange = (operator: string): void => {
+	state.selected = operator;
 	emit('operatorChanged', operator);
 };
+
+const selectedGroupIcon = computed(
+	() => groups.find((group) => group.id === state.selected.split(':')[0])?.icon,
+);
 </script>
 
 <template>
 	<div data-test-id="operator-select">
-		<n8n-select :modelValue="selected" @update:modelValue="onOperatorChange">
-			<n8n-option
-				v-for="operator in operators"
-				:key="operator.id"
-				:value="operator.id"
-				:label="i18n.baseText(operator.name)"
-			>
-			</n8n-option>
+		<n8n-select size="small" :modelValue="state.selected" @update:modelValue="onOperatorChange">
+			<template v-if="selectedGroupIcon" #prefix>
+				<n8n-icon :icon="selectedGroupIcon" />
+			</template>
+			<div :class="$style.group" :key="group.name" v-for="group of groups">
+				<div :class="$style.groupTitle">
+					<n8n-icon :icon="group.icon" />
+					<span>{{ i18n.baseText(group.name) }}</span>
+				</div>
+				<n8n-option
+					v-for="operator in group.children"
+					:key="operator.id"
+					:value="operator.id"
+					:label="i18n.baseText(operator.name)"
+				/>
+			</div>
 		</n8n-select>
 	</div>
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.group {
+}
+
+.groupTitle {
+	display: flex;
+	gap: var(--spacing-4xs);
+	align-items: center;
+	font-size: var(--font-size-s);
+	font-weight: var(--font-weight-bold);
+	margin-top: var(--spacing-2xs);
+	padding: var(--spacing-2xs) var(--spacing-2xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/Filter/constants.ts b/packages/editor-ui/src/components/Filter/constants.ts
index b9bd8e154729f..f506cba1a1616 100644
--- a/packages/editor-ui/src/components/Filter/constants.ts
+++ b/packages/editor-ui/src/components/Filter/constants.ts
@@ -52,31 +52,44 @@ export const DEFAULT_OPERATOR: FilterOperatorId = 'any:exists';
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{
+		id: 'any',
 		name: 'filter.operatorGroup.basic',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('any')),
 	},
 	{
+		id: 'string',
 		name: 'filter.operatorGroup.string',
+		icon: 'font',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('string')),
 	},
 	{
+		id: 'number',
 		name: 'filter.operatorGroup.number',
+		icon: 'hashtag',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('number')),
 	},
 	{
+		id: 'date',
 		name: 'filter.operatorGroup.date',
+		icon: 'calendar',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('date')),
 	},
 	{
+		id: 'boolean',
 		name: 'filter.operatorGroup.boolean',
+		icon: 'check-square',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('boolean')),
 	},
 	{
+		id: 'array',
 		name: 'filter.operatorGroup.array',
+		icon: 'list',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('array')),
 	},
 	{
+		id: 'object',
 		name: 'filter.operatorGroup.object',
+		icon: 'cube',
 		children: OPERATORS.filter((operator) => operator.id.startsWith('object')),
 	},
 ];
diff --git a/packages/editor-ui/src/components/Filter/types.ts b/packages/editor-ui/src/components/Filter/types.ts
index 848780d10056a..f1846e0fa9bce 100644
--- a/packages/editor-ui/src/components/Filter/types.ts
+++ b/packages/editor-ui/src/components/Filter/types.ts
@@ -16,6 +16,8 @@ export interface FilterOperator {
 }
 
 export interface FilterOperatorGroup {
+	id: string;
 	name: BaseTextKey;
-	children: Array<FilterOperator | FilterOperatorGroup>;
+	icon?: string;
+	children: FilterOperator[];
 }
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 85ad5b9408a2e..88cbe4ad386e7 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -8,7 +8,7 @@
 		:size="label.size"
 		color="text-dark"
 	>
-		<template #options>
+		<template v-if="optionsPosition === 'top'" #options>
 			<parameter-options
 				v-if="displayOptions"
 				:parameter="parameter"
@@ -132,6 +132,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		optionsPosition: {
+			type: String as PropType<'bottom' | 'top'>,
+			default: 'top',
+		},
 		isReadOnly: {
 			type: Boolean,
 			default: false,
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index f537730fa84f8..9f53886ea3e11 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -102,6 +102,13 @@
 				labelSize="small"
 				@valueChanged="valueChanged"
 			/>
+			<Filter
+				v-else-if="parameter.type === 'filter'"
+				:parameter="parameter"
+				:value="getParameterValue(nodeValues, parameter.name, path)"
+				:path="getPath(parameter.name)"
+				@valueChanged="valueChanged"
+			/>
 			<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
 				<div
 					class="delete-option clickable"
@@ -155,6 +162,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ImportParameter from '@/components/ImportParameter.vue';
 import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue';
+import Filter from '@/components/Filter/Filter.vue';
 import { get, set } from 'lodash-es';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -177,6 +185,7 @@ export default defineComponent({
 		CollectionParameter,
 		ImportParameter,
 		ResourceMapper,
+		Filter,
 	},
 	props: {
 		nodeValues: {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 4318932e8f7de..64345c870521f 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,5 +1,8 @@
 <template>
-	<div data-test-id="parameter-input">
+	<div
+		:class="{ [$style.parameterInput]: true, [$style.hintTop]: hintPosition === 'top' }"
+		data-test-id="parameter-input"
+	>
 		<parameter-input
 			ref="param"
 			:inputSize="inputSize"
@@ -26,20 +29,20 @@
 			@textInput="onTextInput"
 			@update="onValueChanged"
 		/>
-		<input-hint
-			v-if="expressionOutput"
-			:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
-			data-test-id="parameter-expression-preview"
-			:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
-			:hint="expressionOutput"
-			:singleLine="true"
-		/>
-		<input-hint
-			v-else-if="parameterHint"
-			:class="$style.hint"
-			:renderHTML="true"
-			:hint="parameterHint"
-		/>
+		<div v-if="expressionOutput || parameterHint" :class="$style.hint">
+			<div>
+				<input-hint
+					v-if="expressionOutput"
+					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
+					data-test-id="parameter-expression-preview"
+					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
+					:hint="expressionOutput"
+					:singleLine="true"
+				/>
+				<input-hint v-else-if="parameterHint" :renderHTML="true" :hint="parameterHint" />
+			</div>
+			<slot v-if="$slots.options" name="options" />
+		</div>
 	</div>
 </template>
 
@@ -105,6 +108,11 @@ export default defineComponent({
 			type: String,
 			required: false,
 		},
+		hintPosition: {
+			type: String as PropType<'top' | 'bottom'>,
+			required: false,
+			default: 'bottom',
+		},
 		inputSize: {
 			type: String,
 		},
@@ -251,8 +259,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
+.parameterInput {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4xs);
+
+	&.hintTop {
+		flex-direction: column-reverse;
+	}
+}
+
 .hint {
-	margin-top: var(--spacing-4xs);
+	display: flex;
+	justify-content: space-between;
 }
 
 .hovering {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 17795cb9394f1..ed5b6a1fcc63e 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2216,29 +2216,29 @@
 	"filter.operatorGroup.boolean": "Boolean",
 	"filter.operatorGroup.array": "Array",
 	"filter.operatorGroup.object": "Object",
-	"filter.operator.equals": "Equal to",
-	"filter.operator.notEquals": "Not equal to",
-	"filter.operator.contains": "Contains",
-	"filter.operator.notContains": "Does not contain",
-	"filter.operator.startsWith": "Starts with",
-	"filter.operator.notStartsWith": "Does not start with",
-	"filter.operator.endsWith": "Ends with",
-	"filter.operator.notEndsWith": "Does not end with",
-	"filter.operator.exists": "Exists",
-	"filter.operator.notExists": "Does not exist",
-	"filter.operator.regex": "Matches pattern",
-	"filter.operator.notRegex": "Does not match pattern",
-	"filter.operator.gt": "Greater than",
-	"filter.operator.lt": "Less than",
-	"filter.operator.gte": "Greater than or equal",
-	"filter.operator.lte": "Less than or equal",
-	"filter.operator.after": "Is after",
-	"filter.operator.before": "Is before",
-	"filter.operator.afterOrEquals": "Is after or equal",
-	"filter.operator.beforeOrEquals": "Is before or equal",
-	"filter.operator.true": "True",
-	"filter.operator.false": "False",
-	"filter.operator.lengthEquals": "Length equal to",
+	"filter.operator.equals": "equal to",
+	"filter.operator.notEquals": "not equal to",
+	"filter.operator.contains": "contains",
+	"filter.operator.notContains": "does not contain",
+	"filter.operator.startsWith": "starts with",
+	"filter.operator.notStartsWith": "does not start with",
+	"filter.operator.endsWith": "ends with",
+	"filter.operator.notEndsWith": "does not end with",
+	"filter.operator.exists": "exists",
+	"filter.operator.notExists": "does not exist",
+	"filter.operator.regex": "matches pattern",
+	"filter.operator.notRegex": "does not match pattern",
+	"filter.operator.gt": "greater than",
+	"filter.operator.lt": "less than",
+	"filter.operator.gte": "greater than or equal",
+	"filter.operator.lte": "less than or equal",
+	"filter.operator.after": "is after",
+	"filter.operator.before": "is before",
+	"filter.operator.afterOrEquals": "is after or equal",
+	"filter.operator.beforeOrEquals": "is before or equal",
+	"filter.operator.true": "is true",
+	"filter.operator.false": "is false",
+	"filter.operator.lengthEquals": "length equal to",
 	"filter.operator.lengthNotEquals": "Length not equal to",
 	"filter.operator.lengthGt": "Length greater than",
 	"filter.operator.lengthLt": "Length less than",
diff --git a/packages/nodes-base/nodes/If/If.node.ts b/packages/nodes-base/nodes/If/If.node.ts
index cc4c6a1a37f90..0e0f55f21f37e 100644
--- a/packages/nodes-base/nodes/If/If.node.ts
+++ b/packages/nodes-base/nodes/If/If.node.ts
@@ -1,489 +1,25 @@
-import moment from 'moment';
-import type {
-	IExecuteFunctions,
-	INodeExecutionData,
-	INodeParameters,
-	INodeType,
-	INodeTypeDescription,
-	NodeParameterValue,
-} from 'n8n-workflow';
-import { NodeOperationError } from 'n8n-workflow';
-
-export class If implements INodeType {
-	description: INodeTypeDescription = {
-		displayName: 'IF',
-		name: 'if',
-		icon: 'fa:map-signs',
-		group: ['transform'],
-		version: 1,
-		description: 'Route items to different branches (true/false)',
-		defaults: {
-			name: 'IF',
-			color: '#408000',
-		},
-		inputs: ['main'],
-		// eslint-disable-next-line n8n-nodes-base/node-class-description-outputs-wrong
-		outputs: ['main', 'main'],
-		outputNames: ['true', 'false'],
-		properties: [
-			{
-				displayName: 'Conditions',
-				name: 'conditions',
-				placeholder: 'Add Condition',
-				type: 'fixedCollection',
-				typeOptions: {
-					multipleValues: true,
-					sortable: true,
-				},
-				description: 'The type of values to compare',
-				default: {},
-				options: [
-					{
-						name: 'boolean',
-						displayName: 'Boolean',
-						values: [
-							{
-								displayName: 'Value 1',
-								name: 'value1',
-								type: 'boolean',
-								default: false,
-								// eslint-disable-next-line n8n-nodes-base/node-param-description-boolean-without-whether
-								description: 'The value to compare with the second one',
-							},
-							// eslint-disable-next-line n8n-nodes-base/node-param-operation-without-no-data-expression
-							{
-								displayName: 'Operation',
-								name: 'operation',
-								type: 'options',
-								options: [
-									{
-										name: 'Equal',
-										value: 'equal',
-									},
-									{
-										name: 'Not Equal',
-										value: 'notEqual',
-									},
-								],
-								default: 'equal',
-								description: 'Operation to decide where the the data should be mapped to',
-							},
-							{
-								displayName: 'Value 2',
-								name: 'value2',
-								type: 'boolean',
-								default: false,
-								// eslint-disable-next-line n8n-nodes-base/node-param-description-boolean-without-whether
-								description: 'The value to compare with the first one',
-							},
-						],
-					},
-					{
-						name: 'dateTime',
-						displayName: 'Date & Time',
-						values: [
-							{
-								displayName: 'Value 1',
-								name: 'value1',
-								type: 'dateTime',
-								default: '',
-								description: 'The value to compare with the second one',
-							},
-							// eslint-disable-next-line n8n-nodes-base/node-param-operation-without-no-data-expression
-							{
-								displayName: 'Operation',
-								name: 'operation',
-								type: 'options',
-								options: [
-									{
-										name: 'Occurred After',
-										value: 'after',
-									},
-									{
-										name: 'Occurred Before',
-										value: 'before',
-									},
-								],
-								default: 'after',
-								description: 'Operation to decide where the the data should be mapped to',
-							},
-							{
-								displayName: 'Value 2',
-								name: 'value2',
-								type: 'dateTime',
-								default: '',
-								description: 'The value to compare with the first one',
-							},
-						],
-					},
-					{
-						name: 'number',
-						displayName: 'Number',
-						values: [
-							{
-								displayName: 'Value 1',
-								name: 'value1',
-								type: 'number',
-								default: 0,
-								description: 'The value to compare with the second one',
-							},
-							{
-								displayName: 'Operation',
-								name: 'operation',
-								type: 'options',
-								noDataExpression: true,
-								// eslint-disable-next-line n8n-nodes-base/node-param-options-type-unsorted-items
-								options: [
-									{
-										name: 'Smaller',
-										value: 'smaller',
-									},
-									{
-										name: 'Smaller or Equal',
-										value: 'smallerEqual',
-									},
-									{
-										name: 'Equal',
-										value: 'equal',
-									},
-									{
-										name: 'Not Equal',
-										value: 'notEqual',
-									},
-									{
-										name: 'Larger',
-										value: 'larger',
-									},
-									{
-										name: 'Larger or Equal',
-										value: 'largerEqual',
-									},
-									{
-										name: 'Is Empty',
-										value: 'isEmpty',
-									},
-									{
-										name: 'Is Not Empty',
-										value: 'isNotEmpty',
-									},
-								],
-								default: 'smaller',
-								description: 'Operation to decide where the the data should be mapped to',
-							},
-							{
-								displayName: 'Value 2',
-								name: 'value2',
-								type: 'number',
-								displayOptions: {
-									hide: {
-										operation: ['isEmpty', 'isNotEmpty'],
-									},
-								},
-								default: 0,
-								description: 'The value to compare with the first one',
-							},
-						],
-					},
-					{
-						name: 'string',
-						displayName: 'String',
-						values: [
-							{
-								displayName: 'Value 1',
-								name: 'value1',
-								type: 'string',
-								default: '',
-								description: 'The value to compare with the second one',
-							},
-							{
-								displayName: 'Operation',
-								name: 'operation',
-								type: 'options',
-								noDataExpression: true,
-								// eslint-disable-next-line n8n-nodes-base/node-param-options-type-unsorted-items
-								options: [
-									{
-										name: 'Contains',
-										value: 'contains',
-									},
-									{
-										name: 'Not Contains',
-										value: 'notContains',
-									},
-									{
-										name: 'Ends With',
-										value: 'endsWith',
-									},
-									{
-										name: 'Not Ends With',
-										value: 'notEndsWith',
-									},
-									{
-										name: 'Equal',
-										value: 'equal',
-									},
-									{
-										name: 'Not Equal',
-										value: 'notEqual',
-									},
-									{
-										name: 'Regex Match',
-										value: 'regex',
-									},
-									{
-										name: 'Regex Not Match',
-										value: 'notRegex',
-									},
-									{
-										name: 'Starts With',
-										value: 'startsWith',
-									},
-									{
-										name: 'Not Starts With',
-										value: 'notStartsWith',
-									},
-									{
-										name: 'Is Empty',
-										value: 'isEmpty',
-									},
-									{
-										name: 'Is Not Empty',
-										value: 'isNotEmpty',
-									},
-								],
-								default: 'equal',
-								description: 'Operation to decide where the the data should be mapped to',
-							},
-							{
-								displayName: 'Value 2',
-								name: 'value2',
-								type: 'string',
-								displayOptions: {
-									hide: {
-										operation: ['isEmpty', 'isNotEmpty', 'regex', 'notRegex'],
-									},
-								},
-								default: '',
-								description: 'The value to compare with the first one',
-							},
-							{
-								displayName: 'Regex',
-								name: 'value2',
-								type: 'string',
-								displayOptions: {
-									show: {
-										operation: ['regex', 'notRegex'],
-									},
-								},
-								default: '',
-								placeholder: '/text/i',
-								description: 'The regex which has to match',
-							},
-						],
-					},
-				],
-			},
-			{
-				displayName: 'Combine',
-				name: 'combineOperation',
-				type: 'options',
-				options: [
-					{
-						name: 'ALL',
-						description: 'Only if all conditions are met it goes into "true" branch',
-						value: 'all',
-					},
-					{
-						name: 'ANY',
-						description: 'If any of the conditions is met it goes into "true" branch',
-						value: 'any',
-					},
-				],
-				default: 'all',
-				description:
-					'If multiple rules got set this settings decides if it is true as soon as ANY condition matches or only if ALL get meet',
-			},
-		],
-	};
-
-	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
-		const returnDataTrue: INodeExecutionData[] = [];
-		const returnDataFalse: INodeExecutionData[] = [];
-
-		const items = this.getInputData();
-
-		let item: INodeExecutionData;
-		let combineOperation: string;
-
-		const isDateObject = (value: NodeParameterValue) =>
-			Object.prototype.toString.call(value) === '[object Date]';
-		const isDateInvalid = (value: NodeParameterValue) => value?.toString() === 'Invalid Date';
-
-		// The compare operations
-		const compareOperationFunctions: {
-			[key: string]: (value1: NodeParameterValue, value2: NodeParameterValue) => boolean;
-		} = {
-			after: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) > (value2 || 0),
-			before: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) < (value2 || 0),
-			contains: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || '').toString().includes((value2 || '').toString()),
-			notContains: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				!(value1 || '').toString().includes((value2 || '').toString()),
-			endsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 as string).endsWith(value2 as string),
-			notEndsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				!(value1 as string).endsWith(value2 as string),
-			equal: (value1: NodeParameterValue, value2: NodeParameterValue) => value1 === value2,
-			notEqual: (value1: NodeParameterValue, value2: NodeParameterValue) => value1 !== value2,
-			larger: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) > (value2 || 0),
-			largerEqual: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) >= (value2 || 0),
-			smaller: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) < (value2 || 0),
-			smallerEqual: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 || 0) <= (value2 || 0),
-			startsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				(value1 as string).startsWith(value2 as string),
-			notStartsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
-				!(value1 as string).startsWith(value2 as string),
-			isEmpty: (value1: NodeParameterValue) =>
-				[undefined, null, '', NaN].includes(value1 as string) ||
-				(typeof value1 === 'object' && value1 !== null && !isDateObject(value1)
-					? Object.entries(value1 as string).length === 0
-					: false) ||
-				(isDateObject(value1) && isDateInvalid(value1)),
-			isNotEmpty: (value1: NodeParameterValue) =>
-				!(
-					[undefined, null, '', NaN].includes(value1 as string) ||
-					(typeof value1 === 'object' && value1 !== null && !isDateObject(value1)
-						? Object.entries(value1 as string).length === 0
-						: false) ||
-					(isDateObject(value1) && isDateInvalid(value1))
-				),
-			regex: (value1: NodeParameterValue, value2: NodeParameterValue) => {
-				const regexMatch = (value2 || '').toString().match(new RegExp('^/(.*?)/([gimusy]*)$'));
-
-				let regex: RegExp;
-				if (!regexMatch) {
-					regex = new RegExp((value2 || '').toString());
-				} else if (regexMatch.length === 1) {
-					regex = new RegExp(regexMatch[1]);
-				} else {
-					regex = new RegExp(regexMatch[1], regexMatch[2]);
-				}
-
-				return !!(value1 || '').toString().match(regex);
-			},
-			notRegex: (value1: NodeParameterValue, value2: NodeParameterValue) => {
-				const regexMatch = (value2 || '').toString().match(new RegExp('^/(.*?)/([gimusy]*)$'));
-
-				let regex: RegExp;
-				if (!regexMatch) {
-					regex = new RegExp((value2 || '').toString());
-				} else if (regexMatch.length === 1) {
-					regex = new RegExp(regexMatch[1]);
-				} else {
-					regex = new RegExp(regexMatch[1], regexMatch[2]);
-				}
-
-				return !(value1 || '').toString().match(regex);
-			},
+import type { INodeTypeBaseDescription, IVersionedNodeType } from 'n8n-workflow';
+import { VersionedNodeType } from 'n8n-workflow';
+
+import { IfV1 } from './V1/IfV1.node';
+import { IfV2 } from './V2/IfV2.node';
+
+export class If extends VersionedNodeType {
+	constructor() {
+		const baseDescription: INodeTypeBaseDescription = {
+			displayName: 'If',
+			name: 'if',
+			icon: 'fa:map-signs',
+			group: ['transform'],
+			description: 'Route items to different branches (true/false)',
+			defaultVersion: 2,
 		};
 
-		// Converts the input data of a dateTime into a number for easy compare
-		const convertDateTime = (value: NodeParameterValue): number => {
-			let returnValue: number | undefined = undefined;
-			if (typeof value === 'string') {
-				returnValue = new Date(value).getTime();
-			} else if (typeof value === 'number') {
-				returnValue = value;
-			}
-			if (moment.isMoment(value)) {
-				returnValue = value.unix();
-			}
-			if ((value as unknown as object) instanceof Date) {
-				returnValue = (value as unknown as Date).getTime();
-			}
-
-			if (returnValue === undefined || isNaN(returnValue)) {
-				throw new NodeOperationError(
-					this.getNode(),
-					`The value "${value}" is not a valid DateTime.`,
-				);
-			}
-
-			return returnValue;
+		const nodeVersions: IVersionedNodeType['nodeVersions'] = {
+			1: new IfV1(baseDescription),
+			2: new IfV2(baseDescription),
 		};
 
-		// The different dataTypes to check the values in
-		const dataTypes = ['boolean', 'dateTime', 'number', 'string'];
-
-		// Iterate over all items to check which ones should be output as via output "true" and
-		// which ones via output "false"
-		let dataType: string;
-		let compareOperationResult: boolean;
-		let value1: NodeParameterValue, value2: NodeParameterValue;
-		itemLoop: for (let itemIndex = 0; itemIndex < items.length; itemIndex++) {
-			item = items[itemIndex];
-
-			let compareData: INodeParameters;
-
-			combineOperation = this.getNodeParameter('combineOperation', itemIndex) as string;
-
-			// Check all the values of the different dataTypes
-			for (dataType of dataTypes) {
-				// Check all the values of the current dataType
-				for (compareData of this.getNodeParameter(
-					`conditions.${dataType}`,
-					itemIndex,
-					[],
-				) as INodeParameters[]) {
-					// Check if the values passes
-
-					value1 = compareData.value1 as NodeParameterValue;
-					value2 = compareData.value2 as NodeParameterValue;
-
-					if (dataType === 'dateTime') {
-						value1 = convertDateTime(value1);
-						value2 = convertDateTime(value2);
-					}
-
-					compareOperationResult = compareOperationFunctions[compareData.operation as string](
-						value1,
-						value2,
-					);
-
-					if (compareOperationResult && combineOperation === 'any') {
-						// If it passes and the operation is "any" we do not have to check any
-						// other ones as it should pass anyway. So go on with the next item.
-						returnDataTrue.push(item);
-						continue itemLoop;
-					} else if (!compareOperationResult && combineOperation === 'all') {
-						// If it fails and the operation is "all" we do not have to check any
-						// other ones as it should be not pass anyway. So go on with the next item.
-						returnDataFalse.push(item);
-						continue itemLoop;
-					}
-				}
-			}
-
-			if (item.pairedItem === undefined) {
-				item.pairedItem = [{ item: itemIndex }];
-			}
-
-			if (combineOperation === 'all') {
-				// If the operation is "all" it means the item did match all conditions
-				// so it passes.
-				returnDataTrue.push(item);
-			} else {
-				// If the operation is "any" it means the the item did not match any condition.
-				returnDataFalse.push(item);
-			}
-		}
-
-		return [returnDataTrue, returnDataFalse];
+		super(nodeVersions, baseDescription);
 	}
 }
diff --git a/packages/nodes-base/nodes/If/V1/IfV1.node.ts b/packages/nodes-base/nodes/If/V1/IfV1.node.ts
new file mode 100644
index 0000000000000..16118799d6fdf
--- /dev/null
+++ b/packages/nodes-base/nodes/If/V1/IfV1.node.ts
@@ -0,0 +1,486 @@
+import moment from 'moment';
+import type {
+	IExecuteFunctions,
+	INodeExecutionData,
+	INodeParameters,
+	INodeType,
+	INodeTypeBaseDescription,
+	INodeTypeDescription,
+	NodeParameterValue,
+} from 'n8n-workflow';
+import { NodeOperationError } from 'n8n-workflow';
+
+export class IfV1 implements INodeType {
+	description: INodeTypeDescription;
+
+	constructor(baseDescription: INodeTypeBaseDescription) {
+		this.description = {
+			...baseDescription,
+			version: 1,
+			defaults: {
+				name: 'If',
+				color: '#408000',
+			},
+			inputs: ['main'],
+			// eslint-disable-next-line n8n-nodes-base/node-class-description-outputs-wrong
+			outputs: ['main', 'main'],
+			outputNames: ['true', 'false'],
+			properties: [
+				{
+					displayName: 'Conditions',
+					name: 'conditions',
+					placeholder: 'Add Condition',
+					type: 'fixedCollection',
+					typeOptions: {
+						multipleValues: true,
+						sortable: true,
+					},
+					description: 'The type of values to compare',
+					default: {},
+					options: [
+						{
+							name: 'boolean',
+							displayName: 'Boolean',
+							values: [
+								{
+									displayName: 'Value 1',
+									name: 'value1',
+									type: 'boolean',
+									default: false,
+									// eslint-disable-next-line n8n-nodes-base/node-param-description-boolean-without-whether
+									description: 'The value to compare with the second one',
+								},
+								// eslint-disable-next-line n8n-nodes-base/node-param-operation-without-no-data-expression
+								{
+									displayName: 'Operation',
+									name: 'operation',
+									type: 'options',
+									options: [
+										{
+											name: 'Equal',
+											value: 'equal',
+										},
+										{
+											name: 'Not Equal',
+											value: 'notEqual',
+										},
+									],
+									default: 'equal',
+									description: 'Operation to decide where the the data should be mapped to',
+								},
+								{
+									displayName: 'Value 2',
+									name: 'value2',
+									type: 'boolean',
+									default: false,
+									// eslint-disable-next-line n8n-nodes-base/node-param-description-boolean-without-whether
+									description: 'The value to compare with the first one',
+								},
+							],
+						},
+						{
+							name: 'dateTime',
+							displayName: 'Date & Time',
+							values: [
+								{
+									displayName: 'Value 1',
+									name: 'value1',
+									type: 'dateTime',
+									default: '',
+									description: 'The value to compare with the second one',
+								},
+								// eslint-disable-next-line n8n-nodes-base/node-param-operation-without-no-data-expression
+								{
+									displayName: 'Operation',
+									name: 'operation',
+									type: 'options',
+									options: [
+										{
+											name: 'Occurred After',
+											value: 'after',
+										},
+										{
+											name: 'Occurred Before',
+											value: 'before',
+										},
+									],
+									default: 'after',
+									description: 'Operation to decide where the the data should be mapped to',
+								},
+								{
+									displayName: 'Value 2',
+									name: 'value2',
+									type: 'dateTime',
+									default: '',
+									description: 'The value to compare with the first one',
+								},
+							],
+						},
+						{
+							name: 'number',
+							displayName: 'Number',
+							values: [
+								{
+									displayName: 'Value 1',
+									name: 'value1',
+									type: 'number',
+									default: 0,
+									description: 'The value to compare with the second one',
+								},
+								{
+									displayName: 'Operation',
+									name: 'operation',
+									type: 'options',
+									noDataExpression: true,
+									// eslint-disable-next-line n8n-nodes-base/node-param-options-type-unsorted-items
+									options: [
+										{
+											name: 'Smaller',
+											value: 'smaller',
+										},
+										{
+											name: 'Smaller or Equal',
+											value: 'smallerEqual',
+										},
+										{
+											name: 'Equal',
+											value: 'equal',
+										},
+										{
+											name: 'Not Equal',
+											value: 'notEqual',
+										},
+										{
+											name: 'Larger',
+											value: 'larger',
+										},
+										{
+											name: 'Larger or Equal',
+											value: 'largerEqual',
+										},
+										{
+											name: 'Is Empty',
+											value: 'isEmpty',
+										},
+										{
+											name: 'Is Not Empty',
+											value: 'isNotEmpty',
+										},
+									],
+									default: 'smaller',
+									description: 'Operation to decide where the the data should be mapped to',
+								},
+								{
+									displayName: 'Value 2',
+									name: 'value2',
+									type: 'number',
+									displayOptions: {
+										hide: {
+											operation: ['isEmpty', 'isNotEmpty'],
+										},
+									},
+									default: 0,
+									description: 'The value to compare with the first one',
+								},
+							],
+						},
+						{
+							name: 'string',
+							displayName: 'String',
+							values: [
+								{
+									displayName: 'Value 1',
+									name: 'value1',
+									type: 'string',
+									default: '',
+									description: 'The value to compare with the second one',
+								},
+								{
+									displayName: 'Operation',
+									name: 'operation',
+									type: 'options',
+									noDataExpression: true,
+									// eslint-disable-next-line n8n-nodes-base/node-param-options-type-unsorted-items
+									options: [
+										{
+											name: 'Contains',
+											value: 'contains',
+										},
+										{
+											name: 'Not Contains',
+											value: 'notContains',
+										},
+										{
+											name: 'Ends With',
+											value: 'endsWith',
+										},
+										{
+											name: 'Not Ends With',
+											value: 'notEndsWith',
+										},
+										{
+											name: 'Equal',
+											value: 'equal',
+										},
+										{
+											name: 'Not Equal',
+											value: 'notEqual',
+										},
+										{
+											name: 'Regex Match',
+											value: 'regex',
+										},
+										{
+											name: 'Regex Not Match',
+											value: 'notRegex',
+										},
+										{
+											name: 'Starts With',
+											value: 'startsWith',
+										},
+										{
+											name: 'Not Starts With',
+											value: 'notStartsWith',
+										},
+										{
+											name: 'Is Empty',
+											value: 'isEmpty',
+										},
+										{
+											name: 'Is Not Empty',
+											value: 'isNotEmpty',
+										},
+									],
+									default: 'equal',
+									description: 'Operation to decide where the the data should be mapped to',
+								},
+								{
+									displayName: 'Value 2',
+									name: 'value2',
+									type: 'string',
+									displayOptions: {
+										hide: {
+											operation: ['isEmpty', 'isNotEmpty', 'regex', 'notRegex'],
+										},
+									},
+									default: '',
+									description: 'The value to compare with the first one',
+								},
+								{
+									displayName: 'Regex',
+									name: 'value2',
+									type: 'string',
+									displayOptions: {
+										show: {
+											operation: ['regex', 'notRegex'],
+										},
+									},
+									default: '',
+									placeholder: '/text/i',
+									description: 'The regex which has to match',
+								},
+							],
+						},
+					],
+				},
+				{
+					displayName: 'Combine',
+					name: 'combineOperation',
+					type: 'options',
+					options: [
+						{
+							name: 'ALL',
+							description: 'Only if all conditions are met it goes into "true" branch',
+							value: 'all',
+						},
+						{
+							name: 'ANY',
+							description: 'If any of the conditions is met it goes into "true" branch',
+							value: 'any',
+						},
+					],
+					default: 'all',
+					description:
+						'If multiple rules got set this settings decides if it is true as soon as ANY condition matches or only if ALL get meet',
+				},
+			],
+		};
+	}
+
+	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
+		const returnDataTrue: INodeExecutionData[] = [];
+		const returnDataFalse: INodeExecutionData[] = [];
+
+		const items = this.getInputData();
+
+		let item: INodeExecutionData;
+		let combineOperation: string;
+
+		const isDateObject = (value: NodeParameterValue) =>
+			Object.prototype.toString.call(value) === '[object Date]';
+		const isDateInvalid = (value: NodeParameterValue) => value?.toString() === 'Invalid Date';
+
+		// The compare operations
+		const compareOperationFunctions: {
+			[key: string]: (value1: NodeParameterValue, value2: NodeParameterValue) => boolean;
+		} = {
+			after: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) > (value2 || 0),
+			before: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) < (value2 || 0),
+			contains: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || '').toString().includes((value2 || '').toString()),
+			notContains: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				!(value1 || '').toString().includes((value2 || '').toString()),
+			endsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 as string).endsWith(value2 as string),
+			notEndsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				!(value1 as string).endsWith(value2 as string),
+			equal: (value1: NodeParameterValue, value2: NodeParameterValue) => value1 === value2,
+			notEqual: (value1: NodeParameterValue, value2: NodeParameterValue) => value1 !== value2,
+			larger: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) > (value2 || 0),
+			largerEqual: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) >= (value2 || 0),
+			smaller: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) < (value2 || 0),
+			smallerEqual: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 || 0) <= (value2 || 0),
+			startsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				(value1 as string).startsWith(value2 as string),
+			notStartsWith: (value1: NodeParameterValue, value2: NodeParameterValue) =>
+				!(value1 as string).startsWith(value2 as string),
+			isEmpty: (value1: NodeParameterValue) =>
+				[undefined, null, '', NaN].includes(value1 as string) ||
+				(typeof value1 === 'object' && value1 !== null && !isDateObject(value1)
+					? Object.entries(value1 as string).length === 0
+					: false) ||
+				(isDateObject(value1) && isDateInvalid(value1)),
+			isNotEmpty: (value1: NodeParameterValue) =>
+				!(
+					[undefined, null, '', NaN].includes(value1 as string) ||
+					(typeof value1 === 'object' && value1 !== null && !isDateObject(value1)
+						? Object.entries(value1 as string).length === 0
+						: false) ||
+					(isDateObject(value1) && isDateInvalid(value1))
+				),
+			regex: (value1: NodeParameterValue, value2: NodeParameterValue) => {
+				const regexMatch = (value2 || '').toString().match(new RegExp('^/(.*?)/([gimusy]*)$'));
+
+				let regex: RegExp;
+				if (!regexMatch) {
+					regex = new RegExp((value2 || '').toString());
+				} else if (regexMatch.length === 1) {
+					regex = new RegExp(regexMatch[1]);
+				} else {
+					regex = new RegExp(regexMatch[1], regexMatch[2]);
+				}
+
+				return !!(value1 || '').toString().match(regex);
+			},
+			notRegex: (value1: NodeParameterValue, value2: NodeParameterValue) => {
+				const regexMatch = (value2 || '').toString().match(new RegExp('^/(.*?)/([gimusy]*)$'));
+
+				let regex: RegExp;
+				if (!regexMatch) {
+					regex = new RegExp((value2 || '').toString());
+				} else if (regexMatch.length === 1) {
+					regex = new RegExp(regexMatch[1]);
+				} else {
+					regex = new RegExp(regexMatch[1], regexMatch[2]);
+				}
+
+				return !(value1 || '').toString().match(regex);
+			},
+		};
+
+		// Converts the input data of a dateTime into a number for easy compare
+		const convertDateTime = (value: NodeParameterValue): number => {
+			let returnValue: number | undefined = undefined;
+			if (typeof value === 'string') {
+				returnValue = new Date(value).getTime();
+			} else if (typeof value === 'number') {
+				returnValue = value;
+			}
+			if (moment.isMoment(value)) {
+				returnValue = value.unix();
+			}
+			if ((value as unknown as object) instanceof Date) {
+				returnValue = (value as unknown as Date).getTime();
+			}
+
+			if (returnValue === undefined || isNaN(returnValue)) {
+				throw new NodeOperationError(
+					this.getNode(),
+					`The value "${value}" is not a valid DateTime.`,
+				);
+			}
+
+			return returnValue;
+		};
+
+		// The different dataTypes to check the values in
+		const dataTypes = ['boolean', 'dateTime', 'number', 'string'];
+
+		// Iterate over all items to check which ones should be output as via output "true" and
+		// which ones via output "false"
+		let dataType: string;
+		let compareOperationResult: boolean;
+		let value1: NodeParameterValue, value2: NodeParameterValue;
+		itemLoop: for (let itemIndex = 0; itemIndex < items.length; itemIndex++) {
+			item = items[itemIndex];
+
+			let compareData: INodeParameters;
+
+			combineOperation = this.getNodeParameter('combineOperation', itemIndex) as string;
+
+			// Check all the values of the different dataTypes
+			for (dataType of dataTypes) {
+				// Check all the values of the current dataType
+				for (compareData of this.getNodeParameter(
+					`conditions.${dataType}`,
+					itemIndex,
+					[],
+				) as INodeParameters[]) {
+					// Check if the values passes
+
+					value1 = compareData.value1 as NodeParameterValue;
+					value2 = compareData.value2 as NodeParameterValue;
+
+					if (dataType === 'dateTime') {
+						value1 = convertDateTime(value1);
+						value2 = convertDateTime(value2);
+					}
+
+					compareOperationResult = compareOperationFunctions[compareData.operation as string](
+						value1,
+						value2,
+					);
+
+					if (compareOperationResult && combineOperation === 'any') {
+						// If it passes and the operation is "any" we do not have to check any
+						// other ones as it should pass anyway. So go on with the next item.
+						returnDataTrue.push(item);
+						continue itemLoop;
+					} else if (!compareOperationResult && combineOperation === 'all') {
+						// If it fails and the operation is "all" we do not have to check any
+						// other ones as it should be not pass anyway. So go on with the next item.
+						returnDataFalse.push(item);
+						continue itemLoop;
+					}
+				}
+			}
+
+			if (combineOperation === 'all') {
+				// If the operation is "all" it means the item did match all conditions
+				// so it passes.
+				returnDataTrue.push(item);
+			} else {
+				// If the operation is "any" it means the the item did not match any condition.
+				returnDataFalse.push(item);
+			}
+		}
+
+		return [returnDataTrue, returnDataFalse];
+	}
+}
diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
new file mode 100644
index 0000000000000..77c0dc01a192f
--- /dev/null
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -0,0 +1,41 @@
+import type {
+	IExecuteFunctions,
+	INodeExecutionData,
+	INodeType,
+	INodeTypeBaseDescription,
+	INodeTypeDescription,
+} from 'n8n-workflow';
+
+export class IfV2 implements INodeType {
+	description: INodeTypeDescription;
+
+	constructor(baseDescription: INodeTypeBaseDescription) {
+		this.description = {
+			...baseDescription,
+			version: 2,
+			defaults: {
+				name: 'If',
+				color: '#408000',
+			},
+			inputs: ['main'],
+			outputs: ['main', 'main'],
+			outputNames: ['then', 'else'],
+			properties: [
+				{
+					displayName: 'Conditions',
+					name: 'conditions',
+					placeholder: 'Add Condition',
+					type: 'filter',
+					default: {},
+				},
+			],
+		};
+	}
+
+	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
+		const returnDataTrue: INodeExecutionData[] = [];
+		const returnDataFalse: INodeExecutionData[] = [];
+
+		return [returnDataTrue, returnDataFalse];
+	}
+}

From 2a0833ca44970e5d4a6ff516a035d352f3cc2235 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 26 Oct 2023 11:49:43 +0200
Subject: [PATCH 03/39] Implement extractValue for filter component +  If node
 v2

---
 packages/core/src/ExtractValue.ts            | 270 ++++++++++++++++++-
 packages/core/src/NodeExecuteFunctions.ts    |   1 -
 packages/nodes-base/nodes/If/V2/IfV2.node.ts |  38 ++-
 packages/workflow/src/Interfaces.ts          |  17 +-
 packages/workflow/src/NodeHelpers.ts         |  64 ++++-
 packages/workflow/src/type-guards.ts         |   7 +
 6 files changed, 388 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index 749fa12ce8943..acaf667be5a7e 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -1,4 +1,7 @@
 import type {
+	FilterConditionValue,
+	FilterTypeOptions,
+	FilterValue,
 	INode,
 	INodeParameters,
 	INodeProperties,
@@ -7,7 +10,8 @@ import type {
 	INodeType,
 	NodeParameterValueType,
 } from 'n8n-workflow';
-import { NodeOperationError, NodeHelpers, LoggerProxy } from 'n8n-workflow';
+import { NodeOperationError, NodeHelpers, LoggerProxy, validateFieldType } from 'n8n-workflow';
+import type { DateTime } from 'luxon';
 
 function findPropertyFromParameterName(
 	parameterName: string,
@@ -118,6 +122,268 @@ function extractValueRLC(
 	return executeRegexExtractValue(value.value, regex, parameterName, property.displayName);
 }
 
+function executeFilterCondition(
+	condition: FilterConditionValue,
+	options?: FilterTypeOptions,
+): boolean {
+	switch (condition.operator.type) {
+		case 'any': {
+			const exists = condition.leftValue !== undefined && condition.leftValue !== null;
+
+			switch (condition.operator.operation) {
+				case 'exists':
+					return exists;
+				case 'notExists':
+					return !exists;
+			}
+
+			break;
+		}
+		case 'string': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+			const parsedRightValue = validateFieldType(
+				'filter',
+				condition.rightValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+				return false;
+			}
+
+			let leftValue = parsedLeftValue.newValue as string;
+			let rightValue = parsedRightValue.newValue as string;
+
+			if (options?.caseSensitive === false) {
+				leftValue = leftValue.toLocaleLowerCase();
+				rightValue = rightValue.toLocaleLowerCase();
+			}
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return leftValue === rightValue;
+				case 'notEquals':
+					return leftValue !== rightValue;
+				case 'contains':
+					return leftValue.includes(rightValue);
+				case 'notContains':
+					return !leftValue.includes(rightValue);
+				case 'startsWith':
+					return leftValue.startsWith(rightValue);
+				case 'notStartsWith':
+					return !leftValue.startsWith(rightValue);
+				case 'endsWith':
+					return leftValue.endsWith(rightValue);
+				case 'notEndsWith':
+					return !leftValue.endsWith(rightValue);
+				case 'notEndsWith':
+					return !leftValue.endsWith(rightValue);
+				case 'regex':
+					return new RegExp(rightValue).test(leftValue);
+				case 'notRegex':
+					return !new RegExp(rightValue).test(leftValue);
+			}
+
+			break;
+		}
+		case 'number': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+			const parsedRightValue = validateFieldType(
+				'filter',
+				condition.rightValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+				return false;
+			}
+
+			const leftValue = parsedLeftValue.newValue as number;
+			const rightValue = parsedRightValue.newValue as number;
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return leftValue === rightValue;
+				case 'notEquals':
+					return leftValue !== rightValue;
+				case 'gt':
+					return leftValue > rightValue;
+				case 'lt':
+					return leftValue < rightValue;
+				case 'gte':
+					return leftValue >= rightValue;
+				case 'lte':
+					return leftValue <= rightValue;
+			}
+		}
+		case 'dateTime': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+			const parsedRightValue = validateFieldType(
+				'filter',
+				condition.rightValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+				return false;
+			}
+
+			const leftValue = parsedLeftValue.newValue as DateTime;
+			const rightValue = parsedRightValue.newValue as DateTime;
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return leftValue.toMillis() === rightValue.toMillis();
+				case 'notEquals':
+					return leftValue.toMillis() !== rightValue.toMillis();
+				case 'after':
+					return leftValue.toMillis() > rightValue.toMillis();
+				case 'before':
+					return leftValue.toMillis() < rightValue.toMillis();
+				case 'afterOrEquals':
+					return leftValue.toMillis() >= rightValue.toMillis();
+				case 'beforeOrEquals':
+					return leftValue.toMillis() <= rightValue.toMillis();
+			}
+		}
+		case 'boolean': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+			const parsedRightValue = validateFieldType(
+				'filter',
+				condition.rightValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+				return false;
+			}
+
+			const leftValue = parsedLeftValue.newValue as boolean;
+			const rightValue = parsedRightValue.newValue as boolean;
+
+			switch (condition.operator.operation) {
+				case 'true':
+					return leftValue;
+				case 'false':
+					return !leftValue;
+				case 'equals':
+					return leftValue === rightValue;
+				case 'notEquals':
+					return leftValue !== rightValue;
+			}
+		}
+		case 'array': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+			const parsedRightValue = validateFieldType(
+				'filter',
+				condition.rightValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+				return false;
+			}
+
+			const leftValue = parsedLeftValue.newValue as unknown[];
+			const rightValue = parsedRightValue.newValue as unknown[];
+
+			switch (condition.operator.operation) {
+				case 'contains':
+					return rightValue.some((item) => leftValue.includes(item));
+				case 'notContains':
+					return !rightValue.some((item) => leftValue.includes(item));
+				case 'lengthEquals':
+					return leftValue.length === rightValue.length;
+				case 'lengthNotEquals':
+					return leftValue.length !== rightValue.length;
+				case 'lengthGt':
+					return leftValue.length > rightValue.length;
+				case 'lengthLt':
+					return leftValue.length < rightValue.length;
+				case 'lengthGte':
+					return leftValue.length >= rightValue.length;
+				case 'lengthLte':
+					return leftValue.length <= rightValue.length;
+			}
+		}
+		case 'object': {
+			const parsedLeftValue = validateFieldType(
+				'filter',
+				condition.leftValue,
+				condition.operator.type,
+			);
+
+			if (!parsedLeftValue.valid) {
+				return false;
+			}
+
+			const leftValue = parsedLeftValue.newValue as object;
+
+			switch (condition.operator.operation) {
+				case 'empty':
+					return Object.keys(leftValue).length === 0;
+				case 'notEmpty':
+					return Object.keys(leftValue).length !== 0;
+			}
+		}
+	}
+
+	LoggerProxy.error(
+		`Unknown filter parameter operator "${condition.operator.type}:${condition.operator.operation}"`,
+	);
+	return false;
+}
+
+function extractValueFilter(
+	value: NodeParameterValueType | object,
+	property: INodeProperties,
+	parameterName: string,
+): NodeParameterValueType | object {
+	if (typeof value !== 'object' || !value || !('conditions' in value)) {
+		return value;
+	}
+
+	if (property.extractValue?.type) {
+		throw new Error(
+			`Property "${parameterName}" has an invalid extractValue type. Filter parameters only support extractValue: true`,
+		);
+	}
+
+	const filterValue = value as FilterValue;
+
+	if (filterValue.combinator === 'and') {
+		return filterValue.conditions.every((condition) =>
+			executeFilterCondition(condition, property.typeOptions?.filter),
+		);
+	} else if (filterValue.combinator === 'or') {
+		return filterValue.conditions.some((condition) =>
+			executeFilterCondition(condition, property.typeOptions?.filter),
+		);
+	}
+
+	return false;
+}
+
 function extractValueOther(
 	value: NodeParameterValueType | object,
 	property: INodeProperties | INodePropertyCollection,
@@ -171,6 +437,8 @@ export function extractValue(
 
 		if (property.type === 'resourceLocator') {
 			return extractValueRLC(value, property, parameterName);
+		} else if (property.type === 'filter') {
+			return extractValueFilter(value, property, parameterName);
 		}
 		return extractValueOther(value, property, parameterName);
 	} catch (error) {
diff --git a/packages/core/src/NodeExecuteFunctions.ts b/packages/core/src/NodeExecuteFunctions.ts
index bee0190a07a81..8e4b18dd1cc2f 100644
--- a/packages/core/src/NodeExecuteFunctions.ts
+++ b/packages/core/src/NodeExecuteFunctions.ts
@@ -2263,7 +2263,6 @@ export function getNodeParameter(
 			{},
 			options?.contextNode?.name,
 		);
-		cleanupParameterData(returnData);
 	} catch (e) {
 		if (e instanceof ExpressionError && node.continueOnFail && node.type === 'n8n-nodes-base.set') {
 			// https://linear.app/n8n/issue/PAY-684
diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 77c0dc01a192f..150b6f4461320 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -27,15 +27,47 @@ export class IfV2 implements INodeType {
 					placeholder: 'Add Condition',
 					type: 'filter',
 					default: {},
+					typeOptions: {
+						filter: {
+							caseSensitive: '={{$parameter["caseSensitive"] ?? true}}',
+						},
+					},
+				},
+				{
+					displayName: 'Options',
+					name: 'options',
+					type: 'collection',
+					placeholder: 'Add Option',
+					default: {},
+					options: [
+						{
+							displayName: 'Case Sensitive',
+							name: 'caseSensitive',
+							type: 'boolean',
+							default: true,
+						},
+					],
 				},
 			],
 		};
 	}
 
 	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
-		const returnDataTrue: INodeExecutionData[] = [];
-		const returnDataFalse: INodeExecutionData[] = [];
+		const thenItems: INodeExecutionData[] = [];
+		const elseItems: INodeExecutionData[] = [];
+
+		this.getInputData().forEach((item, itemIndex) => {
+			const pass = this.getNodeParameter('conditions', itemIndex, false, {
+				extractValue: true,
+			});
+
+			if (pass) {
+				thenItems.push(item);
+			} else {
+				elseItems.push(item);
+			}
+		});
 
-		return [returnDataTrue, returnDataFalse];
+		return [thenItems, elseItems];
 	}
 }
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index c6503605e884d..d5c0721ab045e 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1119,7 +1119,7 @@ type NonEmptyArray<T> = [T, ...T[]];
 export type FilterTypeCombinator = 'and' | 'or';
 
 export interface FilterTypeOptions {
-	caseSensitive?: boolean; // default = false
+	caseSensitive?: boolean | string; // default = false
 	leftValue?: string; // when set, user can't edit left side of condition
 	allowedCombinators?: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
 	maxConditions?: number; // default = 5
@@ -2190,14 +2190,25 @@ export type ResourceMapperValue = {
 	schema: ResourceMapperField[];
 };
 
+export type FilterOperatorType =
+	| 'string'
+	| 'number'
+	| 'boolean'
+	| 'array'
+	| 'object'
+	| 'dateTime'
+	| 'any';
+
 export type FilterConditionValue = {
 	leftValue: string;
+	operator: {
+		type: FilterOperatorType;
+		operation: string;
+	};
 	rightValue: string;
-	operator: string;
 };
 
 export type FilterValue = {
-	value: boolean;
 	conditions: FilterConditionValue[];
 	combinator: FilterTypeCombinator;
 };
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index 9ccc55d4b00ed..ca0915dae8226 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -41,8 +41,13 @@ import type {
 	INodeOutputConfiguration,
 	INodeInputConfiguration,
 	GenericValue,
+	FilterValue,
 } from './Interfaces';
-import { isResourceMapperValue, isValidResourceLocatorParameterValue } from './type-guards';
+import {
+	isFilterValue,
+	isResourceMapperValue,
+	isValidResourceLocatorParameterValue,
+} from './type-guards';
 import { deepCopy } from './utils';
 
 import type { Workflow } from './Workflow';
@@ -1384,6 +1389,55 @@ export const validateResourceMapperParameter = (
 	return issues;
 };
 
+/*
+ * Validates resource mapper values based on service schema
+ *
+ */
+export const validateFilterParameter = (
+	nodeProperties: INodeProperties,
+	value: FilterValue,
+): Record<string, string[]> => {
+	const composeErrorMessage = (type: string, field: 'first' | 'second') =>
+		`The value in the ${field} field cannot be converted to a ${type}. This could lead to unwanted results. Please check the value or choose a different logical operator.`;
+	return value.conditions.reduce(
+		(issues, condition, index) => {
+			const { type } = condition.operator;
+			const key = `${nodeProperties.name}.${index}`;
+
+			if (type === 'any') {
+				return issues;
+			}
+
+			const validationResultLeft = validateFieldType(
+				nodeProperties.displayName,
+				condition.leftValue,
+				type,
+			);
+
+			const validationResultRight = validateFieldType(
+				nodeProperties.displayName,
+				condition.rightValue,
+				type,
+			);
+
+			if (!validationResultLeft.valid || !validationResultRight.valid) {
+				issues[key] = [];
+			}
+
+			if (!validationResultLeft.valid) {
+				issues[key].push(composeErrorMessage(type, 'first'));
+			}
+
+			if (!validationResultRight.valid) {
+				issues[key].push(composeErrorMessage(type, 'second'));
+			}
+
+			return issues;
+		},
+		{} as Record<string, string[]>,
+	);
+};
+
 export const validateParameter = (
 	nodeProperties: INodeProperties,
 	value: GenericValue,
@@ -1532,6 +1586,14 @@ export function getParameterIssues(
 				foundIssues.parameters = { ...foundIssues.parameters, ...issues };
 			}
 		}
+	} else if (nodeProperties.type === 'filter' && isDisplayed) {
+		const value = getParameterValueByPath(nodeValues, nodeProperties.name, path);
+		if (isFilterValue(value)) {
+			const issues = validateFilterParameter(nodeProperties, value);
+			if (Object.keys(issues).length > 0) {
+				foundIssues.parameters = { ...foundIssues.parameters, ...issues };
+			}
+		}
 	} else if (nodeProperties.validateType) {
 		const value = getParameterValueByPath(nodeValues, nodeProperties.name, path);
 		const error = validateParameter(nodeProperties, value, nodeProperties.validateType);
diff --git a/packages/workflow/src/type-guards.ts b/packages/workflow/src/type-guards.ts
index 6e3fb9ab12efd..2e3bc7fb3d6ec 100644
--- a/packages/workflow/src/type-guards.ts
+++ b/packages/workflow/src/type-guards.ts
@@ -4,6 +4,7 @@ import type {
 	INodePropertyCollection,
 	INodeParameterResourceLocator,
 	ResourceMapperValue,
+	FilterValue,
 } from './Interfaces';
 
 export const isINodeProperties = (
@@ -54,3 +55,9 @@ export const isResourceMapperValue = (value: unknown): value is ResourceMapperVa
 		'value' in value
 	);
 };
+
+export const isFilterValue = (value: unknown): value is FilterValue => {
+	return (
+		typeof value === 'object' && value !== null && 'conditions' in value && 'combinator' in value
+	);
+};

From db6378872b8f8f3e8d4279ab4abbd58db600df26 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 26 Oct 2023 11:50:29 +0200
Subject: [PATCH 04/39] Responsive filter component styling, frontend tweaks

---
 .../design-system/src/css/common/var.scss     |   6 +-
 packages/design-system/src/css/input.scss     |   9 +-
 .../src/components/ExpressionEdit.vue         |   1 +
 .../components/ExpressionParameterInput.vue   |  26 +-
 .../components/Filter/CombinatorSelect.vue    |  20 +-
 .../src/components/Filter/Condition.vue       | 230 ++++++++++++++----
 .../src/components/Filter/Filter.vue          | 116 ++++++---
 .../src/components/Filter/OperatorSelect.vue  |  43 ++--
 .../src/components/Filter/constants.ts        |  23 +-
 .../editor-ui/src/components/Filter/types.ts  |  12 +-
 .../InlineExpressionEditor/theme.ts           |  12 +-
 .../src/components/ParameterInput.vue         |   4 +
 .../src/components/ParameterInputFull.vue     |  55 ++++-
 .../src/components/ParameterInputList.vue     |   1 +
 .../src/components/ParameterInputWrapper.vue  |  25 +-
 .../ResourceLocator/ResourceLocator.vue       |   2 +-
 .../src/plugins/i18n/locales/en.json          |   8 +-
 17 files changed, 436 insertions(+), 157 deletions(-)

diff --git a/packages/design-system/src/css/common/var.scss b/packages/design-system/src/css/common/var.scss
index 1a3d015d354ca..24356d67631cf 100644
--- a/packages/design-system/src/css/common/var.scss
+++ b/packages/design-system/src/css/common/var.scss
@@ -528,12 +528,16 @@ $input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)
 $input-focus-border: var(--input-focus-border-color, var(--color-secondary));
 $input-border-color: var(--input-border-color, var(--border-color-base));
 $input-border-style: var(--input-border-style, var(--border-style-base));
-$input-border-width: var(--border-width-base);
+$input-border-width: var(--input-border-width, var(--border-width-base));
 $input-border: $input-border-color $input-border-style $input-border-width;
 $input-border-right-color: var(
 	--input-border-right-color,
 	var(--input-border-color, var(--border-color-base))
 );
+$input-border-bottom-color: var(
+	--input-border-bottom-color,
+	var(--input-border-color, var(--border-color-base))
+);
 
 $input-font-size: var(--input-font-size, var(--font-size-s));
 /// color||Color|0
diff --git a/packages/design-system/src/css/input.scss b/packages/design-system/src/css/input.scss
index f008565939359..8725d1917458b 100644
--- a/packages/design-system/src/css/input.scss
+++ b/packages/design-system/src/css/input.scss
@@ -119,6 +119,7 @@
 		border-bottom-right-radius: var.$input-border-bottom-right-radius;
 		border: var.$input-border;
 		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
 		box-sizing: border-box;
 		color: var.$input-font-color;
 		display: inline-block;
@@ -296,8 +297,14 @@
 		vertical-align: middle;
 		display: table-cell;
 		position: relative;
-		border: var(--border-base);
+		border: var.$input-border;
 		border-radius: var.$input-border-radius;
+		border-top-left-radius: var.$input-border-top-left-radius;
+		border-top-right-radius: var.$input-border-top-right-radius;
+		border-bottom-left-radius: var.$input-border-bottom-left-radius;
+		border-bottom-right-radius: var.$input-border-bottom-right-radius;
+		border-right-color: var.$input-border-right-color;
+		border-bottom-color: var.$input-border-bottom-color;
 		padding: 0 10px;
 		width: 1px;
 		white-space: nowrap;
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 2b1bfd2264a7f..07f2e7c33c5de 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -2,6 +2,7 @@
 	<div class="expression-edit" v-if="dialogVisible" @keydown.stop>
 		<el-dialog
 			:modelValue="dialogVisible"
+			append-to-body
 			class="expression-dialog classic"
 			width="80%"
 			:title="$locale.baseText('expressionEdit.editExpression')"
diff --git a/packages/editor-ui/src/components/ExpressionParameterInput.vue b/packages/editor-ui/src/components/ExpressionParameterInput.vue
index ad9093f180027..94feddbe341e7 100644
--- a/packages/editor-ui/src/components/ExpressionParameterInput.vue
+++ b/packages/editor-ui/src/components/ExpressionParameterInput.vue
@@ -5,20 +5,14 @@
 		@keydown.tab="onBlur"
 	>
 		<div :class="[$style['all-sections'], { [$style['focused']]: isFocused }]">
-			<div
-				:class="[
-					$style['prepend-section'],
-					'el-input-group__prepend',
-					{ [$style['squared']]: isForRecordLocator },
-				]"
-			>
+			<div :class="[$style['prepend-section'], 'el-input-group__prepend']">
 				<ExpressionFunctionIcon />
 			</div>
 			<InlineExpressionEditorInput
 				:modelValue="modelValue"
 				:isReadOnly="isReadOnly"
 				:targetItem="hoveringItem"
-				:isSingleLine="isForRecordLocator"
+				:isSingleLine="isSingleLine"
 				:additionalData="additionalExpressionData"
 				:path="path"
 				@focus="onFocus"
@@ -86,7 +80,7 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		isForRecordLocator: {
+		isSingleLine: {
 			type: Boolean,
 			default: false,
 		},
@@ -178,10 +172,6 @@ export default defineComponent({
 		width: 22px;
 		text-align: center;
 	}
-
-	.squared {
-		border-radius: 0;
-	}
 }
 
 .expression-editor-modal-opener {
@@ -193,7 +183,15 @@ export default defineComponent({
 	line-height: 9px;
 	border: var(--border-base);
 	border-top-left-radius: var(--border-radius-base);
-	border-bottom-right-radius: var(--border-radius-base);
+	border-bottom-right-radius: var(--input-border-bottom-right-radius, var(--border-radius-base));
+	border-right-color: var(
+		--input-border-right-color,
+		var(--input-border-color, var(--border-color-base))
+	);
+	border-bottom-color: var(
+		--input-border-bottom-color,
+		var(--input-border-color, var(--border-color-base))
+	);
 	cursor: pointer;
 
 	svg {
diff --git a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
index e1565775dfb0b..538cb08ff2023 100644
--- a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
@@ -11,19 +11,22 @@ interface Props {
 defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'combinatorChanged', value: FilterTypeCombinator): void;
+	(event: 'combinatorChange', value: FilterTypeCombinator): void;
 }>();
 
 const i18n = useI18n();
 
 const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
-	emit('combinatorChanged', combinator);
+	emit('combinatorChange', combinator);
 };
 </script>
 
 <template>
-	<div data-test-id="combinator-select">
-		<n8n-select :modelValue="selected" @update:modelValue="onCombinatorChange">
+	<div data-test-id="combinator-select" :class="$style.combinatorSelect">
+		<div v-if="readOnly || options.length === 1">
+			{{ i18n.baseText(`filter.combinator.${selected}`) }}
+		</div>
+		<n8n-select v-else size="small" :modelValue="selected" @update:modelValue="onCombinatorChange">
 			<n8n-option
 				v-for="option in options"
 				:key="option"
@@ -35,4 +38,11 @@ const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
 	</div>
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.combinatorSelect {
+	max-width: 80px;
+	line-height: var(--font-line-height-xloose);
+	font-size: var(--font-size-s);
+	font-style: italic;
+}
+</style>
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/Filter/Condition.vue
index 752960702f51b..1a038d5c14752 100644
--- a/packages/editor-ui/src/components/Filter/Condition.vue
+++ b/packages/editor-ui/src/components/Filter/Condition.vue
@@ -5,83 +5,141 @@ import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
 import type { FilterOperator } from './types';
 import OperatorSelect from './OperatorSelect.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import ParameterIssues from '@/components/ParameterIssues.vue';
+import { useI18n } from '@/composables';
 import type { IUpdateInformation } from '@/Interface';
 
 interface Props {
 	path: string;
 	fixedLeftValue: boolean;
 	condition: FilterConditionValue;
+	issues: string[];
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'operatorChanged', value: string): void;
-	(event: 'leftValueChanged', value: string): void;
-	(event: 'rightValueChanged', value: string): void;
+	(event: 'operatorChange', value: string): void;
+	(event: 'leftValueChange', value: string): void;
+	(event: 'rightValueChange', value: string): void;
+	(event: 'remove'): void;
 }>();
 
-const operator = computed<FilterOperator>(
-	() => OPERATORS_BY_ID[props.condition.operator as FilterOperatorId],
-);
+const operator = computed<FilterOperator>(() => {
+	const { type, operation } = props.condition.operator;
+	return OPERATORS_BY_ID[`${type}:${operation}` as FilterOperatorId];
+});
 
 const parameter: INodeProperties = { name: '', displayName: '', default: '', type: 'string' };
 
 const onOperatorChange = (value: string): void => {
-	emit('operatorChanged', value);
+	emit('operatorChange', value);
 };
 
 const onLeftValueChange = (update: IUpdateInformation): void => {
-	emit('leftValueChanged', update.value);
+	emit('leftValueChange', update.value as string);
 };
 
 const onRightValueChange = (update: IUpdateInformation): void => {
-	emit('rightValueChanged', update.value);
+	emit('rightValueChange', update.value as string);
 };
+
+const onRemove = (): void => {
+	emit('remove');
+};
+
+const i18n = useI18n();
 </script>
 
 <template>
 	<div
-		:class="{ [$style.condition]: true, [$style.hideRightInput]: operator.singleValue }"
+		:class="{
+			[$style.condition]: true,
+			[$style.hideRightInput]: operator.singleValue,
+			[$style.hasIssues]: issues.length > 0,
+		}"
 		data-test-id="condition"
 	>
-		<parameter-input-full
-			v-if="!fixedLeftValue"
-			:displayOptions="true"
-			:parameter="parameter"
-			:value="condition.leftValue"
-			:path="`${path}.left`"
-			:class="[$style.input, $style.inputLeft]"
-			:hideLabel="true"
-			@update="onLeftValueChange"
-		/>
-		<operator-select
-			:class="$style.select"
-			:selected="condition.operator"
-			@operatorChanged="onOperatorChange"
-		></operator-select>
-		<parameter-input-full
-			v-if="!operator.singleValue"
-			displayOptions
-			optionsPosition="bottom"
-			:parameter="parameter"
-			:value="condition.rightValue"
-			:path="`${path}.right`"
-			:class="[$style.input, $style.inputRight]"
-			:hideLabel="true"
-			@update="onRightValueChange"
-		/>
+		<n8n-icon-button
+			type="tertiary"
+			text
+			size="mini"
+			icon="trash"
+			:title="i18n.baseText('filter.removeCondition')"
+			:class="$style.remove"
+			@click="onRemove"
+		></n8n-icon-button>
+		<div :class="$style.triple">
+			<parameter-input-full
+				v-if="!fixedLeftValue"
+				displayOptions
+				hideLabel
+				hideHint
+				isSingleLine
+				:parameter="parameter"
+				:value="condition.leftValue"
+				:path="`${path}.left`"
+				:class="[$style.input, $style.inputLeft]"
+				@update="onLeftValueChange"
+			/>
+			<operator-select
+				:class="$style.select"
+				:selected="operator.id"
+				@operatorChange="onOperatorChange"
+			></operator-select>
+			<parameter-input-full
+				v-if="!operator.singleValue"
+				displayOptions
+				hideLabel
+				hideHint
+				isSingleLine
+				optionsPosition="bottom"
+				:parameter="parameter"
+				:value="condition.rightValue"
+				:path="`${path}.right`"
+				:class="[$style.input, $style.inputRight]"
+				@update="onRightValueChange"
+			/>
+		</div>
+
+		<parameter-issues v-if="issues.length > 0" :issues="issues" :class="$style.issues" />
 	</div>
 </template>
 
 <style lang="scss" module>
 .condition {
-	--condition-select-width: 160px;
-	--condition-input-width: 160px;
-	container: condition / inline-size;
+	position: relative;
+	display: flex;
+	align-items: flex-end;
+	gap: var(--spacing-4xs);
+
+	&.hasIssues {
+		--input-border-color: var(--color-danger);
+
+		input:focus {
+			border-color: var(--color-danger);
+		}
+	}
+
+	&:hover {
+		.remove {
+			opacity: 1;
+		}
+	}
+}
+
+.triple {
+	--condition-select-width: 140px;
+	--condition-input-width: 180px;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
+	width: 100%;
+}
+
+.issues {
+	align-self: flex-start;
+	padding-top: var(--spacing-xl);
 }
 
 .select {
@@ -92,10 +150,12 @@ const onRightValueChange = (update: IUpdateInformation): void => {
 	--input-border-right-color: transparent;
 }
 
-.hideRightInput .select {
-	--input-border-top-right-radius: var(--border-radius-base);
-	--input-border-bottom-right-radius: var(--border-radius-base);
-	--input-border-right-color: var(--input-border-color-base);
+.hideRightInput {
+	.select {
+		--input-border-top-right-radius: var(--border-radius-base);
+		--input-border-bottom-right-radius: var(--border-radius-base);
+		--input-border-right-color: var(--input-border-color-base);
+	}
 }
 
 .input {
@@ -114,6 +174,88 @@ const onRightValueChange = (update: IUpdateInformation): void => {
 	--input-border-bottom-left-radius: 0;
 }
 
-@container condition (min-width: 700px) {
+.remove {
+	position: absolute;
+	left: calc(var(--spacing-l) * -1);
+	top: var(--spacing-l);
+	opacity: 0;
+	transition: opacity 100ms ease-in;
+}
+
+@container filter (max-width: 524px) {
+	.select {
+		--input-border-top-right-radius: var(--border-radius-base);
+		--input-border-bottom-right-radius: 0;
+		--input-border-bottom-color: transparent;
+		--input-border-right-color: var(--input-border-color-base);
+	}
+
+	.inputLeft {
+		--input-border-top-right-radius: 0;
+		--input-border-bottom-left-radius: 0;
+		--input-border-right-color: transparent;
+		--input-border-bottom-color: transparent;
+	}
+
+	.inputRight {
+		--input-border-top-right-radius: 0;
+		--input-border-bottom-left-radius: var(--border-radius-base);
+	}
+
+	.hideRightInput {
+		.select {
+			--input-border-bottom-color: var(--input-border-color-base);
+			--input-border-top-left-radius: 0;
+			--input-border-bottom-left-radius: 0;
+			--input-border-top-right-radius: var(--border-radius-base);
+			--input-border-bottom-right-radius: var(--border-radius-base);
+		}
+
+		.inputLeft {
+			--input-border-top-right-radius: 0;
+			--input-border-bottom-left-radius: var(--border-radius-base);
+			--input-border-bottom-right-radius: 0;
+			--input-border-bottom-color: var(--input-border-color-base);
+		}
+	}
+}
+
+@container filter (max-width: 344px) {
+	.select {
+		--input-border-top-right-radius: 0;
+		--input-border-bottom-right-radius: 0;
+		--input-border-bottom-color: transparent;
+		--input-border-right-color: var(--input-border-color-base);
+	}
+
+	.inputLeft {
+		--input-border-right-color: var(--input-border-color-base);
+		--input-border-top-right-radius: var(--border-radius-base);
+		--input-border-bottom-left-radius: 0;
+		--input-border-bottom-color: transparent;
+	}
+
+	.inputRight {
+		--input-border-top-right-radius: 0;
+		--input-border-bottom-left-radius: var(--border-radius-base);
+	}
+
+	.hideRightInput {
+		.select {
+			--input-border-bottom-color: var(--input-border-color-base);
+			--input-border-top-left-radius: 0;
+			--input-border-top-right-radius: 0;
+			--input-border-bottom-left-radius: var(--border-radius-base);
+			--input-border-bottom-right-radius: var(--border-radius-base);
+		}
+
+		.inputLeft {
+			--input-border-top-left-radius: var(--border-radius-base);
+			--input-border-top-right-radius: var(--border-radius-base);
+			--input-border-bottom-left-radius: 0;
+			--input-border-bottom-right-radius: 0;
+			--input-border-bottom-color: transparent;
+		}
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/Filter/Filter.vue
index cf7bb865049ad..2b99c80fc2134 100644
--- a/packages/editor-ui/src/components/Filter/Filter.vue
+++ b/packages/editor-ui/src/components/Filter/Filter.vue
@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import type { FilterConditionValue, FilterValue, INodeProperties } from 'n8n-workflow';
+import type {
+	FilterConditionValue,
+	FilterValue,
+	INodeProperties,
+	FilterTypeCombinator,
+	INode,
+} from 'n8n-workflow';
 import { computed, reactive, watch } from 'vue';
-import { DEFAULT_MAX_CONDITIONS, DEFAULT_OPERATOR } from './constants';
-import { useI18n } from '@/composables';
+import { useNDVStore } from '@/stores/ndv.store';
+import { DEFAULT_MAX_CONDITIONS, DEFAULT_OPERATOR_VALUE } from './constants';
+import { useI18n, useDebounceHelper } from '@/composables';
 import Condition from './Condition.vue';
+import CombinatorSelect from './CombinatorSelect.vue';
 
 interface Props {
 	parameter: INodeProperties;
 	value: FilterValue;
 	path: string;
+	node: INode | null;
 }
 
 const props = defineProps<Props>();
@@ -18,7 +27,7 @@ const emit = defineEmits<{
 }>();
 
 function createCondition(): FilterConditionValue {
-	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR };
+	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };
 }
 
 const allowedCombinators = computed(
@@ -29,7 +38,6 @@ const state = reactive<{ paramValue: FilterValue }>({
 	paramValue: {
 		conditions: props.value.conditions ?? [createCondition()],
 		combinator: props.value.combinator ?? allowedCombinators.value[0],
-		value: props.value.value,
 	},
 });
 
@@ -50,7 +58,8 @@ function addCondition(): void {
 }
 
 function onOperatorChanged(index: number, value: string): void {
-	state.paramValue.conditions[index].operator = value;
+	const [type, operation] = value.split(':');
+	state.paramValue.conditions[index].operator = { type, operation };
 }
 
 function onLeftValueChanged(index: number, value: string): void {
@@ -65,7 +74,32 @@ function onCombinatorChange(combinator: FilterTypeCombinator): void {
 	state.paramValue.combinator = combinator;
 }
 
+function onConditionRemoved(index: number): void {
+	state.paramValue.conditions.splice(index, 1);
+}
+
+const { callDebounced } = useDebounceHelper();
+
+watch(state.paramValue, (value) => {
+	void callDebounced(
+		() => {
+			emit('valueChanged', { name: props.path, value, node: props.node?.name });
+		},
+		{ debounceTime: 500 },
+	);
+});
+
 const i18n = useI18n();
+const ndvStore = useNDVStore();
+
+const issues = computed(() => {
+	if (!ndvStore.activeNode) return {};
+	return ndvStore.activeNode?.issues?.parameters ?? {};
+});
+
+function getIssues(index: number): string[] {
+	return issues.value[`${props.parameter.name}.${index}`] ?? [];
+}
 </script>
 
 <template>
@@ -78,32 +112,40 @@ const i18n = useI18n();
 			color="text-dark"
 		>
 		</n8n-input-label>
-		<div :class="$style.conditions">
-			<div v-for="(condition, index) of state.paramValue.conditions" :key="index">
-				<condition
-					:condition="condition"
-					:fixed-left-value="!!parameter.typeOptions?.filter?.leftValue"
-					:path="path"
-					@operator-changed="(value) => onOperatorChanged(index, value)"
-					@left-value-changed="(value) => onLeftValueChanged(index, value)"
-					@right-value-changed="(value) => onRightValueChanged(index, value)"
-				></condition>
-
-				<combinator-select
-					:options="allowedCombinators"
-					:selected="state.paramValue.combinator"
-					@combinator-change="onCombinatorChange"
-				/>
+		<div :class="$style.content">
+			<div :class="$style.conditions">
+				<div v-for="(condition, index) of state.paramValue.conditions" :key="index">
+					<combinator-select
+						v-if="index !== 0"
+						:readOnly="index !== 1"
+						:options="allowedCombinators"
+						:selected="state.paramValue.combinator"
+						:class="$style.combinator"
+						@combinatorChange="onCombinatorChange"
+					/>
+
+					<condition
+						:condition="condition"
+						:fixedLeftValue="!!parameter.typeOptions?.filter?.leftValue"
+						:path="`${path}.${index}`"
+						:issues="getIssues(index)"
+						@operatorChange="(value) => onOperatorChanged(index, value)"
+						@leftValueChange="(value) => onLeftValueChanged(index, value)"
+						@rightValueChange="(value) => onRightValueChanged(index, value)"
+						@remove="() => onConditionRemoved(index)"
+					></condition>
+				</div>
 			</div>
+			<n8n-button
+				type="secondary"
+				block
+				@click="addCondition"
+				:class="$style.addCondition"
+				:label="i18n.baseText('filter.addCondition')"
+				:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
+				:disabled="maxConditionsReached"
+			/>
 		</div>
-		<n8n-button
-			type="tertiary"
-			block
-			@click="addCondition"
-			:class="$style.addCondition"
-			:label="i18n.baseText('filter.addCondition')"
-			:disabled="maxConditionsReached"
-		/>
 	</div>
 </template>
 
@@ -111,7 +153,8 @@ const i18n = useI18n();
 .filter {
 	display: flex;
 	flex-direction: column;
-	margin-top: var(--spacing-4xs);
+	margin: var(--spacing-xs) 0;
+	container: filter / inline-size;
 }
 
 .conditions {
@@ -119,8 +162,17 @@ const i18n = useI18n();
 	flex-direction: column;
 	gap: var(--spacing-4xs);
 }
+.content {
+	padding-left: var(--spacing-l);
+}
+.combinator {
+	position: relative;
+	z-index: 1;
+	margin-top: var(--spacing-2xs);
+	margin-bottom: calc(var(--spacing-2xs) * -1);
+}
 
 .addCondition {
-	margin-top: var(--spacing-2xs);
+	margin-top: var(--spacing-l);
 }
 </style>
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
index b941b8ad0dcd3..cced883e3a246 100644
--- a/packages/editor-ui/src/components/Filter/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -11,7 +11,7 @@ const props = defineProps<Props>();
 
 const state = reactive({ selected: props.selected });
 const emit = defineEmits<{
-	(event: 'operatorChanged', value: string): void;
+	(event: 'operatorChange', value: string): void;
 }>();
 
 const i18n = useI18n();
@@ -20,7 +20,7 @@ const groups = OPERATOR_GROUPS;
 
 const onOperatorChange = (operator: string): void => {
 	state.selected = operator;
-	emit('operatorChanged', operator);
+	emit('operatorChange', operator);
 };
 
 const selectedGroupIcon = computed(
@@ -32,35 +32,44 @@ const selectedGroupIcon = computed(
 	<div data-test-id="operator-select">
 		<n8n-select size="small" :modelValue="state.selected" @update:modelValue="onOperatorChange">
 			<template v-if="selectedGroupIcon" #prefix>
-				<n8n-icon :icon="selectedGroupIcon" />
+				<n8n-icon :class="$style.selectedGroupIcon" :icon="selectedGroupIcon" />
 			</template>
-			<div :class="$style.group" :key="group.name" v-for="group of groups">
-				<div :class="$style.groupTitle">
-					<n8n-icon :icon="group.icon" />
-					<span>{{ i18n.baseText(group.name) }}</span>
+			<div :class="$style.groups">
+				<div :key="group.name" v-for="group of groups">
+					<div v-if="group.children.length > 0" :class="$style.groupTitle">
+						<n8n-icon v-if="group.icon" :icon="group.icon" />
+						<span>{{ i18n.baseText(group.name) }}</span>
+					</div>
+					<n8n-option
+						v-for="operator in group.children"
+						:key="operator.id"
+						:value="operator.id"
+						:label="i18n.baseText(operator.name)"
+					/>
 				</div>
-				<n8n-option
-					v-for="operator in group.children"
-					:key="operator.id"
-					:value="operator.id"
-					:label="i18n.baseText(operator.name)"
-				/>
 			</div>
 		</n8n-select>
 	</div>
 </template>
 
 <style lang="scss" module>
-.group {
+.selectedGroupIcon {
+	color: var(--color-text-light);
+}
+
+.groups {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
 }
 
 .groupTitle {
 	display: flex;
 	gap: var(--spacing-4xs);
-	align-items: center;
+	align-items: baseline;
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-bold);
-	margin-top: var(--spacing-2xs);
-	padding: var(--spacing-2xs) var(--spacing-2xs);
+	color: var(--color-text-base);
+	padding: var(--spacing-2xs) var(--spacing-xs);
 }
 </style>
diff --git a/packages/editor-ui/src/components/Filter/constants.ts b/packages/editor-ui/src/components/Filter/constants.ts
index f506cba1a1616..f91767abebb78 100644
--- a/packages/editor-ui/src/components/Filter/constants.ts
+++ b/packages/editor-ui/src/components/Filter/constants.ts
@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import type { FilterConditionValue } from 'n8n-workflow';
 import type { FilterOperator, FilterOperatorGroup } from './types';
 
-export const DEFAULT_MAX_CONDITIONS = 5;
+export const DEFAULT_MAX_CONDITIONS = 10;
 
 export const OPERATORS_BY_ID = {
 	'any:exists': { id: 'any:exists', name: 'filter.operator.exists', singleValue: true },
@@ -22,12 +23,15 @@ export const OPERATORS_BY_ID = {
 	'number:lt': { id: 'number:lt', name: 'filter.operator.lt' },
 	'number:gte': { id: 'number:gte', name: 'filter.operator.gte' },
 	'number:lte': { id: 'number:lte', name: 'filter.operator.lte' },
-	'date:equals': { id: 'date:equals', name: 'filter.operator.equals' },
-	'date:notEquals': { id: 'date:notEquals', name: 'filter.operator.notEquals' },
-	'date:after': { id: 'date:after', name: 'filter.operator.after' },
-	'date:before': { id: 'date:before', name: 'filter.operator.before' },
-	'date:afterOrEquals': { id: 'date:afterOrEquals', name: 'filter.operator.afterOrEquals' },
-	'date:beforeOrEquals': { id: 'date:beforeOrEquals', name: 'filter.operator.beforeOrEquals' },
+	'dateTime:equals': { id: 'dateTime:equals', name: 'filter.operator.equals' },
+	'dateTime:notEquals': { id: 'dateTime:notEquals', name: 'filter.operator.notEquals' },
+	'dateTime:after': { id: 'dateTime:after', name: 'filter.operator.after' },
+	'dateTime:before': { id: 'dateTime:before', name: 'filter.operator.before' },
+	'dateTime:afterOrEquals': { id: 'dateTime:afterOrEquals', name: 'filter.operator.afterOrEquals' },
+	'dateTime:beforeOrEquals': {
+		id: 'dateTime:beforeOrEquals',
+		name: 'filter.operator.beforeOrEquals',
+	},
 	'boolean:true': { id: 'boolean:true', name: 'filter.operator.true', singleValue: true },
 	'boolean:false': { id: 'boolean:false', name: 'filter.operator.false', singleValue: true },
 	'boolean:equals': { id: 'boolean:equals', name: 'filter.operator.equals' },
@@ -48,7 +52,10 @@ export const OPERATORS = Object.values(OPERATORS_BY_ID);
 
 export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
 
-export const DEFAULT_OPERATOR: FilterOperatorId = 'any:exists';
+export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] = {
+	type: 'any',
+	operation: 'exists',
+};
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{
diff --git a/packages/editor-ui/src/components/Filter/types.ts b/packages/editor-ui/src/components/Filter/types.ts
index f1846e0fa9bce..d3d1fbcb25429 100644
--- a/packages/editor-ui/src/components/Filter/types.ts
+++ b/packages/editor-ui/src/components/Filter/types.ts
@@ -1,16 +1,8 @@
 import type { BaseTextKey } from '@/plugins/i18n';
-export type OperatorSubjectType =
-	| 'string'
-	| 'number'
-	| 'boolean'
-	| 'array'
-	| 'object'
-	| 'date'
-	| 'other'
-	| 'any';
+import type { FilterOperatorType } from 'n8n-workflow';
 
 export interface FilterOperator {
-	id: `${OperatorSubjectType}:${string}`;
+	id: `${FilterOperatorType}:${string}`;
 	name: BaseTextKey;
 	singleValue?: boolean; // default = false
 }
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
index 0e11f5e8c92a1..4082e243e310c 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/theme.ts
@@ -26,9 +26,17 @@ export const inputTheme = ({ isSingleLine } = { isSingleLine: false }) => {
 			borderWidth: 'var(--border-width-base)',
 			borderStyle: 'var(--input-border-style, var(--border-style-base))',
 			borderColor: 'var(--input-border-color, var(--border-color-base))',
+			borderRightColor:
+				'var(--input-border-right-color,var(--input-border-color, var(--border-color-base)))',
+			borderBottomColor:
+				'var(--input-border-bottom-color,var(--input-border-color, var(--border-color-base)))',
 			borderRadius: 'var(--input-border-radius, var(--border-radius-base))',
-			borderTopLeftRadius: '0',
-			borderBottomLeftRadius: '0',
+			borderTopLeftRadius: 0,
+			borderTopRightRadius:
+				'var(--input-border-top-right-radius, var(--input-border-radius, var(--border-radius-base)))',
+			borderBottomLeftRadius: 0,
+			borderBottomRightRadius:
+				'var(--input-border-bottom-right-radius, var(--input-border-radius, var(--border-radius-base)))',
 			backgroundColor: 'white',
 		},
 		'.cm-scroller': {
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 4ed650c55c325..b29f97124d9d5 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -45,6 +45,7 @@
 				:modelValue="expressionDisplayValue"
 				:title="displayTitle"
 				:isReadOnly="isReadOnly"
+				:isSingleLine="isSingleLine"
 				:path="path"
 				:additional-expression-data="additionalExpressionData"
 				:class="{ 'ph-no-capture': shouldRedactValue }"
@@ -442,6 +443,9 @@ export default defineComponent({
 		isReadOnly: {
 			type: Boolean,
 		},
+		isSingleLine: {
+			type: Boolean,
+		},
 		parameter: {
 			type: Object as PropType<INodeProperties>,
 		},
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 88cbe4ad386e7..6a888671e712d 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,16 +1,17 @@
 <template>
 	<n8n-input-label
+		:class="$style.wrapper"
 		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
 		:tooltipText="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
 		:showTooltip="focused"
 		:showOptions="menuExpanded || focused || forceShowExpression"
+		:optionsPosition="optionsPosition"
 		:bold="false"
 		:size="label.size"
 		color="text-dark"
 	>
-		<template v-if="optionsPosition === 'top'" #options>
+		<template v-if="displayOptions && optionsPosition === 'top'" #options>
 			<parameter-options
-				v-if="displayOptions"
 				:parameter="parameter"
 				:value="value"
 				:isReadOnly="isReadOnly"
@@ -48,10 +49,12 @@
 						:modelValue="value"
 						:path="path"
 						:isReadOnly="isReadOnly"
+						:isSingleLine="isSingleLine"
 						:droppable="droppable"
 						:activeDrop="activeDrop"
 						:forceShowExpression="forceShowExpression"
 						:hint="hint"
+						:hideHint="hideHint"
 						:hide-issues="hideIssues"
 						:label="label"
 						:event-bus="eventBus"
@@ -65,6 +68,23 @@
 				</n8n-tooltip>
 			</template>
 		</draggable-target>
+		<div
+			:class="{
+				[$style.options]: true,
+				[$style.visible]: menuExpanded || focused || forceShowExpression,
+			}"
+		>
+			<parameter-options
+				v-if="optionsPosition === 'bottom'"
+				:parameter="parameter"
+				:value="value"
+				:isReadOnly="isReadOnly"
+				:showOptions="displayOptions"
+				:showExpressionSelector="showExpressionSelector"
+				@update:modelValue="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</div>
 	</n8n-input-label>
 </template>
 
@@ -136,10 +156,18 @@ export default defineComponent({
 			type: String as PropType<'bottom' | 'top'>,
 			default: 'top',
 		},
+		hideHint: {
+			type: Boolean,
+			default: false,
+		},
 		isReadOnly: {
 			type: Boolean,
 			default: false,
 		},
+		isSingleLine: {
+			type: Boolean,
+			default: false,
+		},
 		hideLabel: {
 			type: Boolean,
 			default: false,
@@ -345,3 +373,26 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style module>
+.wrapper {
+	position: relative;
+
+	&:hover {
+		.options {
+			opacity: 1;
+		}
+	}
+}
+.options {
+	position: absolute;
+	bottom: -24px;
+	right: 0;
+	opacity: 0;
+	transition: opacity 100ms ease-in;
+
+	&.visible {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 9f53886ea3e11..7fbfa202caded 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -107,6 +107,7 @@
 				:parameter="parameter"
 				:value="getParameterValue(nodeValues, parameter.name, path)"
 				:path="getPath(parameter.name)"
+				:node="node"
 				@valueChanged="valueChanged"
 			/>
 			<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 64345c870521f..18193053ae31b 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,8 +1,5 @@
 <template>
-	<div
-		:class="{ [$style.parameterInput]: true, [$style.hintTop]: hintPosition === 'top' }"
-		data-test-id="parameter-input"
-	>
+	<div :class="$style.parameterInput" data-test-id="parameter-input">
 		<parameter-input
 			ref="param"
 			:inputSize="inputSize"
@@ -21,6 +18,7 @@
 			:expressionEvaluated="expressionValueComputed"
 			:additionalExpressionData="resolvedAdditionalExpressionData"
 			:label="label"
+			:isSingleLine="isSingleLine"
 			:data-test-id="`parameter-input-${parsedParameterName}`"
 			:event-bus="eventBus"
 			@focus="onFocus"
@@ -29,7 +27,7 @@
 			@textInput="onTextInput"
 			@update="onValueChanged"
 		/>
-		<div v-if="expressionOutput || parameterHint" :class="$style.hint">
+		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
 			<div>
 				<input-hint
 					v-if="expressionOutput"
@@ -86,6 +84,9 @@ export default defineComponent({
 		isReadOnly: {
 			type: Boolean,
 		},
+		isSingleLine: {
+			type: Boolean,
+		},
 		parameter: {
 			type: Object as PropType<INodeProperties>,
 		},
@@ -108,10 +109,9 @@ export default defineComponent({
 			type: String,
 			required: false,
 		},
-		hintPosition: {
-			type: String as PropType<'top' | 'bottom'>,
+		hideHint: {
+			type: Boolean,
 			required: false,
-			default: 'bottom',
 		},
 		inputSize: {
 			type: String,
@@ -263,15 +263,6 @@ export default defineComponent({
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4xs);
-
-	&.hintTop {
-		flex-direction: column-reverse;
-	}
-}
-
-.hint {
-	display: flex;
-	justify-content: space-between;
 }
 
 .hovering {
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 4cb9f98b3e195..bb97df4d38930 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -92,7 +92,7 @@
 									v-if="isValueExpression || forceShowExpression"
 									:modelValue="expressionDisplayValue"
 									:path="path"
-									isForRecordLocator
+									isSingleLine
 									@update:modelValue="onInputChange"
 									@modalOpenerClick="$emit('modalOpenerClick')"
 									ref="input"
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index ed5b6a1fcc63e..54ed93c39e837 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2246,7 +2246,9 @@
 	"filter.operator.lengthLte": "Length less than or equal",
 	"filter.operator.empty": "Empty",
 	"filter.operator.notEmpty": "Not empty",
-	"filter.combinator.or": "Or",
-	"filter.combinator.and": "And",
-	"filter.addCondition": "Add condition"
+	"filter.combinator.or": "OR",
+	"filter.combinator.and": "AND",
+	"filter.addCondition": "Add condition",
+	"filter.removeCondition": "Remove condition",
+	"filter.maxConditions": "Maximum conditions reached"
 }

From 117d48b16010bce9ce72e39c1d4c3eaa128ba32a Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 27 Oct 2023 12:47:07 +0200
Subject: [PATCH 05/39] Add tests for IfNodeV2

---
 .../nodes/If/test/{ => v1}/IF.boolean.json    |   0
 .../nodes/If/test/{ => v1}/IF.date-time.json  |   0
 .../nodes/If/test/{ => v1}/IF.number.json     |   0
 .../nodes/If/test/{ => v1}/IF.string.json     |   0
 .../nodes/If/test/{ => v1}/If.node.test.ts    |   0
 .../nodes/If/test/v2/IfV2.date-time.json      | 168 ++++++++++++++++
 .../nodes/If/test/v2/IfV2.node.test.ts        |   5 +
 .../nodes/If/test/v2/IfV2.number.json         | 165 ++++++++++++++++
 .../nodes/If/test/v2/IfV2.other.json          | 182 ++++++++++++++++++
 .../nodes/If/test/v2/IfV2.string.json         | 178 +++++++++++++++++
 10 files changed, 698 insertions(+)
 rename packages/nodes-base/nodes/If/test/{ => v1}/IF.boolean.json (100%)
 rename packages/nodes-base/nodes/If/test/{ => v1}/IF.date-time.json (100%)
 rename packages/nodes-base/nodes/If/test/{ => v1}/IF.number.json (100%)
 rename packages/nodes-base/nodes/If/test/{ => v1}/IF.string.json (100%)
 rename packages/nodes-base/nodes/If/test/{ => v1}/If.node.test.ts (100%)
 create mode 100644 packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
 create mode 100644 packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
 create mode 100644 packages/nodes-base/nodes/If/test/v2/IfV2.number.json
 create mode 100644 packages/nodes-base/nodes/If/test/v2/IfV2.other.json
 create mode 100644 packages/nodes-base/nodes/If/test/v2/IfV2.string.json

diff --git a/packages/nodes-base/nodes/If/test/IF.boolean.json b/packages/nodes-base/nodes/If/test/v1/IF.boolean.json
similarity index 100%
rename from packages/nodes-base/nodes/If/test/IF.boolean.json
rename to packages/nodes-base/nodes/If/test/v1/IF.boolean.json
diff --git a/packages/nodes-base/nodes/If/test/IF.date-time.json b/packages/nodes-base/nodes/If/test/v1/IF.date-time.json
similarity index 100%
rename from packages/nodes-base/nodes/If/test/IF.date-time.json
rename to packages/nodes-base/nodes/If/test/v1/IF.date-time.json
diff --git a/packages/nodes-base/nodes/If/test/IF.number.json b/packages/nodes-base/nodes/If/test/v1/IF.number.json
similarity index 100%
rename from packages/nodes-base/nodes/If/test/IF.number.json
rename to packages/nodes-base/nodes/If/test/v1/IF.number.json
diff --git a/packages/nodes-base/nodes/If/test/IF.string.json b/packages/nodes-base/nodes/If/test/v1/IF.string.json
similarity index 100%
rename from packages/nodes-base/nodes/If/test/IF.string.json
rename to packages/nodes-base/nodes/If/test/v1/IF.string.json
diff --git a/packages/nodes-base/nodes/If/test/If.node.test.ts b/packages/nodes-base/nodes/If/test/v1/If.node.test.ts
similarity index 100%
rename from packages/nodes-base/nodes/If/test/If.node.test.ts
rename to packages/nodes-base/nodes/If/test/v1/If.node.test.ts
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json b/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
new file mode 100644
index 0000000000000..b941d0b994c7e
--- /dev/null
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
@@ -0,0 +1,168 @@
+{
+  "name": "Filter test",
+  "nodes": [
+    {
+      "parameters": {},
+      "id": "f332a7d1-31b4-4e78-b31e-9e8db945bf3f",
+      "name": "When clicking \"Execute Workflow\"",
+      "type": "n8n-nodes-base.manualTrigger",
+      "typeVersion": 1,
+      "position": [
+        -60,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "jsCode": "return [\n  {\n    \"date\": \"2023-10-26T16:45:52.367Z\",\n    \"label\": \"Apple\",\n  },\n  {\n    \"date\": \"2023-10-20T16:45:52.367Z\",\n    \"label\": \"Banana\"\n  },\n  {\n    \"date\": 1696178752,\n    \"label\": \"Kiwi\"\n  },\n  {\n    \"date\": 1699178752,\n    \"label\": \"Orange\"\n  }\n]"
+      },
+      "id": "60697c7f-3948-4790-97ba-8aba03d02ac2",
+      "name": "Code",
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        160,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "conditions": {
+          "options": {
+            "caseSensitive": true,
+            "leftValue": ""
+          },
+          "conditions": [
+            {
+              "leftValue": "={{ $json.date }}",
+              "rightValue": "2023-10-21",
+              "operator": {
+                "type": "dateTime",
+                "operation": "before"
+              }
+            }
+          ],
+          "combinator": "or"
+        },
+        "options": {}
+      },
+      "id": "7531191b-5ac3-45dc-8afb-27ae83d8f33a",
+      "name": "If",
+      "type": "n8n-nodes-base.if",
+      "typeVersion": 2,
+      "position": [
+        380,
+        480
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "d8c614ea-0bbf-4b12-ad7d-c9ebe09ce583",
+      "name": "Then",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        400
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "69364770-60d2-4ef4-9f29-9570718a9a10",
+      "name": "Else",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        580
+      ]
+    }
+  ],
+  "pinData": {
+    "Then": [
+      {
+        "json": {
+          "date": "2023-10-20T16:45:52.367Z",
+          "label": "Banana"
+        }
+
+      },
+      {
+        "json": {
+          "date": 1696178752,
+          "label": "Kiwi"
+        }
+
+
+      }
+    ],
+    "Else": [
+      {
+        "json": {
+          "date": "2023-10-26T16:45:52.367Z",
+          "label": "Apple"
+        }
+
+      },
+      {
+        "json": {
+          "date": 1699178752,
+          "label": "Orange"
+        }
+
+      }
+    ]
+  },
+  "connections": {
+    "When clicking \"Execute Workflow\"": {
+      "main": [
+        [
+          {
+            "node": "Code",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Code": {
+      "main": [
+        [
+          {
+            "node": "If",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "If": {
+      "main": [
+        [
+          {
+            "node": "Then",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Else",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "versionId": "ce7ed9ae-704e-4da8-b178-24556f720b2a",
+  "id": "BWUTRs5RHxVgQ4uT",
+  "meta": {
+    "instanceId": "78577815012af39cf16dad7a787b0898c42fb7514b8a7f99b2136862c2af502c"
+  },
+  "tags": []
+}
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts b/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
new file mode 100644
index 0000000000000..20b296741673a
--- /dev/null
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
@@ -0,0 +1,5 @@
+import { testWorkflows, getWorkflowFilenames } from '@test/nodes/Helpers';
+
+const workflows = getWorkflowFilenames(__dirname);
+
+describe.only('Test IF v2 Node', () => testWorkflows(workflows));
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.number.json b/packages/nodes-base/nodes/If/test/v2/IfV2.number.json
new file mode 100644
index 0000000000000..3f275a3f23dcf
--- /dev/null
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.number.json
@@ -0,0 +1,165 @@
+{
+  "name": "Filter test",
+  "nodes": [
+    {
+      "parameters": {},
+      "id": "f332a7d1-31b4-4e78-b31e-9e8db945bf3f",
+      "name": "When clicking \"Execute Workflow\"",
+      "type": "n8n-nodes-base.manualTrigger",
+      "typeVersion": 1,
+      "position": [
+        -60,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "jsCode": "return [\n  {\n    \"count\": 1,\n    \"label\": \"Apple\",\n  },\n  {\n    \"count\": 5,\n    \"label\": \"Banana\"\n  },\n  {\n    \"count\": 12,\n    \"label\": \"Kiwi\"\n  }\n]"
+      },
+      "id": "60697c7f-3948-4790-97ba-8aba03d02ac2",
+      "name": "Code",
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        160,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "conditions": {
+          "options": {
+            "caseSensitive": true,
+            "leftValue": ""
+          },
+          "conditions": [
+            {
+              "leftValue": "={{ $json.count }}",
+              "rightValue": "1",
+              "operator": {
+                "type": "number",
+                "operation": "equals"
+              }
+            },
+            {
+              "leftValue": "={{ $json.count }}",
+              "rightValue": "10",
+              "operator": {
+                "type": "number",
+                "operation": "gt"
+              }
+            }
+          ],
+          "combinator": "or"
+        },
+        "options": {}
+      },
+      "id": "7531191b-5ac3-45dc-8afb-27ae83d8f33a",
+      "name": "If",
+      "type": "n8n-nodes-base.if",
+      "typeVersion": 2,
+      "position": [
+        380,
+        480
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "d8c614ea-0bbf-4b12-ad7d-c9ebe09ce583",
+      "name": "Then",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        400
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "69364770-60d2-4ef4-9f29-9570718a9a10",
+      "name": "Else",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        580
+      ]
+    }
+  ],
+  "pinData": {
+    "Then": [
+      {
+        "json": {
+          "count": 1,
+          "label": "Apple"
+        }
+      },
+      {
+        "json": {
+          "count": 12,
+          "label": "Kiwi"
+        }
+      }
+    ],
+    "Else": [
+      {
+        "json": {
+          "count": 5,
+          "label": "Banana"
+        }
+      }
+    ]
+  },
+  "connections": {
+    "When clicking \"Execute Workflow\"": {
+      "main": [
+        [
+          {
+            "node": "Code",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Code": {
+      "main": [
+        [
+          {
+            "node": "If",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "If": {
+      "main": [
+        [
+          {
+            "node": "Then",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Else",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "versionId": "78d54316-4f39-4012-bbb8-c789f1f8865b",
+  "id": "BWUTRs5RHxVgQ4uT",
+  "meta": {
+    "instanceId": "78577815012af39cf16dad7a787b0898c42fb7514b8a7f99b2136862c2af502c"
+  },
+  "tags": []
+}
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.other.json b/packages/nodes-base/nodes/If/test/v2/IfV2.other.json
new file mode 100644
index 0000000000000..6aa67c92729ee
--- /dev/null
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.other.json
@@ -0,0 +1,182 @@
+{
+  "name": "Filter test",
+  "nodes": [
+    {
+      "parameters": {},
+      "id": "f332a7d1-31b4-4e78-b31e-9e8db945bf3f",
+      "name": "When clicking \"Execute Workflow\"",
+      "type": "n8n-nodes-base.manualTrigger",
+      "typeVersion": 1,
+      "position": [
+        -60,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "jsCode": "return [\n  {\n    \"label\": \"Apple\",\n    tags: [],\n    meta: {foo: 'bar'}\n  },\n  {\n    \"label\": \"Banana\",\n    tags: ['exotic'],\n    meta: {}\n  },\n  {\n    \"label\": \"Kiwi\",\n    tags: ['exotic'],\n    meta: {}\n  },\n  {\n    \"label\": \"Orange\",\n    meta: {}\n  }\n]"
+      },
+      "id": "60697c7f-3948-4790-97ba-8aba03d02ac2",
+      "name": "Code",
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        160,
+        480
+      ]
+    },
+    {
+      "parameters": {
+        "conditions": {
+          "options": {
+            "caseSensitive": true,
+            "leftValue": ""
+          },
+          "conditions": [
+            {
+              "leftValue": "={{ $json.tags }}",
+              "rightValue": "exotic",
+              "operator": {
+                "type": "array",
+                "operation": "contains",
+                "rightType": "any"
+              }
+            },
+            {
+              "leftValue": "={{ $json.meta }}",
+              "rightValue": "",
+              "operator": {
+                "type": "object",
+                "operation": "notEmpty",
+                "singleValue": true
+              }
+            }
+          ],
+          "combinator": "or"
+        },
+        "options": {}
+      },
+      "id": "7531191b-5ac3-45dc-8afb-27ae83d8f33a",
+      "name": "If",
+      "type": "n8n-nodes-base.if",
+      "typeVersion": 2,
+      "position": [
+        380,
+        480
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "d8c614ea-0bbf-4b12-ad7d-c9ebe09ce583",
+      "name": "Then",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        400
+      ]
+    },
+    {
+      "parameters": {},
+      "id": "69364770-60d2-4ef4-9f29-9570718a9a10",
+      "name": "Else",
+      "type": "n8n-nodes-base.noOp",
+      "typeVersion": 1,
+      "position": [
+        600,
+        580
+      ]
+    }
+  ],
+  "pinData": {
+    "Then": [
+      {
+        "json": {
+          "label": "Apple",
+          "tags": [],
+          "meta": {
+            "foo": "bar"
+          }
+        }
+      },
+      {
+        "json": {
+          "label": "Banana",
+          "tags": [
+            "exotic"
+          ],
+          "meta": {}
+        }
+      },
+      {
+        "json": {
+          "label": "Kiwi",
+          "tags": [
+            "exotic"
+          ],
+          "meta": {}
+        }
+      }
+    ],
+    "Else": [
+      {
+        "json": {
+          "label": "Orange",
+          "meta": {}
+        }
+      }
+    ]
+  },
+  "connections": {
+    "When clicking \"Execute Workflow\"": {
+      "main": [
+        [
+          {
+            "node": "Code",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Code": {
+      "main": [
+        [
+          {
+            "node": "If",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "If": {
+      "main": [
+        [
+          {
+            "node": "Then",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Else",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": false,
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "versionId": "a6249f48-d88f-4b80-9ed9-79555e522d48",
+  "id": "BWUTRs5RHxVgQ4uT",
+  "meta": {
+    "instanceId": "78577815012af39cf16dad7a787b0898c42fb7514b8a7f99b2136862c2af502c"
+  },
+  "tags": []
+}
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.string.json b/packages/nodes-base/nodes/If/test/v2/IfV2.string.json
new file mode 100644
index 0000000000000..b6092baa859c6
--- /dev/null
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.string.json
@@ -0,0 +1,178 @@
+{
+    "name": "Filter test",
+    "nodes": [
+      {
+        "parameters": {},
+        "id": "96490c63-a3f4-4923-b969-8f9adcbb1bbb",
+        "name": "When clicking \"Execute Workflow\"",
+        "type": "n8n-nodes-base.manualTrigger",
+        "typeVersion": 1,
+        "position": [
+          -160,
+          300
+        ]
+      },
+      {
+        "parameters": {
+          "conditions": {
+            "options": {
+              "caseSensitive": false,
+              "leftValue": ""
+            },
+            "conditions": [
+              {
+                "leftValue": "={{ $json.firstname }}",
+                "rightValue": "s",
+                "operator": {
+                  "type": "string",
+                  "operation": "startsWith"
+                }
+              },
+              {
+                "leftValue": "={{ $json.lastname }}",
+                "rightValue": "",
+                "operator": {
+                  "type": "any",
+                  "operation": "exists"
+                }
+              },
+              {
+                "leftValue": "={{ $json.email }}",
+                "rightValue": "@yahoo.com",
+                "operator": {
+                  "type": "string",
+                  "operation": "endsWith"
+                }
+              }
+            ],
+            "combinator": "and"
+          },
+          "options": {
+            "caseSensitive": false
+          }
+        },
+        "id": "48399b31-219a-42fa-bb5b-380dbb4a2e7d",
+        "name": "If",
+        "type": "n8n-nodes-base.if",
+        "typeVersion": 2,
+        "position": [
+          260,
+          300
+        ]
+      },
+      {
+        "parameters": {},
+        "id": "8a59a941-bafd-46a6-8692-878de715d912",
+        "name": "false",
+        "type": "n8n-nodes-base.noOp",
+        "typeVersion": 1,
+        "position": [
+          560,
+          440
+        ]
+      },
+      {
+        "parameters": {},
+        "id": "b82546fa-f9e9-4fa3-9dcb-e2c94a3784de",
+        "name": "Then",
+        "type": "n8n-nodes-base.noOp",
+        "typeVersion": 1,
+        "position": [
+          560,
+          140
+        ]
+      },
+      {
+        "parameters": {
+          "jsCode": "return [\n  {\n    \"email\": \"Shane@yahoo.com\",\n    \"firstname\": \"Shane\",\n    \"lastname\": \"Martin\"\n  },\n  {\n    \"email\": \"Sharon@yahoo.com\",\n    \"firstname\": \"Sharon\",\n    \"lastname\": \"Tromp\"\n  },\n  {\n    \"email\": \"sarah@gmail.com\",\n    \"firstname\": \"Sarah\",\n    \"lastname\": \"Dawson\"\n  }\n]"
+        },
+        "id": "674c5688-ac03-49a7-83fb-62460a10cc10",
+        "name": "Code",
+        "type": "n8n-nodes-base.code",
+        "typeVersion": 2,
+        "position": [
+          60,
+          300
+        ]
+      }
+    ],
+    "pinData": {
+      "Then": [
+        {
+          "json": {
+            "email": "Shane@yahoo.com",
+            "firstname": "Shane",
+            "lastname": "Martin"
+          }
+        },
+        {
+          "json": {
+            "email": "Sharon@yahoo.com",
+            "firstname": "Sharon",
+            "lastname": "Tromp"
+          }
+        }
+      ],
+      "false": [
+        {
+          "json": {
+            "email": "sarah@gmail.com",
+            "firstname": "Sarah",
+            "lastname": "Dawson"
+          }
+        }
+      ]
+    },
+    "connections": {
+      "When clicking \"Execute Workflow\"": {
+        "main": [
+          [
+            {
+              "node": "Code",
+              "type": "main",
+              "index": 0
+            }
+          ]
+        ]
+      },
+      "If": {
+        "main": [
+          [
+            {
+              "node": "Then",
+              "type": "main",
+              "index": 0
+            }
+          ],
+          [
+            {
+              "node": "false",
+              "type": "main",
+              "index": 0
+            }
+          ]
+        ]
+      },
+      "Code": {
+        "main": [
+          [
+            {
+              "node": "If",
+              "type": "main",
+              "index": 0
+            }
+          ]
+        ]
+      }
+    },
+    "active": false,
+    "settings": {
+      "executionOrder": "v1"
+    },
+    "versionId": "48c6a584-e79b-4ce4-ab4b-2b4ab663b89d",
+    "id": "BWUTRs5RHxVgQ4uT",
+    "meta": {
+      "instanceId": "78577815012af39cf16dad7a787b0898c42fb7514b8a7f99b2136862c2af502c"
+    },
+    "tags": []
+  }

From c2ba0ccbd598de68663d2ab84eac14eea475676e Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 27 Oct 2023 12:51:24 +0200
Subject: [PATCH 06/39] Resolve typeOption expression in Filter component

---
 packages/core/src/ExtractValue.ts             | 272 +-----------------
 packages/core/src/NodeExecuteFunctions.ts     |   1 +
 .../ResizeObserver/ResizeObserver.vue         |  45 +--
 .../design-system/src/components/index.ts     |   1 +
 packages/design-system/src/plugin.ts          |   2 +
 .../src/components/Filter/Condition.vue       | 158 ++++++----
 .../src/components/Filter/Filter.vue          |  94 ++++--
 .../src/components/Filter/OperatorSelect.vue  |   8 +-
 .../src/components/Filter/constants.ts        | 196 ++++++++++---
 .../editor-ui/src/components/Filter/types.ts  |   6 +-
 .../src/components/ParameterInputFull.vue     |   4 +-
 .../src/components/ParameterInputList.vue     |   1 +
 packages/nodes-base/nodes/If/V2/IfV2.node.ts  |   2 +-
 packages/workflow/src/Interfaces.ts           |  20 +-
 packages/workflow/src/NodeHelpers.ts          |  29 +-
 .../src/NodeParameters/FilterParameter.ts     | 189 ++++++++++++
 packages/workflow/src/index.ts                |   2 +
 17 files changed, 590 insertions(+), 440 deletions(-)
 create mode 100644 packages/workflow/src/NodeParameters/FilterParameter.ts

diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index acaf667be5a7e..c9ff82143f822 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -1,17 +1,15 @@
-import type {
-	FilterConditionValue,
-	FilterTypeOptions,
-	FilterValue,
-	INode,
-	INodeParameters,
-	INodeProperties,
-	INodePropertyCollection,
-	INodePropertyOptions,
-	INodeType,
-	NodeParameterValueType,
+import {
+	type FilterValue,
+	type INode,
+	type INodeParameters,
+	type INodeProperties,
+	type INodePropertyCollection,
+	type INodePropertyOptions,
+	type INodeType,
+	type NodeParameterValueType,
+	isFilterValue,
 } from 'n8n-workflow';
-import { NodeOperationError, NodeHelpers, LoggerProxy, validateFieldType } from 'n8n-workflow';
-import type { DateTime } from 'luxon';
+import { NodeOperationError, NodeHelpers, LoggerProxy, executeFilter } from 'n8n-workflow';
 
 function findPropertyFromParameterName(
 	parameterName: string,
@@ -122,244 +120,12 @@ function extractValueRLC(
 	return executeRegexExtractValue(value.value, regex, parameterName, property.displayName);
 }
 
-function executeFilterCondition(
-	condition: FilterConditionValue,
-	options?: FilterTypeOptions,
-): boolean {
-	switch (condition.operator.type) {
-		case 'any': {
-			const exists = condition.leftValue !== undefined && condition.leftValue !== null;
-
-			switch (condition.operator.operation) {
-				case 'exists':
-					return exists;
-				case 'notExists':
-					return !exists;
-			}
-
-			break;
-		}
-		case 'string': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-			const parsedRightValue = validateFieldType(
-				'filter',
-				condition.rightValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-				return false;
-			}
-
-			let leftValue = parsedLeftValue.newValue as string;
-			let rightValue = parsedRightValue.newValue as string;
-
-			if (options?.caseSensitive === false) {
-				leftValue = leftValue.toLocaleLowerCase();
-				rightValue = rightValue.toLocaleLowerCase();
-			}
-
-			switch (condition.operator.operation) {
-				case 'equals':
-					return leftValue === rightValue;
-				case 'notEquals':
-					return leftValue !== rightValue;
-				case 'contains':
-					return leftValue.includes(rightValue);
-				case 'notContains':
-					return !leftValue.includes(rightValue);
-				case 'startsWith':
-					return leftValue.startsWith(rightValue);
-				case 'notStartsWith':
-					return !leftValue.startsWith(rightValue);
-				case 'endsWith':
-					return leftValue.endsWith(rightValue);
-				case 'notEndsWith':
-					return !leftValue.endsWith(rightValue);
-				case 'notEndsWith':
-					return !leftValue.endsWith(rightValue);
-				case 'regex':
-					return new RegExp(rightValue).test(leftValue);
-				case 'notRegex':
-					return !new RegExp(rightValue).test(leftValue);
-			}
-
-			break;
-		}
-		case 'number': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-			const parsedRightValue = validateFieldType(
-				'filter',
-				condition.rightValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-				return false;
-			}
-
-			const leftValue = parsedLeftValue.newValue as number;
-			const rightValue = parsedRightValue.newValue as number;
-
-			switch (condition.operator.operation) {
-				case 'equals':
-					return leftValue === rightValue;
-				case 'notEquals':
-					return leftValue !== rightValue;
-				case 'gt':
-					return leftValue > rightValue;
-				case 'lt':
-					return leftValue < rightValue;
-				case 'gte':
-					return leftValue >= rightValue;
-				case 'lte':
-					return leftValue <= rightValue;
-			}
-		}
-		case 'dateTime': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-			const parsedRightValue = validateFieldType(
-				'filter',
-				condition.rightValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-				return false;
-			}
-
-			const leftValue = parsedLeftValue.newValue as DateTime;
-			const rightValue = parsedRightValue.newValue as DateTime;
-
-			switch (condition.operator.operation) {
-				case 'equals':
-					return leftValue.toMillis() === rightValue.toMillis();
-				case 'notEquals':
-					return leftValue.toMillis() !== rightValue.toMillis();
-				case 'after':
-					return leftValue.toMillis() > rightValue.toMillis();
-				case 'before':
-					return leftValue.toMillis() < rightValue.toMillis();
-				case 'afterOrEquals':
-					return leftValue.toMillis() >= rightValue.toMillis();
-				case 'beforeOrEquals':
-					return leftValue.toMillis() <= rightValue.toMillis();
-			}
-		}
-		case 'boolean': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-			const parsedRightValue = validateFieldType(
-				'filter',
-				condition.rightValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-				return false;
-			}
-
-			const leftValue = parsedLeftValue.newValue as boolean;
-			const rightValue = parsedRightValue.newValue as boolean;
-
-			switch (condition.operator.operation) {
-				case 'true':
-					return leftValue;
-				case 'false':
-					return !leftValue;
-				case 'equals':
-					return leftValue === rightValue;
-				case 'notEquals':
-					return leftValue !== rightValue;
-			}
-		}
-		case 'array': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-			const parsedRightValue = validateFieldType(
-				'filter',
-				condition.rightValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-				return false;
-			}
-
-			const leftValue = parsedLeftValue.newValue as unknown[];
-			const rightValue = parsedRightValue.newValue as unknown[];
-
-			switch (condition.operator.operation) {
-				case 'contains':
-					return rightValue.some((item) => leftValue.includes(item));
-				case 'notContains':
-					return !rightValue.some((item) => leftValue.includes(item));
-				case 'lengthEquals':
-					return leftValue.length === rightValue.length;
-				case 'lengthNotEquals':
-					return leftValue.length !== rightValue.length;
-				case 'lengthGt':
-					return leftValue.length > rightValue.length;
-				case 'lengthLt':
-					return leftValue.length < rightValue.length;
-				case 'lengthGte':
-					return leftValue.length >= rightValue.length;
-				case 'lengthLte':
-					return leftValue.length <= rightValue.length;
-			}
-		}
-		case 'object': {
-			const parsedLeftValue = validateFieldType(
-				'filter',
-				condition.leftValue,
-				condition.operator.type,
-			);
-
-			if (!parsedLeftValue.valid) {
-				return false;
-			}
-
-			const leftValue = parsedLeftValue.newValue as object;
-
-			switch (condition.operator.operation) {
-				case 'empty':
-					return Object.keys(leftValue).length === 0;
-				case 'notEmpty':
-					return Object.keys(leftValue).length !== 0;
-			}
-		}
-	}
-
-	LoggerProxy.error(
-		`Unknown filter parameter operator "${condition.operator.type}:${condition.operator.operation}"`,
-	);
-	return false;
-}
-
 function extractValueFilter(
 	value: NodeParameterValueType | object,
 	property: INodeProperties,
 	parameterName: string,
 ): NodeParameterValueType | object {
-	if (typeof value !== 'object' || !value || !('conditions' in value)) {
+	if (!isFilterValue(value)) {
 		return value;
 	}
 
@@ -369,19 +135,7 @@ function extractValueFilter(
 		);
 	}
 
-	const filterValue = value as FilterValue;
-
-	if (filterValue.combinator === 'and') {
-		return filterValue.conditions.every((condition) =>
-			executeFilterCondition(condition, property.typeOptions?.filter),
-		);
-	} else if (filterValue.combinator === 'or') {
-		return filterValue.conditions.some((condition) =>
-			executeFilterCondition(condition, property.typeOptions?.filter),
-		);
-	}
-
-	return false;
+	return executeFilter(value as FilterValue);
 }
 
 function extractValueOther(
diff --git a/packages/core/src/NodeExecuteFunctions.ts b/packages/core/src/NodeExecuteFunctions.ts
index 8e4b18dd1cc2f..bee0190a07a81 100644
--- a/packages/core/src/NodeExecuteFunctions.ts
+++ b/packages/core/src/NodeExecuteFunctions.ts
@@ -2263,6 +2263,7 @@ export function getNodeParameter(
 			{},
 			options?.contextNode?.name,
 		);
+		cleanupParameterData(returnData);
 	} catch (e) {
 		if (e instanceof ExpressionError && node.continueOnFail && node.type === 'n8n-nodes-base.set') {
 			// https://linear.app/n8n/issue/PAY-684
diff --git a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
index 8262bcf577b35..9f07369f77cfc 100644
--- a/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
+++ b/packages/design-system/src/components/ResizeObserver/ResizeObserver.vue
@@ -38,40 +38,49 @@ export default defineComponent({
 			return;
 		}
 
-		const unsortedBreakpoints = [...(this.breakpoints || [])] as Array<{
-			width: number;
-			bp: string;
-		}>;
+		const root = this.$refs.root as HTMLDivElement;
 
-		const bps = unsortedBreakpoints.sort((a, b) => a.width - b.width);
+		if (!root) {
+			return;
+		}
+
+		this.bp = this.getBreakpointFromWidth(root.offsetWidth);
 
 		const observer = new ResizeObserver((entries) => {
 			entries.forEach((entry) => {
 				// We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
 				requestAnimationFrame(() => {
-					const newWidth = entry.contentRect.width;
-					let newBP = 'default';
-					for (let i = 0; i < bps.length; i++) {
-						if (newWidth < bps[i].width) {
-							newBP = bps[i].bp;
-							break;
-						}
-					}
-					this.bp = newBP;
+					this.bp = this.getBreakpointFromWidth(entry.contentRect.width);
 				});
 			});
 		});
 
 		this.observer = observer;
-
-		if (this.$refs.root) {
-			observer.observe(this.$refs.root as HTMLDivElement);
-		}
+		observer.observe(root);
 	},
 	beforeUnmount() {
 		if (this.enabled) {
 			this.observer?.disconnect();
 		}
 	},
+	methods: {
+		getBreakpointFromWidth(width: number): string {
+			let newBP = 'default';
+			const unsortedBreakpoints = [...(this.breakpoints || [])] as Array<{
+				width: number;
+				bp: string;
+			}>;
+
+			const bps = unsortedBreakpoints.sort((a, b) => a.width - b.width);
+			for (let i = 0; i < bps.length; i++) {
+				if (width < bps[i].width) {
+					newBP = bps[i].bp;
+					break;
+				}
+			}
+
+			return newBP;
+		},
+	},
 });
 </script>
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 9e9cbd616e245..c2f88b615fbdb 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -49,3 +49,4 @@ export { default as N8nTree } from './N8nTree';
 export { default as N8nUserInfo } from './N8nUserInfo';
 export { default as N8nUserSelect } from './N8nUserSelect';
 export { default as N8nUsersList } from './N8nUsersList';
+export { default as N8nResizeObserver } from './ResizeObserver';
diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts
index 2f0bea9017f56..3832c7b31e8a5 100644
--- a/packages/design-system/src/plugin.ts
+++ b/packages/design-system/src/plugin.ts
@@ -52,6 +52,7 @@ import {
 	N8nUserInfo,
 	N8nUserSelect,
 	N8nUsersList,
+	N8nResizeObserver,
 } from './components';
 
 export const N8nPlugin: Plugin<{}> = {
@@ -107,5 +108,6 @@ export const N8nPlugin: Plugin<{}> = {
 		app.component('n8n-user-info', N8nUserInfo);
 		app.component('n8n-users-list', N8nUsersList);
 		app.component('n8n-user-select', N8nUserSelect);
+		app.component('n8n-resize-observer', N8nResizeObserver);
 	},
 };
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/Filter/Condition.vue
index 1a038d5c14752..5b44c2a0ef40f 100644
--- a/packages/editor-ui/src/components/Filter/Condition.vue
+++ b/packages/editor-ui/src/components/Filter/Condition.vue
@@ -11,12 +11,17 @@ import type { IUpdateInformation } from '@/Interface';
 
 interface Props {
 	path: string;
-	fixedLeftValue: boolean;
 	condition: FilterConditionValue;
-	issues: string[];
+	issues?: string[];
+	fixedLeftValue?: boolean;
+	canRemove?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+	issues: () => [],
+	canRemove: true,
+	fixedLeftValue: false,
+});
 
 const emit = defineEmits<{
 	(event: 'operatorChange', value: string): void;
@@ -54,13 +59,13 @@ const i18n = useI18n();
 <template>
 	<div
 		:class="{
-			[$style.condition]: true,
-			[$style.hideRightInput]: operator.singleValue,
+			[$style.wrapper]: true,
 			[$style.hasIssues]: issues.length > 0,
 		}"
 		data-test-id="condition"
 	>
 		<n8n-icon-button
+			v-if="canRemove"
 			type="tertiary"
 			text
 			size="mini"
@@ -69,45 +74,62 @@ const i18n = useI18n();
 			:class="$style.remove"
 			@click="onRemove"
 		></n8n-icon-button>
-		<div :class="$style.triple">
-			<parameter-input-full
-				v-if="!fixedLeftValue"
-				displayOptions
-				hideLabel
-				hideHint
-				isSingleLine
-				:parameter="parameter"
-				:value="condition.leftValue"
-				:path="`${path}.left`"
-				:class="[$style.input, $style.inputLeft]"
-				@update="onLeftValueChange"
-			/>
-			<operator-select
-				:class="$style.select"
-				:selected="operator.id"
-				@operatorChange="onOperatorChange"
-			></operator-select>
-			<parameter-input-full
-				v-if="!operator.singleValue"
-				displayOptions
-				hideLabel
-				hideHint
-				isSingleLine
-				optionsPosition="bottom"
-				:parameter="parameter"
-				:value="condition.rightValue"
-				:path="`${path}.right`"
-				:class="[$style.input, $style.inputRight]"
-				@update="onRightValueChange"
-			/>
-		</div>
+		<n8n-resize-observer
+			:class="$style.observer"
+			:breakpoints="[
+				{ bp: 'stacked', width: 340 },
+				{ bp: 'medium', width: 480 },
+			]"
+		>
+			<template #default="{ bp }">
+				<div
+					:class="{
+						[$style.condition]: true,
+						[$style.hideRightInput]: operator.singleValue,
+						[$style.stacked]: bp === 'stacked',
+						[$style.medium]: bp === 'medium',
+					}"
+				>
+					<parameter-input-full
+						v-if="!fixedLeftValue"
+						displayOptions
+						hideLabel
+						hideHint
+						isSingleLine
+						:parameter="parameter"
+						:value="condition.leftValue"
+						:path="`${path}.left`"
+						:class="[$style.input, $style.inputLeft]"
+						@update="onLeftValueChange"
+					/>
+					<operator-select
+						:class="$style.select"
+						:selected="`${operator.type}:${operator.operation}`"
+						@operatorChange="onOperatorChange"
+					></operator-select>
+					<parameter-input-full
+						v-if="!operator.singleValue"
+						displayOptions
+						hideLabel
+						hideHint
+						isSingleLine
+						:optionsPosition="bp === 'default' ? 'top' : 'bottom'"
+						:parameter="parameter"
+						:value="condition.rightValue"
+						:path="`${path}.right`"
+						:class="[$style.input, $style.inputRight]"
+						@update="onRightValueChange"
+					/>
+				</div>
+			</template>
+		</n8n-resize-observer>
 
 		<parameter-issues v-if="issues.length > 0" :issues="issues" :class="$style.issues" />
 	</div>
 </template>
 
 <style lang="scss" module>
-.condition {
+.wrapper {
 	position: relative;
 	display: flex;
 	align-items: flex-end;
@@ -128,12 +150,13 @@ const i18n = useI18n();
 	}
 }
 
-.triple {
-	--condition-select-width: 140px;
-	--condition-input-width: 180px;
+.condition {
 	display: flex;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 	align-items: flex-end;
+}
+
+.observer {
 	width: 100%;
 }
 
@@ -143,24 +166,17 @@ const i18n = useI18n();
 }
 
 .select {
-	flex-basis: var(--condition-select-width);
 	flex-shrink: 0;
-	flex-grow: 1;
+	flex-grow: 0;
+	flex-basis: 160px;
 	--input-border-radius: 0;
 	--input-border-right-color: transparent;
 }
 
-.hideRightInput {
-	.select {
-		--input-border-top-right-radius: var(--border-radius-base);
-		--input-border-bottom-right-radius: var(--border-radius-base);
-		--input-border-right-color: var(--input-border-color-base);
-	}
-}
-
 .input {
-	flex-grow: 10;
-	flex-basis: var(--condition-input-width);
+	flex-shrink: 0;
+	flex-basis: 160px;
+	flex-grow: 1;
 }
 
 .inputLeft {
@@ -174,6 +190,14 @@ const i18n = useI18n();
 	--input-border-bottom-left-radius: 0;
 }
 
+.hideRightInput {
+	.select {
+		--input-border-top-right-radius: var(--border-radius-base);
+		--input-border-bottom-right-radius: var(--border-radius-base);
+		--input-border-right-color: var(--input-border-color-base);
+	}
+}
+
 .remove {
 	position: absolute;
 	left: calc(var(--spacing-l) * -1);
@@ -182,7 +206,9 @@ const i18n = useI18n();
 	transition: opacity 100ms ease-in;
 }
 
-@container filter (max-width: 524px) {
+.medium {
+	flex-wrap: wrap;
+
 	.select {
 		--input-border-top-right-radius: var(--border-radius-base);
 		--input-border-bottom-right-radius: 0;
@@ -198,11 +224,13 @@ const i18n = useI18n();
 	}
 
 	.inputRight {
+		flex-basis: 340px;
+		flex-shrink: 1;
 		--input-border-top-right-radius: 0;
 		--input-border-bottom-left-radius: var(--border-radius-base);
 	}
 
-	.hideRightInput {
+	&.hideRightInput {
 		.select {
 			--input-border-bottom-color: var(--input-border-color-base);
 			--input-border-top-left-radius: 0;
@@ -220,27 +248,33 @@ const i18n = useI18n();
 	}
 }
 
-@container filter (max-width: 344px) {
+.stacked {
+	display: block;
+
 	.select {
-		--input-border-top-right-radius: 0;
-		--input-border-bottom-right-radius: 0;
-		--input-border-bottom-color: transparent;
+		width: 100%;
 		--input-border-right-color: var(--input-border-color-base);
+		--input-border-bottom-color: transparent;
+		--input-border-radius: 0;
 	}
 
 	.inputLeft {
 		--input-border-right-color: var(--input-border-color-base);
+		--input-border-bottom-color: transparent;
+		--input-border-top-left-radius: var(--border-radius-base);
 		--input-border-top-right-radius: var(--border-radius-base);
 		--input-border-bottom-left-radius: 0;
-		--input-border-bottom-color: transparent;
+		--input-border-bottom-right-radius: 0;
 	}
 
 	.inputRight {
+		--input-border-top-left-radius: 0;
 		--input-border-top-right-radius: 0;
 		--input-border-bottom-left-radius: var(--border-radius-base);
+		--input-border-bottom-right-radius: var(--border-radius-base);
 	}
 
-	.hideRightInput {
+	&.hideRightInput {
 		.select {
 			--input-border-bottom-color: var(--input-border-color-base);
 			--input-border-top-left-radius: 0;
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/Filter/Filter.vue
index 2b99c80fc2134..776d02c7d24fb 100644
--- a/packages/editor-ui/src/components/Filter/Filter.vue
+++ b/packages/editor-ui/src/components/Filter/Filter.vue
@@ -1,17 +1,29 @@
 <script setup lang="ts">
+import { isEqual } from 'lodash-es';
+
 import type {
 	FilterConditionValue,
 	FilterValue,
 	INodeProperties,
 	FilterTypeCombinator,
 	INode,
+	NodeParameterValue,
+	FilterOptionsValue,
 } from 'n8n-workflow';
 import { computed, reactive, watch } from 'vue';
 import { useNDVStore } from '@/stores/ndv.store';
-import { DEFAULT_MAX_CONDITIONS, DEFAULT_OPERATOR_VALUE } from './constants';
+import {
+	DEFAULT_FILTER_OPTIONS,
+	DEFAULT_MAX_CONDITIONS,
+	DEFAULT_OPERATOR_VALUE,
+	type FilterOperatorId,
+	OPERATORS_BY_ID,
+} from './constants';
 import { useI18n, useDebounceHelper } from '@/composables';
 import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
+import { resolveParameter } from '@/mixins/workflowHelpers';
+import type { FilterOperator } from './types';
 
 interface Props {
 	parameter: INodeProperties;
@@ -23,19 +35,24 @@ interface Props {
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-	(event: 'valueChanged', value: FilterValue): void;
+	(event: 'valueChanged', value: { name: string; node: string; value: FilterValue }): void;
 }>();
 
+const i18n = useI18n();
+const ndvStore = useNDVStore();
+const { callDebounced } = useDebounceHelper();
+
 function createCondition(): FilterConditionValue {
 	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };
 }
 
-const allowedCombinators = computed(
+const allowedCombinators = computed<FilterTypeCombinator[]>(
 	() => props.parameter.typeOptions?.filter?.allowedCombinators ?? ['and', 'or'],
 );
 
 const state = reactive<{ paramValue: FilterValue }>({
 	paramValue: {
+		options: DEFAULT_FILTER_OPTIONS,
 		conditions: props.value.conditions ?? [createCondition()],
 		combinator: props.value.combinator ?? allowedCombinators.value[0],
 	},
@@ -44,22 +61,62 @@ const state = reactive<{ paramValue: FilterValue }>({
 const maxConditions = computed(
 	() => props.parameter.typeOptions?.filter?.maxConditions ?? DEFAULT_MAX_CONDITIONS,
 );
+
 const maxConditionsReached = computed(
 	() => maxConditions.value <= state.paramValue.conditions.length,
 );
 
+const issues = computed(() => {
+	if (!ndvStore.activeNode) return {};
+	return ndvStore.activeNode?.issues?.parameters ?? {};
+});
+
 watch(
-	() => state.paramValue,
-	(value) => emit('valueChanged', value),
+	() => props.node?.parameters,
+	() => {
+		const typeOptions = props.parameter.typeOptions?.filter;
+
+		if (!typeOptions) {
+			return;
+		}
+
+		let newOptions: FilterOptionsValue = DEFAULT_FILTER_OPTIONS;
+		try {
+			newOptions = {
+				...DEFAULT_FILTER_OPTIONS,
+				...resolveParameter(typeOptions as NodeParameterValue),
+			};
+		} catch (error) {}
+
+		if (!isEqual(state.paramValue.options, newOptions)) {
+			state.paramValue.options = newOptions;
+		}
+	},
+	{ immediate: true },
 );
 
+watch(state.paramValue, (value) => {
+	void callDebounced(
+		() => {
+			emit('valueChanged', { name: props.path, value, node: props.node?.name as string });
+		},
+		{ debounceTime: 1000 },
+	);
+});
+
 function addCondition(): void {
 	state.paramValue.conditions.push(createCondition());
 }
 
-function onOperatorChanged(index: number, value: string): void {
-	const [type, operation] = value.split(':');
-	state.paramValue.conditions[index].operator = { type, operation };
+function onOperatorChanged(index: number, operatorId: string): void {
+	const operator = OPERATORS_BY_ID[operatorId as FilterOperatorId] as FilterOperator;
+
+	state.paramValue.conditions[index].operator = {
+		type: operator.type,
+		operation: operator.operation,
+		rightType: operator.rightType,
+		singleValue: operator.singleValue,
+	};
 }
 
 function onLeftValueChanged(index: number, value: string): void {
@@ -78,25 +135,6 @@ function onConditionRemoved(index: number): void {
 	state.paramValue.conditions.splice(index, 1);
 }
 
-const { callDebounced } = useDebounceHelper();
-
-watch(state.paramValue, (value) => {
-	void callDebounced(
-		() => {
-			emit('valueChanged', { name: props.path, value, node: props.node?.name });
-		},
-		{ debounceTime: 500 },
-	);
-});
-
-const i18n = useI18n();
-const ndvStore = useNDVStore();
-
-const issues = computed(() => {
-	if (!ndvStore.activeNode) return {};
-	return ndvStore.activeNode?.issues?.parameters ?? {};
-});
-
 function getIssues(index: number): string[] {
 	return issues.value[`${props.parameter.name}.${index}`] ?? [];
 }
@@ -127,6 +165,7 @@ function getIssues(index: number): string[] {
 					<condition
 						:condition="condition"
 						:fixedLeftValue="!!parameter.typeOptions?.filter?.leftValue"
+						:canRemove="index !== 0"
 						:path="`${path}.${index}`"
 						:issues="getIssues(index)"
 						@operatorChange="(value) => onOperatorChanged(index, value)"
@@ -154,7 +193,6 @@ function getIssues(index: number): string[] {
 	display: flex;
 	flex-direction: column;
 	margin: var(--spacing-xs) 0;
-	container: filter / inline-size;
 }
 
 .conditions {
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
index cced883e3a246..6006bcb931d61 100644
--- a/packages/editor-ui/src/components/Filter/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -2,6 +2,7 @@
 import { useI18n } from '@/composables';
 import { OPERATOR_GROUPS } from './constants';
 import { reactive, computed } from 'vue';
+import type { FilterOperator } from './types';
 
 interface Props {
 	selected: string;
@@ -26,6 +27,9 @@ const onOperatorChange = (operator: string): void => {
 const selectedGroupIcon = computed(
 	() => groups.find((group) => group.id === state.selected.split(':')[0])?.icon,
 );
+
+const getOperatorId = (operator: FilterOperator): string =>
+	`${operator.type}:${operator.operation}`;
 </script>
 
 <template>
@@ -42,8 +46,8 @@ const selectedGroupIcon = computed(
 					</div>
 					<n8n-option
 						v-for="operator in group.children"
-						:key="operator.id"
-						:value="operator.id"
+						:key="getOperatorId(operator)"
+						:value="getOperatorId(operator)"
 						:label="i18n.baseText(operator.name)"
 					/>
 				</div>
diff --git a/packages/editor-ui/src/components/Filter/constants.ts b/packages/editor-ui/src/components/Filter/constants.ts
index f91767abebb78..c180f2c1251d5 100644
--- a/packages/editor-ui/src/components/Filter/constants.ts
+++ b/packages/editor-ui/src/components/Filter/constants.ts
@@ -1,51 +1,152 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { FilterConditionValue } from 'n8n-workflow';
+import type { FilterConditionValue, FilterOptionsValue } from 'n8n-workflow';
 import type { FilterOperator, FilterOperatorGroup } from './types';
 
 export const DEFAULT_MAX_CONDITIONS = 10;
 
+export const DEFAULT_FILTER_OPTIONS: FilterOptionsValue = { caseSensitive: true, leftValue: '' };
+
 export const OPERATORS_BY_ID = {
-	'any:exists': { id: 'any:exists', name: 'filter.operator.exists', singleValue: true },
-	'any:notExists': { id: 'any:notExists', name: 'filter.operator.notExists', singleValue: true },
-	'string:equals': { id: 'string:equals', name: 'filter.operator.equals' },
-	'string:notEquals': { id: 'string:notEquals', name: 'filter.operator.notEquals' },
-	'string:contains': { id: 'string:contains', name: 'filter.operator.contains' },
-	'string:notContains': { id: 'string:notContains', name: 'filter.operator.notContains' },
-	'string:startsWith': { id: 'string:startsWith', name: 'filter.operator.startsWith' },
-	'string:notStartsWith': { id: 'string:notStartsWith', name: 'filter.operator.notStartsWith' },
-	'string:endsWith': { id: 'string:endsWith', name: 'filter.operator.endsWith' },
-	'string:notEndsWith': { id: 'string:notEndsWith', name: 'filter.operator.notEndsWith' },
-	'string:regex': { id: 'string:regex', name: 'filter.operator.regex' },
-	'string:notRegex': { id: 'string:notRegex', name: 'filter.operator.notRegex' },
-	'number:equals': { id: 'number:equals', name: 'filter.operator.equals' },
-	'number:notEquals': { id: 'number:notEquals', name: 'filter.operator.notEquals' },
-	'number:gt': { id: 'number:gt', name: 'filter.operator.gt' },
-	'number:lt': { id: 'number:lt', name: 'filter.operator.lt' },
-	'number:gte': { id: 'number:gte', name: 'filter.operator.gte' },
-	'number:lte': { id: 'number:lte', name: 'filter.operator.lte' },
-	'dateTime:equals': { id: 'dateTime:equals', name: 'filter.operator.equals' },
-	'dateTime:notEquals': { id: 'dateTime:notEquals', name: 'filter.operator.notEquals' },
-	'dateTime:after': { id: 'dateTime:after', name: 'filter.operator.after' },
-	'dateTime:before': { id: 'dateTime:before', name: 'filter.operator.before' },
-	'dateTime:afterOrEquals': { id: 'dateTime:afterOrEquals', name: 'filter.operator.afterOrEquals' },
+	'any:exists': {
+		type: 'any',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'any:notExists': {
+		type: 'any',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
+	'string:equals': { type: 'string', operation: 'equals', name: 'filter.operator.equals' },
+	'string:notEquals': { type: 'string', operation: 'notEquals', name: 'filter.operator.notEquals' },
+	'string:contains': { type: 'string', operation: 'contains', name: 'filter.operator.contains' },
+	'string:notContains': {
+		type: 'string',
+		operation: 'notContains',
+		name: 'filter.operator.notContains',
+	},
+	'string:startsWith': {
+		type: 'string',
+		operation: 'startsWith',
+		name: 'filter.operator.startsWith',
+	},
+	'string:notStartsWith': {
+		type: 'string',
+		operation: 'notStartsWith',
+		name: 'filter.operator.notStartsWith',
+	},
+	'string:endsWith': { type: 'string', operation: 'endsWith', name: 'filter.operator.endsWith' },
+	'string:notEndsWith': {
+		type: 'string',
+		operation: 'notEndsWith',
+		name: 'filter.operator.notEndsWith',
+	},
+	'string:regex': { type: 'string', operation: 'regex', name: 'filter.operator.regex' },
+	'string:notRegex': { type: 'string', operation: 'notRegex', name: 'filter.operator.notRegex' },
+	'number:equals': { type: 'number', operation: 'equals', name: 'filter.operator.equals' },
+	'number:notEquals': { type: 'number', operation: 'notEquals', name: 'filter.operator.notEquals' },
+	'number:gt': { type: 'number', operation: 'gt', name: 'filter.operator.gt' },
+	'number:lt': { type: 'number', operation: 'lt', name: 'filter.operator.lt' },
+	'number:gte': { type: 'number', operation: 'gte', name: 'filter.operator.gte' },
+	'number:lte': { type: 'number', operation: 'lte', name: 'filter.operator.lte' },
+	'dateTime:equals': { type: 'dateTime', operation: 'equals', name: 'filter.operator.equals' },
+	'dateTime:notEquals': {
+		type: 'dateTime',
+		operation: 'notEquals',
+		name: 'filter.operator.notEquals',
+	},
+	'dateTime:after': { type: 'dateTime', operation: 'after', name: 'filter.operator.after' },
+	'dateTime:before': { type: 'dateTime', operation: 'before', name: 'filter.operator.before' },
+	'dateTime:afterOrEquals': {
+		type: 'dateTime',
+		operation: 'afterOrEquals',
+		name: 'filter.operator.afterOrEquals',
+	},
 	'dateTime:beforeOrEquals': {
-		id: 'dateTime:beforeOrEquals',
+		type: 'dateTime',
+		operation: 'beforeOrEquals',
 		name: 'filter.operator.beforeOrEquals',
 	},
-	'boolean:true': { id: 'boolean:true', name: 'filter.operator.true', singleValue: true },
-	'boolean:false': { id: 'boolean:false', name: 'filter.operator.false', singleValue: true },
-	'boolean:equals': { id: 'boolean:equals', name: 'filter.operator.equals' },
-	'boolean:notEquals': { id: 'boolean:notEquals', name: 'filter.operator.notEquals' },
-	'array:contains': { id: 'array:contains', name: 'filter.operator.contains' },
-	'array:notContains': { id: 'array:notContains', name: 'filter.operator.notContains' },
-	'array:lengthEquals': { id: 'array:lengthEquals', name: 'filter.operator.lengthEquals' },
-	'array:lengthNotEquals': { id: 'array:lengthNotEquals', name: 'filter.operator.lengthNotEquals' },
-	'array:lengthGt': { id: 'array:lengthGt', name: 'filter.operator.lengthGt' },
-	'array:lengthLt': { id: 'array:lengthLt', name: 'filter.operator.lengthLt' },
-	'array:lengthGte': { id: 'array:lengthGte', name: 'filter.operator.lengthGte' },
-	'array:lengthLte': { id: 'array:lengthLte', name: 'filter.operator.lengthLte' },
-	'object:empty': { id: 'object:empty', name: 'filter.operator.empty', singleValue: true },
-	'object:notEmpty': { id: 'object:notEmpty', name: 'filter.operator.notEmpty', singleValue: true },
+	'boolean:true': {
+		type: 'boolean',
+		operation: 'true',
+		name: 'filter.operator.true',
+		singleValue: true,
+	},
+	'boolean:false': {
+		type: 'boolean',
+		operation: 'false',
+		name: 'filter.operator.false',
+		singleValue: true,
+	},
+	'boolean:equals': { type: 'boolean', operation: 'equals', name: 'filter.operator.equals' },
+	'boolean:notEquals': {
+		type: 'boolean',
+		operation: 'notEquals',
+		name: 'filter.operator.notEquals',
+	},
+	'array:contains': {
+		type: 'array',
+		operation: 'contains',
+		name: 'filter.operator.contains',
+		rightType: 'any',
+	},
+	'array:notContains': {
+		type: 'array',
+		operation: 'notContains',
+		name: 'filter.operator.notContains',
+		rightType: 'any',
+	},
+	'array:lengthEquals': {
+		type: 'array',
+		operation: 'lengthEquals',
+		name: 'filter.operator.lengthEquals',
+		rightType: 'number',
+	},
+	'array:lengthNotEquals': {
+		type: 'array',
+		operation: 'lengthNotEquals',
+		name: 'filter.operator.lengthNotEquals',
+		rightType: 'number',
+	},
+	'array:lengthGt': {
+		type: 'array',
+		operation: 'lengthGt',
+		name: 'filter.operator.lengthGt',
+		rightType: 'number',
+	},
+	'array:lengthLt': {
+		type: 'array',
+		operation: 'lengthLt',
+		name: 'filter.operator.lengthLt',
+		rightType: 'number',
+	},
+	'array:lengthGte': {
+		type: 'array',
+		operation: 'lengthGte',
+		name: 'filter.operator.lengthGte',
+		rightType: 'number',
+	},
+	'array:lengthLte': {
+		type: 'array',
+		operation: 'lengthLte',
+		name: 'filter.operator.lengthLte',
+		rightType: 'number',
+	},
+	'object:empty': {
+		type: 'object',
+		operation: 'empty',
+		name: 'filter.operator.empty',
+		singleValue: true,
+	},
+	'object:notEmpty': {
+		type: 'object',
+		operation: 'notEmpty',
+		name: 'filter.operator.notEmpty',
+		singleValue: true,
+	},
 } as const satisfies Record<string, FilterOperator>;
 
 export const OPERATORS = Object.values(OPERATORS_BY_ID);
@@ -55,48 +156,49 @@ export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
 export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] = {
 	type: 'any',
 	operation: 'exists',
+	singleValue: true,
 };
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{
 		id: 'any',
 		name: 'filter.operatorGroup.basic',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('any')),
+		children: OPERATORS.filter((operator) => operator.type === 'any'),
 	},
 	{
 		id: 'string',
 		name: 'filter.operatorGroup.string',
 		icon: 'font',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('string')),
+		children: OPERATORS.filter((operator) => operator.type === 'string'),
 	},
 	{
 		id: 'number',
 		name: 'filter.operatorGroup.number',
 		icon: 'hashtag',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('number')),
+		children: OPERATORS.filter((operator) => operator.type === 'number'),
 	},
 	{
-		id: 'date',
+		id: 'dateTime',
 		name: 'filter.operatorGroup.date',
 		icon: 'calendar',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('date')),
+		children: OPERATORS.filter((operator) => operator.type === 'dateTime'),
 	},
 	{
 		id: 'boolean',
 		name: 'filter.operatorGroup.boolean',
 		icon: 'check-square',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('boolean')),
+		children: OPERATORS.filter((operator) => operator.type === 'boolean'),
 	},
 	{
 		id: 'array',
 		name: 'filter.operatorGroup.array',
 		icon: 'list',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('array')),
+		children: OPERATORS.filter((operator) => operator.type === 'array'),
 	},
 	{
 		id: 'object',
 		name: 'filter.operatorGroup.object',
 		icon: 'cube',
-		children: OPERATORS.filter((operator) => operator.id.startsWith('object')),
+		children: OPERATORS.filter((operator) => operator.type === 'object'),
 	},
 ];
diff --git a/packages/editor-ui/src/components/Filter/types.ts b/packages/editor-ui/src/components/Filter/types.ts
index d3d1fbcb25429..d23d4eff65713 100644
--- a/packages/editor-ui/src/components/Filter/types.ts
+++ b/packages/editor-ui/src/components/Filter/types.ts
@@ -1,10 +1,8 @@
 import type { BaseTextKey } from '@/plugins/i18n';
-import type { FilterOperatorType } from 'n8n-workflow';
+import type { FilterOperatorValue } from 'n8n-workflow';
 
-export interface FilterOperator {
-	id: `${FilterOperatorType}:${string}`;
+export interface FilterOperator extends FilterOperatorValue {
 	name: BaseTextKey;
-	singleValue?: boolean; // default = false
 }
 
 export interface FilterOperatorGroup {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 6a888671e712d..c2c863d1d60e7 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -106,10 +106,10 @@ import {
 } from '@/utils';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
 import type {
-	INodeParameters,
 	INodeProperties,
 	INodePropertyMode,
 	IParameterLabel,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import type { BaseTextKey } from '@/plugins/i18n';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -183,7 +183,7 @@ export default defineComponent({
 			type: String,
 		},
 		value: {
-			type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
+			type: [Number, String, Boolean, Array, Object] as PropType<NodeParameterValueType>,
 		},
 		label: {
 			type: Object as PropType<IParameterLabel>,
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 7fbfa202caded..05148470cb558 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -221,6 +221,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore),
 		nodeTypeVersion(): number | null {
+			console.log(this.node);
 			if (this.node) {
 				return this.node.typeVersion;
 			}
diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 150b6f4461320..5e689bc26f69c 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -29,7 +29,7 @@ export class IfV2 implements INodeType {
 					default: {},
 					typeOptions: {
 						filter: {
-							caseSensitive: '={{$parameter["caseSensitive"] ?? true}}',
+							caseSensitive: '={{$parameter.options.caseSensitive}}',
 						},
 					},
 				},
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index d5c0721ab045e..04fe6967fd82e 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1119,7 +1119,7 @@ type NonEmptyArray<T> = [T, ...T[]];
 export type FilterTypeCombinator = 'and' | 'or';
 
 export interface FilterTypeOptions {
-	caseSensitive?: boolean | string; // default = false
+	caseSensitive?: boolean | string; // default = true
 	leftValue?: string; // when set, user can't edit left side of condition
 	allowedCombinators?: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
 	maxConditions?: number; // default = 5
@@ -2199,16 +2199,26 @@ export type FilterOperatorType =
 	| 'dateTime'
 	| 'any';
 
+export interface FilterOperatorValue {
+	type: FilterOperatorType;
+	operation: string;
+	rightType?: FilterOperatorType;
+	singleValue?: boolean; // default = false
+}
+
 export type FilterConditionValue = {
 	leftValue: string;
-	operator: {
-		type: FilterOperatorType;
-		operation: string;
-	};
+	operator: FilterOperatorValue;
 	rightValue: string;
 };
 
+export type FilterOptionsValue = {
+	caseSensitive: boolean;
+	leftValue: string;
+};
+
 export type FilterValue = {
+	options: FilterOptionsValue;
 	conditions: FilterConditionValue[];
 	combinator: FilterTypeCombinator;
 };
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index ca0915dae8226..c8c395866146c 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -1252,6 +1252,13 @@ export const tryToParseBoolean = (value: unknown): value is boolean => {
 };
 
 export const tryToParseDateTime = (value: unknown): DateTime => {
+	if (typeof value === 'number') {
+		const unixDate = DateTime.fromSeconds(value);
+		if (unixDate.isValid) {
+			return unixDate;
+		}
+	}
+
 	const dateString = String(value).trim();
 
 	// Rely on luxon to parse different date formats
@@ -1390,7 +1397,7 @@ export const validateResourceMapperParameter = (
 };
 
 /*
- * Validates resource mapper values based on service schema
+ * Validates filter value based on type
  *
  */
 export const validateFilterParameter = (
@@ -1399,26 +1406,24 @@ export const validateFilterParameter = (
 ): Record<string, string[]> => {
 	const composeErrorMessage = (type: string, field: 'first' | 'second') =>
 		`The value in the ${field} field cannot be converted to a ${type}. This could lead to unwanted results. Please check the value or choose a different logical operator.`;
+
 	return value.conditions.reduce(
 		(issues, condition, index) => {
-			const { type } = condition.operator;
+			const { type, rightType, singleValue } = condition.operator;
 			const key = `${nodeProperties.name}.${index}`;
 
 			if (type === 'any') {
 				return issues;
 			}
 
-			const validationResultLeft = validateFieldType(
-				nodeProperties.displayName,
-				condition.leftValue,
-				type,
-			);
+			const validationResultLeft = condition.leftValue.startsWith('=')
+				? { valid: true }
+				: validateFieldType(nodeProperties.displayName, condition.leftValue, type);
 
-			const validationResultRight = validateFieldType(
-				nodeProperties.displayName,
-				condition.rightValue,
-				type,
-			);
+			const validationResultRight =
+				condition.rightValue.startsWith('=') || singleValue || rightType === 'any'
+					? { valid: true }
+					: validateFieldType(nodeProperties.displayName, condition.rightValue, rightType ?? type);
 
 			if (!validationResultLeft.valid || !validationResultRight.valid) {
 				issues[key] = [];
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
new file mode 100644
index 0000000000000..72d85e7c5f48f
--- /dev/null
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -0,0 +1,189 @@
+import type { DateTime } from 'luxon';
+import type { FilterConditionValue, FilterOptionsValue, FilterValue } from '../Interfaces';
+import { validateFieldType } from '../NodeHelpers';
+import * as LoggerProxy from '../LoggerProxy';
+
+export function executeFilterCondition(
+	condition: FilterConditionValue,
+	options: FilterOptionsValue,
+): boolean {
+	const { operator } = condition;
+	const rightType = operator.rightType ?? operator.type;
+	const parsedLeftValue =
+		operator.type === 'any'
+			? { valid: true, newValue: condition.leftValue }
+			: validateFieldType('filter', condition.leftValue, operator.type);
+	const parsedRightValue =
+		rightType === 'any' || operator.singleValue
+			? { valid: true, newValue: condition.rightValue }
+			: validateFieldType('filter', condition.rightValue, rightType);
+
+	if (!parsedLeftValue.valid || !parsedRightValue.valid) {
+		return false;
+	}
+
+	let leftValue = parsedLeftValue.newValue;
+	let rightValue = parsedRightValue.newValue;
+
+	if (!options.caseSensitive) {
+		if (typeof leftValue === 'string') {
+			leftValue = leftValue.toLocaleLowerCase();
+		}
+
+		if (typeof rightValue === 'string') {
+			rightValue = rightValue.toLocaleLowerCase();
+		}
+	}
+
+	switch (operator.type) {
+		case 'any': {
+			const exists = leftValue !== undefined && leftValue !== null;
+
+			switch (condition.operator.operation) {
+				case 'exists':
+					return exists;
+				case 'notExists':
+					return !exists;
+			}
+
+			break;
+		}
+		case 'string': {
+			const left = (leftValue ?? '') as string;
+			const right = (rightValue ?? '') as string;
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return left === right;
+				case 'notEquals':
+					return left !== right;
+				case 'contains':
+					return left.includes(right);
+				case 'notContains':
+					return !left.includes(right);
+				case 'startsWith':
+					return left.startsWith(right);
+				case 'notStartsWith':
+					return !left.startsWith(right);
+				case 'endsWith':
+					return left.endsWith(right);
+				case 'notEndsWith':
+					return !left.endsWith(right);
+				case 'notEndsWith':
+					return !left.endsWith(right);
+				case 'regex':
+					return new RegExp(right).test(left);
+				case 'notRegex':
+					return !new RegExp(right).test(left);
+			}
+
+			break;
+		}
+		case 'number': {
+			const left = leftValue as number;
+			const right = rightValue as number;
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return left === right;
+				case 'notEquals':
+					return left !== right;
+				case 'gt':
+					return left > right;
+				case 'lt':
+					return left < right;
+				case 'gte':
+					return left >= right;
+				case 'lte':
+					return left <= right;
+			}
+		}
+		case 'dateTime': {
+			const left = leftValue as DateTime;
+			const right = rightValue as DateTime;
+
+			if (!left || !right) {
+				return false;
+			}
+
+			switch (condition.operator.operation) {
+				case 'equals':
+					return left.toMillis() === right.toMillis();
+				case 'notEquals':
+					return left.toMillis() !== right.toMillis();
+				case 'after':
+					return left.toMillis() > right.toMillis();
+				case 'before':
+					return left.toMillis() < right.toMillis();
+				case 'afterOrEquals':
+					return left.toMillis() >= right.toMillis();
+				case 'beforeOrEquals':
+					return left.toMillis() <= right.toMillis();
+			}
+		}
+		case 'boolean': {
+			const left = leftValue as boolean;
+			const right = rightValue as boolean;
+
+			switch (condition.operator.operation) {
+				case 'true':
+					return left;
+				case 'false':
+					return !left;
+				case 'equals':
+					return left === right;
+				case 'notEquals':
+					return left !== right;
+			}
+		}
+		case 'array': {
+			const left = (leftValue ?? []) as unknown[];
+			const rightArray = (rightValue ?? []) as unknown[];
+
+			switch (condition.operator.operation) {
+				case 'contains':
+					return left.includes(rightValue as unknown);
+				case 'notContains':
+					return !left.includes(rightValue as unknown);
+				case 'lengthEquals':
+					return left.length === rightArray.length;
+				case 'lengthNotEquals':
+					return left.length !== rightArray.length;
+				case 'lengthGt':
+					return left.length > rightArray.length;
+				case 'lengthLt':
+					return left.length < rightArray.length;
+				case 'lengthGte':
+					return left.length >= rightArray.length;
+				case 'lengthLte':
+					return left.length <= rightArray.length;
+			}
+		}
+		case 'object': {
+			const left = leftValue ?? {};
+
+			switch (condition.operator.operation) {
+				case 'empty':
+					return Object.keys(left).length === 0;
+				case 'notEmpty':
+					return Object.keys(left).length !== 0;
+			}
+		}
+	}
+
+	LoggerProxy.warn(`Unknown filter parameter operator "${operator.type}:${operator.operation}"`);
+
+	return false;
+}
+
+export function executeFilter(value: FilterValue): boolean {
+	if (value.combinator === 'and') {
+		return value.conditions.every((condition) => executeFilterCondition(condition, value.options));
+	} else if (value.combinator === 'or') {
+		return value.conditions.some((condition) => executeFilterCondition(condition, value.options));
+	}
+
+	LoggerProxy.warn(`Unknown filter combinator "${value.combinator as string}"`);
+
+	return false;
+}
diff --git a/packages/workflow/src/index.ts b/packages/workflow/src/index.ts
index ddc41baca44de..eabf664bfcca0 100644
--- a/packages/workflow/src/index.ts
+++ b/packages/workflow/src/index.ts
@@ -42,11 +42,13 @@ export {
 	isINodePropertyCollectionList,
 	isINodePropertyOptionsList,
 	isResourceMapperValue,
+	isFilterValue,
 } from './type-guards';
 
 export { ExpressionExtensions } from './Extensions';
 export * as ExpressionParser from './Extensions/ExpressionParser';
 export { NativeMethods } from './NativeMethods';
+export * from './NodeParameters/FilterParameter';
 
 export type { DocMetadata, NativeDoc } from './Extensions';
 

From 67f6440449cb721a6806f764794f7a589bc1fe3e Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 27 Oct 2023 12:53:11 +0200
Subject: [PATCH 07/39] Remove duplicate switch case

---
 packages/workflow/src/NodeParameters/FilterParameter.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 72d85e7c5f48f..0b5e656ea0980 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -69,8 +69,6 @@ export function executeFilterCondition(
 					return left.endsWith(right);
 				case 'notEndsWith':
 					return !left.endsWith(right);
-				case 'notEndsWith':
-					return !left.endsWith(right);
 				case 'regex':
 					return new RegExp(right).test(left);
 				case 'notRegex':

From 23b677595450a099fee2fe940d5b526c7d4f06e0 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 27 Oct 2023 16:17:00 +0200
Subject: [PATCH 08/39] Add test coverage

---
 cypress/constants.ts                          |   2 +-
 cypress/e2e/30-if-node.cy.ts                  |  58 ++++
 cypress/e2e/4-node-creator.cy.ts              |   7 +-
 cypress/fixtures/Test_workflow_filter.json    | 153 +++++++++++
 cypress/pages/ndv.ts                          |  47 +++-
 packages/core/src/ExtractValue.ts             |   3 +-
 .../components/Filter/CombinatorSelect.vue    |   2 +-
 .../src/components/Filter/Condition.vue       |  15 +-
 .../src/components/Filter/Filter.vue          |  11 +-
 .../src/components/Filter/OperatorSelect.vue  |   9 +-
 .../src/components/ParameterInputWrapper.vue  |   2 +-
 .../src/components/__tests__/Filter.test.ts   | 252 ++++++++++++++++++
 12 files changed, 533 insertions(+), 28 deletions(-)
 create mode 100644 cypress/e2e/30-if-node.cy.ts
 create mode 100644 cypress/fixtures/Test_workflow_filter.json
 create mode 100644 packages/editor-ui/src/components/__tests__/Filter.test.ts

diff --git a/cypress/constants.ts b/cypress/constants.ts
index 352dbb36c33df..0aa7277cc6172 100644
--- a/cypress/constants.ts
+++ b/cypress/constants.ts
@@ -33,7 +33,7 @@ export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger';
 export const CODE_NODE_NAME = 'Code';
 export const SET_NODE_NAME = 'Set';
 export const EDIT_FIELDS_SET_NODE_NAME = 'Edit Fields';
-export const IF_NODE_NAME = 'IF';
+export const IF_NODE_NAME = 'If';
 export const MERGE_NODE_NAME = 'Merge';
 export const SWITCH_NODE_NAME = 'Switch';
 export const GMAIL_NODE_NAME = 'Gmail';
diff --git a/cypress/e2e/30-if-node.cy.ts b/cypress/e2e/30-if-node.cy.ts
new file mode 100644
index 0000000000000..88ac63be021c3
--- /dev/null
+++ b/cypress/e2e/30-if-node.cy.ts
@@ -0,0 +1,58 @@
+import { IF_NODE_NAME } from '../constants';
+import { WorkflowPage, NDV } from '../pages';
+
+const workflowPage = new WorkflowPage();
+const ndv = new NDV();
+
+const FILTER_PARAM_NAME = 'conditions';
+
+describe('If Node (filter component)', () => {
+	beforeEach(() => {
+		workflowPage.actions.visit();
+	});
+
+	it('should be able to create and delete multiple conditions', () => {
+		workflowPage.actions.addInitialNodeToCanvas(IF_NODE_NAME, { keepNdvOpen: true });
+
+		// Default state
+		ndv.getters.filterComponent(FILTER_PARAM_NAME).should('exist');
+		ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 1);
+		ndv.getters
+			.filterConditionOperator(FILTER_PARAM_NAME)
+			.find('input')
+			.should('have.value', 'exists');
+
+		// Add
+		ndv.actions.addFilterCondition(FILTER_PARAM_NAME);
+		ndv.getters.filterConditionLeft(FILTER_PARAM_NAME, 0).find('input').type('first left');
+		ndv.getters.filterConditionLeft(FILTER_PARAM_NAME, 1).find('input').type('second left');
+		ndv.actions.addFilterCondition(FILTER_PARAM_NAME);
+		ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 3);
+
+		// Delete
+		ndv.actions.removeFilterCondition(FILTER_PARAM_NAME, 0);
+		ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 2);
+		ndv.getters
+			.filterConditionLeft(FILTER_PARAM_NAME, 0)
+			.find('input')
+			.should('have.value', 'second left');
+		ndv.actions.removeFilterCondition(FILTER_PARAM_NAME, 1);
+		ndv.getters.filterConditions(FILTER_PARAM_NAME).should('have.length', 1);
+	});
+
+	it('should correctly evaluate conditions', () => {
+		cy.fixture('Test_workflow_filter.json').then((data) => {
+			cy.get('body').paste(JSON.stringify(data));
+		});
+
+		workflowPage.actions.zoomToFit();
+		workflowPage.actions.executeWorkflow();
+
+		workflowPage.actions.openNode('Then');
+		ndv.getters.outputPanel().contains('3 items').should('exist');
+		ndv.actions.close();
+
+		workflowPage.actions.openNode('Else');
+		ndv.getters.outputPanel().contains('1 item').should('exist');
+	});
+});
diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts
index 8f9fbde4d319e..adcf0051ffd32 100644
--- a/cypress/e2e/4-node-creator.cy.ts
+++ b/cypress/e2e/4-node-creator.cy.ts
@@ -2,6 +2,7 @@ import { NodeCreator } from '../pages/features/node-creator';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 import { NDV } from '../pages/ndv';
 import { getVisibleSelect } from '../utils';
+import { IF_NODE_NAME } from '../constants';
 
 const nodeCreatorFeature = new NodeCreator();
 const WorkflowPage = new WorkflowPageClass();
@@ -360,7 +361,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'Edit Fields (Set)');
 
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('i');
-		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
+		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
 		nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
 
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('sw');
@@ -368,11 +369,11 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'Edit Fields (Set)');
 
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('i');
-		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
+		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
 		nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
 
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('IF');
-		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', 'IF');
+		nodeCreatorFeature.getters.nodeItemName().first().should('have.text', IF_NODE_NAME);
 		nodeCreatorFeature.getters.nodeItemName().eq(1).should('have.text', 'Switch');
 
 		nodeCreatorFeature.getters.searchBar().find('input').clear().type('sw');
diff --git a/cypress/fixtures/Test_workflow_filter.json b/cypress/fixtures/Test_workflow_filter.json
new file mode 100644
index 0000000000000..5166ead3815b4
--- /dev/null
+++ b/cypress/fixtures/Test_workflow_filter.json
@@ -0,0 +1,153 @@
+{
+	"name": "Filter test",
+	"nodes": [
+		{
+			"parameters": {},
+			"id": "f332a7d1-31b4-4e78-b31e-9e8db945bf3f",
+			"name": "When clicking \"Execute Workflow\"",
+			"type": "n8n-nodes-base.manualTrigger",
+			"typeVersion": 1,
+			"position": [
+				-60,
+				480
+			]
+		},
+		{
+			"parameters": {
+				"jsCode": "return [\n  {\n    \"label\": \"Apple\",\n    tags: [],\n    meta: {foo: 'bar'}\n  },\n  {\n    \"label\": \"Banana\",\n    tags: ['exotic'],\n    meta: {}\n  },\n  {\n    \"label\": \"Pear\",\n    tags: ['other'],\n    meta: {}\n  },\n  {\n    \"label\": \"Orange\",\n    meta: {}\n  }\n]"
+			},
+			"id": "60697c7f-3948-4790-97ba-8aba03d02ac2",
+			"name": "Code",
+			"type": "n8n-nodes-base.code",
+			"typeVersion": 2,
+			"position": [
+				160,
+				480
+			]
+		},
+		{
+			"parameters": {
+				"conditions": {
+					"options": {
+						"caseSensitive": true,
+						"leftValue": ""
+					},
+					"conditions": [
+						{
+							"leftValue": "={{ $json.tags }}",
+							"rightValue": "exotic",
+							"operator": {
+								"type": "array",
+								"operation": "contains",
+								"rightType": "any"
+							}
+						},
+						{
+							"leftValue": "={{ $json.meta }}",
+							"rightValue": "",
+							"operator": {
+								"type": "object",
+								"operation": "notEmpty",
+								"singleValue": true
+							}
+						},
+						{
+							"leftValue": "={{ $json.label }}",
+							"rightValue": "Pea",
+							"operator": {
+								"type": "string",
+								"operation": "startsWith",
+								"rightType": "string"
+							}
+						}
+					],
+					"combinator": "or"
+				},
+				"options": {}
+			},
+			"id": "7531191b-5ac3-45dc-8afb-27ae83d8f33a",
+			"name": "If",
+			"type": "n8n-nodes-base.if",
+			"typeVersion": 2,
+			"position": [
+				380,
+				480
+			]
+		},
+		{
+			"parameters": {},
+			"id": "d8c614ea-0bbf-4b12-ad7d-c9ebe09ce583",
+			"name": "Then",
+			"type": "n8n-nodes-base.noOp",
+			"typeVersion": 1,
+			"position": [
+				600,
+				400
+			]
+		},
+		{
+			"parameters": {},
+			"id": "69364770-60d2-4ef4-9f29-9570718a9a10",
+			"name": "Else",
+			"type": "n8n-nodes-base.noOp",
+			"typeVersion": 1,
+			"position": [
+				600,
+				580
+			]
+		}
+	],
+	"pinData": {},
+	"connections": {
+		"When clicking \"Execute Workflow\"": {
+			"main": [
+				[
+					{
+						"node": "Code",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		},
+		"Code": {
+			"main": [
+				[
+					{
+						"node": "If",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		},
+		"If": {
+			"main": [
+				[
+					{
+						"node": "Then",
+						"type": "main",
+						"index": 0
+					}
+				],
+				[
+					{
+						"node": "Else",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		}
+	},
+	"active": false,
+	"settings": {
+		"executionOrder": "v1"
+	},
+	"versionId": "a6249f48-d88f-4b80-9ed9-79555e522d48",
+	"id": "BWUTRs5RHxVgQ4uT",
+	"meta": {
+		"instanceId": "78577815012af39cf16dad7a787b0898c42fb7514b8a7f99b2136862c2af502c"
+	},
+	"tags": []
+}
diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
index 611a351ff5d57..a9048705a8848 100644
--- a/cypress/pages/ndv.ts
+++ b/cypress/pages/ndv.ts
@@ -48,9 +48,7 @@ export class NDV extends BasePage {
 		parameterExpressionPreview: (parameterName: string) =>
 			this.getters
 				.nodeParameters()
-				.find(
-					`[data-test-id="parameter-input-${parameterName}"] + [data-test-id="parameter-expression-preview"]`,
-				),
+				.find(`[data-test-id="parameter-expression-preview-${parameterName}"]`),
 		nodeNameContainer: () => cy.getByTestId('node-title-container'),
 		nodeRenameInput: () => cy.getByTestId('node-rename-input'),
 		executePrevious: () => cy.getByTestId('execute-previous-node'),
@@ -72,10 +70,29 @@ export class NDV extends BasePage {
 			this.getters.resourceLocator(paramName).find('[data-test-id="rlc-mode-selector"]'),
 		resourceMapperFieldsContainer: () => cy.getByTestId('mapping-fields-container'),
 		resourceMapperSelectColumn: () => cy.getByTestId('matching-column-select'),
-		resourceMapperRemoveFieldButton: (fieldName: string) => cy.getByTestId(`remove-field-button-${fieldName}`),
-		resourceMapperColumnsOptionsButton: () => cy.getByTestId('columns-parameter-input-options-container'),
+		resourceMapperRemoveFieldButton: (fieldName: string) =>
+			cy.getByTestId(`remove-field-button-${fieldName}`),
+		resourceMapperColumnsOptionsButton: () =>
+			cy.getByTestId('columns-parameter-input-options-container'),
 		resourceMapperRemoveAllFieldsOption: () => cy.getByTestId('action-removeAllFields'),
 		sqlEditorContainer: () => cy.getByTestId('sql-editor-container'),
+		filterComponent: (paramName: string) => cy.getByTestId(`filter-${paramName}`),
+		filterCombinator: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-combinator-select').eq(index),
+		filterConditions: (paramName: string) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-condition'),
+		filterCondition: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-condition').eq(index),
+		filterConditionLeft: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-condition-left').eq(index),
+		filterConditionRight: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-condition-right').eq(index),
+		filterConditionOperator: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-operator-select').eq(index),
+		filterConditionRemove: (paramName: string, index = 0) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-remove-condition').eq(index),
+		filterConditionAdd: (paramName: string) =>
+			this.getters.filterComponent(paramName).getByTestId('filter-add-condition'),
 	};
 
 	actions = {
@@ -114,7 +131,7 @@ export class NDV extends BasePage {
 		typeIntoParameterInput: (
 			parameterName: string,
 			content: string,
-			opts?: { parseSpecialCharSequences: boolean, delay?: number },
+			opts?: { parseSpecialCharSequences: boolean; delay?: number },
 		) => {
 			this.getters.parameterInput(parameterName).type(content, opts);
 		},
@@ -199,7 +216,23 @@ export class NDV extends BasePage {
 			getVisiblePopper().find('li').last().click();
 		},
 
-		setInvalidExpression: ({ fieldName, invalidExpression, delay }: { fieldName: string, invalidExpression?: string, delay?: number }) => {
+		addFilterCondition: (paramName: string) => {
+			this.getters.filterConditionAdd(paramName).click();
+		},
+
+		removeFilterCondition: (paramName: string, index: number) => {
+			this.getters.filterConditionRemove(paramName, index).click();
+		},
+
+		setInvalidExpression: ({
+			fieldName,
+			invalidExpression,
+			delay,
+		}: {
+			fieldName: string;
+			invalidExpression?: string;
+			delay?: number;
+		}) => {
 			this.actions.typeIntoParameterInput(fieldName, '=');
 			this.actions.typeIntoParameterInput(fieldName, invalidExpression ?? "{{ $('unknown')", {
 				parseSpecialCharSequences: false,
diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index c9ff82143f822..35206c0d61367 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -1,5 +1,4 @@
 import {
-	type FilterValue,
 	type INode,
 	type INodeParameters,
 	type INodeProperties,
@@ -135,7 +134,7 @@ function extractValueFilter(
 		);
 	}
 
-	return executeFilter(value as FilterValue);
+	return executeFilter(value);
 }
 
 function extractValueOther(
diff --git a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
index 538cb08ff2023..d5c34afffda8c 100644
--- a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/CombinatorSelect.vue
@@ -22,7 +22,7 @@ const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
 </script>
 
 <template>
-	<div data-test-id="combinator-select" :class="$style.combinatorSelect">
+	<div data-test-id="filter-combinator-select" :class="$style.combinatorSelect">
 		<div v-if="readOnly || options.length === 1">
 			{{ i18n.baseText(`filter.combinator.${selected}`) }}
 		</div>
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/Filter/Condition.vue
index 5b44c2a0ef40f..9f668d58018c3 100644
--- a/packages/editor-ui/src/components/Filter/Condition.vue
+++ b/packages/editor-ui/src/components/Filter/Condition.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import type { IUpdateInformation } from '@/Interface';
+import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import ParameterIssues from '@/components/ParameterIssues.vue';
+import { useI18n } from '@/composables';
 import type { FilterConditionValue, INodeProperties } from 'n8n-workflow';
 import { computed } from 'vue';
+import OperatorSelect from './OperatorSelect.vue';
 import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
 import type { FilterOperator } from './types';
-import OperatorSelect from './OperatorSelect.vue';
-import ParameterInputFull from '@/components/ParameterInputFull.vue';
-import ParameterIssues from '@/components/ParameterIssues.vue';
-import { useI18n } from '@/composables';
-import type { IUpdateInformation } from '@/Interface';
 
 interface Props {
 	path: string;
@@ -62,7 +62,7 @@ const i18n = useI18n();
 			[$style.wrapper]: true,
 			[$style.hasIssues]: issues.length > 0,
 		}"
-		data-test-id="condition"
+		data-test-id="filter-condition"
 	>
 		<n8n-icon-button
 			v-if="canRemove"
@@ -70,6 +70,7 @@ const i18n = useI18n();
 			text
 			size="mini"
 			icon="trash"
+			data-test-id="filter-remove-condition"
 			:title="i18n.baseText('filter.removeCondition')"
 			:class="$style.remove"
 			@click="onRemove"
@@ -100,6 +101,7 @@ const i18n = useI18n();
 						:value="condition.leftValue"
 						:path="`${path}.left`"
 						:class="[$style.input, $style.inputLeft]"
+						data-test-id="filter-condition-left"
 						@update="onLeftValueChange"
 					/>
 					<operator-select
@@ -118,6 +120,7 @@ const i18n = useI18n();
 						:value="condition.rightValue"
 						:path="`${path}.right`"
 						:class="[$style.input, $style.inputRight]"
+						data-test-id="filter-condition-right"
 						@update="onRightValueChange"
 					/>
 				</div>
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/Filter/Filter.vue
index 776d02c7d24fb..3d68cc073a8f4 100644
--- a/packages/editor-ui/src/components/Filter/Filter.vue
+++ b/packages/editor-ui/src/components/Filter/Filter.vue
@@ -52,9 +52,9 @@ const allowedCombinators = computed<FilterTypeCombinator[]>(
 
 const state = reactive<{ paramValue: FilterValue }>({
 	paramValue: {
-		options: DEFAULT_FILTER_OPTIONS,
-		conditions: props.value.conditions ?? [createCondition()],
-		combinator: props.value.combinator ?? allowedCombinators.value[0],
+		options: props.value?.options ?? DEFAULT_FILTER_OPTIONS,
+		conditions: props.value?.conditions ?? [createCondition()],
+		combinator: props.value?.combinator ?? allowedCombinators.value[0],
 	},
 });
 
@@ -141,7 +141,7 @@ function getIssues(index: number): string[] {
 </script>
 
 <template>
-	<div :class="$style.filter" data-test-id="filter">
+	<div :class="$style.filter" :data-test-id="`filter-${parameter.name}`">
 		<n8n-input-label
 			:label="parameter.displayName"
 			:underline="true"
@@ -165,7 +165,7 @@ function getIssues(index: number): string[] {
 					<condition
 						:condition="condition"
 						:fixedLeftValue="!!parameter.typeOptions?.filter?.leftValue"
-						:canRemove="index !== 0"
+						:canRemove="index !== 0 || state.paramValue.conditions.length > 1"
 						:path="`${path}.${index}`"
 						:issues="getIssues(index)"
 						@operatorChange="(value) => onOperatorChanged(index, value)"
@@ -183,6 +183,7 @@ function getIssues(index: number): string[] {
 				:label="i18n.baseText('filter.addCondition')"
 				:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
 				:disabled="maxConditionsReached"
+				data-test-id="filter-add-condition"
 			/>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
index 6006bcb931d61..965a9e54d1aaa 100644
--- a/packages/editor-ui/src/components/Filter/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -33,8 +33,13 @@ const getOperatorId = (operator: FilterOperator): string =>
 </script>
 
 <template>
-	<div data-test-id="operator-select">
-		<n8n-select size="small" :modelValue="state.selected" @update:modelValue="onOperatorChange">
+	<div>
+		<n8n-select
+			data-test-id="filter-operator-select"
+			size="small"
+			:modelValue="state.selected"
+			@update:modelValue="onOperatorChange"
+		>
 			<template v-if="selectedGroupIcon" #prefix>
 				<n8n-icon :class="$style.selectedGroupIcon" :icon="selectedGroupIcon" />
 			</template>
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 18193053ae31b..e02a582df89d0 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -32,7 +32,7 @@
 				<input-hint
 					v-if="expressionOutput"
 					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
-					data-test-id="parameter-expression-preview"
+					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
 					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
 					:hint="expressionOutput"
 					:singleLine="true"
diff --git a/packages/editor-ui/src/components/__tests__/Filter.test.ts b/packages/editor-ui/src/components/__tests__/Filter.test.ts
new file mode 100644
index 0000000000000..320da3381d80b
--- /dev/null
+++ b/packages/editor-ui/src/components/__tests__/Filter.test.ts
@@ -0,0 +1,252 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import Filter from '@/components/Filter/Filter.vue';
+import { STORES } from '@/constants';
+import { useNDVStore } from '@/stores/ndv.store';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+
+const DEFAULT_SETUP = {
+	pinia: createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
+		},
+	}),
+	props: {
+		path: 'parameters.conditions',
+		node: {
+			parameters: {},
+			id: 'f63efb2d-3cc5-4500-89f9-b39aab19baf5',
+			name: 'If',
+			type: 'n8n-nodes-base.if',
+			typeVersion: 2,
+			position: [1120, 380],
+			credentials: {},
+			disabled: false,
+		},
+		parameter: { name: 'conditions', displayName: 'Conditions' },
+		value: {},
+	},
+};
+
+const renderComponent = createComponentRenderer(Filter, DEFAULT_SETUP);
+
+describe('Filter.vue', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders default state properly', async () => {
+		const { getByTestId, queryByTestId, findAllByTestId } = renderComponent();
+		expect(getByTestId('filter-conditions')).toBeInTheDocument();
+		expect(await findAllByTestId('filter-condition')).toHaveLength(1);
+		expect(getByTestId('filter-condition-left')).toBeInTheDocument();
+		expect(getByTestId('filter-operator-select')).toBeInTheDocument();
+
+		// Only visible when multiple conditions
+		expect(queryByTestId('filter-combinator-select')).not.toBeInTheDocument();
+	});
+
+	it('renders conditions with different operators', async () => {
+		const { getByTestId, findAllByTestId } = renderComponent({
+			...DEFAULT_SETUP,
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					options: {
+						caseSensitive: true,
+						leftValue: '',
+					},
+					conditions: [
+						{
+							leftValue: '={{ $json.tags }}',
+							rightValue: 'exotic',
+							operator: {
+								type: 'array',
+								operation: 'contains',
+								rightType: 'any',
+							},
+						},
+						{
+							leftValue: '={{ $json.meta }}',
+							rightValue: '',
+							operator: {
+								type: 'object',
+								operation: 'notEmpty',
+								singleValue: true,
+							},
+						},
+						{
+							leftValue: '={{ $json.test }}',
+							rightValue: 'other',
+							operator: {
+								type: 'string',
+								operation: 'equals',
+								singleValue: true,
+							},
+						},
+					],
+					combinator: 'or',
+				},
+			},
+		});
+		expect(getByTestId('filter-conditions')).toBeInTheDocument();
+		const conditions = await findAllByTestId('filter-condition');
+		const combinators = await findAllByTestId('filter-combinator-select');
+
+		expect(combinators).toHaveLength(2);
+		expect(combinators[0].querySelector('input')?.value).toEqual('OR');
+		expect(combinators[1]).toHaveTextContent('OR');
+
+		expect(conditions).toHaveLength(3);
+		expect(conditions[0].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
+			'{{ $json.tags }}',
+		);
+		expect(
+			conditions[0].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
+				?.value,
+		).toEqual('contains');
+		expect(
+			conditions[0].querySelector('[data-test-id="filter-condition-right"]')?.querySelector('input')
+				?.value,
+		).toEqual('exotic');
+
+		expect(conditions[1].querySelector('[data-test-id="filter-condition-left"]')).toHaveTextContent(
+			'{{ $json.meta }}',
+		);
+		expect(
+			conditions[1].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
+				?.value,
+		).toEqual('Not empty');
+		expect(conditions[1].querySelector('[data-test-id="filter-condition-right"]')).toBeNull();
+	});
+
+	it('renders parameter issues', async () => {
+		const ndvStore = useNDVStore();
+		vi.spyOn(ndvStore, 'activeNode', 'get').mockReturnValue({
+			...DEFAULT_SETUP.props.node,
+			issues: { parameters: { 'conditions.1': ['not a number sir'] } },
+		} as never);
+
+		const { getByTestId } = renderComponent({
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					conditions: [
+						{
+							leftValue: '={{ $json.num }}',
+							rightValue: '5',
+							operator: {
+								type: 'number',
+								operation: 'equals',
+							},
+						},
+						{
+							leftValue: '={{ $json.num }}',
+							rightValue: 'not a number',
+							operator: {
+								type: 'number',
+								operation: 'equals',
+							},
+						},
+					],
+				},
+			},
+		});
+
+		expect(getByTestId('parameter-issues')).toBeInTheDocument();
+	});
+
+	it('renders correctly with typeOptions.leftValue', async () => {
+		const { findAllByTestId } = renderComponent({
+			props: {
+				...DEFAULT_SETUP.props,
+				parameter: {
+					typeOptions: {
+						filter: { leftValue: 'leftValue is always this' },
+					},
+				},
+			},
+		});
+
+		const conditions = await findAllByTestId('filter-condition');
+		expect(conditions[0].querySelector('[data-test-id="filter-condition-left"]')).toBeNull();
+	});
+
+	it('renders correctly with typeOptions.allowedCombinators', async () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					conditions: [
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+					],
+				},
+				parameter: {
+					typeOptions: {
+						filter: { allowedCombinators: ['or'] },
+					},
+				},
+			},
+		});
+
+		expect(getByTestId('filter-combinator-select')).toHaveTextContent('OR');
+	});
+
+	it('renders correctly with typeOptions.maxConditions', async () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				...DEFAULT_SETUP.props,
+				value: {
+					conditions: [
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+						{
+							leftValue: 'foo',
+							operator: { type: 'string', operation: 'equals' },
+							rightValue: 'bar',
+						},
+					],
+				},
+				parameter: {
+					typeOptions: {
+						filter: { maxConditions: 2 },
+					},
+				},
+			},
+		});
+
+		expect(getByTestId('filter-add-condition')).toBeDisabled();
+		expect(getByTestId('filter-add-condition').title).toEqual('Maximum conditions reached');
+	});
+
+	it('can add and remove conditions', async () => {
+		const { getByTestId, findAllByTestId } = renderComponent(DEFAULT_SETUP);
+		await userEvent.click(getByTestId('filter-add-condition'));
+
+		let conditions = await findAllByTestId('filter-condition');
+		expect(conditions.length).toEqual(2);
+
+		const removeButton = conditions[0].querySelector('[data-test-id="filter-remove-condition"]');
+
+		console.log(removeButton);
+
+		await userEvent.click(removeButton as Element);
+
+		conditions = await findAllByTestId('filter-condition');
+		expect(conditions.length).toEqual(1);
+		expect(conditions[0].querySelector('[data-test-id="filter-remove-condition"]')).toBeNull();
+	});
+});

From 629cfb3df28fff857d85188129fb1da67415c482 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 30 Oct 2023 09:50:02 +0100
Subject: [PATCH 09/39] Implement nested select for operator

---
 .../src/components/Filter/OperatorSelect.vue  | 85 ++++++++++++++-----
 1 file changed, 64 insertions(+), 21 deletions(-)

diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
index 965a9e54d1aaa..09312832b8f48 100644
--- a/packages/editor-ui/src/components/Filter/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/Filter/OperatorSelect.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables';
 import { OPERATOR_GROUPS } from './constants';
-import { reactive, computed } from 'vue';
+import { computed, ref } from 'vue';
 import type { FilterOperator } from './types';
 
 interface Props {
@@ -10,7 +10,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const state = reactive({ selected: props.selected });
+const selected = ref(props.selected);
+const menuOpen = ref(false);
+const submenu = ref('none');
+
 const emit = defineEmits<{
 	(event: 'operatorChange', value: string): void;
 }>();
@@ -20,16 +23,29 @@ const i18n = useI18n();
 const groups = OPERATOR_GROUPS;
 
 const onOperatorChange = (operator: string): void => {
-	state.selected = operator;
+	selected.value = operator;
 	emit('operatorChange', operator);
 };
 
 const selectedGroupIcon = computed(
-	() => groups.find((group) => group.id === state.selected.split(':')[0])?.icon,
+	() => groups.find((group) => group.id === selected.value.split(':')[0])?.icon,
 );
 
 const getOperatorId = (operator: FilterOperator): string =>
 	`${operator.type}:${operator.operation}`;
+
+function onSelectVisibleChange(open: boolean) {
+	menuOpen.value = open;
+	if (!open) {
+		submenu.value = 'none';
+	}
+}
+
+function onGroupSelect(group: string) {
+	if (menuOpen.value) {
+		submenu.value = group;
+	}
+}
 </script>
 
 <template>
@@ -37,24 +53,46 @@ const getOperatorId = (operator: FilterOperator): string =>
 		<n8n-select
 			data-test-id="filter-operator-select"
 			size="small"
-			:modelValue="state.selected"
+			:modelValue="selected"
 			@update:modelValue="onOperatorChange"
+			@visible-change="onSelectVisibleChange"
 		>
 			<template v-if="selectedGroupIcon" #prefix>
-				<n8n-icon :class="$style.selectedGroupIcon" :icon="selectedGroupIcon" />
+				<n8n-icon
+					:class="$style.selectedGroupIcon"
+					:icon="selectedGroupIcon"
+					color="text-light"
+					size="small"
+				/>
 			</template>
 			<div :class="$style.groups">
 				<div :key="group.name" v-for="group of groups">
-					<div v-if="group.children.length > 0" :class="$style.groupTitle">
-						<n8n-icon v-if="group.icon" :icon="group.icon" />
-						<span>{{ i18n.baseText(group.name) }}</span>
-					</div>
-					<n8n-option
-						v-for="operator in group.children"
-						:key="getOperatorId(operator)"
-						:value="getOperatorId(operator)"
-						:label="i18n.baseText(operator.name)"
-					/>
+					<n8n-popover
+						:visible="submenu === group.id"
+						placement="right-start"
+						:show-arrow="false"
+						:offset="2"
+						:popper-style="{ padding: 'var(--spacing-3xs) 0' }"
+						width="auto"
+					>
+						<template #reference>
+							<div
+								v-if="group.children.length > 0"
+								@mouseenter="() => onGroupSelect(group.id)"
+								@click="() => onGroupSelect(group.id)"
+								:class="$style.groupTitle"
+							>
+								<n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" />
+								<span>{{ i18n.baseText(group.name) }}</span>
+							</div>
+						</template>
+						<n8n-option
+							v-for="operator in group.children"
+							:key="getOperatorId(operator)"
+							:value="getOperatorId(operator)"
+							:label="i18n.baseText(operator.name)"
+						/>
+					</n8n-popover>
 				</div>
 			</div>
 		</n8n-select>
@@ -69,16 +107,21 @@ const getOperatorId = (operator: FilterOperator): string =>
 .groups {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-xs);
 }
 
 .groupTitle {
 	display: flex;
-	gap: var(--spacing-4xs);
-	align-items: baseline;
+	gap: var(--spacing-2xs);
+	align-items: center;
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-bold);
-	color: var(--color-text-base);
-	padding: var(--spacing-2xs) var(--spacing-xs);
+	line-height: var(--font-line-height-regular);
+	color: var(--color-text-dark);
+	padding: var(--spacing-2xs) var(--spacing-s);
+	cursor: pointer;
+
+	&:hover {
+		background: var(--color-background-base);
+	}
 }
 </style>

From 7bb4e9c854fa50d15a938894e12111b711576e3e Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 30 Oct 2023 15:37:01 +0100
Subject: [PATCH 10/39] Handle continueOnFail and pairedItem in IfV2

---
 packages/nodes-base/nodes/If/V2/IfV2.node.ts | 26 ++++++++++++++------
 packages/workflow/src/Interfaces.ts          |  1 -
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 5e689bc26f69c..0fba0064d12dd 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -57,14 +57,26 @@ export class IfV2 implements INodeType {
 		const elseItems: INodeExecutionData[] = [];
 
 		this.getInputData().forEach((item, itemIndex) => {
-			const pass = this.getNodeParameter('conditions', itemIndex, false, {
-				extractValue: true,
-			});
+			try {
+				const pass = this.getNodeParameter('conditions', itemIndex, false, {
+					extractValue: true,
+				});
 
-			if (pass) {
-				thenItems.push(item);
-			} else {
-				elseItems.push(item);
+				if (item.pairedItem === undefined) {
+					item.pairedItem = { item: itemIndex };
+				}
+
+				if (pass) {
+					thenItems.push(item);
+				} else {
+					elseItems.push(item);
+				}
+			} catch (error) {
+				if (this.continueOnFail()) {
+					elseItems.push(item);
+				} else {
+					throw error;
+				}
 			}
 		});
 
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index 4b1c5999156b3..c4080069cbe65 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -10,7 +10,6 @@ import type { Readable } from 'stream';
 import type { URLSearchParams } from 'url';
 
 import type { AuthenticationMethod } from './Authentication';
-import type { CODE_EXECUTION_MODES, CODE_LANGUAGES } from './Constants';
 import type { CODE_EXECUTION_MODES, CODE_LANGUAGES, LOG_LEVELS } from './Constants';
 import type { IDeferredPromise } from './DeferredPromise';
 import type { ExecutionStatus } from './ExecutionStatus';

From 0058068746b87922549c9d1606534d5a95bcf228 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 7 Nov 2023 19:38:45 +0100
Subject: [PATCH 11/39] Rename Filter component (reserved name), undo timestamp
 parse on datetime

---
 .../{Filter => FilterConditions}/CombinatorSelect.vue      | 0
 .../components/{Filter => FilterConditions}/Condition.vue  | 0
 .../Filter.vue => FilterConditions/FilterConditions.vue}   | 0
 .../{Filter => FilterConditions}/OperatorSelect.vue        | 0
 .../components/{Filter => FilterConditions}/constants.ts   | 0
 .../src/components/{Filter => FilterConditions}/types.ts   | 0
 packages/editor-ui/src/components/ParameterInputList.vue   | 6 +++---
 .../__tests__/{Filter.test.ts => FilterConditions.test.ts} | 4 ++--
 packages/workflow/src/NodeHelpers.ts                       | 7 -------
 9 files changed, 5 insertions(+), 12 deletions(-)
 rename packages/editor-ui/src/components/{Filter => FilterConditions}/CombinatorSelect.vue (100%)
 rename packages/editor-ui/src/components/{Filter => FilterConditions}/Condition.vue (100%)
 rename packages/editor-ui/src/components/{Filter/Filter.vue => FilterConditions/FilterConditions.vue} (100%)
 rename packages/editor-ui/src/components/{Filter => FilterConditions}/OperatorSelect.vue (100%)
 rename packages/editor-ui/src/components/{Filter => FilterConditions}/constants.ts (100%)
 rename packages/editor-ui/src/components/{Filter => FilterConditions}/types.ts (100%)
 rename packages/editor-ui/src/components/__tests__/{Filter.test.ts => FilterConditions.test.ts} (97%)

diff --git a/packages/editor-ui/src/components/Filter/CombinatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
similarity index 100%
rename from packages/editor-ui/src/components/Filter/CombinatorSelect.vue
rename to packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
diff --git a/packages/editor-ui/src/components/Filter/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
similarity index 100%
rename from packages/editor-ui/src/components/Filter/Condition.vue
rename to packages/editor-ui/src/components/FilterConditions/Condition.vue
diff --git a/packages/editor-ui/src/components/Filter/Filter.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
similarity index 100%
rename from packages/editor-ui/src/components/Filter/Filter.vue
rename to packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
diff --git a/packages/editor-ui/src/components/Filter/OperatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
similarity index 100%
rename from packages/editor-ui/src/components/Filter/OperatorSelect.vue
rename to packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
diff --git a/packages/editor-ui/src/components/Filter/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
similarity index 100%
rename from packages/editor-ui/src/components/Filter/constants.ts
rename to packages/editor-ui/src/components/FilterConditions/constants.ts
diff --git a/packages/editor-ui/src/components/Filter/types.ts b/packages/editor-ui/src/components/FilterConditions/types.ts
similarity index 100%
rename from packages/editor-ui/src/components/Filter/types.ts
rename to packages/editor-ui/src/components/FilterConditions/types.ts
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 05148470cb558..237cc30a8b1e4 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -102,7 +102,7 @@
 				labelSize="small"
 				@valueChanged="valueChanged"
 			/>
-			<Filter
+			<FilterConditions
 				v-else-if="parameter.type === 'filter'"
 				:parameter="parameter"
 				:value="getParameterValue(nodeValues, parameter.name, path)"
@@ -163,7 +163,7 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ImportParameter from '@/components/ImportParameter.vue';
 import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue';
-import Filter from '@/components/Filter/Filter.vue';
+import FilterConditions from '@/components/FilterConditions/FilterConditions.vue';
 import { get, set } from 'lodash-es';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -186,7 +186,7 @@ export default defineComponent({
 		CollectionParameter,
 		ImportParameter,
 		ResourceMapper,
-		Filter,
+		FilterConditions,
 	},
 	props: {
 		nodeValues: {
diff --git a/packages/editor-ui/src/components/__tests__/Filter.test.ts b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
similarity index 97%
rename from packages/editor-ui/src/components/__tests__/Filter.test.ts
rename to packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
index 320da3381d80b..54964e2842c83 100644
--- a/packages/editor-ui/src/components/__tests__/Filter.test.ts
+++ b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
@@ -1,6 +1,6 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
-import Filter from '@/components/Filter/Filter.vue';
+import FilterConditions from '@/components/FilterConditions/FilterConditions.vue';
 import { STORES } from '@/constants';
 import { useNDVStore } from '@/stores/ndv.store';
 import { createTestingPinia } from '@pinia/testing';
@@ -29,7 +29,7 @@ const DEFAULT_SETUP = {
 	},
 };
 
-const renderComponent = createComponentRenderer(Filter, DEFAULT_SETUP);
+const renderComponent = createComponentRenderer(FilterConditions, DEFAULT_SETUP);
 
 describe('Filter.vue', () => {
 	afterEach(() => {
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index a09da232f776e..aa66a2f3b455c 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -1246,13 +1246,6 @@ export const tryToParseBoolean = (value: unknown): value is boolean => {
 };
 
 export const tryToParseDateTime = (value: unknown): DateTime => {
-	if (typeof value === 'number') {
-		const unixDate = DateTime.fromSeconds(value);
-		if (unixDate.isValid) {
-			return unixDate;
-		}
-	}
-
 	const dateString = String(value).trim();
 
 	// Rely on luxon to parse different date formats

From 6fd0284a8356d834af6f91c91ed021d9c4e8ce1b Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 15 Nov 2023 13:26:57 +0100
Subject: [PATCH 12/39] Fix product review issues

---
 packages/design-system/src/css/select.scss    |  8 ++
 .../FilterConditions/CombinatorSelect.vue     |  4 +-
 .../components/FilterConditions/Condition.vue | 81 ++++++++++++++++---
 .../FilterConditions/FilterConditions.vue     | 76 +++++++++++------
 .../FilterConditions/OperatorSelect.vue       |  1 +
 .../components/FilterConditions/constants.ts  | 13 +--
 .../src/components/ParameterInputFull.vue     |  2 +-
 .../src/components/ParameterInputList.vue     | 64 ++++++---------
 .../src/plugins/i18n/locales/en.json          | 25 +++---
 packages/nodes-base/nodes/If/V2/IfV2.node.ts  | 23 ++++--
 packages/workflow/src/Interfaces.ts           | 19 +++--
 packages/workflow/src/NodeHelpers.ts          | 59 +++++++++++---
 .../src/NodeParameters/FilterParameter.ts     | 11 +++
 13 files changed, 261 insertions(+), 125 deletions(-)

diff --git a/packages/design-system/src/css/select.scss b/packages/design-system/src/css/select.scss
index 7cc8696c1a61b..f5b6f17d31ba3 100644
--- a/packages/design-system/src/css/select.scss
+++ b/packages/design-system/src/css/select.scss
@@ -80,6 +80,14 @@
 		&.is-focus .el-input__inner {
 			border-color: var.$select-input-focus-border-color;
 		}
+
+		&__prefix {
+			left: var(--spacing-2xs);
+		}
+
+		&--prefix .el-input__inner {
+			padding-left: 26px;
+		}
 	}
 
 	> .el-input {
diff --git a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
index d5c34afffda8c..c006da87aac72 100644
--- a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
@@ -42,7 +42,7 @@ const onCombinatorChange = (combinator: FilterTypeCombinator): void => {
 .combinatorSelect {
 	max-width: 80px;
 	line-height: var(--font-line-height-xloose);
-	font-size: var(--font-size-s);
-	font-style: italic;
+	font-size: var(--font-size-2xs);
+	color: var(--color-text-light);
 }
 </style>
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 9f668d58018c3..2221c71759727 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -3,7 +3,12 @@ import type { IUpdateInformation } from '@/Interface';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
 import { useI18n } from '@/composables';
-import type { FilterConditionValue, INodeProperties } from 'n8n-workflow';
+import type {
+	FilterConditionValue,
+	FilterOperatorType,
+	INodeProperties,
+	NodePropertyTypes,
+} from 'n8n-workflow';
 import { computed } from 'vue';
 import OperatorSelect from './OperatorSelect.vue';
 import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
@@ -30,14 +35,69 @@ const emit = defineEmits<{
 	(event: 'remove'): void;
 }>();
 
-const operator = computed<FilterOperator>(() => {
+function isExpression(value: unknown): boolean {
+	return typeof value === 'string' && value.startsWith('=');
+}
+
+const operatorId = computed<FilterOperatorId>(() => {
 	const { type, operation } = props.condition.operator;
-	return OPERATORS_BY_ID[`${type}:${operation}` as FilterOperatorId];
+	return `${type}:${operation}` as FilterOperatorId;
 });
+const operator = computed<FilterOperator>(() => OPERATORS_BY_ID[operatorId.value]);
+const isLeftExpression = computed(() => isExpression(props.condition.leftValue));
+const isRightExpression = computed(() => isExpression(props.condition.rightValue));
+
+const operatorTypeToNodePropType = (operatorType: FilterOperatorType): NodePropertyTypes => {
+	switch (operatorType) {
+		case 'array':
+		case 'object':
+		case 'boolean':
+		case 'any':
+			return 'string';
+		default:
+			return operatorType;
+	}
+};
 
-const parameter: INodeProperties = { name: '', displayName: '', default: '', type: 'string' };
+const leftParameter = computed<INodeProperties>(() => ({
+	name: '',
+	displayName: '',
+	default: '',
+	placeholder: i18n.baseText(
+		operator.value.type === 'dateTime'
+			? 'filter.condition.placeholderDate'
+			: 'filter.condition.placeholderLeft',
+	),
+	type: operatorTypeToNodePropType(operator.value.type),
+}));
+
+const rightParameter = computed<INodeProperties>(() => ({
+	name: '',
+	displayName: '',
+	default: '',
+	placeholder: i18n.baseText(
+		operator.value.type === 'dateTime'
+			? 'filter.condition.placeholderDate'
+			: 'filter.condition.placeholderRight',
+	),
+	type: operatorTypeToNodePropType(operator.value.rightType ?? operator.value.type),
+}));
 
 const onOperatorChange = (value: string): void => {
+	const { operator } = props.condition;
+	const newOperator: FilterOperator = OPERATORS_BY_ID[value as FilterOperatorId];
+	const typeChanged = operator.type !== newOperator.type;
+
+	if (typeChanged && !isLeftExpression.value) {
+		emit('leftValueChange', '');
+	}
+
+	const rightTypeChanged =
+		(operator.rightType ?? operator.type) !== (newOperator.rightType ?? newOperator.type);
+	if ((rightTypeChanged && !isRightExpression.value) || newOperator.singleValue) {
+		emit('rightValueChange', '');
+	}
+
 	emit('operatorChange', value);
 };
 
@@ -79,7 +139,7 @@ const i18n = useI18n();
 			:class="$style.observer"
 			:breakpoints="[
 				{ bp: 'stacked', width: 340 },
-				{ bp: 'medium', width: 480 },
+				{ bp: 'medium', width: 520 },
 			]"
 		>
 			<template #default="{ bp }">
@@ -97,7 +157,7 @@ const i18n = useI18n();
 						hideLabel
 						hideHint
 						isSingleLine
-						:parameter="parameter"
+						:parameter="leftParameter"
 						:value="condition.leftValue"
 						:path="`${path}.left`"
 						:class="[$style.input, $style.inputLeft]"
@@ -116,7 +176,7 @@ const i18n = useI18n();
 						hideHint
 						isSingleLine
 						:optionsPosition="bp === 'default' ? 'top' : 'bottom'"
-						:parameter="parameter"
+						:parameter="rightParameter"
 						:value="condition.rightValue"
 						:path="`${path}.right`"
 						:class="[$style.input, $style.inputRight]"
@@ -137,13 +197,10 @@ const i18n = useI18n();
 	display: flex;
 	align-items: flex-end;
 	gap: var(--spacing-4xs);
+	padding-left: var(--spacing-l);
 
 	&.hasIssues {
 		--input-border-color: var(--color-danger);
-
-		input:focus {
-			border-color: var(--color-danger);
-		}
 	}
 
 	&:hover {
@@ -203,7 +260,7 @@ const i18n = useI18n();
 
 .remove {
 	position: absolute;
-	left: calc(var(--spacing-l) * -1);
+	left: 0;
 	top: var(--spacing-l);
 	opacity: 0;
 	transition: opacity 100ms ease-in;
diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
index 3d68cc073a8f4..b9300038aa47d 100644
--- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
+++ b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { isEqual } from 'lodash-es';
 
-import type {
-	FilterConditionValue,
-	FilterValue,
-	INodeProperties,
-	FilterTypeCombinator,
-	INode,
-	NodeParameterValue,
-	FilterOptionsValue,
+import {
+	type FilterConditionValue,
+	type FilterValue,
+	type INodeProperties,
+	type FilterTypeCombinator,
+	type INode,
+	type NodeParameterValue,
+	type FilterOptionsValue,
 } from 'n8n-workflow';
 import { computed, reactive, watch } from 'vue';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -24,6 +24,7 @@ import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
 import { resolveParameter } from '@/mixins/workflowHelpers';
 import type { FilterOperator } from './types';
+import { v4 as uuid } from 'uuid';
 
 interface Props {
 	parameter: INodeProperties;
@@ -43,7 +44,7 @@ const ndvStore = useNDVStore();
 const { callDebounced } = useDebounceHelper();
 
 function createCondition(): FilterConditionValue {
-	return { leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };
+	return { id: uuid(), leftValue: '', rightValue: '', operator: DEFAULT_OPERATOR_VALUE };
 }
 
 const allowedCombinators = computed<FilterTypeCombinator[]>(
@@ -152,7 +153,7 @@ function getIssues(index: number): string[] {
 		</n8n-input-label>
 		<div :class="$style.content">
 			<div :class="$style.conditions">
-				<div v-for="(condition, index) of state.paramValue.conditions" :key="index">
+				<div v-for="(condition, index) of state.paramValue.conditions" :key="condition.id">
 					<combinator-select
 						v-if="index !== 0"
 						:readOnly="index !== 1"
@@ -175,16 +176,18 @@ function getIssues(index: number): string[] {
 					></condition>
 				</div>
 			</div>
-			<n8n-button
-				type="secondary"
-				block
-				@click="addCondition"
-				:class="$style.addCondition"
-				:label="i18n.baseText('filter.addCondition')"
-				:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
-				:disabled="maxConditionsReached"
-				data-test-id="filter-add-condition"
-			/>
+			<div :class="$style.addConditionWrapper">
+				<n8n-button
+					type="tertiary"
+					block
+					@click="addCondition"
+					:class="$style.addCondition"
+					:label="i18n.baseText('filter.addCondition')"
+					:title="maxConditionsReached ? i18n.baseText('filter.maxConditions') : ''"
+					:disabled="maxConditionsReached"
+					data-test-id="filter-add-condition"
+				/>
+			</div>
 		</div>
 	</div>
 </template>
@@ -201,17 +204,42 @@ function getIssues(index: number): string[] {
 	flex-direction: column;
 	gap: var(--spacing-4xs);
 }
-.content {
-	padding-left: var(--spacing-l);
-}
 .combinator {
 	position: relative;
 	z-index: 1;
 	margin-top: var(--spacing-2xs);
 	margin-bottom: calc(var(--spacing-2xs) * -1);
+	margin-left: var(--spacing-l);
 }
 
-.addCondition {
+.addConditionWrapper {
 	margin-top: var(--spacing-l);
+	margin-left: var(--spacing-l);
+}
+
+.addCondition {
+	// Styling to match collection button (should move to standard button in future)
+	color: var(--color-text-dark);
+	font-weight: var(--font-weight-normal);
+	--button-border-color: var(--color-foreground-base);
+	--button-background-color: var(--color-background-base);
+
+	&:hover,
+	&:focus,
+	&:active {
+		--button-hover-font-color: var(--color-button-primary-font);
+		--button-hover-border-color: var(--color-foreground-base);
+		--button-hover-background-color: var(--color-background-base);
+
+		--button-active-font-color: var(--color-button-primary-font);
+		--button-active-border-color: var(--color-foreground-base);
+		--button-active-background-color: var(--color-background-base);
+
+		--button-focus-font-color: var(--color-button-primary-font);
+		--button-focus-border-color: var(--color-foreground-base);
+		--button-focus-background-color: var(--color-background-base);
+
+		outline: none;
+	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
index 09312832b8f48..6a059d00f9501 100644
--- a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -53,6 +53,7 @@ function onGroupSelect(group: string) {
 		<n8n-select
 			data-test-id="filter-operator-select"
 			size="small"
+			:key="selectedGroupIcon"
 			:modelValue="selected"
 			@update:modelValue="onOperatorChange"
 			@visible-change="onSelectVisibleChange"
diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index c180f2c1251d5..bbc096a4098f3 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -4,7 +4,11 @@ import type { FilterOperator, FilterOperatorGroup } from './types';
 
 export const DEFAULT_MAX_CONDITIONS = 10;
 
-export const DEFAULT_FILTER_OPTIONS: FilterOptionsValue = { caseSensitive: true, leftValue: '' };
+export const DEFAULT_FILTER_OPTIONS: FilterOptionsValue = {
+	caseSensitive: true,
+	leftValue: '',
+	typeValidation: 'strict',
+};
 
 export const OPERATORS_BY_ID = {
 	'any:exists': {
@@ -153,11 +157,8 @@ export const OPERATORS = Object.values(OPERATORS_BY_ID);
 
 export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
 
-export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] = {
-	type: 'any',
-	operation: 'exists',
-	singleValue: true,
-};
+export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] =
+	OPERATORS_BY_ID['string:equals'];
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c2c863d1d60e7..dce57f4a337dd 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -386,7 +386,7 @@ export default defineComponent({
 }
 .options {
 	position: absolute;
-	bottom: -24px;
+	bottom: -22px;
 	right: 0;
 	opacity: 0;
 	transition: opacity 100ms ease-in;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 1a0f0ad8332c8..2395fdc8c6e9e 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -48,18 +48,16 @@
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
 			>
-				<div
-					class="delete-option clickable"
-					:title="$locale.baseText('parameterInputList.delete')"
+				<n8n-icon-button
 					v-if="hideDelete !== true && !isReadOnly"
-				>
-					<font-awesome-icon
-						icon="trash"
-						class="reset-icon clickable"
-						:title="$locale.baseText('parameterInputList.parameterOptions')"
-						@click="deleteOption(parameter.name)"
-					/>
-				</div>
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
 				<n8n-input-label
 					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
 					:tooltipText="$locale.nodeText().inputLabelDescription(parameter, path)"
@@ -110,18 +108,16 @@
 				v-else-if="displayNodeParameter(parameter) && credentialsParameterIndex !== index"
 				class="parameter-item"
 			>
-				<div
-					class="delete-option clickable"
-					:title="$locale.baseText('parameterInputList.delete')"
+				<n8n-icon-button
 					v-if="hideDelete !== true && !isReadOnly"
-				>
-					<font-awesome-icon
-						icon="trash"
-						class="reset-icon clickable"
-						:title="$locale.baseText('parameterInputList.deleteParameter')"
-						@click="deleteOption(parameter.name)"
-					/>
-				</div>
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
 
 				<parameter-input-full
 					:parameter="parameter"
@@ -518,15 +514,11 @@ export default defineComponent({
 <style lang="scss">
 .parameter-input-list-wrapper {
 	.delete-option {
-		display: none;
 		position: absolute;
-		z-index: 999;
-		color: #f56c6c;
-		font-size: var(--font-size-2xs);
-
-		&:hover {
-			color: #ff0000;
-		}
+		opacity: 0;
+		top: 0;
+		left: calc(-1 * var(--spacing-2xs));
+		transition: opacity 100ms ease-in;
 	}
 
 	.indent > div {
@@ -537,11 +529,6 @@ export default defineComponent({
 		position: relative;
 		margin: var(--spacing-xs) 0;
 
-		.delete-option {
-			top: 0;
-			left: 0;
-		}
-
 		.parameter-info {
 			display: none;
 		}
@@ -550,15 +537,10 @@ export default defineComponent({
 	.parameter-item {
 		position: relative;
 		margin: var(--spacing-xs) 0;
-
-		> .delete-option {
-			top: var(--spacing-5xs);
-			left: 0;
-		}
 	}
 	.parameter-item:hover > .delete-option,
 	.multi-parameter:hover > .delete-option {
-		display: block;
+		opacity: 1;
 	}
 
 	.parameter-notice {
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 9d235caaf6014..a1ffb8f585e4d 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2242,9 +2242,9 @@
 	"executionUsage.expired.text": "Your trial is over. Upgrade now to keep your data.",
 	"executionUsage.ranOutOfExecutions.text": "You’re out of executions. Upgrade your plan to keep automating.",
 	"filter.operatorGroup.basic": "Basic",
-	"filter.operatorGroup.string": "Text",
-	"filter.operatorGroup.number": "Numbers",
-	"filter.operatorGroup.date": "Dates",
+	"filter.operatorGroup.string": "String",
+	"filter.operatorGroup.number": "Number",
+	"filter.operatorGroup.date": "Date",
 	"filter.operatorGroup.boolean": "Boolean",
 	"filter.operatorGroup.array": "Array",
 	"filter.operatorGroup.object": "Object",
@@ -2271,16 +2271,19 @@
 	"filter.operator.true": "is true",
 	"filter.operator.false": "is false",
 	"filter.operator.lengthEquals": "length equal to",
-	"filter.operator.lengthNotEquals": "Length not equal to",
-	"filter.operator.lengthGt": "Length greater than",
-	"filter.operator.lengthLt": "Length less than",
-	"filter.operator.lengthGte": "Length greater than or equal",
-	"filter.operator.lengthLte": "Length less than or equal",
-	"filter.operator.empty": "Empty",
-	"filter.operator.notEmpty": "Not empty",
+	"filter.operator.lengthNotEquals": "length not equal to",
+	"filter.operator.lengthGt": "length greater than",
+	"filter.operator.lengthLt": "length less than",
+	"filter.operator.lengthGte": "length greater than or equal",
+	"filter.operator.lengthLte": "length less than or equal",
+	"filter.operator.empty": "empty",
+	"filter.operator.notEmpty": "not empty",
 	"filter.combinator.or": "OR",
 	"filter.combinator.and": "AND",
 	"filter.addCondition": "Add condition",
 	"filter.removeCondition": "Remove condition",
-	"filter.maxConditions": "Maximum conditions reached"
+	"filter.maxConditions": "Maximum conditions reached",
+	"filter.condition.placeholderLeft": "e.g. value1",
+	"filter.condition.placeholderRight": "e.g. value2",
+	"filter.condition.placeholderDate": "e.g. 1999-12-31"
 }
diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 0fba0064d12dd..836400e88d51c 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -19,7 +19,7 @@ export class IfV2 implements INodeType {
 			},
 			inputs: ['main'],
 			outputs: ['main', 'main'],
-			outputNames: ['then', 'else'],
+			outputNames: ['true', 'false'],
 			properties: [
 				{
 					displayName: 'Conditions',
@@ -30,6 +30,7 @@ export class IfV2 implements INodeType {
 					typeOptions: {
 						filter: {
 							caseSensitive: '={{$parameter.options.caseSensitive}}',
+							typeValidation: '={{$parameter.options.looseTypeValidation ? "loose" : "strict"}}',
 						},
 					},
 				},
@@ -37,7 +38,7 @@ export class IfV2 implements INodeType {
 					displayName: 'Options',
 					name: 'options',
 					type: 'collection',
-					placeholder: 'Add Option',
+					placeholder: 'Add option',
 					default: {},
 					options: [
 						{
@@ -46,6 +47,12 @@ export class IfV2 implements INodeType {
 							type: 'boolean',
 							default: true,
 						},
+						{
+							displayName: 'Less Strict Type Validation',
+							name: 'looseTypeValidation',
+							type: 'boolean',
+							default: true,
+						},
 					],
 				},
 			],
@@ -53,8 +60,8 @@ export class IfV2 implements INodeType {
 	}
 
 	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
-		const thenItems: INodeExecutionData[] = [];
-		const elseItems: INodeExecutionData[] = [];
+		const trueItems: INodeExecutionData[] = [];
+		const falseItems: INodeExecutionData[] = [];
 
 		this.getInputData().forEach((item, itemIndex) => {
 			try {
@@ -67,19 +74,19 @@ export class IfV2 implements INodeType {
 				}
 
 				if (pass) {
-					thenItems.push(item);
+					trueItems.push(item);
 				} else {
-					elseItems.push(item);
+					falseItems.push(item);
 				}
 			} catch (error) {
 				if (this.continueOnFail()) {
-					elseItems.push(item);
+					falseItems.push(item);
 				} else {
 					throw error;
 				}
 			}
 		});
 
-		return [thenItems, elseItems];
+		return [trueItems, falseItems];
 	}
 }
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index f179c5fdb40bd..d0464e1aa6fd5 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1137,12 +1137,13 @@ type NonEmptyArray<T> = [T, ...T[]];
 
 export type FilterTypeCombinator = 'and' | 'or';
 
-export interface FilterTypeOptions {
-	caseSensitive?: boolean | string; // default = true
-	leftValue?: string; // when set, user can't edit left side of condition
-	allowedCombinators?: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
-	maxConditions?: number; // default = 5
-}
+export type FilterTypeOptions = Partial<{
+	caseSensitive: boolean | string; // default = false
+	leftValue: string; // when set, user can't edit left side of condition
+	allowedCombinators: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
+	maxConditions: number; // default = 10
+	typeValidation: 'strict' | 'loose' | {}; // default = strict, `| {}` is a TypeScript trick to allow custom strings, but still give autocomplete
+}>;
 
 export interface IDisplayOptions {
 	hide?: {
@@ -2230,14 +2231,16 @@ export interface FilterOperatorValue {
 }
 
 export type FilterConditionValue = {
-	leftValue: string;
+	id: string;
+	leftValue: string | number | boolean;
 	operator: FilterOperatorValue;
-	rightValue: string;
+	rightValue: string | number | boolean;
 };
 
 export type FilterOptionsValue = {
 	caseSensitive: boolean;
 	leftValue: string;
+	typeValidation: 'strict' | 'loose';
 };
 
 export type FilterValue = {
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index 42bd7c9fffddd..5b54f1ab99d5c 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -1175,6 +1175,13 @@ export const validateFieldType = (
 	if (value === null || value === undefined) return { valid: true };
 	const defaultErrorMessage = `'${fieldName}' expects a ${type} but we got '${String(value)}'`;
 	switch (type.toLowerCase()) {
+		case 'string': {
+			try {
+				return { valid: true, newValue: tryToParseString(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
 		case 'number': {
 			try {
 				return { valid: true, newValue: tryToParseNumber(value) };
@@ -1252,6 +1259,21 @@ export const tryToParseNumber = (value: unknown): number => {
 	return Number(value);
 };
 
+export const tryToParseString = (value: unknown): string => {
+	if (typeof value === 'object') return JSON.stringify(value);
+	if (typeof value === 'undefined') return '';
+	if (
+		typeof value === 'string' ||
+		typeof value === 'bigint' ||
+		typeof value === 'boolean' ||
+		typeof value === 'number'
+	) {
+		return value.toString();
+	}
+
+	return String(value);
+};
+
 export const tryToParseBoolean = (value: unknown): value is boolean => {
 	if (typeof value === 'boolean') {
 		return value;
@@ -1428,18 +1450,31 @@ export const validateFilterParameter = (
 			const { type, rightType, singleValue } = condition.operator;
 			const key = `${nodeProperties.name}.${index}`;
 
-			if (type === 'any') {
-				return issues;
-			}
-
-			const validationResultLeft = condition.leftValue.startsWith('=')
-				? { valid: true }
-				: validateFieldType(nodeProperties.displayName, condition.leftValue, type);
-
-			const validationResultRight =
-				condition.rightValue.startsWith('=') || singleValue || rightType === 'any'
-					? { valid: true }
-					: validateFieldType(nodeProperties.displayName, condition.rightValue, rightType ?? type);
+			const isLeftValueExpression =
+				typeof condition.leftValue === 'string' && condition.leftValue.startsWith('=');
+			const hasLeftValue =
+				condition.leftValue !== undefined &&
+				condition.leftValue !== null &&
+				condition.leftValue !== '';
+			const checkLeftValue = hasLeftValue && !isLeftValueExpression && type !== 'any';
+
+			const validationResultLeft = checkLeftValue
+				? validateFieldType(nodeProperties.displayName, condition.leftValue, type)
+				: { valid: true };
+
+			const isRightValueExpression =
+				typeof condition.rightValue === 'string' && condition.rightValue.startsWith('=');
+			const hasRightValue =
+				condition.rightValue !== undefined &&
+				condition.rightValue !== null &&
+				condition.rightValue !== '';
+			const safeRightType = rightType ?? type;
+			const checkRightValue =
+				hasRightValue && !isRightValueExpression && !singleValue && safeRightType !== 'any';
+
+			const validationResultRight = checkRightValue
+				? validateFieldType(nodeProperties.displayName, condition.rightValue, safeRightType)
+				: { valid: true };
 
 			if (!validationResultLeft.valid || !validationResultRight.valid) {
 				issues[key] = [];
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 0b5e656ea0980..0c2ddeb6dab7d 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -35,6 +35,17 @@ export function executeFilterCondition(
 		}
 	}
 
+	// Return false when typeChecking=strict and validateFieldType changed the types
+	// DateTime is an exception, strings are allowed to be casted to DateTime
+	if (options.typeValidation !== 'loose') {
+		if (condition.leftValue !== leftValue && operator.type !== 'dateTime') {
+			return false;
+		}
+		if (condition.rightValue !== rightValue && rightType !== 'dateTime') {
+			return false;
+		}
+	}
+
 	switch (operator.type) {
 		case 'any': {
 			const exists = leftValue !== undefined && leftValue !== null;

From 8bbdce4767087c300d136915f5a02819434a84ff Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 15 Nov 2023 18:41:37 +0100
Subject: [PATCH 13/39] Add test coverage for all filter comparison operators

---
 packages/workflow/src/Interfaces.ts           |   4 +-
 .../src/NodeParameters/FilterParameter.ts     |  53 +-
 .../workflow/test/FilterParameter.test.ts     | 959 ++++++++++++++++++
 3 files changed, 992 insertions(+), 24 deletions(-)
 create mode 100644 packages/workflow/test/FilterParameter.test.ts

diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index d0464e1aa6fd5..1e6939ff8f7cc 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -2232,9 +2232,9 @@ export interface FilterOperatorValue {
 
 export type FilterConditionValue = {
 	id: string;
-	leftValue: string | number | boolean;
+	leftValue: unknown;
 	operator: FilterOperatorValue;
-	rightValue: string | number | boolean;
+	rightValue: unknown;
 };
 
 export type FilterOptionsValue = {
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 0c2ddeb6dab7d..99c695d54822e 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -25,16 +25,6 @@ export function executeFilterCondition(
 	let leftValue = parsedLeftValue.newValue;
 	let rightValue = parsedRightValue.newValue;
 
-	if (!options.caseSensitive) {
-		if (typeof leftValue === 'string') {
-			leftValue = leftValue.toLocaleLowerCase();
-		}
-
-		if (typeof rightValue === 'string') {
-			rightValue = rightValue.toLocaleLowerCase();
-		}
-	}
-
 	// Return false when typeChecking=strict and validateFieldType changed the types
 	// DateTime is an exception, strings are allowed to be casted to DateTime
 	if (options.typeValidation !== 'loose') {
@@ -60,6 +50,19 @@ export function executeFilterCondition(
 			break;
 		}
 		case 'string': {
+			if (!options.caseSensitive) {
+				if (typeof leftValue === 'string') {
+					leftValue = leftValue.toLocaleLowerCase();
+				}
+
+				if (
+					typeof rightValue === 'string' &&
+					!(condition.operator.operation === 'regex' || condition.operator.operation === 'notRegex')
+				) {
+					rightValue = rightValue.toLocaleLowerCase();
+				}
+			}
+
 			const left = (leftValue ?? '') as string;
 			const right = (rightValue ?? '') as string;
 
@@ -147,35 +150,41 @@ export function executeFilterCondition(
 		}
 		case 'array': {
 			const left = (leftValue ?? []) as unknown[];
-			const rightArray = (rightValue ?? []) as unknown[];
+			const rightNumber = rightValue as number;
 
 			switch (condition.operator.operation) {
 				case 'contains':
-					return left.includes(rightValue as unknown);
+					if (!options.caseSensitive && typeof rightValue === 'string') {
+						rightValue = rightValue.toLocaleLowerCase();
+					}
+					return left.includes(rightValue);
 				case 'notContains':
-					return !left.includes(rightValue as unknown);
+					if (!options.caseSensitive && typeof rightValue === 'string') {
+						rightValue = rightValue.toLocaleLowerCase();
+					}
+					return !left.includes(rightValue);
 				case 'lengthEquals':
-					return left.length === rightArray.length;
+					return left.length === rightNumber;
 				case 'lengthNotEquals':
-					return left.length !== rightArray.length;
+					return left.length !== rightNumber;
 				case 'lengthGt':
-					return left.length > rightArray.length;
+					return left.length > rightNumber;
 				case 'lengthLt':
-					return left.length < rightArray.length;
+					return left.length < rightNumber;
 				case 'lengthGte':
-					return left.length >= rightArray.length;
+					return left.length >= rightNumber;
 				case 'lengthLte':
-					return left.length <= rightArray.length;
+					return left.length <= rightNumber;
 			}
 		}
 		case 'object': {
-			const left = leftValue ?? {};
+			const left = leftValue;
 
 			switch (condition.operator.operation) {
 				case 'empty':
-					return Object.keys(left).length === 0;
+					return !!left && Object.keys(left).length === 0;
 				case 'notEmpty':
-					return Object.keys(left).length !== 0;
+					return !!left && Object.keys(left).length !== 0;
 			}
 		}
 	}
diff --git a/packages/workflow/test/FilterParameter.test.ts b/packages/workflow/test/FilterParameter.test.ts
new file mode 100644
index 0000000000000..2e1840f47d026
--- /dev/null
+++ b/packages/workflow/test/FilterParameter.test.ts
@@ -0,0 +1,959 @@
+import { executeFilter } from '@/NodeParameters/FilterParameter';
+import type { FilterConditionValue, FilterValue } from '@/Interfaces';
+import merge from 'lodash/merge';
+
+type DeepPartial<T> = {
+	[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+const filterFactory = (data: DeepPartial<FilterValue> = {}): FilterValue =>
+	merge(
+		{
+			combinator: 'and',
+			conditions: [],
+			options: {
+				leftValue: '',
+				caseSensitive: false,
+				typeValidation: 'strict',
+			},
+		} as FilterValue,
+		data,
+	);
+
+describe('FilterParameter', () => {
+	describe('executeFilter', () => {
+		it('should support and/or combinators', () => {
+			const falseCondition: FilterConditionValue = {
+				id: '1',
+				leftValue: 'foo',
+				rightValue: 'bar',
+				operator: { operation: 'equals', type: 'string' },
+			};
+			const trueCondition: FilterConditionValue = {
+				id: '2',
+				leftValue: 'foo',
+				rightValue: 'foo',
+				operator: { operation: 'equals', type: 'string' },
+			};
+
+			const andResult = executeFilter(
+				filterFactory({ combinator: 'and', conditions: [falseCondition, trueCondition] }),
+			);
+			expect(andResult).toBe(false);
+
+			const orResult = executeFilter(
+				filterFactory({ combinator: 'or', conditions: [falseCondition, trueCondition] }),
+			);
+			expect(orResult).toBe(true);
+		});
+
+		describe('options.caseSensitive', () => {
+			it('should evaluate strings case insensitive (=default)', () => {
+				const result = executeFilter(
+					filterFactory({
+						combinator: 'and',
+						conditions: [
+							{
+								id: '1',
+								leftValue: 'FOO',
+								rightValue: 'foo',
+								operator: { operation: 'equals', type: 'string' },
+							},
+							{
+								id: '2',
+								leftValue: 'foobarbaz',
+								rightValue: 'BAR',
+								operator: { operation: 'contains', type: 'string' },
+							},
+						],
+						options: { caseSensitive: false },
+					}),
+				);
+				expect(result).toBe(true);
+			});
+
+			it('should evaluate strings case sensitive', () => {
+				const result = executeFilter(
+					filterFactory({
+						combinator: 'or',
+						conditions: [
+							{
+								id: '1',
+								leftValue: 'Foo',
+								rightValue: 'FOO',
+								operator: { operation: 'equals', type: 'string' },
+							},
+							{
+								id: '2',
+								leftValue: 'foobarbaz',
+								rightValue: 'BAR',
+								operator: { operation: 'contains', type: 'string' },
+							},
+						],
+						options: { caseSensitive: true },
+					}),
+				);
+				expect(result).toBe(false);
+			});
+		});
+
+		describe('options.typeValidation', () => {
+			it('should evaluate conditions with strict type validation (=default)', () => {
+				const result = executeFilter(
+					filterFactory({
+						combinator: 'or',
+						conditions: [
+							{
+								id: '1',
+								leftValue: '15',
+								rightValue: 15,
+								operator: { operation: 'equals', type: 'number' },
+							},
+							{
+								id: '2',
+								leftValue: 'true',
+								operator: { operation: 'true', type: 'boolean' },
+							},
+						],
+						options: { typeValidation: 'strict' },
+					}),
+				);
+				expect(result).toBe(false);
+			});
+
+			it('should evaluate conditions with loose type validation', () => {
+				const result = executeFilter(
+					filterFactory({
+						combinator: 'and',
+						conditions: [
+							{
+								id: '1',
+								leftValue: '15',
+								rightValue: 15,
+								operator: { operation: 'equals', type: 'number' },
+							},
+							{
+								id: '2',
+								leftValue: 'true',
+								operator: { operation: 'true', type: 'boolean' },
+							},
+						],
+						options: { typeValidation: 'loose' },
+					}),
+				);
+				expect(result).toBe(true);
+			});
+		});
+
+		describe('operators', () => {
+			describe('any', () => {
+				it.each([
+					{ left: '', expected: true },
+					{ left: null, expected: false },
+					{ left: undefined, expected: false },
+					{ left: 0, expected: true },
+					{ left: false, expected: true },
+				])('any:exists($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left as string,
+									operator: { operation: 'exists', type: 'any' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: '', expected: false },
+					{ left: null, expected: true },
+					{ left: undefined, expected: true },
+					{ left: 0, expected: false },
+					{ left: false, expected: false },
+				])('any:notExists($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left as string,
+									operator: { operation: 'notExists', type: 'any' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+
+			describe('string', () => {
+				it.each([
+					{ left: 'first string', right: 'first string', expected: true },
+					{ left: 'first string', right: 'second string', expected: false },
+					{ left: '', right: '🐛', expected: false },
+					{ left: '🐛', right: '🐛', expected: true },
+				])('string:equals("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'equals', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: false },
+					{ left: 'first string', right: 'second string', expected: true },
+					{ left: '', right: '🐛', expected: true },
+					{ left: '🐛', right: '🐛', expected: false },
+				])('string:notEquals("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notEquals', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: true },
+					{ left: 'first string', right: 'first', expected: true },
+					{ left: 'first string', right: 'irs', expected: true },
+					{ left: 'first string', right: '', expected: true },
+					{ left: 'first string', right: '?', expected: false },
+				])('string:contains("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'contains', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: false },
+					{ left: 'first string', right: 'first', expected: false },
+					{ left: 'first string', right: 'irs', expected: false },
+					{ left: 'first string', right: '', expected: false },
+					{ left: 'first string', right: '?', expected: true },
+				])('string:notContains("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notContains', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: true },
+					{ left: 'first string', right: 'first', expected: true },
+					{ left: 'first string', right: 'irs', expected: false },
+					{ left: 'first string', right: '', expected: true },
+					{ left: 'first string', right: '?', expected: false },
+				])('string:startsWith("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'startsWith', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: false },
+					{ left: 'first string', right: 'first', expected: false },
+					{ left: 'first string', right: 'irs', expected: true },
+					{ left: 'first string', right: '', expected: false },
+					{ left: 'first string', right: '?', expected: true },
+				])('string:notStartsWith("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notStartsWith', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: true },
+					{ left: 'first string', right: 'string', expected: true },
+					{ left: 'first string', right: 'g', expected: true },
+					{ left: 'first string', right: '', expected: true },
+					{ left: 'first string', right: '?', expected: false },
+				])('string:endsWith("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'endsWith', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first string', expected: false },
+					{ left: 'first string', right: 'string', expected: false },
+					{ left: 'first string', right: 'g', expected: false },
+					{ left: 'first string', right: '', expected: false },
+					{ left: 'first string', right: '?', expected: true },
+				])('string:notEndsWith("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notEndsWith', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first', expected: true },
+					{ left: 'first string', right: 'second', expected: false },
+					{ left: 'first string', right: '.*', expected: true },
+					{ left: 'any string', right: '[0-9]', expected: false },
+					{ left: 'any string', right: '[a-z]', expected: true },
+					{ left: 'lowercase', right: '[A-Z]', expected: false },
+				])('string:regex("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'regex', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 'first string', right: 'first', expected: false },
+					{ left: 'first string', right: 'second', expected: true },
+					{ left: 'first string', right: '.*', expected: false },
+					{ left: 'any string', right: '[0-9]', expected: true },
+					{ left: 'any string', right: '[a-z]', expected: false },
+					{ left: 'lowercase', right: '[A-Z]', expected: true },
+				])('string:notRegex("$left","$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notRegex', type: 'string' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+
+			describe('number', () => {
+				it.each([
+					{ left: 0, right: 0, expected: true },
+					{ left: 15, right: 15, expected: true },
+					{ left: 15.34, right: 15.34, expected: true },
+					{ left: 15, right: 15.3249038, expected: false },
+				])('number:equals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'equals', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 0, right: 0, expected: false },
+					{ left: 15, right: 15, expected: false },
+					{ left: 15.34, right: 15.34, expected: false },
+					{ left: 15, right: 15.3249038, expected: true },
+				])('number:notEquals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notEquals', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 0, right: 0, expected: false },
+					{ left: 15, right: 16, expected: false },
+					{ left: 16, right: 15, expected: true },
+					{ left: 15.34001, right: 15.34, expected: true },
+				])('number:gt($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'gt', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 0, right: 0, expected: false },
+					{ left: 15, right: 16, expected: true },
+					{ left: 16, right: 15, expected: false },
+					{ left: 15.34001, right: 15.34, expected: false },
+				])('number:lt($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lt', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 0, right: 0, expected: true },
+					{ left: 15, right: 16, expected: false },
+					{ left: 16, right: 15, expected: true },
+					{ left: 15.34001, right: 15.34, expected: true },
+				])('number:gte($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'gte', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: 0, right: 0, expected: true },
+					{ left: 15, right: 16, expected: true },
+					{ left: 16, right: 15, expected: false },
+					{ left: 15.34001, right: 15.34, expected: false },
+				])('number:lte($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lte', type: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+
+			describe('dateTime', () => {
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: true },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: false },
+				])('dateTime:equals("$left", "$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'equals', type: 'dateTime' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: false },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: true },
+				])('dateTime:notEquals("$left", "$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notEquals', type: 'dateTime' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: false },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: false },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-01-01T00:00:00.000Z', expected: true },
+				])('dateTime:after("$left", "$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'after', type: 'dateTime' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: false },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: true },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-01-01T00:00:00.000Z', expected: false },
+				])('dateTime:before("$left", "$right") === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'before', type: 'dateTime' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: true },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: false },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-01-01T00:00:00.000Z', expected: true },
+				])(
+					'dateTime:afterOrEquals("$left", "$right") === $expected',
+					({ left, right, expected }) => {
+						const result = executeFilter(
+							filterFactory({
+								conditions: [
+									{
+										id: '1',
+										leftValue: left,
+										rightValue: right,
+										operator: { operation: 'afterOrEquals', type: 'dateTime' },
+									},
+								],
+							}),
+						);
+						expect(result).toBe(expected);
+					},
+				);
+
+				it.each([
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:10:49.113Z', expected: true },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-11-15T17:12:49.113Z', expected: true },
+					{ left: '2023-11-15T17:10:49.113Z', right: '2023-01-01T00:00:00.000Z', expected: false },
+				])(
+					'dateTime:beforeOrEquals("$left", "$right") === $expected',
+					({ left, right, expected }) => {
+						const result = executeFilter(
+							filterFactory({
+								conditions: [
+									{
+										id: '1',
+										leftValue: left,
+										rightValue: right,
+										operator: { operation: 'beforeOrEquals', type: 'dateTime' },
+									},
+								],
+							}),
+						);
+						expect(result).toBe(expected);
+					},
+				);
+			});
+
+			describe('boolean', () => {
+				it.each([
+					{ left: true, expected: true },
+					{ left: 'true', expected: false },
+					{ left: false, expected: false },
+					{ left: 'false', expected: false },
+				])('boolean:true($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									operator: { operation: 'true', type: 'boolean' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: true, expected: false },
+					{ left: 'true', expected: false },
+					{ left: false, expected: true },
+					{ left: 'false', expected: false },
+				])('boolean:false($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									operator: { operation: 'false', type: 'boolean' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: true, right: true, expected: true },
+					{ left: false, right: false, expected: true },
+					{ left: true, right: false, expected: false },
+				])('boolean:equals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'equals', type: 'boolean' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: true, right: true, expected: false },
+					{ left: false, right: false, expected: false },
+					{ left: true, right: false, expected: true },
+				])('boolean:notEquals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notEquals', type: 'boolean' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+
+			describe('array', () => {
+				it.each([
+					{ left: ['foo', 'bar'], right: 'foo', expected: true },
+					{ left: ['foo', 'bar'], right: 'ba', expected: false },
+				])('array:contains($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'contains', type: 'array', rightType: 'any' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 'foo', expected: false },
+					{ left: ['foo', 'bar'], right: 'ba', expected: true },
+				])('array:notContains($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'notContains', type: 'array', rightType: 'any' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: true },
+					{ left: [], right: 0, expected: true },
+					{ left: ['foo', 'bar'], right: 1, expected: false },
+				])('array:lengthEquals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthEquals', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: false },
+					{ left: [], right: 0, expected: false },
+					{ left: ['foo', 'bar'], right: 1, expected: true },
+				])('array:lengthNotEquals($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthNotEquals', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: false },
+					{ left: [], right: 0, expected: false },
+					{ left: ['foo', 'bar'], right: 1, expected: true },
+				])('array:lengthGt($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthGt', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: false },
+					{ left: [], right: 0, expected: false },
+					{ left: ['foo', 'bar'], right: 1, expected: false },
+					{ left: ['foo', 'bar'], right: 3, expected: true },
+				])('array:lengthLt($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthLt', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: true },
+					{ left: [], right: 0, expected: true },
+					{ left: ['foo', 'bar'], right: 1, expected: true },
+					{ left: ['foo', 'bar'], right: 3, expected: false },
+				])('array:lengthGte($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthGte', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: ['foo', 'bar'], right: 2, expected: true },
+					{ left: [], right: 0, expected: true },
+					{ left: ['foo', 'bar'], right: 1, expected: false },
+					{ left: ['foo', 'bar'], right: 3, expected: true },
+				])('array:lengthLte($left,$right) === $expected', ({ left, right, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left,
+									rightValue: right,
+									operator: { operation: 'lengthLte', type: 'array', rightType: 'number' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+
+			describe('object', () => {
+				it.each([
+					{ left: {}, expected: true },
+					{ left: { foo: 'bar' }, expected: false },
+					{ left: [], expected: false },
+					{ left: undefined, expected: false },
+					{ left: null, expected: false },
+				])('object:empty($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left as string,
+									operator: { operation: 'empty', type: 'object' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+
+				it.each([
+					{ left: {}, expected: false },
+					{ left: { foo: 'bar' }, expected: true },
+					{ left: [], expected: false },
+					{ left: undefined, expected: false },
+					{ left: null, expected: false },
+				])('object:notEmpty($left) === $expected', ({ left, expected }) => {
+					const result = executeFilter(
+						filterFactory({
+							conditions: [
+								{
+									id: '1',
+									leftValue: left as string,
+									operator: { operation: 'notEmpty', type: 'object' },
+								},
+							],
+						}),
+					);
+					expect(result).toBe(expected);
+				});
+			});
+		});
+	});
+});

From 28b3710d13ca838aad372ac7351ba97846aeff62 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Tue, 21 Nov 2023 12:43:52 +0100
Subject: [PATCH 14/39] Minor fix to addCondition button (the hover text was
 white).

---
 .../FilterConditions/FilterConditions.vue     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
index b9300038aa47d..a1c0136d98a6f 100644
--- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
+++ b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
@@ -219,26 +219,26 @@ function getIssues(index: number): string[] {
 
 .addCondition {
 	// Styling to match collection button (should move to standard button in future)
-	color: var(--color-text-dark);
 	font-weight: var(--font-weight-normal);
+	--button-font-color: var(--color-text-dark);
 	--button-border-color: var(--color-foreground-base);
 	--button-background-color: var(--color-background-base);
 
-	&:hover,
-	&:focus,
-	&:active {
-		--button-hover-font-color: var(--color-button-primary-font);
-		--button-hover-border-color: var(--color-foreground-base);
-		--button-hover-background-color: var(--color-background-base);
+	--button-hover-font-color: var(--color-text-dark);
+	--button-hover-border-color: var(--color-foreground-base);
+	--button-hover-background-color: var(--color-background-base);
 
-		--button-active-font-color: var(--color-button-primary-font);
-		--button-active-border-color: var(--color-foreground-base);
-		--button-active-background-color: var(--color-background-base);
+	--button-active-font-color: var(--color-text-dark);
+	--button-active-border-color: var(--color-foreground-base);
+	--button-active-background-color: var(--color-background-base);
 
-		--button-focus-font-color: var(--color-button-primary-font);
-		--button-focus-border-color: var(--color-foreground-base);
-		--button-focus-background-color: var(--color-background-base);
+	--button-focus-font-color: var(--color-text-dark);
+	--button-focus-border-color: var(--color-foreground-base);
+	--button-focus-background-color: var(--color-background-base);
 
+	&:hover,
+	&:focus,
+	&:active {
 		outline: none;
 	}
 }

From c2617bbf46773d2da36e18302bbef94cec60b589 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Wed, 22 Nov 2023 09:00:34 +0100
Subject: [PATCH 15/39] Minor copy updates.

---
 .../editor-ui/src/plugins/i18n/locales/en.json   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index a1ffb8f585e4d..420a4dec4822d 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2248,8 +2248,8 @@
 	"filter.operatorGroup.boolean": "Boolean",
 	"filter.operatorGroup.array": "Array",
 	"filter.operatorGroup.object": "Object",
-	"filter.operator.equals": "equal to",
-	"filter.operator.notEquals": "not equal to",
+	"filter.operator.equals": "is equal to",
+	"filter.operator.notEquals": "is not equal to",
 	"filter.operator.contains": "contains",
 	"filter.operator.notContains": "does not contain",
 	"filter.operator.startsWith": "starts with",
@@ -2260,10 +2260,10 @@
 	"filter.operator.notExists": "does not exist",
 	"filter.operator.regex": "matches pattern",
 	"filter.operator.notRegex": "does not match pattern",
-	"filter.operator.gt": "greater than",
-	"filter.operator.lt": "less than",
-	"filter.operator.gte": "greater than or equal",
-	"filter.operator.lte": "less than or equal",
+	"filter.operator.gt": "is greater than",
+	"filter.operator.lt": "is less than",
+	"filter.operator.gte": "is greater than or equal",
+	"filter.operator.lte": "is less than or equal",
 	"filter.operator.after": "is after",
 	"filter.operator.before": "is before",
 	"filter.operator.afterOrEquals": "is after or equal",
@@ -2276,8 +2276,8 @@
 	"filter.operator.lengthLt": "length less than",
 	"filter.operator.lengthGte": "length greater than or equal",
 	"filter.operator.lengthLte": "length less than or equal",
-	"filter.operator.empty": "empty",
-	"filter.operator.notEmpty": "not empty",
+	"filter.operator.empty": "is empty",
+	"filter.operator.notEmpty": "is not empty",
 	"filter.combinator.or": "OR",
 	"filter.combinator.and": "AND",
 	"filter.addCondition": "Add condition",

From c200bde5ff50af7e8e9db6d28569ddeb521e596e Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Wed, 22 Nov 2023 11:28:35 +0100
Subject: [PATCH 16/39] Changed copy for regex.

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 420a4dec4822d..2ec8bf30a9dac 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2258,8 +2258,8 @@
 	"filter.operator.notEndsWith": "does not end with",
 	"filter.operator.exists": "exists",
 	"filter.operator.notExists": "does not exist",
-	"filter.operator.regex": "matches pattern",
-	"filter.operator.notRegex": "does not match pattern",
+	"filter.operator.regex": "matches regex",
+	"filter.operator.notRegex": "does not match regex",
 	"filter.operator.gt": "is greater than",
 	"filter.operator.lt": "is less than",
 	"filter.operator.gte": "is greater than or equal",

From 1def16821607c2f73f94d77e9a7e5ad2241dd2f4 Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Thu, 23 Nov 2023 11:20:21 +0100
Subject: [PATCH 17/39] Copy tweaks.

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 packages/nodes-base/nodes/If/V2/IfV2.node.ts        | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 2ec8bf30a9dac..38109d9ebd99b 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2244,7 +2244,7 @@
 	"filter.operatorGroup.basic": "Basic",
 	"filter.operatorGroup.string": "String",
 	"filter.operatorGroup.number": "Number",
-	"filter.operatorGroup.date": "Date",
+	"filter.operatorGroup.date": "Date & Time",
 	"filter.operatorGroup.boolean": "Boolean",
 	"filter.operatorGroup.array": "Array",
 	"filter.operatorGroup.object": "Object",
@@ -2285,5 +2285,5 @@
 	"filter.maxConditions": "Maximum conditions reached",
 	"filter.condition.placeholderLeft": "e.g. value1",
 	"filter.condition.placeholderRight": "e.g. value2",
-	"filter.condition.placeholderDate": "e.g. 1999-12-31"
+	"filter.condition.placeholderDate": "e.g. 2023-12-31 00:00:00"
 }
diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 836400e88d51c..78c4655fcd279 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -42,13 +42,15 @@ export class IfV2 implements INodeType {
 					default: {},
 					options: [
 						{
-							displayName: 'Case Sensitive',
+							displayName: 'Ignore Case',
+							description: 'Whether to ignore letter case when evaluating conditions',
 							name: 'caseSensitive',
 							type: 'boolean',
 							default: true,
 						},
 						{
 							displayName: 'Less Strict Type Validation',
+							description: 'Whether to try casting value types based on the selected operator',
 							name: 'looseTypeValidation',
 							type: 'boolean',
 							default: true,

From 68086583f69e954df1eaa6f1cf50debc14506af8 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 12:43:01 +0100
Subject: [PATCH 18/39] Throw errors when types are not as expected

---
 packages/nodes-base/nodes/If/V2/IfV2.node.ts  |  27 +-
 packages/workflow/src/Interfaces.ts           |   2 +-
 packages/workflow/src/NodeHelpers.ts          | 280 +-----------------
 .../src/NodeParameters/FilterParameter.ts     | 208 +++++++++++--
 packages/workflow/src/TypeValidation.ts       | 223 ++++++++++++++
 packages/workflow/src/index.ts                |   1 +
 .../workflow/test/FilterParameter.test.ts     | 112 ++++---
 packages/workflow/test/TypeValidation.test.ts |  22 +-
 8 files changed, 510 insertions(+), 365 deletions(-)
 create mode 100644 packages/workflow/src/TypeValidation.ts

diff --git a/packages/nodes-base/nodes/If/V2/IfV2.node.ts b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
index 78c4655fcd279..7bc75bda48459 100644
--- a/packages/nodes-base/nodes/If/V2/IfV2.node.ts
+++ b/packages/nodes-base/nodes/If/V2/IfV2.node.ts
@@ -1,3 +1,4 @@
+import set from 'lodash/set';
 import type {
 	IExecuteFunctions,
 	INodeExecutionData,
@@ -29,7 +30,7 @@ export class IfV2 implements INodeType {
 					default: {},
 					typeOptions: {
 						filter: {
-							caseSensitive: '={{$parameter.options.caseSensitive}}',
+							caseSensitive: '={{!$parameter.options.ignoreCase}}',
 							typeValidation: '={{$parameter.options.looseTypeValidation ? "loose" : "strict"}}',
 						},
 					},
@@ -44,7 +45,7 @@ export class IfV2 implements INodeType {
 						{
 							displayName: 'Ignore Case',
 							description: 'Whether to ignore letter case when evaluating conditions',
-							name: 'caseSensitive',
+							name: 'ignoreCase',
 							type: 'boolean',
 							default: true,
 						},
@@ -67,9 +68,25 @@ export class IfV2 implements INodeType {
 
 		this.getInputData().forEach((item, itemIndex) => {
 			try {
-				const pass = this.getNodeParameter('conditions', itemIndex, false, {
-					extractValue: true,
-				});
+				const options = this.getNodeParameter('options', itemIndex) as {
+					ignoreCase?: boolean;
+					looseTypeValidation?: boolean;
+				};
+				let pass = false;
+				try {
+					pass = this.getNodeParameter('conditions', itemIndex, false, {
+						extractValue: true,
+					}) as boolean;
+				} catch (error) {
+					if (!options.looseTypeValidation) {
+						set(
+							error,
+							'description',
+							"Try to change the operator, switch ON the option 'Less Strict Type Validation', or change the type with an expression",
+						);
+					}
+					throw error;
+				}
 
 				if (item.pairedItem === undefined) {
 					item.pairedItem = { item: itemIndex };
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index eec13b320b60e..2911fa4f67e87 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1143,7 +1143,7 @@ type NonEmptyArray<T> = [T, ...T[]];
 export type FilterTypeCombinator = 'and' | 'or';
 
 export type FilterTypeOptions = Partial<{
-	caseSensitive: boolean | string; // default = false
+	caseSensitive: boolean | string; // default = true
 	leftValue: string; // when set, user can't edit left side of condition
 	allowedCombinators: NonEmptyArray<FilterTypeCombinator>; // default = ['and', 'or']
 	maxConditions: number; // default = 10
diff --git a/packages/workflow/src/NodeHelpers.ts b/packages/workflow/src/NodeHelpers.ts
index e6c272f8ba1e8..173b97fc15bcc 100644
--- a/packages/workflow/src/NodeHelpers.ts
+++ b/packages/workflow/src/NodeHelpers.ts
@@ -36,13 +36,11 @@ import type {
 	IWorkflowExecuteAdditionalData,
 	NodeParameterValue,
 	ResourceMapperValue,
-	ValidationResult,
 	ConnectionTypes,
 	INodeTypeDescription,
 	INodeOutputConfiguration,
 	INodeInputConfiguration,
 	GenericValue,
-	FilterValue,
 } from './Interfaces';
 import {
 	isFilterValue,
@@ -51,8 +49,9 @@ import {
 } from './type-guards';
 import { deepCopy } from './utils';
 
-import { DateTime } from 'luxon';
 import type { Workflow } from './Workflow';
+import { validateFilterParameter } from './NodeParameters/FilterParameter';
+import { validateFieldType } from './TypeValidation';
 
 export const cronNodeOptions: INodePropertyCollection[] = [
 	{
@@ -1181,208 +1180,6 @@ export function nodeIssuesToString(issues: INodeIssues, node?: INode): string[]
 	return nodeIssues;
 }
 
-// Validates field against the schema and tries to parse it to the correct type
-export const validateFieldType = (
-	fieldName: string,
-	value: unknown,
-	type: FieldType,
-	options?: INodePropertyOptions[],
-): ValidationResult => {
-	if (value === null || value === undefined) return { valid: true };
-	const defaultErrorMessage = `'${fieldName}' expects a ${type} but we got '${String(value)}'`;
-	switch (type.toLowerCase()) {
-		case 'string': {
-			try {
-				return { valid: true, newValue: tryToParseString(value) };
-			} catch (e) {
-				return { valid: false, errorMessage: defaultErrorMessage };
-			}
-		}
-		case 'number': {
-			try {
-				return { valid: true, newValue: tryToParseNumber(value) };
-			} catch (e) {
-				return { valid: false, errorMessage: defaultErrorMessage };
-			}
-		}
-		case 'boolean': {
-			try {
-				return { valid: true, newValue: tryToParseBoolean(value) };
-			} catch (e) {
-				return { valid: false, errorMessage: defaultErrorMessage };
-			}
-		}
-		case 'datetime': {
-			try {
-				return { valid: true, newValue: tryToParseDateTime(value) };
-			} catch (e) {
-				const luxonDocsURL =
-					'https://moment.github.io/luxon/api-docs/index.html#datetimefromformat';
-				const errorMessage = `${defaultErrorMessage} <br/><br/> Consider using <a href="${luxonDocsURL}" target="_blank"><code>DateTime.fromFormat</code></a> to work with custom date formats.`;
-				return { valid: false, errorMessage };
-			}
-		}
-		case 'time': {
-			try {
-				return { valid: true, newValue: tryToParseTime(value) };
-			} catch (e) {
-				return {
-					valid: false,
-					errorMessage: `'${fieldName}' expects time (hh:mm:(:ss)) but we got '${String(value)}'.`,
-				};
-			}
-		}
-		case 'object': {
-			try {
-				return { valid: true, newValue: tryToParseObject(value) };
-			} catch (e) {
-				return { valid: false, errorMessage: defaultErrorMessage };
-			}
-		}
-		case 'array': {
-			try {
-				return { valid: true, newValue: tryToParseArray(value) };
-			} catch (e) {
-				return { valid: false, errorMessage: defaultErrorMessage };
-			}
-		}
-		case 'options': {
-			const validOptions = options?.map((option) => option.value).join(', ') || '';
-			const isValidOption = options?.some((option) => option.value === value) || false;
-
-			if (!isValidOption) {
-				return {
-					valid: false,
-					errorMessage: `'${fieldName}' expects one of the following values: [${validOptions}] but we got '${String(
-						value,
-					)}'`,
-				};
-			}
-			return { valid: true, newValue: value };
-		}
-		default: {
-			return { valid: true, newValue: value };
-		}
-	}
-};
-
-export const tryToParseNumber = (value: unknown): number => {
-	const isValidNumber = !isNaN(Number(value));
-
-	if (!isValidNumber) {
-		throw new Error(`Could not parse '${String(value)}' to number.`);
-	}
-	return Number(value);
-};
-
-export const tryToParseString = (value: unknown): string => {
-	if (typeof value === 'object') return JSON.stringify(value);
-	if (typeof value === 'undefined') return '';
-	if (
-		typeof value === 'string' ||
-		typeof value === 'bigint' ||
-		typeof value === 'boolean' ||
-		typeof value === 'number'
-	) {
-		return value.toString();
-	}
-
-	return String(value);
-};
-
-export const tryToParseBoolean = (value: unknown): value is boolean => {
-	if (typeof value === 'boolean') {
-		return value;
-	}
-
-	if (typeof value === 'string' && ['true', 'false'].includes(value.toLowerCase())) {
-		return value.toLowerCase() === 'true';
-	}
-
-	// If value is not a empty string, try to parse it to a number
-	if (!(typeof value === 'string' && value.trim() === '')) {
-		const num = Number(value);
-		if (num === 0) {
-			return false;
-		} else if (num === 1) {
-			return true;
-		}
-	}
-
-	throw new Error(`Could not parse '${String(value)}' to boolean.`);
-};
-
-export const tryToParseDateTime = (value: unknown): DateTime => {
-	const dateString = String(value).trim();
-
-	// Rely on luxon to parse different date formats
-	const isoDate = DateTime.fromISO(dateString, { setZone: true });
-	if (isoDate.isValid) {
-		return isoDate;
-	}
-	const httpDate = DateTime.fromHTTP(dateString, { setZone: true });
-	if (httpDate.isValid) {
-		return httpDate;
-	}
-	const rfc2822Date = DateTime.fromRFC2822(dateString, { setZone: true });
-	if (rfc2822Date.isValid) {
-		return rfc2822Date;
-	}
-	const sqlDate = DateTime.fromSQL(dateString, { setZone: true });
-	if (sqlDate.isValid) {
-		return sqlDate;
-	}
-
-	throw new Error(`The value "${dateString}" is not a valid date.`);
-};
-
-export const tryToParseTime = (value: unknown): string => {
-	const isTimeInput = /^\d{2}:\d{2}(:\d{2})?((\-|\+)\d{4})?((\-|\+)\d{1,2}(:\d{2})?)?$/s.test(
-		String(value),
-	);
-	if (!isTimeInput) {
-		throw new Error(`The value "${String(value)}" is not a valid time.`);
-	}
-	return String(value);
-};
-
-export const tryToParseArray = (value: unknown): unknown[] => {
-	try {
-		if (typeof value === 'object' && Array.isArray(value)) {
-			return value;
-		}
-
-		let parsed;
-		try {
-			parsed = JSON.parse(String(value));
-		} catch (e) {
-			parsed = JSON.parse(String(value).replace(/'/g, '"'));
-		}
-
-		if (!Array.isArray(parsed)) {
-			throw new Error(`The value "${String(value)}" is not a valid array.`);
-		}
-		return parsed;
-	} catch (e) {
-		throw new Error(`The value "${String(value)}" is not a valid array.`);
-	}
-};
-
-export const tryToParseObject = (value: unknown): object => {
-	if (value && typeof value === 'object' && !Array.isArray(value)) {
-		return value;
-	}
-	try {
-		const o = JSON.parse(String(value));
-		if (typeof o !== 'object' || Array.isArray(o)) {
-			throw new Error(`The value "${String(value)}" is not a valid object.`);
-		}
-		return o;
-	} catch (e) {
-		throw new Error(`The value "${String(value)}" is not a valid object.`);
-	}
-};
-
 /*
  * Validates resource locator node parameters based on validation ruled defined in each parameter mode
  *
@@ -1438,7 +1235,9 @@ export const validateResourceMapperParameter = (
 			}
 		}
 		if (!fieldValue?.toString().startsWith('=') && field.type) {
-			const validationResult = validateFieldType(field.id, fieldValue, field.type, field.options);
+			const validationResult = validateFieldType(field.id, fieldValue, field.type, {
+				valueOptions: field.options,
+			});
 			if (!validationResult.valid && validationResult.errorMessage) {
 				fieldErrors.push(validationResult.errorMessage);
 			}
@@ -1450,66 +1249,6 @@ export const validateResourceMapperParameter = (
 	return issues;
 };
 
-/*
- * Validates filter value based on type
- *
- */
-export const validateFilterParameter = (
-	nodeProperties: INodeProperties,
-	value: FilterValue,
-): Record<string, string[]> => {
-	const composeErrorMessage = (type: string, field: 'first' | 'second') =>
-		`The value in the ${field} field cannot be converted to a ${type}. This could lead to unwanted results. Please check the value or choose a different logical operator.`;
-
-	return value.conditions.reduce(
-		(issues, condition, index) => {
-			const { type, rightType, singleValue } = condition.operator;
-			const key = `${nodeProperties.name}.${index}`;
-
-			const isLeftValueExpression =
-				typeof condition.leftValue === 'string' && condition.leftValue.startsWith('=');
-			const hasLeftValue =
-				condition.leftValue !== undefined &&
-				condition.leftValue !== null &&
-				condition.leftValue !== '';
-			const checkLeftValue = hasLeftValue && !isLeftValueExpression && type !== 'any';
-
-			const validationResultLeft = checkLeftValue
-				? validateFieldType(nodeProperties.displayName, condition.leftValue, type)
-				: { valid: true };
-
-			const isRightValueExpression =
-				typeof condition.rightValue === 'string' && condition.rightValue.startsWith('=');
-			const hasRightValue =
-				condition.rightValue !== undefined &&
-				condition.rightValue !== null &&
-				condition.rightValue !== '';
-			const safeRightType = rightType ?? type;
-			const checkRightValue =
-				hasRightValue && !isRightValueExpression && !singleValue && safeRightType !== 'any';
-
-			const validationResultRight = checkRightValue
-				? validateFieldType(nodeProperties.displayName, condition.rightValue, safeRightType)
-				: { valid: true };
-
-			if (!validationResultLeft.valid || !validationResultRight.valid) {
-				issues[key] = [];
-			}
-
-			if (!validationResultLeft.valid) {
-				issues[key].push(composeErrorMessage(type, 'first'));
-			}
-
-			if (!validationResultRight.valid) {
-				issues[key].push(composeErrorMessage(type, 'second'));
-			}
-
-			return issues;
-		},
-		{} as Record<string, string[]>,
-	);
-};
-
 export const validateParameter = (
 	nodeProperties: INodeProperties,
 	value: GenericValue,
@@ -1519,12 +1258,9 @@ export const validateParameter = (
 	const options = type === 'options' ? nodeProperties.options : undefined;
 
 	if (!value?.toString().startsWith('=')) {
-		const validationResult = validateFieldType(
-			nodeName,
-			value,
-			type,
-			options as INodePropertyOptions[],
-		);
+		const validationResult = validateFieldType(nodeName, value, type, {
+			valueOptions: options as INodePropertyOptions[],
+		});
 
 		if (!validationResult.valid && validationResult.errorMessage) {
 			return validationResult.errorMessage;
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 99c695d54822e..0127d5a1f8910 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -1,41 +1,123 @@
 import type { DateTime } from 'luxon';
-import type { FilterConditionValue, FilterOptionsValue, FilterValue } from '../Interfaces';
-import { validateFieldType } from '../NodeHelpers';
+import type {
+	FilterConditionValue,
+	FilterOperatorType,
+	FilterOptionsValue,
+	FilterValue,
+	INodeProperties,
+	ValidationResult,
+} from '../Interfaces';
+import { validateFieldType } from '../TypeValidation';
 import * as LoggerProxy from '../LoggerProxy';
 
-export function executeFilterCondition(
+type Result<T, E> = { ok: true; result: T } | { ok: false; error: E };
+
+class FilterError extends Error {
+	constructor(
+		message: string,
+		readonly description: string,
+	) {
+		super(message);
+	}
+}
+
+function parseSingleFilterValue(
+	value: unknown,
+	type: FilterOperatorType,
+	strict = false,
+): ValidationResult {
+	return type === 'any'
+		? ({ valid: true, newValue: value } as ValidationResult)
+		: validateFieldType('filter', value, type, { strict });
+}
+
+function parseFilterConditionValues(
 	condition: FilterConditionValue,
 	options: FilterOptionsValue,
-): boolean {
+	index: number,
+): Result<{ left: unknown; right: unknown }, FilterError> {
+	const strict = options.typeValidation === 'strict';
 	const { operator } = condition;
 	const rightType = operator.rightType ?? operator.type;
-	const parsedLeftValue =
-		operator.type === 'any'
-			? { valid: true, newValue: condition.leftValue }
-			: validateFieldType('filter', condition.leftValue, operator.type);
-	const parsedRightValue =
-		rightType === 'any' || operator.singleValue
-			? { valid: true, newValue: condition.rightValue }
-			: validateFieldType('filter', condition.rightValue, rightType);
-
-	if (!parsedLeftValue.valid || !parsedRightValue.valid) {
-		return false;
+	const parsedLeftValue = parseSingleFilterValue(condition.leftValue, operator.type, strict);
+	const parsedRightValue = parseSingleFilterValue(condition.rightValue, rightType, strict);
+	const leftValueString = String(condition.leftValue);
+	const rightValueString = String(condition.rightValue);
+	const errorDescription = 'Try to change the operator, or change the type with an expression';
+	const inCondition = `in condition ${index + 1}`;
+
+	if (!parsedLeftValue.valid && !parsedRightValue.valid) {
+		const providedValues = 'The provided values';
+		let types = `'${operator.type}'`;
+		if (rightType !== operator.type) {
+			types = `'${operator.type}' and '${rightType}' respectively`;
+		}
+		if (strict) {
+			return {
+				ok: false,
+				error: new FilterError(
+					`${providedValues} '${leftValueString}' and '${rightValueString}' ${inCondition} are not of the expected type ${types}`,
+					errorDescription,
+				),
+			};
+		}
+
+		return {
+			ok: false,
+			error: new FilterError(
+				`${providedValues} '${leftValueString}' and '${rightValueString}' ${inCondition} cannot be converted to the expected type ${types}`,
+				errorDescription,
+			),
+		};
 	}
 
-	let leftValue = parsedLeftValue.newValue;
-	let rightValue = parsedRightValue.newValue;
+	const composeInvalidTypeMessage = (field: 'left' | 'right', type: string, value: string) => {
+		const fieldNumber = field === 'left' ? 1 : 2;
 
-	// Return false when typeChecking=strict and validateFieldType changed the types
-	// DateTime is an exception, strings are allowed to be casted to DateTime
-	if (options.typeValidation !== 'loose') {
-		if (condition.leftValue !== leftValue && operator.type !== 'dateTime') {
-			return false;
-		}
-		if (condition.rightValue !== rightValue && rightType !== 'dateTime') {
-			return false;
+		if (strict) {
+			return `The provided value ${fieldNumber} '${value}' ${inCondition} is not of the expected type '${type}'`;
 		}
+		return `The provided value ${fieldNumber} '${value}' ${inCondition} cannot be converted to the expected type '${type}'`;
+	};
+
+	if (!parsedLeftValue.valid) {
+		return {
+			ok: false,
+			error: new FilterError(
+				composeInvalidTypeMessage('left', operator.type, leftValueString),
+				errorDescription,
+			),
+		};
 	}
 
+	if (!parsedRightValue.valid) {
+		return {
+			ok: false,
+			error: new FilterError(
+				composeInvalidTypeMessage('right', rightType, rightValueString),
+				errorDescription,
+			),
+		};
+	}
+
+	return { ok: true, result: { left: parsedLeftValue.newValue, right: parsedRightValue.newValue } };
+}
+
+export function executeFilterCondition(
+	condition: FilterConditionValue,
+	options: FilterOptionsValue,
+	index: number,
+): boolean {
+	const ignoreCase = !options.caseSensitive;
+	const { operator } = condition;
+	const parsedValues = parseFilterConditionValues(condition, options, index);
+
+	if (!parsedValues.ok) {
+		throw parsedValues.error;
+	}
+
+	let { left: leftValue, right: rightValue } = parsedValues.result;
+
 	switch (operator.type) {
 		case 'any': {
 			const exists = leftValue !== undefined && leftValue !== null;
@@ -50,7 +132,7 @@ export function executeFilterCondition(
 			break;
 		}
 		case 'string': {
-			if (!options.caseSensitive) {
+			if (ignoreCase) {
 				if (typeof leftValue === 'string') {
 					leftValue = leftValue.toLocaleLowerCase();
 				}
@@ -154,12 +236,12 @@ export function executeFilterCondition(
 
 			switch (condition.operator.operation) {
 				case 'contains':
-					if (!options.caseSensitive && typeof rightValue === 'string') {
+					if (ignoreCase && typeof rightValue === 'string') {
 						rightValue = rightValue.toLocaleLowerCase();
 					}
 					return left.includes(rightValue);
 				case 'notContains':
-					if (!options.caseSensitive && typeof rightValue === 'string') {
+					if (ignoreCase && typeof rightValue === 'string') {
 						rightValue = rightValue.toLocaleLowerCase();
 					}
 					return !left.includes(rightValue);
@@ -175,6 +257,10 @@ export function executeFilterCondition(
 					return left.length >= rightNumber;
 				case 'lengthLte':
 					return left.length <= rightNumber;
+				case 'empty':
+					return left.length === 0;
+				case 'notEmpty':
+					return left.length !== 0;
 			}
 		}
 		case 'object': {
@@ -195,13 +281,75 @@ export function executeFilterCondition(
 }
 
 export function executeFilter(value: FilterValue): boolean {
+	const conditionPass = (condition: FilterConditionValue, index: number) =>
+		executeFilterCondition(condition, value.options, index);
+
 	if (value.combinator === 'and') {
-		return value.conditions.every((condition) => executeFilterCondition(condition, value.options));
+		return value.conditions.every(conditionPass);
 	} else if (value.combinator === 'or') {
-		return value.conditions.some((condition) => executeFilterCondition(condition, value.options));
+		return value.conditions.some(conditionPass);
 	}
 
 	LoggerProxy.warn(`Unknown filter combinator "${value.combinator as string}"`);
 
 	return false;
 }
+
+export const validateFilterParameter = (
+	nodeProperties: INodeProperties,
+	value: FilterValue,
+): Record<string, string[]> => {
+	const composeErrorMessage = (type: string, field: 'first' | 'second') =>
+		`The value in the ${field} field cannot be converted to a ${type}. This could lead to unwanted results. Please check the value or choose a different logical operator.`;
+
+	const strict = value.options.typeValidation === 'strict';
+	return value.conditions.reduce(
+		(issues, condition, index) => {
+			const { type, rightType, singleValue } = condition.operator;
+			const key = `${nodeProperties.name}.${index}`;
+
+			const isLeftValueExpression =
+				typeof condition.leftValue === 'string' && condition.leftValue.startsWith('=');
+			const hasLeftValue =
+				condition.leftValue !== undefined &&
+				condition.leftValue !== null &&
+				condition.leftValue !== '';
+			const checkLeftValue = hasLeftValue && !isLeftValueExpression && type !== 'any';
+
+			const validationResultLeft = checkLeftValue
+				? validateFieldType(nodeProperties.displayName, condition.leftValue, type, { strict })
+				: { valid: true };
+
+			const isRightValueExpression =
+				typeof condition.rightValue === 'string' && condition.rightValue.startsWith('=');
+			const hasRightValue =
+				condition.rightValue !== undefined &&
+				condition.rightValue !== null &&
+				condition.rightValue !== '';
+			const safeRightType = rightType ?? type;
+			const checkRightValue =
+				hasRightValue && !isRightValueExpression && !singleValue && safeRightType !== 'any';
+
+			const validationResultRight = checkRightValue
+				? validateFieldType(nodeProperties.displayName, condition.rightValue, safeRightType, {
+						strict,
+				  })
+				: { valid: true };
+
+			if (!validationResultLeft.valid || !validationResultRight.valid) {
+				issues[key] = [];
+			}
+
+			if (!validationResultLeft.valid) {
+				issues[key].push(composeErrorMessage(type, 'first'));
+			}
+
+			if (!validationResultRight.valid) {
+				issues[key].push(composeErrorMessage(type, 'second'));
+			}
+
+			return issues;
+		},
+		{} as Record<string, string[]>,
+	);
+};
diff --git a/packages/workflow/src/TypeValidation.ts b/packages/workflow/src/TypeValidation.ts
new file mode 100644
index 0000000000000..1870f93c30624
--- /dev/null
+++ b/packages/workflow/src/TypeValidation.ts
@@ -0,0 +1,223 @@
+import { DateTime } from 'luxon';
+import type { FieldType, INodePropertyOptions, ValidationResult } from './Interfaces';
+import isObject from 'lodash/isObject';
+
+export const tryToParseNumber = (value: unknown): number => {
+	const isValidNumber = !isNaN(Number(value));
+
+	if (!isValidNumber) {
+		throw new Error(`Could not parse '${String(value)}' to number.`);
+	}
+	return Number(value);
+};
+
+export const tryToParseString = (value: unknown): string => {
+	if (typeof value === 'object') return JSON.stringify(value);
+	if (typeof value === 'undefined') return '';
+	if (
+		typeof value === 'string' ||
+		typeof value === 'bigint' ||
+		typeof value === 'boolean' ||
+		typeof value === 'number'
+	) {
+		return value.toString();
+	}
+
+	return String(value);
+};
+
+export const tryToParseBoolean = (value: unknown): value is boolean => {
+	if (typeof value === 'boolean') {
+		return value;
+	}
+
+	if (typeof value === 'string' && ['true', 'false'].includes(value.toLowerCase())) {
+		return value.toLowerCase() === 'true';
+	}
+
+	// If value is not a empty string, try to parse it to a number
+	if (!(typeof value === 'string' && value.trim() === '')) {
+		const num = Number(value);
+		if (num === 0) {
+			return false;
+		} else if (num === 1) {
+			return true;
+		}
+	}
+
+	throw new Error(`Could not parse '${String(value)}' to boolean.`);
+};
+
+export const tryToParseDateTime = (value: unknown): DateTime => {
+	const dateString = String(value).trim();
+
+	// Rely on luxon to parse different date formats, fall back to UTC if timezone is not included
+	const isoDate = DateTime.fromISO(dateString, { setZone: true });
+	if (isoDate.isValid) {
+		return isoDate;
+	}
+	const httpDate = DateTime.fromHTTP(dateString, { setZone: true });
+	if (httpDate.isValid) {
+		return httpDate;
+	}
+	const rfc2822Date = DateTime.fromRFC2822(dateString, { setZone: true });
+	if (rfc2822Date.isValid) {
+		return rfc2822Date;
+	}
+	const sqlDate = DateTime.fromSQL(dateString, { setZone: true });
+	if (sqlDate.isValid) {
+		return sqlDate;
+	}
+
+	throw new Error(`The value "${dateString}" is not a valid date.`);
+};
+
+export const tryToParseTime = (value: unknown): string => {
+	const isTimeInput = /^\d{2}:\d{2}(:\d{2})?((\-|\+)\d{4})?((\-|\+)\d{1,2}(:\d{2})?)?$/s.test(
+		String(value),
+	);
+	if (!isTimeInput) {
+		throw new Error(`The value "${String(value)}" is not a valid time.`);
+	}
+	return String(value);
+};
+
+export const tryToParseArray = (value: unknown): unknown[] => {
+	try {
+		if (typeof value === 'object' && Array.isArray(value)) {
+			return value;
+		}
+
+		let parsed;
+		try {
+			parsed = JSON.parse(String(value));
+		} catch (e) {
+			parsed = JSON.parse(String(value).replace(/'/g, '"'));
+		}
+
+		if (!Array.isArray(parsed)) {
+			throw new Error(`The value "${String(value)}" is not a valid array.`);
+		}
+		return parsed;
+	} catch (e) {
+		throw new Error(`The value "${String(value)}" is not a valid array.`);
+	}
+};
+
+export const tryToParseObject = (value: unknown): object => {
+	if (value && typeof value === 'object' && !Array.isArray(value)) {
+		return value;
+	}
+	try {
+		const o = JSON.parse(String(value));
+		if (typeof o !== 'object' || Array.isArray(o)) {
+			throw new Error(`The value "${String(value)}" is not a valid object.`);
+		}
+		return o;
+	} catch (e) {
+		throw new Error(`The value "${String(value)}" is not a valid object.`);
+	}
+};
+
+type ValidateFieldTypeOptions = Partial<{
+	valueOptions: INodePropertyOptions[];
+	strict: boolean;
+}>;
+// Validates field against the schema and tries to parse it to the correct type
+export const validateFieldType = (
+	fieldName: string,
+	value: unknown,
+	type: FieldType,
+	options: ValidateFieldTypeOptions = {},
+): ValidationResult => {
+	if (value === null || value === undefined) return { valid: true };
+	const strict = options.strict ?? false;
+	const valueOptions = options.valueOptions ?? [];
+	const defaultErrorMessage = `'${fieldName}' expects a ${type} but we got '${String(value)}'`;
+	switch (type.toLowerCase()) {
+		case 'string': {
+			try {
+				if (strict && typeof value !== 'string') {
+					return { valid: false, errorMessage: defaultErrorMessage };
+				}
+				return { valid: true, newValue: tryToParseString(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
+		case 'number': {
+			try {
+				if (strict && typeof value !== 'number') {
+					return { valid: false, errorMessage: defaultErrorMessage };
+				}
+				return { valid: true, newValue: tryToParseNumber(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
+		case 'boolean': {
+			try {
+				if (strict && typeof value !== 'boolean') {
+					return { valid: false, errorMessage: defaultErrorMessage };
+				}
+				return { valid: true, newValue: tryToParseBoolean(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
+		case 'datetime': {
+			try {
+				return { valid: true, newValue: tryToParseDateTime(value) };
+			} catch (e) {
+				const luxonDocsURL =
+					'https://moment.github.io/luxon/api-docs/index.html#datetimefromformat';
+				const errorMessage = `${defaultErrorMessage} <br/><br/> Consider using <a href="${luxonDocsURL}" target="_blank"><code>DateTime.fromFormat</code></a> to work with custom date formats.`;
+				return { valid: false, errorMessage };
+			}
+		}
+		case 'time': {
+			try {
+				return { valid: true, newValue: tryToParseTime(value) };
+			} catch (e) {
+				return {
+					valid: false,
+					errorMessage: `'${fieldName}' expects time (hh:mm:(:ss)) but we got '${String(value)}'.`,
+				};
+			}
+		}
+		case 'object': {
+			try {
+				if (strict && !isObject(value)) {
+					return { valid: false, errorMessage: defaultErrorMessage };
+				}
+				return { valid: true, newValue: tryToParseObject(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
+		case 'array': {
+			try {
+				return { valid: true, newValue: tryToParseArray(value) };
+			} catch (e) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
+		}
+		case 'options': {
+			const validOptions = valueOptions.map((option) => option.value).join(', ');
+			const isValidOption = valueOptions.some((option) => option.value === value);
+
+			if (!isValidOption) {
+				return {
+					valid: false,
+					errorMessage: `'${fieldName}' expects one of the following values: [${validOptions}] but we got '${String(
+						value,
+					)}'`,
+				};
+			}
+			return { valid: true, newValue: value };
+		}
+		default: {
+			return { valid: true, newValue: value };
+		}
+	}
+};
diff --git a/packages/workflow/src/index.ts b/packages/workflow/src/index.ts
index 0c253b4275d02..526a65704522c 100644
--- a/packages/workflow/src/index.ts
+++ b/packages/workflow/src/index.ts
@@ -21,6 +21,7 @@ export * from './Workflow';
 export * from './WorkflowDataProxy';
 export * from './WorkflowHooks';
 export * from './VersionedNodeType';
+export * from './TypeValidation';
 export { LoggerProxy, NodeHelpers, ObservableObject, TelemetryHelpers };
 export {
 	isObjectEmpty,
diff --git a/packages/workflow/test/FilterParameter.test.ts b/packages/workflow/test/FilterParameter.test.ts
index 2e1840f47d026..9471f09056eb2 100644
--- a/packages/workflow/test/FilterParameter.test.ts
+++ b/packages/workflow/test/FilterParameter.test.ts
@@ -98,50 +98,72 @@ describe('FilterParameter', () => {
 		});
 
 		describe('options.typeValidation', () => {
-			it('should evaluate conditions with strict type validation (=default)', () => {
-				const result = executeFilter(
-					filterFactory({
-						combinator: 'or',
-						conditions: [
-							{
-								id: '1',
-								leftValue: '15',
-								rightValue: 15,
-								operator: { operation: 'equals', type: 'number' },
-							},
-							{
-								id: '2',
-								leftValue: 'true',
-								operator: { operation: 'true', type: 'boolean' },
-							},
-						],
-						options: { typeValidation: 'strict' },
-					}),
-				);
-				expect(result).toBe(false);
+			describe('strict (=default)', () => {
+				it('should throw an error when types are not as expected', () => {
+					expect(() =>
+						executeFilter(
+							filterFactory({
+								conditions: [
+									{
+										id: '1',
+										leftValue: '15',
+										rightValue: 15,
+										operator: { operation: 'equals', type: 'number' },
+									},
+								],
+								options: { typeValidation: 'strict' },
+							}),
+						),
+					).toThrowError(
+						"The provided value 1 '15' in condition 1 is not of the expected type 'number'",
+					);
+				});
 			});
 
-			it('should evaluate conditions with loose type validation', () => {
-				const result = executeFilter(
-					filterFactory({
-						combinator: 'and',
-						conditions: [
-							{
-								id: '1',
-								leftValue: '15',
-								rightValue: 15,
-								operator: { operation: 'equals', type: 'number' },
-							},
-							{
-								id: '2',
-								leftValue: 'true',
-								operator: { operation: 'true', type: 'boolean' },
-							},
-						],
-						options: { typeValidation: 'loose' },
-					}),
-				);
-				expect(result).toBe(true);
+			describe('loose', () => {
+				it('should evaluate conditions when type can be converted', () => {
+					const result = executeFilter(
+						filterFactory({
+							combinator: 'and',
+							conditions: [
+								{
+									id: '1',
+									leftValue: '15',
+									rightValue: 15,
+									operator: { operation: 'equals', type: 'number' },
+								},
+								{
+									id: '2',
+									leftValue: 'true',
+									operator: { operation: 'true', type: 'boolean' },
+								},
+							],
+							options: { typeValidation: 'loose' },
+						}),
+					);
+					expect(result).toBe(true);
+				});
+
+				it('should throw an error when types cannot be converted', () => {
+					expect(() =>
+						executeFilter(
+							filterFactory({
+								combinator: 'and',
+								conditions: [
+									{
+										id: '1',
+										leftValue: 'a string',
+										rightValue: 15,
+										operator: { operation: 'equals', type: 'boolean' },
+									},
+								],
+								options: { typeValidation: 'loose' },
+							}),
+						),
+					).toThrowError(
+						"The provided values 'a string' and '15' in condition 1 cannot be converted to the expected type 'boolean'",
+					);
+				});
 			});
 		});
 
@@ -669,9 +691,7 @@ describe('FilterParameter', () => {
 			describe('boolean', () => {
 				it.each([
 					{ left: true, expected: true },
-					{ left: 'true', expected: false },
 					{ left: false, expected: false },
-					{ left: 'false', expected: false },
 				])('boolean:true($left) === $expected', ({ left, expected }) => {
 					const result = executeFilter(
 						filterFactory({
@@ -689,9 +709,7 @@ describe('FilterParameter', () => {
 
 				it.each([
 					{ left: true, expected: false },
-					{ left: 'true', expected: false },
 					{ left: false, expected: true },
-					{ left: 'false', expected: false },
 				])('boolean:false($left) === $expected', ({ left, expected }) => {
 					const result = executeFilter(
 						filterFactory({
@@ -915,7 +933,6 @@ describe('FilterParameter', () => {
 				it.each([
 					{ left: {}, expected: true },
 					{ left: { foo: 'bar' }, expected: false },
-					{ left: [], expected: false },
 					{ left: undefined, expected: false },
 					{ left: null, expected: false },
 				])('object:empty($left) === $expected', ({ left, expected }) => {
@@ -936,7 +953,6 @@ describe('FilterParameter', () => {
 				it.each([
 					{ left: {}, expected: false },
 					{ left: { foo: 'bar' }, expected: true },
-					{ left: [], expected: false },
 					{ left: undefined, expected: false },
 					{ left: null, expected: false },
 				])('object:notEmpty($left) === $expected', ({ left, expected }) => {
diff --git a/packages/workflow/test/TypeValidation.test.ts b/packages/workflow/test/TypeValidation.test.ts
index 3561ff18adc30..5ed68319f312e 100644
--- a/packages/workflow/test/TypeValidation.test.ts
+++ b/packages/workflow/test/TypeValidation.test.ts
@@ -1,4 +1,4 @@
-import { validateFieldType } from '@/NodeHelpers';
+import { validateFieldType } from '@/TypeValidation';
 import type { DateTime } from 'luxon';
 
 const VALID_ISO_DATES = [
@@ -174,16 +174,20 @@ describe('Type Validation', () => {
 
 	it('should validate options properly', () => {
 		expect(
-			validateFieldType('options', 'oranges', 'options', [
-				{ name: 'apples', value: 'apples' },
-				{ name: 'oranges', value: 'oranges' },
-			]).valid,
+			validateFieldType('options', 'oranges', 'options', {
+				valueOptions: [
+					{ name: 'apples', value: 'apples' },
+					{ name: 'oranges', value: 'oranges' },
+				],
+			}).valid,
 		).toEqual(true);
 		expect(
-			validateFieldType('options', 'something else', 'options', [
-				{ name: 'apples', value: 'apples' },
-				{ name: 'oranges', value: 'oranges' },
-			]).valid,
+			validateFieldType('options', 'something else', 'options', {
+				valueOptions: [
+					{ name: 'apples', value: 'apples' },
+					{ name: 'oranges', value: 'oranges' },
+				],
+			}).valid,
 		).toEqual(false);
 	});
 

From de3aa7c74d6acb935c8433e296025edd8a7f0fbb Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 12:43:50 +0100
Subject: [PATCH 19/39] Show what condition is currently evaluated to

---
 .../components/FilterConditions/Condition.vue | 107 +++++++++++++-----
 .../FilterConditions/FilterConditions.vue     |  32 ++----
 2 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 2221c71759727..8fb94d12dd144 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -3,23 +3,31 @@ import type { IUpdateInformation } from '@/Interface';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
 import { useI18n } from '@/composables';
-import type {
-	FilterConditionValue,
-	FilterOperatorType,
-	INodeProperties,
-	NodePropertyTypes,
+import {
+	executeFilterCondition,
+	type FilterOptionsValue,
+	type FilterConditionValue,
+	type FilterOperatorType,
+	type INodeProperties,
+	type NodeParameterValue,
+	type NodePropertyTypes,
 } from 'n8n-workflow';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import OperatorSelect from './OperatorSelect.vue';
 import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
 import type { FilterOperator } from './types';
+import { resolveParameter } from '@/mixins/workflowHelpers';
+
+type ConditionResult = 'unknown' | boolean;
 
 interface Props {
 	path: string;
 	condition: FilterConditionValue;
+	options: FilterOptionsValue;
 	issues?: string[];
 	fixedLeftValue?: boolean;
 	canRemove?: boolean;
+	index?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,12 +37,12 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	(event: 'operatorChange', value: string): void;
-	(event: 'leftValueChange', value: string): void;
-	(event: 'rightValueChange', value: string): void;
+	(event: 'update', value: FilterConditionValue): void;
 	(event: 'remove'): void;
 }>();
 
+const condition = ref<FilterConditionValue>(props.condition);
+
 function isExpression(value: unknown): boolean {
 	return typeof value === 'string' && value.startsWith('=');
 }
@@ -59,6 +67,24 @@ const operatorTypeToNodePropType = (operatorType: FilterOperatorType): NodePrope
 	}
 };
 
+const conditionResult = computed<ConditionResult>(() => {
+	try {
+		const resolved = resolveParameter(condition.value as unknown as NodeParameterValue);
+
+		try {
+			return executeFilterCondition(
+				resolved as FilterConditionValue,
+				props.options,
+				props.index ?? 0,
+			);
+		} catch (error) {
+			return false;
+		}
+	} catch (error) {
+		return 'unknown';
+	}
+});
+
 const leftParameter = computed<INodeProperties>(() => ({
 	name: '',
 	displayName: '',
@@ -83,36 +109,47 @@ const rightParameter = computed<INodeProperties>(() => ({
 	type: operatorTypeToNodePropType(operator.value.rightType ?? operator.value.type),
 }));
 
+const onLeftValueChange = (update: IUpdateInformation): void => {
+	condition.value.leftValue = update.value;
+};
+
+const onRightValueChange = (update: IUpdateInformation): void => {
+	condition.value.rightValue = update.value;
+};
+
 const onOperatorChange = (value: string): void => {
-	const { operator } = props.condition;
+	const selectedOperator = condition.value.operator;
 	const newOperator: FilterOperator = OPERATORS_BY_ID[value as FilterOperatorId];
-	const typeChanged = operator.type !== newOperator.type;
+	const typeChanged = selectedOperator.type !== newOperator.type;
 
 	if (typeChanged && !isLeftExpression.value) {
-		emit('leftValueChange', '');
+		condition.value.leftValue = '';
 	}
 
-	const rightTypeChanged =
-		(operator.rightType ?? operator.type) !== (newOperator.rightType ?? newOperator.type);
+	const rightType = selectedOperator.rightType ?? selectedOperator.type;
+	const newRightType = newOperator.rightType ?? newOperator.type;
+	const rightTypeChanged = rightType !== newRightType;
 	if ((rightTypeChanged && !isRightExpression.value) || newOperator.singleValue) {
-		emit('rightValueChange', '');
+		condition.value.rightValue = '';
 	}
 
-	emit('operatorChange', value);
-};
-
-const onLeftValueChange = (update: IUpdateInformation): void => {
-	emit('leftValueChange', update.value as string);
-};
-
-const onRightValueChange = (update: IUpdateInformation): void => {
-	emit('rightValueChange', update.value as string);
+	condition.value.operator = {
+		type: newOperator.type,
+		operation: newOperator.operation,
+		rightType: newOperator.rightType,
+		singleValue: newOperator.singleValue,
+	};
+	emit('update', condition.value);
 };
 
 const onRemove = (): void => {
 	emit('remove');
 };
 
+const onBlur = (): void => {
+	emit('update', condition.value);
+};
+
 const i18n = useI18n();
 </script>
 
@@ -163,6 +200,7 @@ const i18n = useI18n();
 						:class="[$style.input, $style.inputLeft]"
 						data-test-id="filter-condition-left"
 						@update="onLeftValueChange"
+						@blur="onBlur"
 					/>
 					<operator-select
 						:class="$style.select"
@@ -182,12 +220,29 @@ const i18n = useI18n();
 						:class="[$style.input, $style.inputRight]"
 						data-test-id="filter-condition-right"
 						@update="onRightValueChange"
+						@blur="onBlur"
 					/>
 				</div>
 			</template>
 		</n8n-resize-observer>
 
-		<parameter-issues v-if="issues.length > 0" :issues="issues" :class="$style.issues" />
+		<div :class="$style.status">
+			<parameter-issues v-if="issues.length > 0" :issues="issues" />
+
+			<n8n-tooltip :show-after="500" v-else-if="conditionResult === true">
+				<template #content>
+					{{ i18n.baseText('filter.condition.resolvedTrue') }}
+				</template>
+				<n8n-icon icon="check-circle" size="medium" color="success" />
+			</n8n-tooltip>
+
+			<n8n-tooltip :show-after="500" v-else-if="conditionResult === false">
+				<template #content>
+					{{ i18n.baseText('filter.condition.resolvedFalse') }}
+				</template>
+				<n8n-icon icon="times-circle" size="medium" color="danger" />
+			</n8n-tooltip>
+		</div>
 	</div>
 </template>
 
@@ -220,7 +275,7 @@ const i18n = useI18n();
 	width: 100%;
 }
 
-.issues {
+.status {
 	align-self: flex-start;
 	padding-top: var(--spacing-xl);
 }
diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
index a1c0136d98a6f..4022362c1b663 100644
--- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
+++ b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
@@ -16,14 +16,11 @@ import {
 	DEFAULT_FILTER_OPTIONS,
 	DEFAULT_MAX_CONDITIONS,
 	DEFAULT_OPERATOR_VALUE,
-	type FilterOperatorId,
-	OPERATORS_BY_ID,
 } from './constants';
 import { useI18n, useDebounceHelper } from '@/composables';
 import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
 import { resolveParameter } from '@/mixins/workflowHelpers';
-import type { FilterOperator } from './types';
 import { v4 as uuid } from 'uuid';
 
 interface Props {
@@ -109,30 +106,15 @@ function addCondition(): void {
 	state.paramValue.conditions.push(createCondition());
 }
 
-function onOperatorChanged(index: number, operatorId: string): void {
-	const operator = OPERATORS_BY_ID[operatorId as FilterOperatorId] as FilterOperator;
-
-	state.paramValue.conditions[index].operator = {
-		type: operator.type,
-		operation: operator.operation,
-		rightType: operator.rightType,
-		singleValue: operator.singleValue,
-	};
-}
-
-function onLeftValueChanged(index: number, value: string): void {
-	state.paramValue.conditions[index].leftValue = value;
-}
-
-function onRightValueChanged(index: number, value: string): void {
-	state.paramValue.conditions[index].rightValue = value;
+function onConditionUpdate(index: number, value: FilterConditionValue): void {
+	state.paramValue.conditions[index] = value;
 }
 
 function onCombinatorChange(combinator: FilterTypeCombinator): void {
 	state.paramValue.combinator = combinator;
 }
 
-function onConditionRemoved(index: number): void {
+function onConditionRemove(index: number): void {
 	state.paramValue.conditions.splice(index, 1);
 }
 
@@ -165,14 +147,14 @@ function getIssues(index: number): string[] {
 
 					<condition
 						:condition="condition"
+						:index="index"
+						:options="state.paramValue.options"
 						:fixedLeftValue="!!parameter.typeOptions?.filter?.leftValue"
 						:canRemove="index !== 0 || state.paramValue.conditions.length > 1"
 						:path="`${path}.${index}`"
 						:issues="getIssues(index)"
-						@operatorChange="(value) => onOperatorChanged(index, value)"
-						@leftValueChange="(value) => onLeftValueChanged(index, value)"
-						@rightValueChange="(value) => onRightValueChanged(index, value)"
-						@remove="() => onConditionRemoved(index)"
+						@update="(value) => onConditionUpdate(index, value)"
+						@remove="() => onConditionRemove(index)"
 					></condition>
 				</div>
 			</div>

From c9604d046032584be407a7e3ebe8acbc34cecc26 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 12:44:23 +0100
Subject: [PATCH 20/39] Implement review feedback: bugs, styling fixes

---
 packages/core/src/ExtractValue.ts             |   4 +-
 packages/core/src/NodeExecuteFunctions.ts     |  18 +--
 packages/design-system/src/css/input.scss     |   1 +
 .../src/components/ExpressionEdit.vue         |   1 -
 .../components/FilterConditions/constants.ts  |  12 ++
 .../components/FixedCollectionParameter.vue   | 121 +++++++++---------
 .../src/components/ParameterInput.vue         |   1 +
 .../ResourceMapper/MappingFields.vue          |  11 +-
 .../__tests__/FilterConditions.test.ts        |   2 +-
 .../src/plugins/i18n/locales/en.json          |   2 +
 10 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index cb74759855778..451aae54eb5c9 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import {
 	LoggerProxy,
 	NodeHelpers,
@@ -199,7 +200,6 @@ export function extractValue(
 		}
 		return extractValueOther(value, property, parameterName);
 	} catch (error) {
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-		throw new NodeOperationError(node, error);
+		throw new NodeOperationError(node, error, { description: get(error, 'description') });
 	}
 }
diff --git a/packages/core/src/NodeExecuteFunctions.ts b/packages/core/src/NodeExecuteFunctions.ts
index 18bf12dbd81e6..0940e355d025f 100644
--- a/packages/core/src/NodeExecuteFunctions.ts
+++ b/packages/core/src/NodeExecuteFunctions.ts
@@ -2046,12 +2046,9 @@ const validateResourceMapperValue = (
 		}
 
 		if (schemaEntry?.type) {
-			const validationResult = validateFieldType(
-				key,
-				resolvedValue,
-				schemaEntry.type,
-				schemaEntry.options,
-			);
+			const validationResult = validateFieldType(key, resolvedValue, schemaEntry.type, {
+				valueOptions: schemaEntry.options,
+			});
 			if (!validationResult.valid) {
 				return { ...validationResult, fieldName: key };
 			} else {
@@ -2112,12 +2109,9 @@ const validateCollection = (
 		for (const key of Object.keys(value)) {
 			if (!validationMap[key]) continue;
 
-			const fieldValidationResult = validateFieldType(
-				key,
-				value[key],
-				validationMap[key].type,
-				validationMap[key].options,
-			);
+			const fieldValidationResult = validateFieldType(key, value[key], validationMap[key].type, {
+				valueOptions: validationMap[key].options,
+			});
 
 			if (!fieldValidationResult.valid) {
 				throw new ExpressionError(
diff --git a/packages/design-system/src/css/input.scss b/packages/design-system/src/css/input.scss
index 8725d1917458b..d388969e414c1 100644
--- a/packages/design-system/src/css/input.scss
+++ b/packages/design-system/src/css/input.scss
@@ -156,6 +156,7 @@
 	}
 
 	@include mixins.e(suffix-inner) {
+		display: inline-flex;
 		pointer-events: all;
 	}
 
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index cb95c49777730..1c42692a4976c 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -2,7 +2,6 @@
 	<div class="expression-edit" v-if="dialogVisible" @keydown.stop>
 		<el-dialog
 			:modelValue="dialogVisible"
-			append-to-body
 			class="expression-dialog classic"
 			width="80%"
 			:title="$locale.baseText('expressionEdit.editExpression')"
diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index bbc096a4098f3..5175cccac0ff2 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -91,6 +91,18 @@ export const OPERATORS_BY_ID = {
 		operation: 'notEquals',
 		name: 'filter.operator.notEquals',
 	},
+	'array:empty': {
+		type: 'array',
+		operation: 'empty',
+		name: 'filter.operator.empty',
+		singleValue: true,
+	},
+	'array:notEmpty': {
+		type: 'array',
+		operation: 'notEmpty',
+		name: 'filter.operator.notEmpty',
+		singleValue: true,
+	},
 	'array:contains': {
 		type: 'array',
 		operation: 'contains',
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 3ce36f6f5b484..b9090eb0060c7 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -28,28 +28,32 @@
 						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
 					>
 						<div class="delete-option" v-if="!isReadOnly">
-							<font-awesome-icon
+							<n8n-icon-button
+								type="tertiary"
+								text
+								size="mini"
 								icon="trash"
-								class="reset-icon clickable"
 								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
 								@click="deleteOption(property.name, index)"
-							/>
-							<div v-if="sortable" class="sort-icon">
-								<font-awesome-icon
-									v-if="index !== 0"
-									icon="angle-up"
-									class="clickable"
-									:title="$locale.baseText('fixedCollectionParameter.moveUp')"
-									@click="moveOptionUp(property.name, index)"
-								/>
-								<font-awesome-icon
-									v-if="index !== mutableValues[property.name].length - 1"
-									icon="angle-down"
-									class="clickable"
-									:title="$locale.baseText('fixedCollectionParameter.moveDown')"
-									@click="moveOptionDown(property.name, index)"
-								/>
-							</div>
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== 0"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-up"
+								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
+								@click="moveOptionUp(property.name, index)"
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== mutableValues[property.name].length - 1"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-down"
+								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
+								@click="moveOptionDown(property.name, index)"
+							></n8n-icon-button>
 						</div>
 						<Suspense>
 							<parameter-input-list
@@ -67,12 +71,14 @@
 			<div v-else class="parameter-item">
 				<div class="parameter-item-wrapper">
 					<div class="delete-option" v-if="!isReadOnly">
-						<font-awesome-icon
+						<n8n-icon-button
+							type="tertiary"
+							text
+							size="mini"
 							icon="trash"
-							class="reset-icon clickable"
 							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
 							@click="deleteOption(property.name)"
-						/>
+						></n8n-icon-button>
 					</div>
 					<parameter-input-list
 						:parameters="property.values"
@@ -87,7 +93,7 @@
 			</div>
 		</div>
 
-		<div v-if="parameterOptions.length > 0 && !isReadOnly">
+		<div class="controls" v-if="parameterOptions.length > 0 && !isReadOnly">
 			<n8n-button
 				v-if="parameter.options.length === 1"
 				type="tertiary"
@@ -346,28 +352,35 @@ export default defineComponent({
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
 
-	:deep(.button) {
-		font-weight: var(--font-weight-normal);
-		--button-font-color: var(--color-text-dark);
-		--button-border-color: var(--color-foreground-base);
-		--button-background-color: var(--color-background-base);
-
-		--button-hover-font-color: var(--color-text-dark);
-		--button-hover-border-color: var(--color-foreground-base);
-		--button-hover-background-color: var(--color-background-base);
-
-		--button-active-font-color: var(--color-text-dark);
-		--button-active-border-color: var(--color-foreground-base);
-		--button-active-background-color: var(--color-background-base);
-
-		--button-focus-font-color: var(--color-text-dark);
-		--button-focus-border-color: var(--color-foreground-base);
-		--button-focus-background-color: var(--color-background-base);
+	.delete-option {
+		display: flex;
+		flex-direction: column;
+	}
 
-		&:active,
-		&.active,
-		&:focus {
-			outline: none;
+	.controls {
+		:deep(.button) {
+			font-weight: var(--font-weight-normal);
+			--button-font-color: var(--color-text-dark);
+			--button-border-color: var(--color-foreground-base);
+			--button-background-color: var(--color-background-base);
+
+			--button-hover-font-color: var(--color-text-dark);
+			--button-hover-border-color: var(--color-foreground-base);
+			--button-hover-background-color: var(--color-background-base);
+
+			--button-active-font-color: var(--color-text-dark);
+			--button-active-border-color: var(--color-foreground-base);
+			--button-active-background-color: var(--color-background-base);
+
+			--button-focus-font-color: var(--color-text-dark);
+			--button-focus-border-color: var(--color-foreground-base);
+			--button-focus-background-color: var(--color-background-base);
+
+			&:active,
+			&.active,
+			&:focus {
+				outline: none;
+			}
 		}
 	}
 }
@@ -376,19 +389,8 @@ export default defineComponent({
 	margin: var(--spacing-xs) 0;
 }
 
-.delete-option {
-	display: none;
-	position: absolute;
-	z-index: 999;
-	color: #f56c6c;
-	left: 0;
-	top: 0.5em;
-	width: 15px;
-	height: 100%;
-}
-
 .parameter-item:hover > .parameter-item-wrapper > .delete-option {
-	display: block;
+	opacity: 1;
 }
 
 .parameter-item {
@@ -411,11 +413,4 @@ export default defineComponent({
 .no-items-exist {
 	margin: var(--spacing-xs) 0;
 }
-
-.sort-icon {
-	display: flex;
-	flex-direction: column;
-	margin-left: 1px;
-	margin-top: 0.5em;
-}
 </style>
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index a816e1c080443..5829f31470830 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -210,6 +210,7 @@
 				v-model="tempValue"
 				ref="inputField"
 				type="datetime"
+				valueFormat="YYYY-MM-DDTHH:mm:ss"
 				:size="inputSize"
 				:modelValue="displayValue"
 				:title="displayTitle"
diff --git a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue b/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
index 9bc63f0797cf2..867566bd501f1 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
+++ b/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
@@ -337,10 +337,14 @@ defineExpose({
 						props.showMatchingColumnsSelector,
 					)
 				"
-				:class="['delete-option', 'clickable', 'mt-5xs']"
+				:class="['delete-option', 'mt-5xs']"
 			>
-				<font-awesome-icon
+				<n8n-icon-button
+					type="tertiary"
+					text
+					size="mini"
 					icon="trash"
+					:data-test-id="`remove-field-button-${getParsedFieldName(field.name)}`"
 					:title="
 						locale.baseText('resourceMapper.removeField', {
 							interpolate: {
@@ -348,9 +352,8 @@ defineExpose({
 							},
 						})
 					"
-					:data-test-id="`remove-field-button-${getParsedFieldName(field.name)}`"
 					@click="removeField(field.name)"
-				/>
+				></n8n-icon-button>
 			</div>
 			<div :class="$style.parameterInput">
 				<parameter-input-full
diff --git a/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
index 54964e2842c83..1aabd8a061768 100644
--- a/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
+++ b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
@@ -117,7 +117,7 @@ describe('Filter.vue', () => {
 		expect(
 			conditions[1].querySelector('[data-test-id="filter-operator-select"]')?.querySelector('input')
 				?.value,
-		).toEqual('Not empty');
+		).toEqual('is not empty');
 		expect(conditions[1].querySelector('[data-test-id="filter-condition-right"]')).toBeNull();
 	});
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 70574c5966bae..a7f57acc90dd6 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2315,6 +2315,8 @@
 	"filter.addCondition": "Add condition",
 	"filter.removeCondition": "Remove condition",
 	"filter.maxConditions": "Maximum conditions reached",
+	"filter.condition.resolvedTrue": "This condition is true for item 1",
+	"filter.condition.resolvedFalse": "This condition is false for item 1",
 	"filter.condition.placeholderLeft": "e.g. value1",
 	"filter.condition.placeholderRight": "e.g. value2",
 	"filter.condition.placeholderDate": "e.g. 2023-12-31 00:00:00",

From 1326e329b07be44704442d9904c719d4e0974a46 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 12:55:25 +0100
Subject: [PATCH 21/39] Fix composable imports

---
 .../src/components/FilterConditions/CombinatorSelect.vue       | 2 +-
 .../editor-ui/src/components/FilterConditions/Condition.vue    | 2 +-
 .../src/components/FilterConditions/FilterConditions.vue       | 3 ++-
 .../src/components/FilterConditions/OperatorSelect.vue         | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
index c006da87aac72..f98bcc1f40f2e 100644
--- a/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/CombinatorSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from '@/composables';
+import { useI18n } from '@/composables/useI18n';
 import type { FilterTypeCombinator } from 'n8n-workflow';
 
 interface Props {
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 8fb94d12dd144..dcb0fc8122b4b 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -2,7 +2,7 @@
 import type { IUpdateInformation } from '@/Interface';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
-import { useI18n } from '@/composables';
+import { useI18n } from '@/composables/useI18n';
 import {
 	executeFilterCondition,
 	type FilterOptionsValue,
diff --git a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
index 4022362c1b663..df1d885be8c8a 100644
--- a/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
+++ b/packages/editor-ui/src/components/FilterConditions/FilterConditions.vue
@@ -17,7 +17,8 @@ import {
 	DEFAULT_MAX_CONDITIONS,
 	DEFAULT_OPERATOR_VALUE,
 } from './constants';
-import { useI18n, useDebounceHelper } from '@/composables';
+import { useI18n } from '@/composables/useI18n';
+import { useDebounceHelper } from '@/composables/useDebounce';
 import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
 import { resolveParameter } from '@/mixins/workflowHelpers';
diff --git a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
index 6a059d00f9501..0b3787848bdf3 100644
--- a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from '@/composables';
+import { useI18n } from '@/composables/useI18n';
 import { OPERATOR_GROUPS } from './constants';
 import { computed, ref } from 'vue';
 import type { FilterOperator } from './types';

From aa49d2f02d68154a70a8a40ecafa13e87faf84a5 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 13:40:45 +0100
Subject: [PATCH 22/39] Fix icon positioning

---
 .../editor-ui/src/components/FilterConditions/Condition.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index dcb0fc8122b4b..a982ba7070cfd 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -277,7 +277,7 @@ const i18n = useI18n();
 
 .status {
 	align-self: flex-start;
-	padding-top: var(--spacing-xl);
+	padding-top: 30px;
 }
 
 .select {

From 586f2a81d099f8c72ea46bc8a12d4725112d3263 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 14:19:24 +0100
Subject: [PATCH 23/39] Fix validation for operators with only a left value

---
 packages/workflow/src/NodeParameters/FilterParameter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 0127d5a1f8910..7b3b7c101a85d 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -90,7 +90,7 @@ function parseFilterConditionValues(
 		};
 	}
 
-	if (!parsedRightValue.valid) {
+	if (!parsedRightValue.valid && !operator.singleValue) {
 		return {
 			ok: false,
 			error: new FilterError(

From cf729a5b077f11784e48c5413603a9689188a164 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 14:20:22 +0100
Subject: [PATCH 24/39] Condition tooltip copy update

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index be880d3d02bd0..a5fd38efdb65a 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2319,8 +2319,8 @@
 	"filter.addCondition": "Add condition",
 	"filter.removeCondition": "Remove condition",
 	"filter.maxConditions": "Maximum conditions reached",
-	"filter.condition.resolvedTrue": "This condition is true for item 1",
-	"filter.condition.resolvedFalse": "This condition is false for item 1",
+	"filter.condition.resolvedTrue": "This condition is true for the first item",
+	"filter.condition.resolvedFalse": "This condition is false for the first item",
 	"filter.condition.placeholderLeft": "e.g. value1",
 	"filter.condition.placeholderRight": "e.g. value2",
 	"filter.condition.placeholderDate": "e.g. 2023-12-31 00:00:00",

From 046e46840f4e6bc46eb2a8d422955743db9d0b04 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 14:34:34 +0100
Subject: [PATCH 25/39] Fix linting & unit tests

---
 packages/core/src/ExtractValue.ts                           | 1 +
 packages/core/test/Validation.test.ts                       | 6 +++---
 packages/editor-ui/src/components/ParameterInputList.vue    | 1 -
 .../src/components/__tests__/FilterConditions.test.ts       | 2 --
 packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts      | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index 73ee4a3e38643..11d72aa4df16c 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -198,6 +198,7 @@ export function extractValue(
 		}
 		return extractValueOther(value, property, parameterName);
 	} catch (error) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment
 		throw new NodeOperationError(node, error, { description: get(error, 'description') });
 	}
 }
diff --git a/packages/core/test/Validation.test.ts b/packages/core/test/Validation.test.ts
index 2554abb05babb..25cc78099d0a2 100644
--- a/packages/core/test/Validation.test.ts
+++ b/packages/core/test/Validation.test.ts
@@ -180,7 +180,7 @@ describe('Validation', () => {
 			{
 				name: 'str1',
 				type: 'stringValue',
-				stringValue: 42, //validateFieldType does not change the type of string value
+				stringValue: 42,
 			},
 			{
 				name: 'arr1',
@@ -200,8 +200,8 @@ describe('Validation', () => {
 
 		// value should be type number
 		expect(typeof (result as IDataObject[])[0].numberValue).toEqual('number');
-		// string value should remain unchanged
-		expect(typeof (result as IDataObject[])[1].stringValue).toEqual('number');
+		// value should be type string
+		expect(typeof (result as IDataObject[])[1].stringValue).toEqual('string');
 		// value should be type array
 		expect(typeof (result as IDataObject[])[2].arrayValue).toEqual('object');
 		expect(Array.isArray((result as IDataObject[])[2].arrayValue)).toEqual(true);
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 3bee5d9908bf4..99e095f0c1540 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -220,7 +220,6 @@ export default defineComponent({
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore),
 		nodeTypeVersion(): number | null {
-			console.log(this.node);
 			if (this.node) {
 				return this.node.typeVersion;
 			}
diff --git a/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
index 1aabd8a061768..79fe58e714913 100644
--- a/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
+++ b/packages/editor-ui/src/components/__tests__/FilterConditions.test.ts
@@ -241,8 +241,6 @@ describe('Filter.vue', () => {
 
 		const removeButton = conditions[0].querySelector('[data-test-id="filter-remove-condition"]');
 
-		console.log(removeButton);
-
 		await userEvent.click(removeButton as Element);
 
 		conditions = await findAllByTestId('filter-condition');
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts b/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
index 20b296741673a..d0531ff3c2a92 100644
--- a/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.node.test.ts
@@ -2,4 +2,4 @@ import { testWorkflows, getWorkflowFilenames } from '@test/nodes/Helpers';
 
 const workflows = getWorkflowFilenames(__dirname);
 
-describe.only('Test IF v2 Node', () => testWorkflows(workflows));
+describe('Test IF v2 Node', () => testWorkflows(workflows));

From a9a82556784358e681346cb0d9208609d8eef72e Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Fri, 1 Dec 2023 15:12:06 +0100
Subject: [PATCH 26/39] Add test coverage for type validation

---
 packages/core/test/Validation.test.ts         |  6 +++---
 .../src/NodeParameters/FilterParameter.ts     |  8 ++++++--
 packages/workflow/src/TypeValidation.ts       |  3 +++
 packages/workflow/test/TypeValidation.test.ts | 20 +++++++++++++++++++
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/core/test/Validation.test.ts b/packages/core/test/Validation.test.ts
index 25cc78099d0a2..2554abb05babb 100644
--- a/packages/core/test/Validation.test.ts
+++ b/packages/core/test/Validation.test.ts
@@ -180,7 +180,7 @@ describe('Validation', () => {
 			{
 				name: 'str1',
 				type: 'stringValue',
-				stringValue: 42,
+				stringValue: 42, //validateFieldType does not change the type of string value
 			},
 			{
 				name: 'arr1',
@@ -200,8 +200,8 @@ describe('Validation', () => {
 
 		// value should be type number
 		expect(typeof (result as IDataObject[])[0].numberValue).toEqual('number');
-		// value should be type string
-		expect(typeof (result as IDataObject[])[1].stringValue).toEqual('string');
+		// string value should remain unchanged
+		expect(typeof (result as IDataObject[])[1].stringValue).toEqual('number');
 		// value should be type array
 		expect(typeof (result as IDataObject[])[2].arrayValue).toEqual('object');
 		expect(Array.isArray((result as IDataObject[])[2].arrayValue)).toEqual(true);
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 7b3b7c101a85d..99324a46e207c 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -28,7 +28,7 @@ function parseSingleFilterValue(
 ): ValidationResult {
 	return type === 'any'
 		? ({ valid: true, newValue: value } as ValidationResult)
-		: validateFieldType('filter', value, type, { strict });
+		: validateFieldType('filter', value, type, { strict, parseStrings: true });
 }
 
 function parseFilterConditionValues(
@@ -317,7 +317,10 @@ export const validateFilterParameter = (
 			const checkLeftValue = hasLeftValue && !isLeftValueExpression && type !== 'any';
 
 			const validationResultLeft = checkLeftValue
-				? validateFieldType(nodeProperties.displayName, condition.leftValue, type, { strict })
+				? validateFieldType(nodeProperties.displayName, condition.leftValue, type, {
+						strict,
+						parseStrings: true,
+				  })
 				: { valid: true };
 
 			const isRightValueExpression =
@@ -333,6 +336,7 @@ export const validateFilterParameter = (
 			const validationResultRight = checkRightValue
 				? validateFieldType(nodeProperties.displayName, condition.rightValue, safeRightType, {
 						strict,
+						parseStrings: true,
 				  })
 				: { valid: true };
 
diff --git a/packages/workflow/src/TypeValidation.ts b/packages/workflow/src/TypeValidation.ts
index f59a85daafdcf..ace417ad5c588 100644
--- a/packages/workflow/src/TypeValidation.ts
+++ b/packages/workflow/src/TypeValidation.ts
@@ -125,6 +125,7 @@ export const tryToParseObject = (value: unknown): object => {
 type ValidateFieldTypeOptions = Partial<{
 	valueOptions: INodePropertyOptions[];
 	strict: boolean;
+	parseStrings: boolean;
 }>;
 // Validates field against the schema and tries to parse it to the correct type
 export const validateFieldType = (
@@ -136,9 +137,11 @@ export const validateFieldType = (
 	if (value === null || value === undefined) return { valid: true };
 	const strict = options.strict ?? false;
 	const valueOptions = options.valueOptions ?? [];
+	const parseStrings = options.parseStrings ?? false;
 	const defaultErrorMessage = `'${fieldName}' expects a ${type} but we got '${String(value)}'`;
 	switch (type.toLowerCase()) {
 		case 'string': {
+			if (!parseStrings) return { valid: true, newValue: value };
 			try {
 				if (strict && typeof value !== 'string') {
 					return { valid: false, errorMessage: defaultErrorMessage };
diff --git a/packages/workflow/test/TypeValidation.test.ts b/packages/workflow/test/TypeValidation.test.ts
index 5ed68319f312e..9c26105b342f6 100644
--- a/packages/workflow/test/TypeValidation.test.ts
+++ b/packages/workflow/test/TypeValidation.test.ts
@@ -206,4 +206,24 @@ describe('Type Validation', () => {
 		expect(validateFieldType('time', '23:23:', 'time').valid).toEqual(false);
 		expect(validateFieldType('time', '23::23::23', 'time').valid).toEqual(false);
 	});
+
+	describe('options', () => {
+		describe('strict=true', () => {
+			it('should not convert/cast types', () => {
+				const options = { strict: true };
+				expect(validateFieldType('test', '42', 'number', options).valid).toBe(false);
+				expect(validateFieldType('test', 'true', 'boolean', options).valid).toBe(false);
+				expect(validateFieldType('test', [], 'object', options).valid).toBe(false);
+			});
+		});
+
+		describe('parseStrings=true', () => {
+			it('should parse strings from other types', () => {
+				const options = { parseStrings: true };
+				expect(validateFieldType('test', 42, 'string').newValue).toBe(42);
+				expect(validateFieldType('test', 42, 'string', options).newValue).toBe('42');
+				expect(validateFieldType('test', true, 'string', options).newValue).toBe('true');
+			});
+		});
+	});
 });

From 50e3bf1d66ea29c4c67a78e02fd9fbee182d5d1f Mon Sep 17 00:00:00 2001
From: Giulio Andreini <andreini@netseven.it>
Date: Mon, 4 Dec 2023 12:21:57 +0100
Subject: [PATCH 27/39] Minor copy tweak to true/false icon tooltip.

---
 packages/editor-ui/src/plugins/i18n/locales/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index a5fd38efdb65a..af78ad9807190 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2319,8 +2319,8 @@
 	"filter.addCondition": "Add condition",
 	"filter.removeCondition": "Remove condition",
 	"filter.maxConditions": "Maximum conditions reached",
-	"filter.condition.resolvedTrue": "This condition is true for the first item",
-	"filter.condition.resolvedFalse": "This condition is false for the first item",
+	"filter.condition.resolvedTrue": "This condition is true for the first input item",
+	"filter.condition.resolvedFalse": "This condition is false for the first input item",
 	"filter.condition.placeholderLeft": "e.g. value1",
 	"filter.condition.placeholderRight": "e.g. value2",
 	"filter.condition.placeholderDate": "e.g. 2023-12-31 00:00:00",

From 25a92f231b4867df6e26d6321cf78b0abd971a49 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 4 Dec 2023 14:49:56 +0100
Subject: [PATCH 28/39] Greyscale true/false icons, change default operator

---
 .../editor-ui/src/components/FilterConditions/Condition.vue   | 4 ++--
 .../editor-ui/src/components/FilterConditions/constants.ts    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index a982ba7070cfd..f406338a2d1ce 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -233,14 +233,14 @@ const i18n = useI18n();
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedTrue') }}
 				</template>
-				<n8n-icon icon="check-circle" size="medium" color="success" />
+				<n8n-icon icon="check-circle" size="medium" color="text-light" />
 			</n8n-tooltip>
 
 			<n8n-tooltip :show-after="500" v-else-if="conditionResult === false">
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedFalse') }}
 				</template>
-				<n8n-icon icon="times-circle" size="medium" color="danger" />
+				<n8n-icon icon="times-circle" size="medium" color="text-light" />
 			</n8n-tooltip>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index 5175cccac0ff2..a6c4832139bd4 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -170,7 +170,7 @@ export const OPERATORS = Object.values(OPERATORS_BY_ID);
 export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
 
 export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] =
-	OPERATORS_BY_ID['string:equals'];
+	OPERATORS_BY_ID['boolean:true'];
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{

From 83f86b311619d24a73b334f89cea82a256a84767 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 4 Dec 2023 14:51:03 +0100
Subject: [PATCH 29/39] Revert default operator to string:equals

---
 packages/editor-ui/src/components/FilterConditions/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index a6c4832139bd4..5175cccac0ff2 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -170,7 +170,7 @@ export const OPERATORS = Object.values(OPERATORS_BY_ID);
 export type FilterOperatorId = keyof typeof OPERATORS_BY_ID;
 
 export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] =
-	OPERATORS_BY_ID['boolean:true'];
+	OPERATORS_BY_ID['string:equals'];
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
 	{

From 31b824222c1c6dd7baf171a90a07f718b3d0f8a9 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 5 Dec 2023 18:05:46 +0100
Subject: [PATCH 30/39] Fix drag & drop issue when targets are close to
 eachother

---
 packages/editor-ui/src/Interface.ts                  |  2 +-
 .../editor-ui/src/components/DraggableTarget.vue     |  9 ++++++++-
 packages/editor-ui/src/stores/ndv.store.ts           | 12 ++++++------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 3d223149c37d8..8184352bad0ef 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1207,7 +1207,7 @@ export interface NDVState {
 		isDragging: boolean;
 		type: string;
 		data: string;
-		canDrop: boolean;
+		activeTargetId: string | null;
 		stickyPosition: null | XYPosition;
 	};
 	isMappingOnboarded: boolean;
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index 3418f604398ba..a36b4aa9ff639 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -9,6 +9,7 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
+import { v4 as uuid } from 'uuid';
 
 export default defineComponent({
 	props: {
@@ -29,6 +30,7 @@ export default defineComponent({
 	data() {
 		return {
 			hovering: false,
+			id: uuid(),
 		};
 	},
 	mounted() {
@@ -83,7 +85,12 @@ export default defineComponent({
 	},
 	watch: {
 		activeDrop(active) {
-			this.ndvStore.setDraggableCanDrop(active);
+			if (active) {
+				this.ndvStore.setDraggableTargetId(this.id);
+			} else if (this.ndvStore.draggable.activeTargetId === this.id) {
+				// Only clear active target if it is this one
+				this.ndvStore.setDraggableTargetId(null);
+			}
 		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/ndv.store.ts b/packages/editor-ui/src/stores/ndv.store.ts
index 058b3fc405ec7..5ca6dca6d8b6b 100644
--- a/packages/editor-ui/src/stores/ndv.store.ts
+++ b/packages/editor-ui/src/stores/ndv.store.ts
@@ -46,7 +46,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 			isDragging: false,
 			type: '',
 			data: '',
-			canDrop: false,
+			activeTargetId: null,
 			stickyPosition: null,
 		},
 		isMappingOnboarded: useStorage(LOCAL_STORAGE_MAPPING_IS_ONBOARDED).value === 'true',
@@ -94,7 +94,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 			return this.draggable.data;
 		},
 		canDraggableDrop(): boolean {
-			return this.draggable.canDrop;
+			return this.draggable.activeTargetId !== null;
 		},
 		outputPanelEditMode(): NDVState['output']['editMode'] {
 			return this.output.editMode;
@@ -191,7 +191,7 @@ export const useNDVStore = defineStore(STORES.NDV, {
 				isDragging: true,
 				type,
 				data,
-				canDrop: false,
+				activeTargetId: null,
 				stickyPosition: null,
 			};
 		},
@@ -200,15 +200,15 @@ export const useNDVStore = defineStore(STORES.NDV, {
 				isDragging: false,
 				type: '',
 				data: '',
-				canDrop: false,
+				activeTargetId: null,
 				stickyPosition: null,
 			};
 		},
 		setDraggableStickyPos(position: XYPosition | null): void {
 			this.draggable.stickyPosition = position;
 		},
-		setDraggableCanDrop(canDrop: boolean): void {
-			this.draggable.canDrop = canDrop;
+		setDraggableTargetId(id: string | null): void {
+			this.draggable.activeTargetId = id;
 		},
 		setMappingTelemetry(telemetry: { [key: string]: string | number | boolean }): void {
 			this.mappingTelemetry = { ...this.mappingTelemetry, ...telemetry };

From cb055dd5840ea3e3eeb4a6f6cdc01ec76e944e0a Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Tue, 5 Dec 2023 18:19:46 +0100
Subject: [PATCH 31/39] Status validation icon styling fix

---
 .../src/components/FilterConditions/Condition.vue      | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index f406338a2d1ce..8423ac7b26ce0 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -233,14 +233,14 @@ const i18n = useI18n();
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedTrue') }}
 				</template>
-				<n8n-icon icon="check-circle" size="medium" color="text-light" />
+				<n8n-icon :class="$style.statusIcon" icon="check-circle" size="medium" color="text-light" />
 			</n8n-tooltip>
 
 			<n8n-tooltip :show-after="500" v-else-if="conditionResult === false">
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedFalse') }}
 				</template>
-				<n8n-icon icon="times-circle" size="medium" color="text-light" />
+				<n8n-icon :class="$style.statusIcon" icon="times-circle" size="medium" color="text-light" />
 			</n8n-tooltip>
 		</div>
 	</div>
@@ -277,7 +277,11 @@ const i18n = useI18n();
 
 .status {
 	align-self: flex-start;
-	padding-top: 30px;
+	padding-top: 28px;
+}
+
+.statusIcon {
+	padding-left: var(--spacing-4xs);
 }
 
 .select {

From d1c4cfa31cdc86a8950612f6b6dfc5974eb90219 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 6 Dec 2023 16:27:14 +0100
Subject: [PATCH 32/39] Fix review remarks: error handling

---
 cypress/e2e/30-if-node.cy.ts                  |   2 +-
 cypress/e2e/4-node-creator.cy.ts              |   2 +-
 packages/core/src/ExtractValue.ts             |   6 +-
 packages/core/src/NodeExecuteFunctions.ts     |   2 +-
 .../components/FilterConditions/Condition.vue | 115 ++++++++++-----
 .../components/FilterConditions/constants.ts  |  68 ++++++++-
 .../src/plugins/i18n/locales/en.json          |   5 +-
 .../nodes/If/test/v2/IfV2.date-time.json      |  19 +--
 .../src/NodeParameters/FilterParameter.ts     | 138 ++++++++----------
 .../workflow/test/FilterParameter.test.ts     |  16 +-
 10 files changed, 225 insertions(+), 148 deletions(-)

diff --git a/cypress/e2e/30-if-node.cy.ts b/cypress/e2e/30-if-node.cy.ts
index 88ac63be021c3..95ed1e9a0d34d 100644
--- a/cypress/e2e/30-if-node.cy.ts
+++ b/cypress/e2e/30-if-node.cy.ts
@@ -20,7 +20,7 @@ describe('If Node (filter component)', () => {
 		ndv.getters
 			.filterConditionOperator(FILTER_PARAM_NAME)
 			.find('input')
-			.should('have.value', 'exists');
+			.should('have.value', 'is equal to');
 
 		// Add
 		ndv.actions.addFilterCondition(FILTER_PARAM_NAME);
diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts
index 8fefc6d3de5bc..52f97cee42e97 100644
--- a/cypress/e2e/4-node-creator.cy.ts
+++ b/cypress/e2e/4-node-creator.cy.ts
@@ -31,7 +31,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.activeSubcategory().should('not.have.text', 'On app event');
 	});
 
-	it('should search for nodes', () => {
+	it.only('should search for nodes', () => {
 		nodeCreatorFeature.actions.openNodeCreator();
 
 		nodeCreatorFeature.getters.searchBar().find('input').type('manual');
diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index 11d72aa4df16c..197e196911f7e 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -128,6 +128,7 @@ function extractValueFilter(
 	value: NodeParameterValueType | object,
 	property: INodeProperties,
 	parameterName: string,
+	itemIndex: number,
 ): NodeParameterValueType | object {
 	if (!isFilterValue(value)) {
 		return value;
@@ -139,7 +140,7 @@ function extractValueFilter(
 		);
 	}
 
-	return executeFilter(value);
+	return executeFilter(value, { itemIndex });
 }
 
 function extractValueOther(
@@ -181,6 +182,7 @@ export function extractValue(
 	parameterName: string,
 	node: INode,
 	nodeType: INodeType,
+	itemIndex = 0,
 ): NodeParameterValueType | object {
 	let property: INodePropertyOptions | INodeProperties | INodePropertyCollection;
 	try {
@@ -194,7 +196,7 @@ export function extractValue(
 		if (property.type === 'resourceLocator') {
 			return extractValueRLC(value, property, parameterName);
 		} else if (property.type === 'filter') {
-			return extractValueFilter(value, property, parameterName);
+			return extractValueFilter(value, property, parameterName, itemIndex);
 		}
 		return extractValueOther(value, property, parameterName);
 	} catch (error) {
diff --git a/packages/core/src/NodeExecuteFunctions.ts b/packages/core/src/NodeExecuteFunctions.ts
index 2cdfdf2080012..e41877f631e1d 100644
--- a/packages/core/src/NodeExecuteFunctions.ts
+++ b/packages/core/src/NodeExecuteFunctions.ts
@@ -2272,7 +2272,7 @@ export function getNodeParameter(
 
 	// This is outside the try/catch because it throws errors with proper messages
 	if (options?.extractValue) {
-		returnData = extractValue(returnData, parameterName, node, nodeType);
+		returnData = extractValue(returnData, parameterName, node, nodeType, itemIndex);
 	}
 
 	// Validate parameter value if it has a schema defined(RMC) or validateType defined
diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 8423ac7b26ce0..0aeec705563f6 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -3,6 +3,7 @@ import type { IUpdateInformation } from '@/Interface';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
 import { useI18n } from '@/composables/useI18n';
+import { DateTime } from 'luxon';
 import {
 	executeFilterCondition,
 	type FilterOptionsValue,
@@ -11,14 +12,18 @@ import {
 	type INodeProperties,
 	type NodeParameterValue,
 	type NodePropertyTypes,
+	FilterError,
+	validateFieldType,
 } from 'n8n-workflow';
 import { computed, ref } from 'vue';
 import OperatorSelect from './OperatorSelect.vue';
 import { OPERATORS_BY_ID, type FilterOperatorId } from './constants';
 import type { FilterOperator } from './types';
 import { resolveParameter } from '@/mixins/workflowHelpers';
-
-type ConditionResult = 'unknown' | boolean;
+type ConditionResult =
+	| { status: 'resolve_error' }
+	| { status: 'validation_error'; error: string }
+	| { status: 'success'; result: boolean };
 
 interface Props {
 	path: string;
@@ -43,17 +48,11 @@ const emit = defineEmits<{
 
 const condition = ref<FilterConditionValue>(props.condition);
 
-function isExpression(value: unknown): boolean {
-	return typeof value === 'string' && value.startsWith('=');
-}
-
 const operatorId = computed<FilterOperatorId>(() => {
 	const { type, operation } = props.condition.operator;
 	return `${type}:${operation}` as FilterOperatorId;
 });
-const operator = computed<FilterOperator>(() => OPERATORS_BY_ID[operatorId.value]);
-const isLeftExpression = computed(() => isExpression(props.condition.leftValue));
-const isRightExpression = computed(() => isExpression(props.condition.rightValue));
+const operator = computed(() => OPERATORS_BY_ID[operatorId.value] as FilterOperator);
 
 const operatorTypeToNodePropType = (operatorType: FilterOperatorType): NodePropertyTypes => {
 	switch (operatorType) {
@@ -69,31 +68,53 @@ const operatorTypeToNodePropType = (operatorType: FilterOperatorType): NodePrope
 
 const conditionResult = computed<ConditionResult>(() => {
 	try {
-		const resolved = resolveParameter(condition.value as unknown as NodeParameterValue);
+		const resolved = resolveParameter(
+			condition.value as unknown as NodeParameterValue,
+		) as FilterConditionValue;
 
+		if (resolved.leftValue === undefined || resolved.rightValue === undefined) {
+			return { status: 'resolve_error' };
+		}
 		try {
-			return executeFilterCondition(
-				resolved as FilterConditionValue,
-				props.options,
-				props.index ?? 0,
-			);
+			const result = executeFilterCondition(resolved, props.options, {
+				index: props.index ?? 0,
+				errorFormat: 'inline',
+			});
+			return { status: 'success', result };
 		} catch (error) {
-			return false;
+			let errorMessage = i18n.baseText('parameterInput.error');
+
+			if (error instanceof FilterError) {
+				errorMessage = `${error.message}.\n${error.description}`;
+			}
+			return {
+				status: 'validation_error',
+				error: errorMessage,
+			};
 		}
 	} catch (error) {
-		return 'unknown';
+		return { status: 'resolve_error' };
 	}
 });
 
+const allIssues = computed(() => {
+	if (conditionResult.value.status === 'validation_error') {
+		return [conditionResult.value.error];
+	}
+
+	return props.issues;
+});
+
+const now = computed(() => DateTime.now().toISO());
+
 const leftParameter = computed<INodeProperties>(() => ({
 	name: '',
 	displayName: '',
 	default: '',
-	placeholder: i18n.baseText(
+	placeholder:
 		operator.value.type === 'dateTime'
-			? 'filter.condition.placeholderDate'
-			: 'filter.condition.placeholderLeft',
-	),
+			? now.value
+			: i18n.baseText('filter.condition.placeholderLeft'),
 	type: operatorTypeToNodePropType(operator.value.type),
 }));
 
@@ -101,11 +122,10 @@ const rightParameter = computed<INodeProperties>(() => ({
 	name: '',
 	displayName: '',
 	default: '',
-	placeholder: i18n.baseText(
+	placeholder:
 		operator.value.type === 'dateTime'
-			? 'filter.condition.placeholderDate'
-			: 'filter.condition.placeholderRight',
-	),
+			? now.value
+			: i18n.baseText(i18n.baseText('filter.condition.placeholderRight')),
 	type: operatorTypeToNodePropType(operator.value.rightType ?? operator.value.type),
 }));
 
@@ -117,20 +137,26 @@ const onRightValueChange = (update: IUpdateInformation): void => {
 	condition.value.rightValue = update.value;
 };
 
-const onOperatorChange = (value: string): void => {
-	const selectedOperator = condition.value.operator;
-	const newOperator: FilterOperator = OPERATORS_BY_ID[value as FilterOperatorId];
-	const typeChanged = selectedOperator.type !== newOperator.type;
-
-	if (typeChanged && !isLeftExpression.value) {
-		condition.value.leftValue = '';
-	}
+const convertToType = (value: unknown, type: FilterOperatorType): unknown => {
+	return (
+		validateFieldType('filter', condition.value.leftValue, type, { parseStrings: true }).newValue ??
+		value
+	);
+};
 
-	const rightType = selectedOperator.rightType ?? selectedOperator.type;
+const onOperatorChange = (value: string): void => {
+	const newOperator = OPERATORS_BY_ID[value as FilterOperatorId] as FilterOperator;
+	const rightType = operator.value.rightType ?? operator.value.type;
 	const newRightType = newOperator.rightType ?? newOperator.type;
+	const leftTypeChanged = operator.value.type !== newOperator.type;
 	const rightTypeChanged = rightType !== newRightType;
-	if ((rightTypeChanged && !isRightExpression.value) || newOperator.singleValue) {
-		condition.value.rightValue = '';
+
+	// Try to convert left & right values to operator type
+	if (leftTypeChanged) {
+		condition.value.leftValue = convertToType(condition.value.leftValue, newOperator.type);
+	}
+	if (rightTypeChanged && !newOperator.singleValue) {
+		condition.value.rightValue = convertToType(condition.value.rightValue, newRightType);
 	}
 
 	condition.value.operator = {
@@ -157,7 +183,7 @@ const i18n = useI18n();
 	<div
 		:class="{
 			[$style.wrapper]: true,
-			[$style.hasIssues]: issues.length > 0,
+			[$style.hasIssues]: allIssues.length > 0,
 		}"
 		data-test-id="filter-condition"
 	>
@@ -194,6 +220,7 @@ const i18n = useI18n();
 						hideLabel
 						hideHint
 						isSingleLine
+						:key="leftParameter.type"
 						:parameter="leftParameter"
 						:value="condition.leftValue"
 						:path="`${path}.left`"
@@ -213,6 +240,7 @@ const i18n = useI18n();
 						hideLabel
 						hideHint
 						isSingleLine
+						:key="rightParameter.type"
 						:optionsPosition="bp === 'default' ? 'top' : 'bottom'"
 						:parameter="rightParameter"
 						:value="condition.rightValue"
@@ -227,16 +255,22 @@ const i18n = useI18n();
 		</n8n-resize-observer>
 
 		<div :class="$style.status">
-			<parameter-issues v-if="issues.length > 0" :issues="issues" />
+			<parameter-issues v-if="allIssues.length > 0" :issues="allIssues" />
 
-			<n8n-tooltip :show-after="500" v-else-if="conditionResult === true">
+			<n8n-tooltip
+				:show-after="500"
+				v-else-if="conditionResult.status === 'success' && conditionResult.result === true"
+			>
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedTrue') }}
 				</template>
 				<n8n-icon :class="$style.statusIcon" icon="check-circle" size="medium" color="text-light" />
 			</n8n-tooltip>
 
-			<n8n-tooltip :show-after="500" v-else-if="conditionResult === false">
+			<n8n-tooltip
+				:show-after="500"
+				v-else-if="conditionResult.status === 'success' && conditionResult.result === false"
+			>
 				<template #content>
 					{{ i18n.baseText('filter.condition.resolvedFalse') }}
 				</template>
@@ -318,6 +352,7 @@ const i18n = useI18n();
 }
 
 .remove {
+	--button-font-color: var(--color-text-light);
 	position: absolute;
 	left: 0;
 	top: var(--spacing-l);
diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index 5175cccac0ff2..dde88045f1cd2 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -11,14 +11,14 @@ export const DEFAULT_FILTER_OPTIONS: FilterOptionsValue = {
 };
 
 export const OPERATORS_BY_ID = {
-	'any:exists': {
-		type: 'any',
+	'string:exists': {
+		type: 'string',
 		operation: 'exists',
 		name: 'filter.operator.exists',
 		singleValue: true,
 	},
-	'any:notExists': {
-		type: 'any',
+	'string:notExists': {
+		type: 'string',
 		operation: 'notExists',
 		name: 'filter.operator.notExists',
 		singleValue: true,
@@ -49,12 +49,36 @@ export const OPERATORS_BY_ID = {
 	},
 	'string:regex': { type: 'string', operation: 'regex', name: 'filter.operator.regex' },
 	'string:notRegex': { type: 'string', operation: 'notRegex', name: 'filter.operator.notRegex' },
+	'number:exists': {
+		type: 'number',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'number:notExists': {
+		type: 'number',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
 	'number:equals': { type: 'number', operation: 'equals', name: 'filter.operator.equals' },
 	'number:notEquals': { type: 'number', operation: 'notEquals', name: 'filter.operator.notEquals' },
 	'number:gt': { type: 'number', operation: 'gt', name: 'filter.operator.gt' },
 	'number:lt': { type: 'number', operation: 'lt', name: 'filter.operator.lt' },
 	'number:gte': { type: 'number', operation: 'gte', name: 'filter.operator.gte' },
 	'number:lte': { type: 'number', operation: 'lte', name: 'filter.operator.lte' },
+	'dateTime:exists': {
+		type: 'dateTime',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'dateTime:notExists': {
+		type: 'dateTime',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
 	'dateTime:equals': { type: 'dateTime', operation: 'equals', name: 'filter.operator.equals' },
 	'dateTime:notEquals': {
 		type: 'dateTime',
@@ -73,6 +97,18 @@ export const OPERATORS_BY_ID = {
 		operation: 'beforeOrEquals',
 		name: 'filter.operator.beforeOrEquals',
 	},
+	'boolean:exists': {
+		type: 'boolean',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'boolean:notExists': {
+		type: 'boolean',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
 	'boolean:true': {
 		type: 'boolean',
 		operation: 'true',
@@ -91,6 +127,18 @@ export const OPERATORS_BY_ID = {
 		operation: 'notEquals',
 		name: 'filter.operator.notEquals',
 	},
+	'array:exists': {
+		type: 'array',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'array:notExists': {
+		type: 'array',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
 	'array:empty': {
 		type: 'array',
 		operation: 'empty',
@@ -151,6 +199,18 @@ export const OPERATORS_BY_ID = {
 		name: 'filter.operator.lengthLte',
 		rightType: 'number',
 	},
+	'object:exists': {
+		type: 'object',
+		operation: 'exists',
+		name: 'filter.operator.exists',
+		singleValue: true,
+	},
+	'object:notExists': {
+		type: 'object',
+		operation: 'notExists',
+		name: 'filter.operator.notExists',
+		singleValue: true,
+	},
 	'object:empty': {
 		type: 'object',
 		operation: 'empty',
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index af78ad9807190..e8b282fdfca06 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2321,9 +2321,8 @@
 	"filter.maxConditions": "Maximum conditions reached",
 	"filter.condition.resolvedTrue": "This condition is true for the first input item",
 	"filter.condition.resolvedFalse": "This condition is false for the first input item",
-	"filter.condition.placeholderLeft": "e.g. value1",
-	"filter.condition.placeholderRight": "e.g. value2",
-	"filter.condition.placeholderDate": "e.g. 2023-12-31 00:00:00",
+	"filter.condition.placeholderLeft": "value1",
+	"filter.condition.placeholderRight": "value2",
 	"templateSetup.title": "Setup '{name}' template",
 	"templateSetup.instructions": "You need {0} account to setup this template",
 	"templateSetup.skip": "Skip",
diff --git a/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json b/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
index b941d0b994c7e..97f56cb654491 100644
--- a/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
+++ b/packages/nodes-base/nodes/If/test/v2/IfV2.date-time.json
@@ -14,7 +14,7 @@
     },
     {
       "parameters": {
-        "jsCode": "return [\n  {\n    \"date\": \"2023-10-26T16:45:52.367Z\",\n    \"label\": \"Apple\",\n  },\n  {\n    \"date\": \"2023-10-20T16:45:52.367Z\",\n    \"label\": \"Banana\"\n  },\n  {\n    \"date\": 1696178752,\n    \"label\": \"Kiwi\"\n  },\n  {\n    \"date\": 1699178752,\n    \"label\": \"Orange\"\n  }\n]"
+        "jsCode": "return [\n  {\n    \"date\": \"2023-10-26T16:45:52.367Z\",\n    \"label\": \"Apple\",\n  },\n  {\n    \"date\": \"2023-10-20T16:45:52.367Z\",\n    \"label\": \"Banana\"\n  },\n  {\n    \"date\": \"2023-10-20T16:45:52.367Z\",\n    \"label\": \"Kiwi\"\n  },\n  {\n    \"date\": \"2023-10-20T16:45:52.367Z\",\n    \"label\": \"Orange\"\n  }\n]"
       },
       "id": "60697c7f-3948-4790-97ba-8aba03d02ac2",
       "name": "Code",
@@ -89,11 +89,15 @@
       },
       {
         "json": {
-          "date": 1696178752,
+          "date": "2023-10-20T16:45:52.367Z",
           "label": "Kiwi"
         }
-
-
+      },
+      {
+        "json": {
+          "date": "2023-10-20T16:45:52.367Z",
+          "label": "Orange"
+        }
       }
     ],
     "Else": [
@@ -103,13 +107,6 @@
           "label": "Apple"
         }
 
-      },
-      {
-        "json": {
-          "date": 1699178752,
-          "label": "Orange"
-        }
-
       }
     ]
   },
diff --git a/packages/workflow/src/NodeParameters/FilterParameter.ts b/packages/workflow/src/NodeParameters/FilterParameter.ts
index 99324a46e207c..9f8423f75b2a1 100644
--- a/packages/workflow/src/NodeParameters/FilterParameter.ts
+++ b/packages/workflow/src/NodeParameters/FilterParameter.ts
@@ -12,7 +12,14 @@ import * as LoggerProxy from '../LoggerProxy';
 
 type Result<T, E> = { ok: true; result: T } | { ok: false; error: E };
 
-class FilterError extends Error {
+type FilterConditionMetadata = {
+	index: number;
+	unresolvedExpressions: boolean;
+	itemIndex: number;
+	errorFormat: 'full' | 'inline';
+};
+
+export class FilterError extends Error {
 	constructor(
 		message: string,
 		readonly description: string,
@@ -26,7 +33,7 @@ function parseSingleFilterValue(
 	type: FilterOperatorType,
 	strict = false,
 ): ValidationResult {
-	return type === 'any'
+	return type === 'any' || value === null || value === undefined || value === ''
 		? ({ valid: true, newValue: value } as ValidationResult)
 		: validateFieldType('filter', value, type, { strict, parseStrings: true });
 }
@@ -34,19 +41,34 @@ function parseSingleFilterValue(
 function parseFilterConditionValues(
 	condition: FilterConditionValue,
 	options: FilterOptionsValue,
-	index: number,
+	metadata: Partial<FilterConditionMetadata>,
 ): Result<{ left: unknown; right: unknown }, FilterError> {
+	const index = metadata.index ?? 0;
+	const itemIndex = metadata.itemIndex ?? 0;
+	const errorFormat = metadata.errorFormat ?? 'full';
 	const strict = options.typeValidation === 'strict';
 	const { operator } = condition;
 	const rightType = operator.rightType ?? operator.type;
 	const parsedLeftValue = parseSingleFilterValue(condition.leftValue, operator.type, strict);
 	const parsedRightValue = parseSingleFilterValue(condition.rightValue, rightType, strict);
+	const leftValid =
+		parsedLeftValue.valid ||
+		(metadata.unresolvedExpressions &&
+			typeof condition.leftValue === 'string' &&
+			condition.leftValue.startsWith('='));
+	const rightValid =
+		parsedRightValue.valid ||
+		!!operator.singleValue ||
+		(metadata.unresolvedExpressions &&
+			typeof condition.rightValue === 'string' &&
+			condition.rightValue.startsWith('='));
 	const leftValueString = String(condition.leftValue);
 	const rightValueString = String(condition.rightValue);
 	const errorDescription = 'Try to change the operator, or change the type with an expression';
-	const inCondition = `in condition ${index + 1}`;
+	const inCondition = errorFormat === 'full' ? ` in condition ${index + 1} ` : ' ';
+	const itemSuffix = `[item ${itemIndex}]`;
 
-	if (!parsedLeftValue.valid && !parsedRightValue.valid) {
+	if (!leftValid && !rightValid) {
 		const providedValues = 'The provided values';
 		let types = `'${operator.type}'`;
 		if (rightType !== operator.type) {
@@ -56,7 +78,7 @@ function parseFilterConditionValues(
 			return {
 				ok: false,
 				error: new FilterError(
-					`${providedValues} '${leftValueString}' and '${rightValueString}' ${inCondition} are not of the expected type ${types}`,
+					`${providedValues} '${leftValueString}' and '${rightValueString}'${inCondition}are not of the expected type ${types} ${itemSuffix}`,
 					errorDescription,
 				),
 			};
@@ -65,7 +87,7 @@ function parseFilterConditionValues(
 		return {
 			ok: false,
 			error: new FilterError(
-				`${providedValues} '${leftValueString}' and '${rightValueString}' ${inCondition} cannot be converted to the expected type ${types}`,
+				`${providedValues} '${leftValueString}' and '${rightValueString}'${inCondition}cannot be converted to the expected type ${types} ${itemSuffix}`,
 				errorDescription,
 			),
 		};
@@ -75,12 +97,12 @@ function parseFilterConditionValues(
 		const fieldNumber = field === 'left' ? 1 : 2;
 
 		if (strict) {
-			return `The provided value ${fieldNumber} '${value}' ${inCondition} is not of the expected type '${type}'`;
+			return `The provided value ${fieldNumber} '${value}'${inCondition}is not of the expected type '${type}' ${itemSuffix}`;
 		}
-		return `The provided value ${fieldNumber} '${value}' ${inCondition} cannot be converted to the expected type '${type}'`;
+		return `The provided value ${fieldNumber} '${value}'${inCondition}cannot be converted to the expected type '${type}' ${itemSuffix}`;
 	};
 
-	if (!parsedLeftValue.valid) {
+	if (!leftValid) {
 		return {
 			ok: false,
 			error: new FilterError(
@@ -90,7 +112,7 @@ function parseFilterConditionValues(
 		};
 	}
 
-	if (!parsedRightValue.valid && !operator.singleValue) {
+	if (!rightValid) {
 		return {
 			ok: false,
 			error: new FilterError(
@@ -105,12 +127,12 @@ function parseFilterConditionValues(
 
 export function executeFilterCondition(
 	condition: FilterConditionValue,
-	options: FilterOptionsValue,
-	index: number,
+	filterOptions: FilterOptionsValue,
+	metadata: Partial<FilterConditionMetadata> = {},
 ): boolean {
-	const ignoreCase = !options.caseSensitive;
+	const ignoreCase = !filterOptions.caseSensitive;
 	const { operator } = condition;
-	const parsedValues = parseFilterConditionValues(condition, options, index);
+	const parsedValues = parseFilterConditionValues(condition, filterOptions, metadata);
 
 	if (!parsedValues.ok) {
 		throw parsedValues.error;
@@ -118,19 +140,14 @@ export function executeFilterCondition(
 
 	let { left: leftValue, right: rightValue } = parsedValues.result;
 
-	switch (operator.type) {
-		case 'any': {
-			const exists = leftValue !== undefined && leftValue !== null;
-
-			switch (condition.operator.operation) {
-				case 'exists':
-					return exists;
-				case 'notExists':
-					return !exists;
-			}
+	const exists = leftValue !== undefined && leftValue !== null;
+	if (condition.operator.operation === 'exists') {
+		return exists;
+	} else if (condition.operator.operation === 'notExists') {
+		return !exists;
+	}
 
-			break;
-		}
+	switch (operator.type) {
 		case 'string': {
 			if (ignoreCase) {
 				if (typeof leftValue === 'string') {
@@ -280,9 +297,15 @@ export function executeFilterCondition(
 	return false;
 }
 
-export function executeFilter(value: FilterValue): boolean {
+type ExecuteFilterOptions = {
+	itemIndex?: number;
+};
+export function executeFilter(
+	value: FilterValue,
+	{ itemIndex }: ExecuteFilterOptions = {},
+): boolean {
 	const conditionPass = (condition: FilterConditionValue, index: number) =>
-		executeFilterCondition(condition, value.options, index);
+		executeFilterCondition(condition, value.options, { index, itemIndex });
 
 	if (value.combinator === 'and') {
 		return value.conditions.every(conditionPass);
@@ -299,57 +322,20 @@ export const validateFilterParameter = (
 	nodeProperties: INodeProperties,
 	value: FilterValue,
 ): Record<string, string[]> => {
-	const composeErrorMessage = (type: string, field: 'first' | 'second') =>
-		`The value in the ${field} field cannot be converted to a ${type}. This could lead to unwanted results. Please check the value or choose a different logical operator.`;
-
-	const strict = value.options.typeValidation === 'strict';
 	return value.conditions.reduce(
 		(issues, condition, index) => {
-			const { type, rightType, singleValue } = condition.operator;
 			const key = `${nodeProperties.name}.${index}`;
 
-			const isLeftValueExpression =
-				typeof condition.leftValue === 'string' && condition.leftValue.startsWith('=');
-			const hasLeftValue =
-				condition.leftValue !== undefined &&
-				condition.leftValue !== null &&
-				condition.leftValue !== '';
-			const checkLeftValue = hasLeftValue && !isLeftValueExpression && type !== 'any';
-
-			const validationResultLeft = checkLeftValue
-				? validateFieldType(nodeProperties.displayName, condition.leftValue, type, {
-						strict,
-						parseStrings: true,
-				  })
-				: { valid: true };
-
-			const isRightValueExpression =
-				typeof condition.rightValue === 'string' && condition.rightValue.startsWith('=');
-			const hasRightValue =
-				condition.rightValue !== undefined &&
-				condition.rightValue !== null &&
-				condition.rightValue !== '';
-			const safeRightType = rightType ?? type;
-			const checkRightValue =
-				hasRightValue && !isRightValueExpression && !singleValue && safeRightType !== 'any';
-
-			const validationResultRight = checkRightValue
-				? validateFieldType(nodeProperties.displayName, condition.rightValue, safeRightType, {
-						strict,
-						parseStrings: true,
-				  })
-				: { valid: true };
-
-			if (!validationResultLeft.valid || !validationResultRight.valid) {
-				issues[key] = [];
-			}
-
-			if (!validationResultLeft.valid) {
-				issues[key].push(composeErrorMessage(type, 'first'));
-			}
-
-			if (!validationResultRight.valid) {
-				issues[key].push(composeErrorMessage(type, 'second'));
+			try {
+				parseFilterConditionValues(condition, value.options, {
+					index,
+					unresolvedExpressions: true,
+					errorFormat: 'inline',
+				});
+			} catch (error) {
+				if (error instanceof FilterError) {
+					issues[key].push(error.message);
+				}
 			}
 
 			return issues;
diff --git a/packages/workflow/test/FilterParameter.test.ts b/packages/workflow/test/FilterParameter.test.ts
index 9471f09056eb2..6637505bd8a22 100644
--- a/packages/workflow/test/FilterParameter.test.ts
+++ b/packages/workflow/test/FilterParameter.test.ts
@@ -168,21 +168,20 @@ describe('FilterParameter', () => {
 		});
 
 		describe('operators', () => {
-			describe('any', () => {
+			describe('exists', () => {
 				it.each([
 					{ left: '', expected: true },
 					{ left: null, expected: false },
 					{ left: undefined, expected: false },
-					{ left: 0, expected: true },
-					{ left: false, expected: true },
-				])('any:exists($left) === $expected', ({ left, expected }) => {
+					{ left: 'foo', expected: true },
+				])('string:exists($left) === $expected', ({ left, expected }) => {
 					const result = executeFilter(
 						filterFactory({
 							conditions: [
 								{
 									id: '1',
 									leftValue: left as string,
-									operator: { operation: 'exists', type: 'any' },
+									operator: { operation: 'exists', type: 'string' },
 								},
 							],
 						}),
@@ -194,16 +193,15 @@ describe('FilterParameter', () => {
 					{ left: '', expected: false },
 					{ left: null, expected: true },
 					{ left: undefined, expected: true },
-					{ left: 0, expected: false },
-					{ left: false, expected: false },
-				])('any:notExists($left) === $expected', ({ left, expected }) => {
+					{ left: 'foo', expected: false },
+				])('string:notExists($left) === $expected', ({ left, expected }) => {
 					const result = executeFilter(
 						filterFactory({
 							conditions: [
 								{
 									id: '1',
 									leftValue: left as string,
-									operator: { operation: 'notExists', type: 'any' },
+									operator: { operation: 'notExists', type: 'string' },
 								},
 							],
 						}),

From 2f1b1906f03cee2c057691d5c93b65874fc7fc11 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 7 Dec 2023 14:02:17 +0100
Subject: [PATCH 33/39] Make array parsing more strict, add test

---
 .../src/components/ParameterInputList.vue     |  4 +-
 packages/workflow/src/TypeValidation.ts       |  3 ++
 .../workflow/test/FilterParameter.test.ts     | 45 +++++++++++++++++--
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 99e095f0c1540..4bd78ab8e7077 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -157,7 +157,7 @@ import ImportParameter from '@/components/ImportParameter.vue';
 import MultipleParameter from '@/components/MultipleParameter.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ResourceMapper from '@/components/ResourceMapper/ResourceMapper.vue';
-import FilterConditions from '@/components/FilterConditions/FilterConditions.vue';
+import Conditions from '@/components/FilterConditions/FilterConditions.vue';
 import { KEEP_AUTH_IN_NDV_FOR_NODES } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -185,7 +185,7 @@ export default defineComponent({
 		CollectionParameter,
 		ImportParameter,
 		ResourceMapper,
-		FilterConditions,
+		FilterConditions: Conditions,
 	},
 	props: {
 		nodeValues: {
diff --git a/packages/workflow/src/TypeValidation.ts b/packages/workflow/src/TypeValidation.ts
index ace417ad5c588..d9df1391ccb23 100644
--- a/packages/workflow/src/TypeValidation.ts
+++ b/packages/workflow/src/TypeValidation.ts
@@ -202,6 +202,9 @@ export const validateFieldType = (
 			}
 		}
 		case 'array': {
+			if (strict && !Array.isArray(value)) {
+				return { valid: false, errorMessage: defaultErrorMessage };
+			}
 			try {
 				return { valid: true, newValue: tryToParseArray(value) };
 			} catch (e) {
diff --git a/packages/workflow/test/FilterParameter.test.ts b/packages/workflow/test/FilterParameter.test.ts
index 6637505bd8a22..6c725e2ed860c 100644
--- a/packages/workflow/test/FilterParameter.test.ts
+++ b/packages/workflow/test/FilterParameter.test.ts
@@ -99,7 +99,7 @@ describe('FilterParameter', () => {
 
 		describe('options.typeValidation', () => {
 			describe('strict (=default)', () => {
-				it('should throw an error when types are not as expected', () => {
+				it('should throw an error when types are not as expected (primitives)', () => {
 					expect(() =>
 						executeFilter(
 							filterFactory({
@@ -107,7 +107,7 @@ describe('FilterParameter', () => {
 									{
 										id: '1',
 										leftValue: '15',
-										rightValue: 15,
+										rightValue: true,
 										operator: { operation: 'equals', type: 'number' },
 									},
 								],
@@ -115,7 +115,46 @@ describe('FilterParameter', () => {
 							}),
 						),
 					).toThrowError(
-						"The provided value 1 '15' in condition 1 is not of the expected type 'number'",
+						"The provided values '15' and 'true' in condition 1 are not of the expected type 'number' [item 0]",
+					);
+				});
+
+				it('should throw an error when types are not as expected (arrays)', () => {
+					expect(() =>
+						executeFilter(
+							filterFactory({
+								conditions: [
+									{
+										id: '1',
+										leftValue: '[]',
+										rightValue: 0,
+										operator: { operation: 'lengthEquals', type: 'array', rightType: 'number' },
+									},
+								],
+								options: { typeValidation: 'strict' },
+							}),
+						),
+					).toThrowError(
+						"The provided value 1 '[]' in condition 1 is not of the expected type 'array' [item 0]",
+					);
+				});
+
+				it('should throw an error when types are not as expected (objects)', () => {
+					expect(() =>
+						executeFilter(
+							filterFactory({
+								conditions: [
+									{
+										id: '1',
+										leftValue: '{}',
+										operator: { operation: 'empty', type: 'object', singleValue: true },
+									},
+								],
+								options: { typeValidation: 'strict' },
+							}),
+						),
+					).toThrowError(
+						"The provided value 1 '{}' in condition 1 is not of the expected type 'object' [item 0]",
 					);
 				});
 			});

From 6e9c594736443a525aef104c23a8f96f0f02c8eb Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 7 Dec 2023 14:07:32 +0100
Subject: [PATCH 34/39] Add type annotations to fix linting

---
 packages/workflow/src/TypeValidation.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/workflow/src/TypeValidation.ts b/packages/workflow/src/TypeValidation.ts
index d9df1391ccb23..598be1d72ba88 100644
--- a/packages/workflow/src/TypeValidation.ts
+++ b/packages/workflow/src/TypeValidation.ts
@@ -91,11 +91,11 @@ export const tryToParseArray = (value: unknown): unknown[] => {
 			return value;
 		}
 
-		let parsed;
+		let parsed: unknown[];
 		try {
-			parsed = JSON.parse(String(value));
+			parsed = JSON.parse(String(value)) as unknown[];
 		} catch (e) {
-			parsed = JSON.parse(String(value).replace(/'/g, '"'));
+			parsed = JSON.parse(String(value).replace(/'/g, '"')) as unknown[];
 		}
 
 		if (!Array.isArray(parsed)) {
@@ -112,7 +112,7 @@ export const tryToParseObject = (value: unknown): object => {
 		return value;
 	}
 	try {
-		const o = JSON.parse(String(value));
+		const o = JSON.parse(String(value)) as object;
 		if (typeof o !== 'object' || Array.isArray(o)) {
 			throw new ApplicationError('Value is not a valid object', { extra: { value } });
 		}

From c494411a9692f8fa75fa074387673dac2c1c5cc5 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 7 Dec 2023 15:56:04 +0100
Subject: [PATCH 35/39] Remove .only from e2e test

---
 cypress/e2e/4-node-creator.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts
index b8e1511c0b151..83fe6087f2bc2 100644
--- a/cypress/e2e/4-node-creator.cy.ts
+++ b/cypress/e2e/4-node-creator.cy.ts
@@ -31,7 +31,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.activeSubcategory().should('not.have.text', 'On app event');
 	});
 
-	it.only('should search for nodes', () => {
+	it('should search for nodes', () => {
 		nodeCreatorFeature.actions.openNodeCreator();
 
 		nodeCreatorFeature.getters.searchBar().find('input').type('manual');

From a08dea9d5c3504e7f24fbc5de8636d0f265250e0 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 11 Dec 2023 13:19:03 +0100
Subject: [PATCH 36/39] Lazy render OperatorSelect options to improve
 performance

---
 .../components/FilterConditions/Condition.vue |   8 +-
 .../FilterConditions/OperatorSelect.vue       | 103 ++++++++++--------
 .../components/FilterConditions/constants.ts  |   5 -
 3 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/packages/editor-ui/src/components/FilterConditions/Condition.vue b/packages/editor-ui/src/components/FilterConditions/Condition.vue
index 0aeec705563f6..a95371c7c0468 100644
--- a/packages/editor-ui/src/components/FilterConditions/Condition.vue
+++ b/packages/editor-ui/src/components/FilterConditions/Condition.vue
@@ -46,6 +46,8 @@ const emit = defineEmits<{
 	(event: 'remove'): void;
 }>();
 
+const i18n = useI18n();
+
 const condition = ref<FilterConditionValue>(props.condition);
 
 const operatorId = computed<FilterOperatorId>(() => {
@@ -125,7 +127,7 @@ const rightParameter = computed<INodeProperties>(() => ({
 	placeholder:
 		operator.value.type === 'dateTime'
 			? now.value
-			: i18n.baseText(i18n.baseText('filter.condition.placeholderRight')),
+			: i18n.baseText('filter.condition.placeholderRight'),
 	type: operatorTypeToNodePropType(operator.value.rightType ?? operator.value.type),
 }));
 
@@ -138,6 +140,8 @@ const onRightValueChange = (update: IUpdateInformation): void => {
 };
 
 const convertToType = (value: unknown, type: FilterOperatorType): unknown => {
+	if (type === 'any') return value;
+
 	return (
 		validateFieldType('filter', condition.value.leftValue, type, { parseStrings: true }).newValue ??
 		value
@@ -175,8 +179,6 @@ const onRemove = (): void => {
 const onBlur = (): void => {
 	emit('update', condition.value);
 };
-
-const i18n = useI18n();
 </script>
 
 <template>
diff --git a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
index 0b3787848bdf3..432c1991ec20f 100644
--- a/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
-import { OPERATOR_GROUPS } from './constants';
+import { OPERATORS_BY_ID, OPERATOR_GROUPS } from './constants';
 import { computed, ref } from 'vue';
 import type { FilterOperator } from './types';
 
@@ -12,6 +12,7 @@ const props = defineProps<Props>();
 
 const selected = ref(props.selected);
 const menuOpen = ref(false);
+const shouldRenderItems = ref(false);
 const submenu = ref('none');
 
 const emit = defineEmits<{
@@ -22,15 +23,17 @@ const i18n = useI18n();
 
 const groups = OPERATOR_GROUPS;
 
+const selectedGroupIcon = computed(
+	() => groups.find((group) => group.id === selected.value.split(':')[0])?.icon,
+);
+
+const selectedOperator = computed(() => OPERATORS_BY_ID[selected.value] as FilterOperator);
+
 const onOperatorChange = (operator: string): void => {
 	selected.value = operator;
 	emit('operatorChange', operator);
 };
 
-const selectedGroupIcon = computed(
-	() => groups.find((group) => group.id === selected.value.split(':')[0])?.icon,
-);
-
 const getOperatorId = (operator: FilterOperator): string =>
 	`${operator.type}:${operator.operation}`;
 
@@ -49,55 +52,61 @@ function onGroupSelect(group: string) {
 </script>
 
 <template>
-	<div>
-		<n8n-select
-			data-test-id="filter-operator-select"
-			size="small"
-			:key="selectedGroupIcon"
-			:modelValue="selected"
-			@update:modelValue="onOperatorChange"
-			@visible-change="onSelectVisibleChange"
-		>
-			<template v-if="selectedGroupIcon" #prefix>
-				<n8n-icon
-					:class="$style.selectedGroupIcon"
-					:icon="selectedGroupIcon"
-					color="text-light"
-					size="small"
-				/>
-			</template>
-			<div :class="$style.groups">
-				<div :key="group.name" v-for="group of groups">
-					<n8n-popover
-						:visible="submenu === group.id"
-						placement="right-start"
-						:show-arrow="false"
-						:offset="2"
-						:popper-style="{ padding: 'var(--spacing-3xs) 0' }"
-						width="auto"
-					>
-						<template #reference>
-							<div
-								v-if="group.children.length > 0"
-								@mouseenter="() => onGroupSelect(group.id)"
-								@click="() => onGroupSelect(group.id)"
-								:class="$style.groupTitle"
-							>
-								<n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" />
-								<span>{{ i18n.baseText(group.name) }}</span>
-							</div>
-						</template>
+	<n8n-select
+		data-test-id="filter-operator-select"
+		size="small"
+		:key="selectedGroupIcon"
+		:modelValue="selected"
+		@update:modelValue="onOperatorChange"
+		@visible-change="onSelectVisibleChange"
+		@mouseenter="shouldRenderItems = true"
+	>
+		<template v-if="selectedGroupIcon" #prefix>
+			<n8n-icon
+				:class="$style.selectedGroupIcon"
+				:icon="selectedGroupIcon"
+				color="text-light"
+				size="small"
+			/>
+		</template>
+		<div :class="$style.groups" v-if="shouldRenderItems">
+			<div :key="group.name" v-for="group of groups">
+				<n8n-popover
+					:visible="submenu === group.id"
+					placement="right-start"
+					:show-arrow="false"
+					:offset="2"
+					:popper-style="{ padding: 'var(--spacing-3xs) 0' }"
+					width="auto"
+				>
+					<template #reference>
+						<div
+							@mouseenter="() => onGroupSelect(group.id)"
+							@click="() => onGroupSelect(group.id)"
+							:class="$style.groupTitle"
+						>
+							<n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" />
+							<span>{{ i18n.baseText(group.name) }}</span>
+						</div>
+					</template>
+					<div>
 						<n8n-option
 							v-for="operator in group.children"
 							:key="getOperatorId(operator)"
 							:value="getOperatorId(operator)"
 							:label="i18n.baseText(operator.name)"
 						/>
-					</n8n-popover>
-				</div>
+					</div>
+				</n8n-popover>
 			</div>
-		</n8n-select>
-	</div>
+		</div>
+		<n8n-option
+			v-else
+			:key="selected"
+			:value="selected"
+			:label="i18n.baseText(selectedOperator.name)"
+		/>
+	</n8n-select>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/FilterConditions/constants.ts b/packages/editor-ui/src/components/FilterConditions/constants.ts
index dde88045f1cd2..578d74c71a362 100644
--- a/packages/editor-ui/src/components/FilterConditions/constants.ts
+++ b/packages/editor-ui/src/components/FilterConditions/constants.ts
@@ -233,11 +233,6 @@ export const DEFAULT_OPERATOR_VALUE: FilterConditionValue['operator'] =
 	OPERATORS_BY_ID['string:equals'];
 
 export const OPERATOR_GROUPS: FilterOperatorGroup[] = [
-	{
-		id: 'any',
-		name: 'filter.operatorGroup.basic',
-		children: OPERATORS.filter((operator) => operator.type === 'any'),
-	},
 	{
 		id: 'string',
 		name: 'filter.operatorGroup.string',

From 8f5f885fc7f5f984b0f458164e779c625c53e2f9 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 11 Dec 2023 13:27:42 +0100
Subject: [PATCH 37/39] Use new ApplicationError

---
 packages/core/src/ExtractValue.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/ExtractValue.ts b/packages/core/src/ExtractValue.ts
index 197e196911f7e..17959e37e3ea4 100644
--- a/packages/core/src/ExtractValue.ts
+++ b/packages/core/src/ExtractValue.ts
@@ -135,8 +135,9 @@ function extractValueFilter(
 	}
 
 	if (property.extractValue?.type) {
-		throw new Error(
+		throw new ApplicationError(
 			`Property "${parameterName}" has an invalid extractValue type. Filter parameters only support extractValue: true`,
+			{ extra: { parameter: parameterName } },
 		);
 	}
 

From 9dd33566a809098d5b6d73684259be244ced45c3 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Mon, 11 Dec 2023 13:32:18 +0100
Subject: [PATCH 38/39] Use nodeHelpers composable

---
 packages/editor-ui/src/components/ParameterInputList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index dd95348f31fa0..e375f1475f2d0 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -99,7 +99,7 @@
 			<FilterConditions
 				v-else-if="parameter.type === 'filter'"
 				:parameter="parameter"
-				:value="getParameterValue(nodeValues, parameter.name, path)"
+				:value="nodeHelpers.getParameterValue(nodeValues, parameter.name, path)"
 				:path="getPath(parameter.name)"
 				:node="node"
 				@valueChanged="valueChanged"

From 519fb38ed51aea4dc71abb83a67bafa97f12ed07 Mon Sep 17 00:00:00 2001
From: Michael Kret <michael.k@radency.com>
Date: Wed, 13 Dec 2023 14:18:50 +0200
Subject: [PATCH 39/39] :zap: linter fix

---
 .../DocumentBinaryInputLoader.node.ts                          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@n8n/nodes-langchain/nodes/document_loaders/DocumentBinaryInputLoader/DocumentBinaryInputLoader.node.ts b/packages/@n8n/nodes-langchain/nodes/document_loaders/DocumentBinaryInputLoader/DocumentBinaryInputLoader.node.ts
index b5c68cde63eda..a213e8ff3b1c7 100644
--- a/packages/@n8n/nodes-langchain/nodes/document_loaders/DocumentBinaryInputLoader/DocumentBinaryInputLoader.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/document_loaders/DocumentBinaryInputLoader/DocumentBinaryInputLoader.node.ts
@@ -7,6 +7,8 @@ import {
 	type SupplyData,
 } from 'n8n-workflow';
 
+import type { TextSplitter } from 'langchain/text_splitter';
+
 import { logWrapper } from '../../../utils/logWrapper';
 import { N8nBinaryLoader } from '../../../utils/N8nBinaryLoader';
 import { getConnectionHintNoticeField, metadataFilterField } from '../../../utils/sharedFields';
@@ -17,7 +19,6 @@ import { getConnectionHintNoticeField, metadataFilterField } from '../../../util
 import 'mammoth'; // for docx
 import 'epub2'; // for epub
 import 'pdf-parse'; // for pdf
-import type { TextSplitter } from 'langchain/text_splitter';
 
 export class DocumentBinaryInputLoader implements INodeType {
 	description: INodeTypeDescription = {