797 client - Add DataStream wizard editor with source, destination, and mapping steps

[ivicac]

Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com

[Copilot]

Pull request overview

Adds a wizard-style DataStream editor (Source → Destination → Mapping) and routes it through the existing ClusterElementsCanvasDialog, alongside the AI Agent editor.

Changes:

• Introduces a new data-stream-editor/ component tree (editor shell, step navigation, steps, and supporting hooks).
• Extends the canvas dialog store + hook to track and toggle showDataStreamEditor for DataStream cluster roots.
• Updates cluster element node creation and minor UI spacing (advanced properties).

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
docs/plans/2026-02-22-data-stream-editor-plan.md	Implementation plan for the DataStream wizard + integration tasks
docs/plans/2026-02-22-data-stream-editor-design.md	Design/architecture notes for the DataStream editor
client/src/pages/platform/workflow-editor/components/stores/useClusterElementsCanvasDialogStore.ts	Adds showDataStreamEditor state + setter to the dialog store
client/src/pages/platform/workflow-editor/components/hooks/useClusterElementsCanvasDialog.ts	Detects DataStream cluster roots and toggles between wizard/canvas modes
client/src/pages/platform/workflow-editor/components/ClusterElementsCanvasDialog.tsx	Renders DataStreamEditor based on store state; adjusts header display condition
client/src/pages/platform/workflow-editor/components/properties/Properties.tsx	Small spacing tweak for advanced properties collapsible
client/src/pages/platform/cluster-element-editor/utils/clusterElementsNodesUtils.tsx	Initializes connections: [] on created cluster element nodes
client/src/pages/platform/cluster-element-editor/data-stream-editor/DataStreamEditor.tsx	Main wizard container for DataStream configuration
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamHeader.tsx	Wizard header with “Advanced” toggle + close button
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamWizardFooter.tsx	Wizard footer with Previous/Next controls
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamStepNav.tsx	Step navigation UI (clickable steps based on configured state)
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamSourceStep.tsx	Step 1 UI: select/configure source component, connection, properties
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamDestinationStep.tsx	Step 2 UI: select/configure destination component, connection, properties
client/src/pages/platform/cluster-element-editor/data-stream-editor/components/DataStreamMappingStep.tsx	Step 3 UI: processor properties + auto-map action for mappings
client/src/pages/platform/cluster-element-editor/data-stream-editor/hooks/useDataStreamEditor.ts	Wizard step state + navigation handlers
client/src/pages/platform/cluster-element-editor/data-stream-editor/hooks/useDataStreamDataPills.ts	Computes/sets data pills based on previous workflow node outputs

Comments suppressed due to low confidence (3)

client/src/pages/platform/workflow-editor/components/ClusterElementsCanvasDialog.tsx:111

• ClusterElementsWorkflowEditorHeader is AI Agent–specific (it shows “Switch to AI Agent editor” and “Test agent”). Including isDataStreamClusterRoot here causes DataStream canvas mode to display AI Agent controls; clicking the toggle will switch to the DataStream wizard even though the tooltip says AI Agent, and Test agent opens the AI Agent testing panel for a DataStream. This condition should remain AI Agent–only, or a DataStream-specific header should be introduced.

                            {(isAiAgentClusterRoot || isDataStreamClusterRoot) && (
                                <ClusterElementsWorkflowEditorHeader
                                    className={twMerge(
                                        workflowNodeDetailsPanelOpen && 'pr-[470px]',
                                        workflowNodeDetailsPanelOpen && copilotPanelOpen && 'pr-[920px]'
                                    )}
                                    copilotEnabled={ff_4070 && copilotEnabled}
                                    onCopilotClick={handleCopilotClick}
                                    onTestClick={handleTestClick}
                                    onToggleEditor={handleToggleEditor}
                                />

client/src/pages/platform/cluster-element-editor/utils/clusterElementsNodesUtils.tsx:178

• Same as above: initializing connections to an empty array can be interpreted as “no connections exist” rather than “not loaded yet”. Prefer leaving connections undefined at node creation time unless you can conclusively determine there are no connections for this node.

        data: {
            ...element,
            clusterElementName: typeSegments[2],
            clusterElementType: clusterElementTypeName,
            clusterElementTypeIndex,
            clusterElementTypesCount: currentNestedRootElementTypesCount,
            componentName: typeSegments[0],
            connections: [],
            icon: (
                <InlineSVG
                    className="size-9 flex-none text-gray-900"
                    loader={<ComponentIcon className="size-9 flex-none text-gray-900" />}
                    src={iconUrl as string}
                />
            ),
            label,
            metadata: enhancedMetadata,
            multipleClusterElementsNode: isMultipleClusterElementsNode,
            name,
            operationName: typeSegments[2],
            parameters,
            parentClusterRootElementsTypeCount,
            type,
            version: parseInt(typeSegments[1].replace(/^v/, '')),
            workflowNodeName: name,

client/src/pages/platform/cluster-element-editor/utils/clusterElementsNodesUtils.tsx:113

• Setting connections: [] here changes the meaning from “connections not computed yet / unknown” (undefined) to “this node has zero possible connections”. Some UI (e.g., dynamic properties enabling) treats an empty array as a special case and may enable behaviors prematurely. Consider omitting connections here (leave undefined) and letting the node details panel logic populate the connections array when available.

            ...clusterElementItem,
            clusterElementLabel: clusterElementTypeLabel,
            clusterElementName: typeSegments[2],
            clusterElementType: clusterElementTypeName,
            clusterElementTypeIndex,
            clusterElementTypesCount: currentNestedRootElementTypesCount,
            componentName: typeSegments[0],
            connections: [],
            icon: (
                <InlineSVG
                    className="size-9 flex-none text-gray-900"
                    loader={<ComponentIcon className="size-9 flex-none text-gray-900" />}
                    src={iconUrl as string}
                />
            ),
            label,
            metadata: enhancedMetadata,
            name,
            operationName: typeSegments[2],
            parameters,
            parentClusterRootElementsTypeCount,
            type,
            version: parseInt(typeSegments[1].replace(/^v/, '')),
            workflowNodeName: name,
        },

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sonarqubecloud]

Quality Gate failed for 'client'

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)
13.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud