Skip to content

feat(deployment): add SDL import/export to the configure page - #3474

Merged
baktun14 merged 7 commits into
mainfrom
feat/deploy-web-configure-sdl-import-export
Jul 22, 2026
Merged

feat(deployment): add SDL import/export to the configure page#3474
baktun14 merged 7 commits into
mainfrom
feat/deploy-web-configure-sdl-import-export

Conversation

@baktun14

@baktun14 baktun14 commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Why

Closes CON-701.

The redesigned deployment configure page (/new-deployment/configure, gated by onboarding_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 DialogV2 with 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 from ConfigureDeploymentForm's module-private helpers. getInitialState (mount path) now delegates to it. A dedicated NoVisibleServiceError lets 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 its ImportSdlDialog. saveAs (file-saver) and copyTextToClipboard are injected via DEPENDENCIES (RuntimeCard precedent). Export source is liveSdl — exactly what Deploy submits — so export mirrors deploy semantics.
  • Analytics — three new events (configure_sdl_imported / _downloaded / _copied) under category: "deployments", matching the redesigned page's configure_* funnel (the legacy import_sdl under sdl_builder is left untouched).

One flagged policy call for reviewers: the import dialog shows the parser's err.message for 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. describeImportError in ImportSdlDialog.tsx is the single swap point if you'd rather keep fixed messages here too.

Testing

  • New specs: importDeploymentState.spec.ts (11), ImportSdlDialog.spec.tsx (11), SdlImportExport.spec.tsx (8); ConfigureDeploymentForm.spec.tsx extended (+4, existing mount-path tests are the regression net for the getInitialState refactor).
  • Full deploy-web suite: 2812 passed / 5 skipped. tsc --noEmit: 0 new errors vs. baseline. Lint clean.

Summary by CodeRabbit

  • New Features
    • Added SDL import to the configure form via paste or file upload, updating services, selected service, generated SDL, and draft persistence.
    • Added SDL export actions: “Download .yaml” (sanitized filename with safe fallback) and “Copy to clipboard”.
    • Import is now enabled only in editable phases, and disabled for empty/invalid SDL; uploads are rejected above 512 KB with inline errors.
  • Analytics
    • Track SDL imported, downloaded, and copied.
  • Tests
    • Expanded coverage for import/export flows, parser/error handling, filename generation, and clipboard success/failure (including async upload race conditions).

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
@coderabbitai

coderabbitai Bot commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Changes

SDL import and export

Layer / File(s) Summary
SDL state parsing and selection
apps/deploy-web/src/components/deployments/ConfigureDeployment/importDeploymentState/*
Parses SDL into form values, restores SSH state, validates visible services, classifies parser errors, and selects the initial service.
SDL import dialog
apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.*
Supports pasted or uploaded SDL, file-size and editor validation, import-method reporting, parser error messages, race-safe file reads, and related tests.
Import and export controls
apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.*, apps/deploy-web/src/services/analytics/analytics.service.ts, packages/ui/utils/copyClipboard.ts
Adds import, YAML download, clipboard copy, filename sanitization, feedback, analytics, and boolean clipboard success reporting.
Configure form integration
apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/*
Applies imported configuration state, gates imports by deployment phase, handles initialization errors, and persists imported drafts.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Possibly related PRs

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/deploy-web-configure-sdl-import-export

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 20, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 97.19626% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 72.51%. Comparing base (0cd230d) to head (cd0b473).
⚠️ Report is 25 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...gureDeployment/SdlImportExport/ImportSdlDialog.tsx 94.00% 2 Missing and 1 partial ⚠️
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     
Flag Coverage Δ *Carryforward flag
api 86.44% <ø> (+0.62%) ⬆️ Carriedforward from 4853718
deploy-web 63.06% <97.19%> (+0.72%) ⬆️ Carriedforward from 4853718
log-collector ?
notifications 93.84% <ø> (+2.40%) ⬆️ Carriedforward from 4853718
provider-console 81.38% <ø> (ø) Carriedforward from 4853718
provider-inventory ?
provider-proxy 88.17% <ø> (+1.75%) ⬆️ Carriedforward from 4853718
tx-signer ?

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines Coverage Δ
...Deployment/ConfigurationPane/ConfigurationPane.tsx 91.66% <ø> (-0.65%) ⬇️
...onfigureDeploymentForm/ConfigureDeploymentForm.tsx 87.82% <100.00%> (+0.24%) ⬆️
...figureDeploymentPanes/ConfigureDeploymentPanes.tsx 100.00% <ø> (ø)
...gureDeployment/SdlImportExport/SdlImportExport.tsx 100.00% <100.00%> (ø)
...ent/importDeploymentState/importDeploymentState.ts 100.00% <100.00%> (ø)
...oy-web/src/services/analytics/analytics.service.ts 94.28% <ø> (ø)
...gureDeployment/SdlImportExport/ImportSdlDialog.tsx 94.00% <94.00%> (ø)

... and 166 files with indirect coverage changes

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 0cd230d and c6c0e99.

📒 Files selected for processing (9)
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.spec.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.spec.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.spec.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/importDeploymentState/importDeploymentState.spec.ts
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/importDeploymentState/importDeploymentState.ts
  • apps/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.
@github-actions github-actions Bot added size: XL and removed size: L labels Jul 20, 2026
…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.
baktun14 added 2 commits July 21, 2026 22:49
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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 4712461 and ef56e41.

📒 Files selected for processing (5)
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/ConfigureDeploymentForm/ConfigureDeploymentForm.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/ImportSdlDialog.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.spec.tsx
  • apps/deploy-web/src/components/deployments/ConfigureDeployment/SdlImportExport/SdlImportExport.tsx
  • packages/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

baktun14 added 2 commits July 22, 2026 00:42
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.
@baktun14
baktun14 enabled auto-merge July 22, 2026 20:25
@baktun14
baktun14 added this pull request to the merge queue Jul 22, 2026
Merged via the queue into main with commit b223f1d Jul 22, 2026
207 of 223 checks passed
@baktun14
baktun14 deleted the feat/deploy-web-configure-sdl-import-export branch July 22, 2026 20:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants