feat: Add Dataflow combined create/import dialog (closes #2126) - #3216
Open
ohdsi-trex wants to merge 1 commit into
Open
feat: Add Dataflow combined create/import dialog (closes #2126)#3216ohdsi-trex wants to merge 1 commit into
ohdsi-trex wants to merge 1 commit into
Conversation
ohdsi-trex
requested review from
LSriragavan,
brandantck,
jerome-ng,
khairul-syazwan,
maggie-li-yd,
p-hoffmann and
suwarnoong
as code owners
August 27, 2026 03:18
Contributor
There was a problem hiding this comment.
Pull request overview
Unifies dataflow creation and import into the Add Dataflow dialog.
Changes:
- Adds create, template, and JSON import modes.
- Removes the standalone import toolbar action.
- Updates export/import E2E coverage.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
export-import-dataflow.spec.ts |
Tests the unified workflow. |
FlowLayout.tsx |
Removes standalone import action. |
SaveNewFlowButton.tsx |
Renames the creation action. |
SaveFlowDialog.tsx |
Implements import modes and validation. |
SaveFlowDialog.scss |
Styles the redesigned dialog. |
ImportFlowButton.tsx |
Removes legacy import implementation. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+165
to
169
| if (!file.name.toLowerCase().endsWith(".json")) { | ||
| setUploadState("error"); | ||
| setUploadError("Choose a JSON dataflow export file."); | ||
| setImportedDataflow(undefined); | ||
| return; |
Comment on lines
+14
to
+16
| <Tooltip title="Add Dataflow"> | ||
| <div> | ||
| <IconButton startIcon={<EmptyFileIcon />} onClick={handleClick} /> | ||
| <IconButton aria-label="Add Dataflow" startIcon={<EmptyFileIcon />} onClick={handleClick} /> |
Comment on lines
+177
to
+183
| const reader = new FileReader(); | ||
| reader.onload = () => { | ||
| try { | ||
| const parsed = getImportedDataflow(JSON.parse(String(reader.result))); | ||
| setImportedDataflow(parsed); | ||
| setUploadedFileName(file.name); | ||
| setUploadState("success"); |
| <input ref={hiddenFileInput} className="save-flow-dialog__file-input" type="file" accept=".json,application/json" onChange={handleFileChange} /> | ||
| <div className={`save-flow-dialog__drop-zone save-flow-dialog__drop-zone--${uploadState}${dragActive ? " save-flow-dialog__drop-zone--active" : ""}`} role="button" tabIndex={0} onClick={() => hiddenFileInput.current?.click()} onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") hiddenFileInput.current?.click(); }} onDragEnter={(event) => { event.preventDefault(); setDragActive(true); }} onDragOver={(event) => event.preventDefault()} onDragLeave={(event) => { event.preventDefault(); setDragActive(false); }} onDrop={handleDrop}> | ||
| {uploadState === "success" ? <CheckCircleOutlineIcon /> : uploadState === "error" ? <ErrorOutlineIcon /> : <UploadFileOutlinedIcon />} | ||
| <div>{uploadState === "uploading" ? "Uploading dataflow…" : uploadState === "success" ? uploadedFileName : uploadState === "error" ? uploadError : <>Add by importing <button type="button" onClick={(event) => { event.stopPropagation(); hiddenFileInput.current?.click(); }}>Browse</button> or drag and drop</>}</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
$## Summary\n\nCloses #2126.\n\n- Replaces separate Create new dataflow and Import flow actions with a unified Add Dataflow dialog.\n- Adds create/import radio modes, optional template selection, and drag-and-drop JSON upload with uploading, success, and error states.\n- Imports through the create-dataflow API so a persisted new flow is opened without overwriting the active canvas.\n- Updates the ETL E2E workflow for the combined dialog.\n\n## Screenshots\n\nScreenshots were captured during the original implementation but are intentionally not included in this replacement branch so no
trex/artifacts appear in the pull request diff.\n\n- Toolbar with Add Dataflow\n- Create mode dialog\n- Import mode: idle, success, and error states\n\n## Verification\n\nDesign review selected; runtime checks intentionally skipped because the dev server was not available.