619 lines
25 KiB
TypeScript
619 lines
25 KiB
TypeScript
/**
|
||
* Automation2 Flow Editor - Schema-based Data Picker.
|
||
* Builds pickable paths from portTypeCatalog + node outputPorts, or from
|
||
* outputPorts[n].dataPickOptions when the backend defines an explicit list (authoritative).
|
||
* Resolves Transit chains to show the real upstream schema.
|
||
* Includes a System Variables section.
|
||
*/
|
||
|
||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { createPortal } from 'react-dom';
|
||
import { createRef, createSystemVar, type DataRef, type SystemVarRef, isCompatible } from './dataRef';
|
||
import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
|
||
import type { DataPickOption, GraphDataSources, GraphDefinedSchemaRef, NodeType, PortField, PortSchema } from '../../../../api/workflowApi';
|
||
import { fetchGraphDataSources } from '../../../../api/workflowApi';
|
||
import styles from '../../editor/Automation2FlowEditor.module.css';
|
||
|
||
import { useLanguage } from '../../../../providers/language/LanguageContext';
|
||
|
||
interface DataPickerProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onPick: (ref: DataRef | SystemVarRef) => void;
|
||
availableSourceIds: string[];
|
||
nodes: Array<{ id: string; title?: string; type?: string; parameters?: Record<string, unknown> }>;
|
||
nodeOutputsPreview: Record<string, unknown>;
|
||
getNodeLabel: (node: { id: string; title?: string }) => string;
|
||
/** When set, the picker can hide incompatible candidates (strict toggle) and
|
||
* surfaces "Iterieren als Loop" affordances for List[X]→X candidates. */
|
||
expectedParamType?: string;
|
||
}
|
||
|
||
interface PickablePath {
|
||
path: (string | number)[];
|
||
label: string;
|
||
type?: string;
|
||
/** True iff this path produces `List[X]` and the consumer expects `X` —
|
||
* picking with iterate=true appends the wildcard segment. */
|
||
iterable?: boolean;
|
||
/** Annotated after strict-filter pass: type exists but doesn't match the expected param type. */
|
||
typeMismatch?: boolean;
|
||
/** Surfaced at the top of the list as the most common / recommended pick. */
|
||
recommended?: boolean;
|
||
/** Tooltip (Katalog oder Backend-Hinweistext). */
|
||
detail?: string;
|
||
}
|
||
|
||
const _LIST_INNER_RE = /^List\[(.+)\]$/;
|
||
|
||
function _fieldSegHuman(field: PortField): string {
|
||
const picker = field.pickerLabel;
|
||
if (typeof picker === 'string' && picker.trim()) return picker.trim();
|
||
return field.name;
|
||
}
|
||
|
||
function _detailFromField(description: unknown): string | undefined {
|
||
if (typeof description === 'string' && description.trim()) return description.trim();
|
||
return undefined;
|
||
}
|
||
|
||
function _buildPathsFromSchema(
|
||
schema: PortSchema | undefined,
|
||
catalog: Record<string, PortSchema>,
|
||
basePath: (string | number)[] = [],
|
||
baseSegments: string[] = [],
|
||
depth = 0,
|
||
): PickablePath[] {
|
||
if (!schema || !schema.fields || depth > 8) return [];
|
||
const result: PickablePath[] = [];
|
||
|
||
// For form schemas (kind=fromGraph), expose the whole `payload` object as a
|
||
// top-level pickable entry so the user can pass the entire form at once.
|
||
if (depth === 0 && schema.name?.startsWith('FormPayload')) {
|
||
result.push({
|
||
path: ['payload'],
|
||
label: 'Gesamtes Formular',
|
||
type: 'object',
|
||
recommended: true,
|
||
});
|
||
}
|
||
|
||
for (const field of schema.fields) {
|
||
const segHuman = _fieldSegHuman(field);
|
||
const fieldPath = [...basePath, field.name];
|
||
const label =
|
||
baseSegments.length > 0
|
||
? `${baseSegments.join(' › ')} › ${segHuman}`
|
||
: segHuman;
|
||
const detail = _detailFromField(field.description);
|
||
result.push({
|
||
path: fieldPath,
|
||
label,
|
||
type: field.type,
|
||
recommended: field.recommended ?? false,
|
||
detail,
|
||
});
|
||
const m = typeof field.type === 'string' ? field.type.match(_LIST_INNER_RE) : null;
|
||
const inner = m?.[1]?.trim();
|
||
if (inner && catalog[inner]) {
|
||
const pil = typeof field.pickerItemLabel === 'string' ? field.pickerItemLabel.trim() : '';
|
||
const itemBridge = pil || '*';
|
||
const nextSegments = [...baseSegments, segHuman, itemBridge];
|
||
result.push(..._buildPathsFromSchema(catalog[inner], catalog, [...fieldPath, '*'], nextSegments, depth + 1));
|
||
}
|
||
}
|
||
result.push({
|
||
path: [...basePath, '_success'],
|
||
label:
|
||
baseSegments.length > 0 ? `${baseSegments.join(' › ')} › Erfolgskennzeichen` : '_success',
|
||
type: 'bool',
|
||
});
|
||
result.push({
|
||
path: [...basePath, '_error'],
|
||
label:
|
||
baseSegments.length > 0 ? `${baseSegments.join(' › ')} › Fehlermeldung` : '_error',
|
||
type: 'str',
|
||
});
|
||
return result;
|
||
}
|
||
/** Annotate each candidate with `iterable=true` if it is `List[X]` and the
|
||
* consumer expects `X`. Used to render a "Iterieren als Loop"-Vorschlag. */
|
||
function _markIterableCandidates(paths: PickablePath[], expectedParamType?: string): PickablePath[] {
|
||
if (!expectedParamType) return paths;
|
||
return paths.map((p) => {
|
||
if (!p.type) return p;
|
||
const m = p.type.match(_LIST_INNER_RE);
|
||
if (m && m[1].trim() === expectedParamType) return { ...p, iterable: true };
|
||
return p;
|
||
});
|
||
}
|
||
|
||
function _deriveFormPortSchemaFromParams(
|
||
node: { parameters?: Record<string, unknown> },
|
||
paramKey: string,
|
||
formTypeToPort: Record<string, string> = {},
|
||
): PortSchema | undefined {
|
||
const resolvePortType = (rawType: string) => formTypeToPort[rawType] ?? rawType;
|
||
const raw = node.parameters?.[paramKey];
|
||
if (!Array.isArray(raw)) return undefined;
|
||
const fields: Array<{ name: string; type: string; description: string | Record<string, string>; required: boolean }> = [];
|
||
for (const item of raw) {
|
||
if (typeof item !== 'object' || item === null) continue;
|
||
const rec = item as Record<string, unknown>;
|
||
if (typeof rec.name !== 'string') continue;
|
||
const lab = rec.label;
|
||
let description: string | Record<string, string> = rec.name;
|
||
if (typeof lab === 'string') description = lab;
|
||
else if (lab && typeof lab === 'object') description = lab as Record<string, string>;
|
||
const rawType = typeof rec.type === 'string' ? rec.type : 'str';
|
||
if (rawType === 'group' && Array.isArray(rec.fields)) {
|
||
for (const sub of rec.fields as Record<string, unknown>[]) {
|
||
if (!sub || typeof sub.name !== 'string') continue;
|
||
const sl = sub.label;
|
||
let sdesc: string | Record<string, string> = `${rec.name}.${sub.name}`;
|
||
if (typeof sl === 'string') sdesc = sl;
|
||
else if (sl && typeof sl === 'object') sdesc = sl as Record<string, string>;
|
||
fields.push({
|
||
name: `${rec.name}.${sub.name}`,
|
||
type: resolvePortType(typeof sub.type === 'string' ? sub.type : 'str'),
|
||
description: sdesc,
|
||
required: Boolean(sub.required),
|
||
});
|
||
}
|
||
continue;
|
||
}
|
||
fields.push({
|
||
name: rec.name,
|
||
type: resolvePortType(rawType),
|
||
description,
|
||
required: Boolean(rec.required),
|
||
});
|
||
}
|
||
return fields.length ? { name: 'FormPayload_dynamic', fields } : undefined;
|
||
}
|
||
|
||
function _buildPathsFromPreview(
|
||
obj: unknown,
|
||
basePath: (string | number)[] = [],
|
||
wholeOutputLabel = '(ganze Ausgabe)',
|
||
): PickablePath[] {
|
||
const pathLabel = basePath.length ? basePath.map(String).join(' → ') : wholeOutputLabel;
|
||
if (obj == null || typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
|
||
return [{ path: [...basePath], label: pathLabel }];
|
||
}
|
||
if (Array.isArray(obj)) {
|
||
const result: PickablePath[] = [{ path: [...basePath], label: pathLabel }];
|
||
for (let i = 0; i < Math.min(obj.length, 5); i++) {
|
||
result.push(..._buildPathsFromPreview(obj[i], [...basePath, i], wholeOutputLabel));
|
||
}
|
||
return result;
|
||
}
|
||
if (typeof obj === 'object') {
|
||
const result: PickablePath[] = [{ path: [...basePath], label: pathLabel }];
|
||
for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
|
||
if (k.startsWith('_')) continue;
|
||
result.push(..._buildPathsFromPreview(v, [...basePath, k], wholeOutputLabel));
|
||
}
|
||
return result;
|
||
}
|
||
return [{ path: [...basePath], label: pathLabel }];
|
||
}
|
||
|
||
/** Gateway ``outputPorts[n].dataPickOptions`` — authoritative; no client-side catalog merge. */
|
||
function _pathsFromDataPickOptions(options: DataPickOption[]): PickablePath[] {
|
||
return options.map((o) => ({
|
||
path: [...o.path],
|
||
label: o.pickerLabel,
|
||
type: o.type,
|
||
recommended: Boolean(o.recommended),
|
||
iterable: Boolean(o.iterable),
|
||
detail: typeof o.detail === 'string' ? o.detail.trim() : undefined,
|
||
}));
|
||
}
|
||
|
||
function _resolveSchemaForNode(
|
||
nodeId: string,
|
||
nodes: Array<{ id: string; type?: string; parameters?: Record<string, unknown> }>,
|
||
nodeTypes: NodeType[],
|
||
connections: Array<{ source: string; target: string; sourceOutput?: number }>,
|
||
catalog: Record<string, PortSchema>,
|
||
visited: Set<string> = new Set(),
|
||
formTypeToPort: Record<string, string> = {},
|
||
): PortSchema | undefined {
|
||
if (visited.has(nodeId)) return undefined;
|
||
visited.add(nodeId);
|
||
|
||
const node = nodes.find((n) => n.id === nodeId);
|
||
if (!node) return undefined;
|
||
const typeDef = nodeTypes.find((nt) => nt.id === node.type);
|
||
if (!typeDef?.outputPorts) return undefined;
|
||
|
||
const port0 = typeDef.outputPorts[0] as {
|
||
schema?: string | GraphDefinedSchemaRef;
|
||
dynamic?: boolean;
|
||
deriveFrom?: string;
|
||
};
|
||
if (!port0) return undefined;
|
||
|
||
const schemaSpec = port0.schema;
|
||
if (typeof schemaSpec === 'object' && schemaSpec !== null && schemaSpec.kind === 'fromGraph') {
|
||
const paramKey = schemaSpec.parameter ?? 'fields';
|
||
return _deriveFormPortSchemaFromParams(node, paramKey, formTypeToPort);
|
||
}
|
||
if (port0.dynamic && port0.deriveFrom) {
|
||
return _deriveFormPortSchemaFromParams(node, port0.deriveFrom, formTypeToPort);
|
||
}
|
||
if (typeof schemaSpec === 'string' && schemaSpec !== 'Transit') {
|
||
return catalog[schemaSpec];
|
||
}
|
||
|
||
// Transit: follow the incoming connection to find the real producer
|
||
const incoming = connections.find((c) => c.target === nodeId);
|
||
if (!incoming) return undefined;
|
||
return _resolveSchemaForNode(incoming.source, nodes, nodeTypes, connections, catalog, visited, formTypeToPort);
|
||
}
|
||
|
||
export const DataPicker: React.FC<DataPickerProps> = ({ open,
|
||
onClose,
|
||
onPick,
|
||
availableSourceIds,
|
||
nodes,
|
||
nodeOutputsPreview,
|
||
getNodeLabel,
|
||
expectedParamType,
|
||
}) => {
|
||
const { t } = useLanguage();
|
||
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
||
const [showSystem, setShowSystem] = useState(false);
|
||
// Default: when the consumer declares an expected type, show only compatible
|
||
// candidates ("strict" mode). User can override per-session via the toggle.
|
||
const [strictFilter, setStrictFilter] = useState<boolean>(Boolean(expectedParamType));
|
||
const ctx = useAutomation2DataFlow();
|
||
|
||
// NOTE: All hooks must be called unconditionally on every render to satisfy
|
||
// the Rules of Hooks. The `if (!open) return null;` early-return therefore
|
||
// has to live BELOW every hook in this component. Adding a useMemo (or any
|
||
// other hook) below it would change the hook count when the picker toggles
|
||
// open/closed and crash the whole tree (white screen).
|
||
const connectionsRaw = ctx?.connections ?? [];
|
||
const nodesRaw = ctx?.nodes ?? [];
|
||
// sourceHandle is a flat handle index (inputs first, then outputs).
|
||
// The backend expects sourceOutput as an output-port index (0-based after inputs).
|
||
const nodeInputsById = useMemo(
|
||
() => new Map(nodesRaw.map((n) => [n.id, n.inputs ?? 0])),
|
||
[nodesRaw],
|
||
);
|
||
const connections = useMemo(
|
||
() =>
|
||
connectionsRaw.map((c) => ({
|
||
source: c.sourceId,
|
||
target: c.targetId,
|
||
sourceOutput: c.sourceHandle - (nodeInputsById.get(c.sourceId) ?? 0),
|
||
targetInput: c.targetHandle,
|
||
})),
|
||
[connectionsRaw, nodeInputsById],
|
||
);
|
||
|
||
// Fetch scope data from the backend when the picker opens — zero topology logic in JS.
|
||
const [scopeData, setScopeData] = useState<GraphDataSources | null>(null);
|
||
const scopeFetchKey = useRef<string>('');
|
||
useEffect(() => {
|
||
if (!open || !ctx?.instanceId || !ctx?.request || !ctx?.currentNodeId) return;
|
||
const key = `${ctx.instanceId}:${ctx.currentNodeId}:${connections.length}:${(ctx.nodes ?? []).length}`;
|
||
if (scopeFetchKey.current === key) return; // already fetched for this state
|
||
scopeFetchKey.current = key;
|
||
const nodeShapes = (ctx.nodes ?? []).map((n) => ({ id: n.id, type: n.type }));
|
||
fetchGraphDataSources(ctx.request, ctx.instanceId, ctx.currentNodeId, nodeShapes, connections)
|
||
.then(setScopeData)
|
||
.catch(() => setScopeData(null));
|
||
}, [open, ctx?.instanceId, ctx?.request, ctx?.currentNodeId, connections, nodesRaw]);
|
||
|
||
// Derived: effective source ids and loop context — use backend result when available,
|
||
// fall back to the prop (e.g. in tests or offline).
|
||
const effectiveSourceIds = scopeData?.availableSourceIds ?? availableSourceIds;
|
||
const portIndexOverrides = scopeData?.portIndexOverrides ?? {};
|
||
const loopBodyContextIds = scopeData?.loopBodyContextIds ?? [];
|
||
|
||
if (!open) return null;
|
||
|
||
const catalog = ctx?.portTypeCatalog ?? {};
|
||
const systemVars = ctx?.systemVariables ?? {};
|
||
const nodeTypes = ctx?.nodeTypes ?? [];
|
||
const formTypeToPort: Record<string, string> = Object.fromEntries(
|
||
(ctx?.formFieldTypes ?? []).map((f) => [f.id, f.portType])
|
||
);
|
||
|
||
const toggleExpand = (nodeId: string) => {
|
||
setExpandedNodes((prev) => {
|
||
const next = new Set(prev);
|
||
if (next.has(nodeId)) next.delete(nodeId);
|
||
else next.add(nodeId);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const handlePick = (nodeId: string, path: (string | number)[], expectedType?: string) => {
|
||
onPick(createRef(nodeId, path, expectedType));
|
||
onClose();
|
||
};
|
||
|
||
/** Loop-Vorschlag: for List[X]→X candidates, append the '*' wildcard so the
|
||
* engine maps the consumer over each element (executionEngine wildcard). */
|
||
const handlePickIterate = (nodeId: string, path: (string | number)[], expectedType?: string) => {
|
||
onPick(createRef(nodeId, [...path, '*'], expectedType));
|
||
onClose();
|
||
};
|
||
|
||
const handlePickSystemVar = (variable: string) => {
|
||
onPick(createSystemVar(variable));
|
||
onClose();
|
||
};
|
||
|
||
const _dialog = (
|
||
<div
|
||
className={styles.dataPickerOverlay}
|
||
onClick={onClose}
|
||
onKeyDown={(e) => e.key === 'Escape' && onClose()}
|
||
role="presentation"
|
||
>
|
||
<div
|
||
className={styles.dataPickerModal}
|
||
onClick={(e) => e.stopPropagation()}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="automation2DataPickerTitle"
|
||
>
|
||
<div className={styles.dataPickerHeader}>
|
||
<h4 className={styles.dataPickerTitle} id="automation2DataPickerTitle">
|
||
{t('Datenquelle wählen')}
|
||
{expectedParamType && (
|
||
<span
|
||
className={styles.dataPickerTypeBadge}
|
||
title={t('Erwarteter Typ')}
|
||
>
|
||
{expectedParamType}
|
||
</span>
|
||
)}
|
||
</h4>
|
||
<div className={styles.dataPickerHeaderControls}>
|
||
{expectedParamType && (
|
||
<label className={styles.dataPickerStrictLabel}>
|
||
<input
|
||
type="checkbox"
|
||
checked={strictFilter}
|
||
onChange={(e) => setStrictFilter(e.target.checked)}
|
||
/>
|
||
{t('Nur kompatible')}
|
||
</label>
|
||
)}
|
||
<button type="button" className={styles.dataPickerClose} onClick={onClose} aria-label={t('Schließen')}>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className={styles.dataPickerBody}>
|
||
{/* System Variables Section */}
|
||
{loopBodyContextIds.length > 0 && (
|
||
<div className={styles.dataPickerNodeSection}>
|
||
<div className={styles.dataPickerNodeHeader} style={{ cursor: 'default' }}>
|
||
<span className={styles.dataPickerNodeLabel}>{t('Schleife (lexikalisch)')}</span>
|
||
</div>
|
||
<div className={styles.dataPickerTree}>
|
||
{loopBodyContextIds.map((loopId) => {
|
||
const loopNode = nodes.find((n) => n.id === loopId);
|
||
const loopLabel = loopNode ? getNodeLabel(loopNode as { id: string; title?: string }) : loopId;
|
||
const loopSchema = catalog.LoopItem;
|
||
const loopPaths = loopSchema
|
||
? _buildPathsFromSchema(loopSchema, catalog, [], [], 0).filter((p) => !String(p.path[p.path.length - 1]).startsWith('_'))
|
||
: [
|
||
{ path: ['currentItem'], label: 'currentItem', type: 'Any' },
|
||
{ path: ['currentIndex'], label: 'currentIndex', type: 'int' },
|
||
{ path: ['count'], label: 'count', type: 'int' },
|
||
];
|
||
return (
|
||
<div key={loopId} style={{ marginBottom: 6 }}>
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', marginBottom: 2 }}>{loopLabel}</div>
|
||
{loopPaths.map((p, i) => {
|
||
const mismatch =
|
||
Boolean(expectedParamType) &&
|
||
Boolean(p.type) &&
|
||
isCompatible(p.type!, expectedParamType!) === 'mismatch';
|
||
return (
|
||
<button
|
||
key={`${loopId}-${p.path.join('.')}-${i}`}
|
||
type="button"
|
||
className={styles.dataPickerLeaf}
|
||
onClick={() => handlePick(loopId, p.path, p.type)}
|
||
>
|
||
{p.label}
|
||
{p.type && (
|
||
<span className={styles.dataPickerLeafType}>
|
||
({p.type})
|
||
</span>
|
||
)}
|
||
{mismatch && (
|
||
<span
|
||
className={styles.dataPickerMismatchBadge}
|
||
title={t('Typ weicht ab — wird beim Ausführen konvertiert')}
|
||
>
|
||
⚠
|
||
</span>
|
||
)}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{Object.keys(systemVars).length > 0 && (
|
||
<div className={styles.dataPickerNodeSection}>
|
||
<button
|
||
type="button"
|
||
className={styles.dataPickerNodeHeader}
|
||
onClick={() => setShowSystem(!showSystem)}
|
||
>
|
||
<span className={styles.dataPickerExpandIcon}>{showSystem ? '▼' : '▶'}</span>
|
||
<span className={styles.dataPickerNodeLabel}>{t('System')}</span>
|
||
</button>
|
||
{showSystem && (
|
||
<div className={styles.dataPickerTree}>
|
||
{Object.entries(systemVars).map(([key, info]) => (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
className={styles.dataPickerLeaf}
|
||
onClick={() => handlePickSystemVar(key)}
|
||
title={info.description}
|
||
>
|
||
{key} <span className={styles.dataPickerLeafType}>({info.type})</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Node outputs */}
|
||
{(() => {
|
||
const filteredIds = effectiveSourceIds.filter((nodeId) => {
|
||
const node = nodes.find((n) => n.id === nodeId);
|
||
return node?.type !== 'trigger.manual';
|
||
});
|
||
if (filteredIds.length === 0 && Object.keys(systemVars).length === 0) {
|
||
return <p className={styles.dataPickerEmpty}>{t('Keine vorherigen Nodes verfügbar')}</p>;
|
||
}
|
||
return filteredIds.map((nodeId) => {
|
||
const node = nodes.find((n) => n.id === nodeId);
|
||
// User-defined step title (or node-type label as fallback)
|
||
const stepTitle = node ? getNodeLabel(node) : nodeId;
|
||
const nodeTypeDef = node?.type ? nodeTypes.find((nt) => nt.id === node.type) : undefined;
|
||
// Human-readable type label (e.g. "Formular", "Web-Recherche")
|
||
const typeLabel = nodeTypeDef?.label ?? node?.type ?? '';
|
||
const isExpanded = expandedNodes.has(nodeId);
|
||
|
||
// Use the port index the backend says to use (e.g. 1 for loop on Done branch)
|
||
const portIdx = portIndexOverrides[nodeId] ?? 0;
|
||
const portDef = nodeTypeDef?.outputPorts?.[portIdx];
|
||
const backendPick =
|
||
portDef?.dataPickOptions &&
|
||
Array.isArray(portDef.dataPickOptions) &&
|
||
portDef.dataPickOptions.length > 0;
|
||
|
||
let schemaPaths: PickablePath[];
|
||
if (backendPick) {
|
||
schemaPaths = _pathsFromDataPickOptions(portDef!.dataPickOptions!);
|
||
} else {
|
||
const resolvedSchema = _resolveSchemaForNode(
|
||
nodeId,
|
||
nodes,
|
||
nodeTypes,
|
||
connections,
|
||
catalog,
|
||
new Set(),
|
||
formTypeToPort,
|
||
);
|
||
schemaPaths = _buildPathsFromSchema(resolvedSchema, catalog);
|
||
}
|
||
const annotated = _markIterableCandidates(
|
||
schemaPaths.length > 0
|
||
? schemaPaths
|
||
: _buildPathsFromPreview(nodeOutputsPreview[nodeId], [], t('(ganze Ausgabe)')),
|
||
expectedParamType,
|
||
);
|
||
const markedPaths = annotated.map((p) => ({
|
||
...p,
|
||
typeMismatch:
|
||
strictFilter &&
|
||
Boolean(expectedParamType) &&
|
||
Boolean(p.type) &&
|
||
!p.iterable &&
|
||
isCompatible(p.type!, expectedParamType!) === 'mismatch',
|
||
}));
|
||
const orderedPaths = [
|
||
...markedPaths.filter((p) => p.recommended),
|
||
...markedPaths.filter((p) => !p.recommended),
|
||
];
|
||
|
||
return (
|
||
<div key={nodeId} className={styles.dataPickerNodeSection}>
|
||
<button
|
||
type="button"
|
||
className={styles.dataPickerNodeHeader}
|
||
onClick={() => toggleExpand(nodeId)}
|
||
>
|
||
<span className={styles.dataPickerExpandIcon}>{isExpanded ? '▼' : '▶'}</span>
|
||
<span className={styles.dataPickerNodeLabel}>{stepTitle}</span>
|
||
{typeLabel && (
|
||
<span className={styles.dataPickerNodeSchemaHint}>
|
||
{typeLabel}
|
||
</span>
|
||
)}
|
||
</button>
|
||
{isExpanded && (
|
||
<div className={styles.dataPickerTree}>
|
||
{orderedPaths.length === 0 && (
|
||
<div style={{ fontSize: 11, color: 'var(--text-secondary)', padding: '4px 8px' }}>
|
||
{t('(keine Felder verfügbar)')}
|
||
</div>
|
||
)}
|
||
{orderedPaths.map((p, i) => (
|
||
<div
|
||
key={`${p.path.join('.')}-${i}`}
|
||
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
|
||
>
|
||
<button
|
||
type="button"
|
||
className={`${styles.dataPickerLeaf}${p.recommended ? ` ${styles.dataPickerLeafRecommended}` : ''}`}
|
||
style={{ flex: 1 }}
|
||
onClick={() => handlePick(nodeId, p.path, p.type)}
|
||
title={p.detail || p.label}
|
||
>
|
||
{p.label}
|
||
{p.recommended && (
|
||
<span className={styles.dataPickerRecommendedPill}>
|
||
{t('Empfohlen')}
|
||
</span>
|
||
)}
|
||
{p.type && (
|
||
<span className={styles.dataPickerLeafType}>
|
||
({p.type})
|
||
</span>
|
||
)}
|
||
{p.typeMismatch && (
|
||
<span
|
||
className={styles.dataPickerMismatchBadge}
|
||
title={t('Typ weicht ab — wird beim Ausführen konvertiert')}
|
||
>
|
||
⚠
|
||
</span>
|
||
)}
|
||
</button>
|
||
{p.iterable && (
|
||
<button
|
||
type="button"
|
||
className={`${styles.dataPickerLeaf} ${styles.dataPickerIterateBtn}`}
|
||
onClick={() => handlePickIterate(nodeId, p.path, expectedParamType)}
|
||
title={t('Pro Element der Liste iterieren (Loop)')}
|
||
>
|
||
{t('iterieren')}
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
});
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
return createPortal(_dialog, document.body);
|
||
};
|