feat(deployment): add SDL import/export to the configure page - #3474
Conversation
Adds in-page SDL import (paste + file upload) and export (download .yaml + copy to clipboard) to the redesigned /new-deployment/configure page. The single import pipeline is extracted into importDeploymentState, which the mount path now delegates to; a dedicated NoVisibleServiceError lets the mount path keep its silent fallback for service-less SDLs while the import dialog surfaces a message. Import is gated on the editable phases; export stays available in every phase. Closes CON-701
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughChangesSDL import and export
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related PRs
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #3474 +/- ##
==========================================
- Coverage 72.87% 72.51% -0.37%
==========================================
Files 1133 1046 -87
Lines 29484 27343 -2141
Branches 7389 6980 -409
==========================================
- Hits 21487 19827 -1660
+ Misses 7042 6614 -428
+ Partials 955 902 -53
*This pull request uses carry forward flags. Click here to find out more.
🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsx`:
- Around line 48-52: Update handleCopy so it uses the result of
d.copyTextToClipboard(sdl) to determine whether the clipboard write succeeded.
Trigger the success snackbar and configure_sdl_copied analytics only for a
confirmed successful copy; otherwise display an error snackbar and do not report
the success event.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 0a1109a1-9d03-4851-a778-ff511e1ae76f
📒 Files selected for processing (9)
apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.spec.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.spec.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.spec.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/importDeploymentState/importDeploymentState.spec.tsapps/deploy-web/src/components/deployments/ConfigureDeployment/importDeploymentState/importDeploymentState.tsapps/deploy-web/src/services/analytics/analytics.service.ts
- Block Import when the editor's SDL validation reports errors (the red markers): the dialog now tracks SDLEditor's onValidate verdict and disables Import while it is invalid. importSimpleSdl only parses structure, so a semantically invalid SDL previously imported anyway. - Fix the double scrollbar: the dialog body was overflow-y-auto with a fixed-height editor, so adding the error alert made the body scroll on top of the editor's own scroll. The body is now a flex column and the editor flex-fills (height 100%), so only the editor scrolls.
…ser-error mapping Share the known-parser-error classification via isKnownSdlParserError in importDeploymentState instead of duplicating the error-name list across the mount path and the import dialog. Collapse the dialog's tri-state validity flag to a boolean and replace the uploaded-content ref with a source flag for method detection.
copyTextToClipboard swallowed failures, so the configure page's SDL "Copy to clipboard" always showed a success snackbar and tracked configure_sdl_copied even when the write fell back or rejected. Make it resolve to whether the write actually succeeded and branch on it: success snackbar plus analytics only on a real copy, error snackbar otherwise.
…naming Address review nits on the SDL import flow: remove the white-noise comments on getInitialState, isValid, and the file-origin ref; rename fromFileRef to untouchedUploadedFileRef so it reads without a comment; and restructure getInitialState with early returns so the silent vs surfaced fallback is self-evident.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.tsx`:
- Line 44: Update the file-import handling around untouchedUploadedFileRef to
track a monotonically increasing read generation for every file selection,
including invalid selections, and capture that generation when starting each
asynchronous FileReader read. In the reader callback, ignore results whose
generation is no longer current or when the editor has been modified, so only
the latest valid read updates the SDL text and file-import state.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 58e09f5c-fa53-40c2-8e08-5bb2d213d5df
📒 Files selected for processing (5)
apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.spec.tsxapps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsxpackages/ui/utils/copyClipboard.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsx
- apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsx
FileReader is async, so a slow read's callback could fire after the user edited the editor or picked another file, overwriting the newer text and mis-marking it as a file import. Track a read generation bumped on every edit and selection, and drop any onload/onerror whose generation is no longer current.
…rflow menu Collapse the two toolbar buttons into a single overflow (kebab) menu and relocate it from the top-right corner into the Configuration column header, threaded down as a slot through ConfigureDeploymentPanes and ConfigurationPane. Rename the action to "Import Config", drop the ellipsis, and switch the import dialog copy to config language with a link to the SDL reference docs.
Why
Closes CON-701.
The redesigned deployment configure page (
/new-deployment/configure, gated byonboarding_redesign_v1) generates SDL from form state, so an SDL could only enter the page at mount (template upload, drafts, redeploy) and could never leave it. Users need to move SDLs in and out of the flow to version-control, share, or reuse them (e.g. via the CLI). This adds in-page import (paste + file upload) and export (download.yaml+ copy to clipboard).What
Toolbar controls (top-right, opposite the Back button): an Import button and an Export dropdown (Download .yaml / Copy to clipboard). Import opens a
DialogV2with a Monaco editor to paste into plus an Upload file button that populates the same editor; a single Import action validates and applies. Import is gated on the editable phases; Export stays available in every phase.importDeploymentState/— the single import pipeline for the configure screen, extracted fromConfigureDeploymentForm's module-private helpers.getInitialState(mount path) now delegates to it. A dedicatedNoVisibleServiceErrorlets the mount path keep its silent fallback for a valid-but-serviceless SDL, while the import dialog surfaces a message.SdlImportExport/— the control cluster and itsImportSdlDialog.saveAs(file-saver) andcopyTextToClipboardare injected viaDEPENDENCIES(RuntimeCard precedent). Export source isliveSdl— exactly what Deploy submits — so export mirrors deploy semantics.configure_sdl_imported/_downloaded/_copied) undercategory: "deployments", matching the redesigned page'sconfigure_*funnel (the legacyimport_sdlundersdl_builderis left untouched).One flagged policy call for reviewers: the import dialog shows the parser's
err.messagefor known error names (YAML line/col, validation, no-service), whereas the mount path (getImportErrorMessage) keeps fixed messages. Surfacing the parser message gives the "clear validation error" the AC asks for; React escapes text nodes so it is not an injection vector.describeImportErrorinImportSdlDialog.tsxis the single swap point if you'd rather keep fixed messages here too.Testing
importDeploymentState.spec.ts(11),ImportSdlDialog.spec.tsx(11),SdlImportExport.spec.tsx(8);ConfigureDeploymentForm.spec.tsxextended (+4, existing mount-path tests are the regression net for thegetInitialStaterefactor).tsc --noEmit: 0 new errors vs. baseline. Lint clean.Summary by CodeRabbit