feat(editor): implement filterNode configurator

src/main/frontend/sections/editor/PipelineStep.tsx

@@ -9,6 +9,7 @@ import { CopyNodeStep } from './types/CopyNodeStep';
 import { CreateChildNodeStep } from './types/CreateChildNodeStep';
 import { DeclareStep } from './types/DeclareStep';
 import { EachStep } from './types/EachStep';
+import { FilterNodeStep } from './types/FilterNodeStep';
 
 export const PipelineStep: FC<{ parentHops: Hop[]; hop: Hop }> = ({ parentHops, hop }) => {
 	switch (hop.type) {
@@ -22,6 +23,8 @@ export const PipelineStep: FC<{ parentHops: Hop[]; hop: Hop }> = ({ parentHops,
 			return <DeclareStep parentHops={parentHops} hop={hop} />;
 		case 'each':
 			return <EachStep parentHops={parentHops} hop={hop} />;
+		case 'filterNode':
+			return <FilterNodeStep parentHops={parentHops} hop={hop} />;
 		default:
 			return <FallbackStep parentHops={parentHops} hop={hop} />;
 	}

src/main/frontend/sections/editor/types/FilterNodeStep.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+
+import { Hop } from '../../../model/hops';
+import { StepEditor } from '../../../widgets/StepEditor';
+
+import { shortDescription, title, Type } from '../../../model/hops/filterNode';
+import { Help } from '../../../widgets/Help';
+import { Input } from '../../../widgets/Input';
+import { Pipeline } from '../Pipeline';
+
+export const FilterNodeStep: FC<{ parentHops: Hop[]; hop: Type }> = ({ parentHops, hop }) => {
+	return (
+		<StepEditor parentHops={parentHops} hop={hop} title={shortDescription(hop)} pipeline={<Pipeline hops={(hop.hops ??= [])} />}>
+			<label>
+				JEXL Expression:{' '}
+				<Input value={hop.expression ?? ''} onChange={expression => (hop.expression = expression)} placeholder="[]" />
+			</label>
+			<Help title={title}>
+				<h5>Filter Expression</h5>
+				<p>
+					The expression that needs to evaluate to <code>true</code> to apply the sub-pipeline to the current node.
+				</p>
+				<p>This field expects an expression, thus surrounding the expression with {'${}'} is invalid.</p>
+				<p>
+					With the word <code className="code font--serif">node</code> you can reference the current node.
+				</p>
+			</Help>
+		</StepEditor>
+	);
+};