@oronts/vendure-data-hub-plugin 0.1.0 → 0.1.2

package/dist/dashboard/components/shared/step-config/StepTester.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import {
+    Button,
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+    Input,
+    Label,
+    Textarea,
+    Badge,
+} from '@vendure/dashboard';
+import { PlayIcon, ChevronDown, ChevronUp } from 'lucide-react';
+import { STEP_TYPE, ADAPTER_TYPES, DEFAULT_SAMPLE_DATA, STEP_TEST_DESCRIPTIONS, PLACEHOLDERS, UI_LIMITS } from '../../../constants';
+import { createMutationErrorHandler } from '../../../hooks';
+import { runStepTest, canTestStepType, type TestResult, type StepTestOptions } from './step-test-handlers';
+import { ExtractTestResults } from './ExtractTestResults';
+import { TransformTestResults, ValidateTestResults } from './TransformTestResults';
+import { LoadTestResults, FeedTestResults, GenericTestResults } from './LoadTestResults';
+
+interface StepTesterProps {
+    stepType: string;
+    adapterType: string;
+    config: Record<string, unknown>;
+}
+
+function getEffectiveStepType(stepType: string, adapterType: string): string {
+    const st = stepType?.toUpperCase() || '';
+    if (st === STEP_TYPE.EXTRACT || adapterType === ADAPTER_TYPES.EXTRACTOR) return STEP_TYPE.EXTRACT;
+    if (st === STEP_TYPE.TRANSFORM) return STEP_TYPE.TRANSFORM;
+    if (st === STEP_TYPE.VALIDATE) return STEP_TYPE.VALIDATE;
+    if (st === STEP_TYPE.LOAD || adapterType === ADAPTER_TYPES.LOADER) return STEP_TYPE.LOAD;
+    if (st === STEP_TYPE.FEED || adapterType === ADAPTER_TYPES.FEED) return STEP_TYPE.FEED;
+    if (st === STEP_TYPE.EXPORT || adapterType === ADAPTER_TYPES.EXPORTER) return STEP_TYPE.EXPORT;
+    if (st === STEP_TYPE.SINK || adapterType === ADAPTER_TYPES.SINK) return STEP_TYPE.SINK;
+    if (st === STEP_TYPE.TRIGGER) return STEP_TYPE.TRIGGER;
+    if (st === STEP_TYPE.ENRICH) return STEP_TYPE.ENRICH;
+    if (st === STEP_TYPE.ROUTE) return STEP_TYPE.ROUTE;
+    if (st === STEP_TYPE.GATE) return STEP_TYPE.GATE;
+    return st || 'UNKNOWN';
+}
+
+export function StepTester({ stepType, adapterType, config }: StepTesterProps) {
+    const [expanded, setExpanded] = React.useState(false);
+    const [result, setResult] = React.useState<TestResult | null>(null);
+    const [sampleInput, setSampleInput] = React.useState(DEFAULT_SAMPLE_DATA);
+    const [limit, setLimit] = React.useState(UI_LIMITS.PREVIEW_ROW_LIMIT);
+    const [resultView, setResultView] = React.useState<'table' | 'json'>('table');
+
+    const effectiveType = getEffectiveStepType(stepType, adapterType);
+    const canTest = canTestStepType(effectiveType);
+
+    const stepTestMutation = useMutation({
+        mutationFn: ({ type, options }: { type: string; options: StepTestOptions }) =>
+            runStepTest(type, options),
+        onSuccess: (data) => setResult(data),
+        onError: createMutationErrorHandler('test step'),
+    });
+    const loading = stepTestMutation.isPending;
+
+    // Use JSON serialization to detect actual config changes, not just reference changes
+    const configSignature = React.useMemo(() => JSON.stringify(config), [config]);
+
+    React.useEffect(() => {
+        setResult(null);
+    }, [configSignature, stepType, adapterType]);
+
+    // Store config in ref to use latest value without triggering callback recreation
+    const configRef = React.useRef(config);
+    React.useEffect(() => {
+        configRef.current = config;
+    }, [config]);
+
+    const runTest = React.useCallback(() => {
+        setResult(null);
+        stepTestMutation.mutate({
+            type: effectiveType,
+            options: { config: configRef.current, sampleInput, limit },
+        });
+    }, [effectiveType, sampleInput, limit, stepTestMutation.mutate]);
+
+    const renderInputSection = () => {
+        if (effectiveType === STEP_TYPE.EXTRACT || effectiveType === STEP_TYPE.FEED) {
+            return (
+                <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                        <Label htmlFor="step-tester-limit" className="text-xs">Record limit</Label>
+                        <Input id="step-tester-limit" type="number" value={limit} onChange={e => setLimit(Math.max(1, parseInt(e.target.value) || UI_LIMITS.PREVIEW_ROW_LIMIT))} className="w-20 h-8" min={1} max={UI_LIMITS.MAX_PREVIEW_ROWS} />
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                        {effectiveType === STEP_TYPE.EXTRACT ? STEP_TEST_DESCRIPTIONS.EXTRACT : 'Generates feed output using the configured feed adapter.'}
+                    </p>
+                </div>
+            );
+        }
+        if ([STEP_TYPE.TRANSFORM, STEP_TYPE.VALIDATE, STEP_TYPE.LOAD].includes(effectiveType as typeof STEP_TYPE[keyof typeof STEP_TYPE])) {
+            const descriptions = {
+                [STEP_TYPE.TRANSFORM]: STEP_TEST_DESCRIPTIONS.TRANSFORM,
+                [STEP_TYPE.VALIDATE]: STEP_TEST_DESCRIPTIONS.VALIDATE,
+                [STEP_TYPE.LOAD]: STEP_TEST_DESCRIPTIONS.LOAD,
+            };
+            return (
+                <div className="space-y-2">
+                    <Label className="text-xs">Sample Input Records (JSON Array)</Label>
+                    <Textarea value={sampleInput} onChange={e => setSampleInput(e.target.value)} className="font-mono text-xs min-h-[100px]" placeholder={PLACEHOLDERS.SAMPLE_RECORDS} />
+                    <p className="text-xs text-muted-foreground">{descriptions[effectiveType as keyof typeof descriptions]}</p>
+                </div>
+            );
+        }
+        return <p className="text-xs text-muted-foreground">This step type does not support direct testing.</p>;
+    };
+
+    const renderResults = () => {
+        if (!result) return null;
+        switch (effectiveType) {
+            case STEP_TYPE.EXTRACT:
+                return <ExtractTestResults result={result} resultView={resultView} onViewChange={setResultView} />;
+            case STEP_TYPE.TRANSFORM:
+                return <TransformTestResults result={result} resultView={resultView} onViewChange={setResultView} />;
+            case STEP_TYPE.VALIDATE:
+                return <ValidateTestResults result={result} resultView={resultView} onViewChange={setResultView} />;
+            case STEP_TYPE.LOAD:
+                return <LoadTestResults result={result} />;
+            case STEP_TYPE.FEED:
+                return <FeedTestResults result={result} />;
+            default:
+                return <GenericTestResults result={result} />;
+        }
+    };
+
+    return (
+        <Card className="mt-4" data-testid="datahub-steptester-tester">
+            <CardHeader className="py-2 px-3">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <CardTitle className="text-sm">Step Tester</CardTitle>
+                        <Badge variant="outline" className="text-xs">{effectiveType}</Badge>
+                    </div>
+                    <Button variant="ghost" size="sm" onClick={() => setExpanded(!expanded)} className="h-7 px-2" aria-label="Toggle test panel">
+                        {expanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                    </Button>
+                </div>
+            </CardHeader>
+            {expanded && (
+                <CardContent className="pt-0 pb-3 px-3 space-y-3">
+                    {canTest ? (
+                        <>
+                            {renderInputSection()}
+                            <Button onClick={runTest} disabled={loading} size="sm" className="gap-2" data-testid="datahub-steptester-run">
+                                <PlayIcon className="h-3 w-3" />
+                                {loading ? 'Running...' : 'Run Test'}
+                            </Button>
+                            {renderResults()}
+                        </>
+                    ) : (
+                        <p className="text-sm text-muted-foreground">
+                            {effectiveType === STEP_TYPE.TRIGGER ? 'Trigger steps define when pipelines run. Use the full pipeline dry run to test execution.' : `${effectiveType} steps cannot be tested individually. Use the full pipeline dry run.`}
+                        </p>
+                    )}
+                </CardContent>
+            )}
+        </Card>
+    );
+}

package/dist/dashboard/components/shared/step-config/TestResultContainer.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { StatusBadge, ViewToggle } from './ExtractTestResults';
+import type { TestResult } from './step-test-handlers';
+
+export interface TestResultContainerProps {
+    result: TestResult;
+    children: React.ReactNode;
+    showViewToggle?: boolean;
+    resultView?: 'table' | 'json';
+    onViewChange?: (view: 'table' | 'json') => void;
+}
+
+/**
+ * Shared container for test result displays.
+ * Consistent layout with status badge, message, and optional view toggle.
+ *
+ * Used by: ExtractTestResults, TransformTestResults, LoadTestResults,
+ * FeedTestResults, ValidateTestResults, GenericTestResults
+ */
+export function TestResultContainer({
+    result,
+    children,
+    showViewToggle = false,
+    resultView = 'table',
+    onViewChange,
+}: TestResultContainerProps) {
+    return (
+        <div className="space-y-3 pt-3 border-t">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <StatusBadge status={result.status} />
+                    {result.message && (
+                        <span className="text-sm text-muted-foreground">{result.message}</span>
+                    )}
+                </div>
+                {showViewToggle && onViewChange && (
+                    <ViewToggle resultView={resultView} onViewChange={onViewChange} />
+                )}
+            </div>
+            {children}
+        </div>
+    );
+}
+
+/**
+ * JSON display component for test results
+ */
+export function JsonDisplay({ data, maxHeight = '300px' }: { data: unknown; maxHeight?: string }) {
+    return (
+        <pre
+            className="text-xs bg-muted p-3 rounded overflow-auto"
+            style={{ maxHeight }}
+        >
+            {JSON.stringify(data, null, 2)}
+        </pre>
+    );
+}

package/dist/dashboard/components/shared/step-config/TransformTestResults.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { memo } from 'react';
+import { RecordsTable } from './ExtractTestResults';
+import { TestResultContainer, JsonDisplay } from './TestResultContainer';
+import { UI_LIMITS, COMPONENT_HEIGHTS } from '../../../constants';
+import type { TestResult } from './step-test-handlers';
+
+interface TransformTestResultsProps {
+    result: TestResult;
+    resultView: 'table' | 'json';
+    onViewChange: (view: 'table' | 'json') => void;
+}
+
+/**
+ * Before/After diff display for transform operations
+ */
+const BeforeAfterDiff = memo(function BeforeAfterDiff({
+    beforeAfter,
+}: {
+    beforeAfter: Array<{ before: Record<string, unknown>; after: Record<string, unknown> }>;
+}) {
+    return (
+        <div className="space-y-3">
+            {/* Index as key acceptable - static test result data, not reordered */}
+            {beforeAfter.slice(0, UI_LIMITS.DIFF_PREVIEW_RECORDS).map((pair, recordIndex) => (
+                <div key={`record-${recordIndex}`} className="border rounded overflow-hidden">
+                    <div className="bg-muted/50 px-2 py-1 text-xs font-medium">
+                        Record {recordIndex + 1}
+                    </div>
+                    <div className="grid grid-cols-2 divide-x">
+                        <div className="p-2">
+                            <div className="text-xs text-muted-foreground mb-1">Before</div>
+                            <pre className={`text-[10px] bg-red-50 dark:bg-red-950/30 p-2 rounded overflow-auto ${COMPONENT_HEIGHTS.SCROLL_AREA_XXS}`}>
+                                {JSON.stringify(pair.before, null, 2)}
+                            </pre>
+                        </div>
+                        <div className="p-2">
+                            <div className="text-xs text-muted-foreground mb-1">After</div>
+                            <pre className={`text-[10px] bg-green-50 dark:bg-green-950/30 p-2 rounded overflow-auto ${COMPONENT_HEIGHTS.SCROLL_AREA_XXS}`}>
+                                {JSON.stringify(pair.after, null, 2)}
+                            </pre>
+                        </div>
+                    </div>
+                </div>
+            ))}
+            {beforeAfter.length > UI_LIMITS.DIFF_PREVIEW_RECORDS && (
+                <div className="text-xs text-muted-foreground">
+                    Showing {UI_LIMITS.DIFF_PREVIEW_RECORDS} of {beforeAfter.length} records
+                </div>
+            )}
+        </div>
+    );
+});
+
+/**
+ * Display component for TRANSFORM step test results
+ * Shows before/after comparison of transformed records
+ */
+export const TransformTestResults = memo(function TransformTestResults({
+    result,
+    resultView,
+    onViewChange,
+}: TransformTestResultsProps) {
+    if (!result.beforeAfter) {
+        // Fallback to records view if no beforeAfter data
+        if (result.records) {
+            return (
+                <TestResultContainer
+                    result={result}
+                    showViewToggle
+                    resultView={resultView}
+                    onViewChange={onViewChange}
+                >
+                    {resultView === 'table' ? (
+                        <RecordsTable records={result.records} />
+                    ) : (
+                        <JsonDisplay data={result.records} />
+                    )}
+                </TestResultContainer>
+            );
+        }
+        return null;
+    }
+
+    return (
+        <TestResultContainer
+            result={result}
+            showViewToggle
+            resultView={resultView}
+            onViewChange={onViewChange}
+        >
+            {resultView === 'table' ? (
+                <BeforeAfterDiff beforeAfter={result.beforeAfter} />
+            ) : (
+                <JsonDisplay data={result.beforeAfter} />
+            )}
+        </TestResultContainer>
+    );
+});
+
+/**
+ * Display component for VALIDATE step test results
+ * Shows validation results with optional summary data
+ */
+export const ValidateTestResults = memo(function ValidateTestResults({
+    result,
+    resultView,
+    onViewChange,
+}: TransformTestResultsProps) {
+    return (
+        <TestResultContainer
+            result={result}
+            showViewToggle={!!result.records}
+            resultView={resultView}
+            onViewChange={onViewChange}
+        >
+            {result.records && (
+                resultView === 'table' ? (
+                    <RecordsTable records={result.records} />
+                ) : (
+                    <JsonDisplay data={result.records} />
+                )
+            )}
+
+            {result.data && (
+                <JsonDisplay data={result.data} maxHeight="200px" />
+            )}
+        </TestResultContainer>
+    );
+});

package/dist/dashboard/components/shared/step-config/ValidateConfigComponent.tsx

@@ -0,0 +1,334 @@
+import * as React from 'react';
+import { useCallback, useMemo, memo } from 'react';
+import {
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Input,
+    Button,
+} from '@vendure/dashboard';
+import { Plus, Trash2 } from 'lucide-react';
+import { PLACEHOLDERS } from '../../../constants';
+import { useValidationRuleSchemas, useOptionValues, type TypedOptionValue, type ConnectionSchemaField } from '../../../hooks/api/use-config-options';
+import { useStableIndexIds } from '../../../hooks/use-stable-keys';
+
+interface ValidationRule {
+    id?: string;
+    type: string;
+    spec: {
+        field: string;
+        required?: boolean;
+        min?: number;
+        max?: number;
+        pattern?: string;
+        error?: string;
+    };
+}
+
+interface ValidationRuleWithId extends ValidationRule {
+    id: string;
+}
+
+const FALLBACK_RULE_TYPE = 'REQUIRED';
+
+function detectRuleType(spec: ValidationRule['spec'], schemas: TypedOptionValue[]): string {
+    // Check which schema's defaultValues keys match the spec
+    for (const schema of schemas) {
+        if (!schema.defaultValues) continue;
+        const keys = Object.keys(schema.defaultValues);
+        if (keys.some(k => spec[k as keyof typeof spec] !== undefined)) {
+            return schema.value;
+        }
+    }
+    // Check if any field keys from schemas exist in spec
+    for (const schema of schemas) {
+        if (schema.fields.some(f => spec[f.key as keyof typeof spec] !== undefined)) {
+            return schema.value;
+        }
+    }
+    return schemas[0]?.value ?? FALLBACK_RULE_TYPE;
+}
+
+let validationRuleIdCounter = 0;
+function generateValidationRuleId(): string {
+    return `validation-rule-${Date.now()}-${++validationRuleIdCounter}`;
+}
+
+export interface ValidateConfigComponentProps {
+    readonly config: Record<string, unknown>;
+    readonly onChange: (config: Record<string, unknown>) => void;
+    readonly showErrorHandling?: boolean;
+    readonly showValidationMode?: boolean;
+    readonly showRulesEditor?: boolean;
+}
+
+export function ValidateConfigComponent({
+    config,
+    onChange,
+    showErrorHandling = true,
+    showValidationMode = true,
+    showRulesEditor = true,
+}: ValidateConfigComponentProps) {
+    const { schemas: ruleTypeSchemas } = useValidationRuleSchemas();
+    const ruleTypes = ruleTypeSchemas;
+    const { options: validationModes } = useOptionValues('validationModes');
+    const errorHandlingOptions = validationModes;
+    const errorHandlingMode = (config.errorHandlingMode as string) || 'FAIL_FAST';
+    const validationMode = (config.validationMode as string) || 'STRICT';
+    const rawRules = (config.rules as ValidationRule[]) || [];
+    const stableIds = useStableIndexIds(rawRules, 'validation-rule');
+    const rules = useMemo<ValidationRuleWithId[]>(() =>
+        rawRules.map((rule, index) => ({
+            ...rule,
+            id: rule.id || stableIds[index],
+        })),
+    [rawRules, stableIds]);
+
+    const updateField = useCallback((key: string, value: unknown) => {
+        onChange({ ...config, [key]: value });
+    }, [config, onChange]);
+
+    const addRule = useCallback(() => {
+        const defaultRuleType = ruleTypeSchemas[0]?.value ?? FALLBACK_RULE_TYPE;
+        const schema = ruleTypeSchemas.find(s => s.value === defaultRuleType);
+        const defaultSpec = schema?.defaultValues ?? { required: true };
+        const newRule: ValidationRuleWithId = {
+            id: generateValidationRuleId(),
+            type: 'business',
+            spec: { field: '', ...defaultSpec } as ValidationRule['spec'],
+        };
+        const newRules = [...rawRules, newRule];
+        onChange({ ...config, rules: newRules });
+    }, [config, rawRules, onChange, ruleTypeSchemas]);
+
+    const updateRule = useCallback((index: number, spec: ValidationRule['spec']) => {
+        const newRules = [...rawRules];
+        newRules[index] = { ...newRules[index], spec };
+        onChange({ ...config, rules: newRules });
+    }, [config, rawRules, onChange]);
+
+    const removeRule = useCallback((index: number) => {
+        const newRules = rawRules.filter((_, i) => i !== index);
+        onChange({ ...config, rules: newRules });
+    }, [config, rawRules, onChange]);
+
+    return (
+        <div className="space-y-4">
+            {showValidationMode && (
+                <div className="space-y-2">
+                    <Label className="text-sm font-medium">Validation Mode</Label>
+                    <Select
+                        value={validationMode}
+                        onValueChange={(v) => updateField('validationMode', v)}
+                    >
+                        <SelectTrigger className="w-full">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {validationModes.map((mode) => (
+                                <SelectItem key={mode.value} value={mode.value}>
+                                    {mode.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">
+                        How to handle records that fail validation rules
+                    </p>
+                </div>
+            )}
+
+            {showErrorHandling && (
+                <div className="space-y-2">
+                    <Label className="text-sm font-medium">Error Handling</Label>
+                    <Select
+                        value={errorHandlingMode}
+                        onValueChange={(v) => updateField('errorHandlingMode', v)}
+                    >
+                        <SelectTrigger className="w-full">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {errorHandlingOptions.map((mode) => (
+                                <SelectItem key={mode.value} value={mode.value}>
+                                    {mode.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">
+                        When to stop processing: immediately on first error or after collecting all errors
+                    </p>
+                </div>
+            )}
+
+            {showRulesEditor && (
+                <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                        <Label className="text-sm font-medium">Validation Rules</Label>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={addRule}
+                            aria-label="Add validation rule"
+                            data-testid="datahub-validate-add-rule-btn"
+                        >
+                            <Plus className="h-3 w-3 mr-1" />
+                            Add Rule
+                        </Button>
+                    </div>
+
+                    {rules.length === 0 && (
+                        <p className="text-sm text-muted-foreground p-3 bg-muted/50 rounded-md">
+                            No validation rules defined. Add rules to validate record fields.
+                        </p>
+                    )}
+
+                    {rules.map((rule, index) => (
+                        <ValidationRuleRow
+                            key={rule.id}
+                            rule={rule}
+                            index={index}
+                            ruleTypes={ruleTypes}
+                            ruleTypeSchemas={ruleTypeSchemas}
+                            updateRule={updateRule}
+                            removeRule={removeRule}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface ValidationRuleRowProps {
+    rule: ValidationRuleWithId;
+    index: number;
+    ruleTypes: TypedOptionValue[];
+    ruleTypeSchemas: TypedOptionValue[];
+    updateRule: (index: number, spec: ValidationRule['spec']) => void;
+    removeRule: (index: number) => void;
+}
+
+const ValidationRuleRow = memo(function ValidationRuleRow({
+    rule,
+    index,
+    ruleTypes,
+    ruleTypeSchemas,
+    updateRule,
+    removeRule,
+}: ValidationRuleRowProps) {
+    const handleFieldChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        updateRule(index, { ...rule.spec, field: e.target.value });
+    }, [index, rule.spec, updateRule]);
+
+    const handleTypeChange = useCallback((v: string) => {
+        const schema = ruleTypeSchemas.find(s => s.value === v);
+        if (schema) {
+            const defaultSpec = schema.defaultValues ?? {};
+            updateRule(index, { field: rule.spec.field, ...defaultSpec } as ValidationRule['spec']);
+        }
+    }, [index, rule.spec.field, updateRule, ruleTypeSchemas]);
+
+    const handleErrorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        updateRule(index, { ...rule.spec, error: e.target.value });
+    }, [index, rule.spec, updateRule]);
+
+    const handleRemove = useCallback(() => {
+        removeRule(index);
+    }, [index, removeRule]);
+
+    const currentType = detectRuleType(rule.spec, ruleTypeSchemas);
+    const currentRuleSchema = ruleTypeSchemas.find(s => s.value === currentType);
+
+    return (
+        <div className="flex items-start gap-2 p-3 border rounded-md bg-muted/30" data-testid={`datahub-validate-rule-row-${index}`}>
+            <div className="flex-1 space-y-2">
+                <div className="flex gap-2">
+                    <Input
+                        value={rule.spec.field || ''}
+                        onChange={handleFieldChange}
+                        placeholder={PLACEHOLDERS.FIELD_NAME}
+                        className="flex-1"
+                    />
+                    <Select
+                        value={currentType}
+                        onValueChange={handleTypeChange}
+                    >
+                        <SelectTrigger className="w-32">
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {ruleTypes.map((rt) => (
+                                <SelectItem key={rt.value} value={rt.value}>
+                                    {rt.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                {currentRuleSchema && currentRuleSchema.fields.length > 0 && (
+                    <div className="flex gap-2">
+                        {currentRuleSchema.fields.map(field => (
+                            <SchemaRuleField
+                                key={field.key}
+                                field={field}
+                                spec={rule.spec}
+                                index={index}
+                                updateRule={updateRule}
+                            />
+                        ))}
+                    </div>
+                )}
+                <Input
+                    value={rule.spec.error || ''}
+                    onChange={handleErrorChange}
+                    placeholder={PLACEHOLDERS.ERROR_MESSAGE}
+                    className="text-xs"
+                />
+            </div>
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemove}
+                className="text-destructive hover:text-destructive"
+                aria-label={`Delete validation rule for ${rule.spec.field || 'field'}`}
+                data-testid={`datahub-validate-rule-delete-${index}-btn`}
+            >
+                <Trash2 className="h-4 w-4" />
+            </Button>
+        </div>
+    );
+});
+
+function SchemaRuleField({
+    field,
+    spec,
+    index,
+    updateRule,
+}: {
+    field: ConnectionSchemaField;
+    spec: ValidationRule['spec'];
+    index: number;
+    updateRule: (index: number, spec: ValidationRule['spec']) => void;
+}) {
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = field.type === 'number'
+            ? (isNaN(parseFloat(e.target.value)) ? undefined : parseFloat(e.target.value))
+            : e.target.value;
+        updateRule(index, { ...spec, [field.key]: value });
+    }, [index, spec, updateRule, field.key, field.type]);
+
+    return (
+        <Input
+            type={field.type === 'number' ? 'number' : 'text'}
+            value={spec[field.key as keyof typeof spec] ?? ''}
+            onChange={handleChange}
+            placeholder={field.placeholder ?? field.label}
+            className={field.type === 'number' ? 'w-24' : undefined}
+        />
+    );
+}