@oronts/vendure-data-hub-plugin 0.1.0

package/dashboard/components/shared/step-config/EnrichConfigComponent.tsx

@@ -0,0 +1,295 @@
+import * as React from 'react';
+import { useCallback, useEffect, useRef, useMemo, memo } from 'react';
+import {
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Input,
+    Button,
+} from '@vendure/dashboard';
+import { Plus, Trash2 } from 'lucide-react';
+import { useEntityLoaders } from '../../../hooks/api/use-entity-loaders';
+import { useEnrichmentSourceSchemas, type ConnectionSchemaField } from '../../../hooks/api/use-config-options';
+import { useStableIndexIds } from '../../../hooks/use-stable-keys';
+
+export interface EnrichConfigComponentProps {
+    readonly config: Record<string, unknown>;
+    readonly onChange: (config: Record<string, unknown>) => void;
+}
+
+interface DefaultValue {
+    id: string;
+    field: string;
+    value: string;
+}
+
+let defaultValueIdCounter = 0;
+function generateDefaultValueId(): string {
+    return `default-value-${Date.now()}-${++defaultValueIdCounter}`;
+}
+
+export function EnrichConfigComponent({
+    config,
+    onChange,
+}: EnrichConfigComponentProps) {
+    const { schemas: sourceTypeSchemas } = useEnrichmentSourceSchemas();
+    const { entities } = useEntityLoaders();
+    const entityOptions = useMemo(
+        () => entities.map(e => ({ value: e.code, label: e.name })),
+        [entities],
+    );
+
+    const sourceType = (config.sourceType as string) || 'STATIC';
+    const currentSourceSchema = sourceTypeSchemas.find(s => s.value === sourceType);
+
+    // Use refs to avoid stale closures in the initialization effect
+    const configRef = useRef(config);
+    const onChangeRef = useRef(onChange);
+    configRef.current = config;
+    onChangeRef.current = onChange;
+
+    // Initialize sourceType if not set - ensures validation passes
+    useEffect(() => {
+        if (!configRef.current.sourceType) {
+            onChangeRef.current({ ...configRef.current, sourceType: 'STATIC' });
+        }
+    }, []);
+    const defaults = (config.defaults as Record<string, unknown>) || {};
+
+    const defaultsEntries = Object.entries(defaults);
+    const stableIds = useStableIndexIds(defaultsEntries, 'default-value');
+
+    const defaultsList: DefaultValue[] = defaultsEntries.map(([field, value], index) => ({
+        id: stableIds[index] || generateDefaultValueId(),
+        field,
+        value: typeof value === 'string' ? value : JSON.stringify(value),
+    }));
+
+    const updateField = useCallback((key: string, value: unknown) => {
+        onChange({ ...config, [key]: value });
+    }, [config, onChange]);
+
+    const updateDefaults = useCallback((list: DefaultValue[]) => {
+        const newDefaults: Record<string, unknown> = {};
+        for (const item of list) {
+            if (item.field.trim()) {
+                try {
+                    newDefaults[item.field] = JSON.parse(item.value);
+                } catch {
+                    newDefaults[item.field] = item.value;
+                }
+            }
+        }
+        onChange({ ...config, defaults: newDefaults });
+    }, [config, onChange]);
+
+    const addDefault = useCallback(() => {
+        updateDefaults([...defaultsList, { id: generateDefaultValueId(), field: '', value: '' }]);
+    }, [defaultsList, updateDefaults]);
+
+    const updateDefaultItem = useCallback((index: number, field: string, value: string) => {
+        const newList = [...defaultsList];
+        newList[index] = { ...newList[index], field, value };
+        updateDefaults(newList);
+    }, [defaultsList, updateDefaults]);
+
+    const removeDefault = useCallback((index: number) => {
+        const newList = defaultsList.filter((_, i) => i !== index);
+        updateDefaults(newList);
+    }, [defaultsList, updateDefaults]);
+
+    return (
+        <div className="space-y-4">
+            <div className="space-y-2">
+                <Label className="text-sm font-medium">Enrichment Source</Label>
+                <Select
+                    value={sourceType}
+                    onValueChange={(v) => updateField('sourceType', v)}
+                >
+                    <SelectTrigger className="w-full" data-testid="datahub-enrich-source-select">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {sourceTypeSchemas.map((st) => (
+                            <SelectItem key={st.value} value={st.value}>
+                                {st.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                    {currentSourceSchema?.description}
+                </p>
+            </div>
+
+            {currentSourceSchema && currentSourceSchema.fields.length > 0 && (
+                <div className="space-y-3">
+                    {currentSourceSchema.fields.map(field => (
+                        <EnrichSchemaField
+                            key={field.key}
+                            field={field}
+                            value={field.type === 'keyValuePairs' ? defaults : (config[field.key] as string || '')}
+                            onChange={(value) => {
+                                if (field.type === 'keyValuePairs') {
+                                    onChange({ ...config, defaults: value });
+                                } else {
+                                    updateField(field.key, value);
+                                }
+                            }}
+                            entityOptions={entityOptions}
+                            defaultsList={defaultsList}
+                            addDefault={addDefault}
+                            updateDefaultItem={updateDefaultItem}
+                            removeDefault={removeDefault}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface EnrichSchemaFieldProps {
+    field: ConnectionSchemaField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    entityOptions: Array<{ value: string; label: string }>;
+    defaultsList: DefaultValue[];
+    addDefault: () => void;
+    updateDefaultItem: (index: number, field: string, value: string) => void;
+    removeDefault: (index: number) => void;
+}
+
+/** Field type renderer registry -- maps field.type to a render function. */
+type EnrichFieldRenderer = (props: EnrichSchemaFieldProps) => React.JSX.Element;
+
+const ENRICH_FIELD_RENDERERS: Record<string, EnrichFieldRenderer> = {
+    keyValuePairs: ({ field, defaultsList, addDefault, updateDefaultItem, removeDefault }) => (
+        <div className="space-y-3">
+            <div className="flex items-center justify-between">
+                <Label className="text-sm font-medium">{field.label}</Label>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={addDefault}
+                    aria-label="Add default field value"
+                    data-testid="datahub-enrich-add-default-btn"
+                >
+                    <Plus className="h-3 w-3 mr-1" />
+                    Add Field
+                </Button>
+            </div>
+            {defaultsList.length === 0 && (
+                <p className="text-sm text-muted-foreground p-3 bg-muted/50 rounded-md">
+                    No default values defined. Add fields to set on each record.
+                </p>
+            )}
+            {defaultsList.map((item, index) => (
+                <DefaultValueRow
+                    key={item.id}
+                    item={item}
+                    index={index}
+                    updateDefaultItem={updateDefaultItem}
+                    removeDefault={removeDefault}
+                />
+            ))}
+        </div>
+    ),
+
+    entitySelect: ({ field, value, onChange, entityOptions }) => (
+        <div className="space-y-2">
+            <Label className="text-sm font-medium">{field.label}</Label>
+            <Select value={String(value || '')} onValueChange={(v) => onChange(v)}>
+                <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select entity..." />
+                </SelectTrigger>
+                <SelectContent>
+                    {entityOptions.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {field.description && (
+                <p className="text-xs text-muted-foreground">{field.description}</p>
+            )}
+        </div>
+    ),
+};
+
+/** Default renderer for unrecognized field types (text input). */
+function defaultEnrichFieldRenderer({ field, value, onChange }: EnrichSchemaFieldProps): React.JSX.Element {
+    return (
+        <div className="space-y-2">
+            <Label className="text-sm font-medium">{field.label}</Label>
+            <Input
+                value={String(value || '')}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={field.placeholder ?? undefined}
+            />
+            {field.description && (
+                <p className="text-xs text-muted-foreground">{field.description}</p>
+            )}
+        </div>
+    );
+}
+
+function EnrichSchemaField(props: EnrichSchemaFieldProps) {
+    const renderer = ENRICH_FIELD_RENDERERS[props.field.type] ?? defaultEnrichFieldRenderer;
+    return renderer(props);
+}
+
+interface DefaultValueRowProps {
+    item: DefaultValue;
+    index: number;
+    updateDefaultItem: (index: number, field: string, value: string) => void;
+    removeDefault: (index: number) => void;
+}
+
+const DefaultValueRow = memo(function DefaultValueRow({
+    item,
+    index,
+    updateDefaultItem,
+    removeDefault,
+}: DefaultValueRowProps) {
+    const handleFieldChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        updateDefaultItem(index, e.target.value, item.value);
+    }, [index, item.value, updateDefaultItem]);
+
+    const handleValueChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        updateDefaultItem(index, item.field, e.target.value);
+    }, [index, item.field, updateDefaultItem]);
+
+    const handleRemove = useCallback(() => {
+        removeDefault(index);
+    }, [index, removeDefault]);
+
+    return (
+        <div className="flex items-start gap-2" data-testid={`datahub-enrich-default-row-${index}`}>
+            <Input
+                value={item.field}
+                onChange={handleFieldChange}
+                placeholder="Field name"
+                className="w-40"
+            />
+            <Input
+                value={item.value}
+                onChange={handleValueChange}
+                placeholder="Value (JSON or string)"
+                className="flex-1"
+            />
+            <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemove}
+                className="text-destructive hover:text-destructive"
+                aria-label={`Remove default value for ${item.field || 'field'}`}
+                data-testid={`datahub-enrich-remove-default-${index}-btn`}
+            >
+                <Trash2 className="h-4 w-4" />
+            </Button>
+        </div>
+    );
+});

package/dashboard/components/shared/step-config/ExtractTestResults.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { memo } from 'react';
+import {
+    Badge,
+    Tabs,
+    TabsList,
+    TabsTrigger,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@vendure/dashboard';
+import { CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
+import { formatCellValue } from '../../../utils';
+import { TEST_STATUS, UI_LIMITS, COMPONENT_HEIGHTS } from '../../../constants';
+import type { TestResult } from './step-test-handlers';
+import { TestResultContainer, JsonDisplay } from './TestResultContainer';
+
+interface ExtractTestResultsProps {
+    result: TestResult;
+    resultView: 'table' | 'json';
+    onViewChange: (view: 'table' | 'json') => void;
+}
+
+/**
+ * Status badge component for test results
+ */
+export const StatusBadge = memo(function StatusBadge({ status }: { status: TestResult['status'] }) {
+    switch (status) {
+        case TEST_STATUS.SUCCESS:
+            return (
+                <Badge variant="default" className="gap-1">
+                    <CheckCircle2 className="h-3 w-3" /> Success
+                </Badge>
+            );
+        case TEST_STATUS.ERROR:
+            return (
+                <Badge variant="destructive" className="gap-1">
+                    <XCircle className="h-3 w-3" /> Error
+                </Badge>
+            );
+        case TEST_STATUS.WARNING:
+            return (
+                <Badge variant="secondary" className="gap-1">
+                    <AlertCircle className="h-3 w-3" /> Warning
+                </Badge>
+            );
+    }
+});
+
+/**
+ * Table display for record arrays
+ */
+export const RecordsTable = memo(function RecordsTable({ records }: { records: Array<Record<string, unknown>> }) {
+    if (!records.length) {
+        return <div className="text-muted-foreground text-sm">No records</div>;
+    }
+
+    const allKeys = Array.from(new Set(records.flatMap(r => Object.keys(r)))).slice(0, UI_LIMITS.TABLE_PREVIEW_COLUMNS);
+
+    return (
+        <div className={`border rounded overflow-auto ${COMPONENT_HEIGHTS.SCROLL_AREA_SM}`}>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        {allKeys.map(key => (
+                            <TableHead key={key} className="text-xs whitespace-nowrap">
+                                {key}
+                            </TableHead>
+                        ))}
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {/* Index as key acceptable - static test result data, not reordered */}
+                    {records.slice(0, UI_LIMITS.TABLE_PREVIEW_ROWS).map((rec, recordIndex) => (
+                        <TableRow key={`record-${recordIndex}`}>
+                            {allKeys.map(key => (
+                                <TableCell key={key} className="text-xs py-1 max-w-[200px] truncate">
+                                    {formatCellValue(rec[key])}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+            {records.length > UI_LIMITS.TABLE_PREVIEW_ROWS && (
+                <div className="text-xs text-muted-foreground p-2 border-t">
+                    Showing {UI_LIMITS.TABLE_PREVIEW_ROWS} of {records.length} records
+                </div>
+            )}
+        </div>
+    );
+});
+
+/**
+ * View toggle for switching between table and JSON views
+ */
+export const ViewToggle = memo(function ViewToggle({
+    resultView,
+    onViewChange,
+}: {
+    resultView: 'table' | 'json';
+    onViewChange: (view: 'table' | 'json') => void;
+}) {
+    return (
+        <Tabs value={resultView} onValueChange={v => onViewChange(v as 'table' | 'json')}>
+            <TabsList className="h-7">
+                <TabsTrigger value="table" className="text-xs h-6 px-2">
+                    Table
+                </TabsTrigger>
+                <TabsTrigger value="json" className="text-xs h-6 px-2">
+                    JSON
+                </TabsTrigger>
+            </TabsList>
+        </Tabs>
+    );
+});
+
+/**
+ * Display component for EXTRACT step test results
+ */
+export const ExtractTestResults = memo(function ExtractTestResults({ result, resultView, onViewChange }: ExtractTestResultsProps) {
+    if (!result.records) {
+        return null;
+    }
+
+    return (
+        <TestResultContainer
+            result={result}
+            showViewToggle
+            resultView={resultView}
+            onViewChange={onViewChange}
+        >
+            {resultView === 'table' ? (
+                <RecordsTable records={result.records} />
+            ) : (
+                <JsonDisplay data={result.records} />
+            )}
+        </TestResultContainer>
+    );
+});

package/dashboard/components/shared/step-config/GateConfigComponent.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import {
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Input,
+} from '@vendure/dashboard';
+import { useApprovalTypeSchemas, type ConnectionSchemaField } from '../../../hooks/api/use-config-options';
+
+export interface GateConfigComponentProps {
+    readonly config: Record<string, unknown>;
+    readonly onChange: (config: Record<string, unknown>) => void;
+}
+
+export function GateConfigComponent({
+    config,
+    onChange,
+}: GateConfigComponentProps) {
+    const { schemas: approvalTypeSchemas } = useApprovalTypeSchemas();
+    const approvalType = (config.approvalType as string) || 'MANUAL';
+    const currentSchema = approvalTypeSchemas.find(s => s.value === approvalType);
+
+    // Use refs to avoid stale closures in the initialization effect
+    const configRef = useRef(config);
+    const onChangeRef = useRef(onChange);
+    configRef.current = config;
+    onChangeRef.current = onChange;
+
+    // Initialize approvalType if not set
+    useEffect(() => {
+        if (!configRef.current.approvalType) {
+            onChangeRef.current({ ...configRef.current, approvalType: 'MANUAL' });
+        }
+    }, []);
+
+    const updateField = useCallback((key: string, value: unknown) => {
+        onChange({ ...config, [key]: value });
+    }, [config, onChange]);
+
+    return (
+        <div className="space-y-4">
+            <div className="space-y-2">
+                <Label className="text-sm font-medium">Approval Type</Label>
+                <Select
+                    value={approvalType}
+                    onValueChange={(v) => updateField('approvalType', v)}
+                >
+                    <SelectTrigger className="w-full" data-testid="datahub-gate-approval-type-select">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {approvalTypeSchemas.map((at) => (
+                            <SelectItem key={at.value} value={at.value}>
+                                {at.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                    {currentSchema?.description}
+                </p>
+            </div>
+
+            {currentSchema && currentSchema.fields.length > 0 && (
+                <div className="space-y-3">
+                    {currentSchema.fields.map(field => (
+                        <GateSchemaField
+                            key={field.key}
+                            field={field}
+                            value={config[field.key]}
+                            onChange={(value) => updateField(field.key, value)}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+interface GateSchemaFieldProps {
+    field: ConnectionSchemaField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+}
+
+function GateSchemaField({ field, value, onChange }: GateSchemaFieldProps) {
+    if (field.type === 'number') {
+        return (
+            <div className="space-y-2">
+                <Label className="text-sm font-medium">{field.label}</Label>
+                <Input
+                    type="number"
+                    value={value != null ? String(value) : ''}
+                    onChange={(e) => {
+                        const val = e.target.value ? Number(e.target.value) : undefined;
+                        onChange(val);
+                    }}
+                    placeholder={field.placeholder ?? undefined}
+                    data-testid={`datahub-gate-${field.key}-input`}
+                />
+                {field.description && (
+                    <p className="text-xs text-muted-foreground">{field.description}</p>
+                )}
+            </div>
+        );
+    }
+
+    // Default: string/text input
+    return (
+        <div className="space-y-2">
+            <Label className="text-sm font-medium">{field.label}</Label>
+            <Input
+                value={value != null ? String(value) : ''}
+                onChange={(e) => onChange(e.target.value)}
+                placeholder={field.placeholder ?? undefined}
+                data-testid={`datahub-gate-${field.key}-input`}
+            />
+            {field.description && (
+                <p className="text-xs text-muted-foreground">{field.description}</p>
+            )}
+        </div>
+    );
+}

package/dashboard/components/shared/step-config/LoadTestResults.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { formatKey, formatValue } from '../../../utils';
+import { COMPONENT_HEIGHTS } from '../../../constants';
+import { TestResultContainer, JsonDisplay } from './TestResultContainer';
+import type { TestResult } from './step-test-handlers';
+
+interface LoadTestResultsProps {
+    result: TestResult;
+}
+
+interface FeedPreviewProps {
+    feedContent: { content: string; contentType: string; itemCount: number };
+}
+
+/**
+ * Display component for LOAD step simulation results
+ */
+function LoadSimulationResult({
+    simulation,
+}: {
+    simulation: Record<string, unknown>;
+}) {
+    const entries = Object.entries(simulation);
+
+    if (!entries.length) {
+        return <div className="text-muted-foreground text-sm">No simulation data returned</div>;
+    }
+
+    return (
+        <div className="space-y-2">
+            {entries.map(([key, value]) => (
+                <div key={key} className="flex items-center justify-between border rounded p-2">
+                    <span className="text-sm font-medium">{formatKey(key)}</span>
+                    <span className="text-sm font-mono">{formatValue(value)}</span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Display component for FEED step preview results
+ */
+function FeedPreview({ feedContent }: FeedPreviewProps) {
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center gap-4 text-sm">
+                <span>
+                    <strong>Items:</strong> {feedContent.itemCount}
+                </span>
+                <span>
+                    <strong>Type:</strong> {feedContent.contentType}
+                </span>
+            </div>
+            <pre className={`text-xs bg-muted p-3 rounded overflow-auto ${COMPONENT_HEIGHTS.SCROLL_AREA_SM} whitespace-pre-wrap`}>
+                {feedContent.content || '(empty)'}
+            </pre>
+        </div>
+    );
+}
+
+/**
+ * Display component for LOAD step test results
+ */
+export function LoadTestResults({ result }: LoadTestResultsProps) {
+    if (!result.loadSimulation) {
+        return null;
+    }
+
+    return (
+        <TestResultContainer result={result}>
+            <LoadSimulationResult simulation={result.loadSimulation} />
+        </TestResultContainer>
+    );
+}
+
+/**
+ * Display component for FEED step test results
+ */
+export function FeedTestResults({ result }: LoadTestResultsProps) {
+    if (!result.feedContent) {
+        return null;
+    }
+
+    return (
+        <TestResultContainer result={result}>
+            <FeedPreview feedContent={result.feedContent} />
+        </TestResultContainer>
+    );
+}
+
+/**
+ * Generic result display for steps that only show data/message
+ * Used for TRIGGER, EXPORT, SINK, and unknown step types
+ */
+export function GenericTestResults({ result }: LoadTestResultsProps) {
+    return (
+        <TestResultContainer result={result}>
+            {result.data && (
+                <JsonDisplay data={result.data} maxHeight="200px" />
+            )}
+        </TestResultContainer>
+    );
+}