feat: Create YAML import endpoint for Tangle Deploy to preview pipeline

[yuechao-qin]

tangle-ui

Description

Add /app/editor/import-pipeline route to enable opening pipeline YAML files directly in the browser editor from external tools.

Look at PR-28268 for Video Demos for what this PR supports.

Changes

• ImportPage component (src/routes/Import/index.tsx) — strict URL validation (isAllowedImportUrl), confirmation dialog before fetch, step indicator UI, error handling with reusable ErrorScreen component
• Route /app/editor/import-pipeline in router.ts
• Unit tests covering URL validation (10 cases), confirmation flow, success path, fetch failures, empty content, missing/invalid URL, and network errors (21 tests total)

Security

• UI
  • Strict URL allowlist: only accepts http://127.0.0.1:{port>=10000}/tangle-deploy/pipeline.yaml — blocks crafted URLs targeting local services
  • Confirmation dialog: user must explicitly click "Import Pipeline" before any fetch occurs
  • Pipeline validation: importPipelineFromYaml validates YAML syntax and graph structure before saving to IndexedDB
  • Descriptive route path: renamed from /import to /app/editor/import-pipeline to avoid root-level conflicts and clarify intent
• CLI Server
  • CORS headers: CLI server for cross-origin fetch

Test Steps

1. Run npm run start (frontend on localhost:3000)
2. Run tangle-view-pipeline <any_pipeline.yaml> --ui-url http://localhost:3000 — browser should open, show the step indicator, and redirect to the editor with the pipeline loaded
3. Visit http://localhost:3000/#/import (no url param) — should show "Missing 'url' parameter" error with Back to Home button
4. Visit http://localhost:3000/#/import?url=http://bad-url — should show fetch error UI
5. Run npm test -- src/routes/Import/Import.test.tsx — all 6 tests should pass

[yuechao-qin]

• feat: Create YAML import endpoint for Tangle Deploy to preview pipeline #1829 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[Ark-kun]

http://localhost:3000/#/import?url=http://bad-url
This might be dangerous from security perspective. Pipelines can contain malicious components. Users can be redirected to pipeline importing URLs.

We wanted to implement this feature for sample pipelines, but eventually went with a preloaded set of pipelines.

Although, doing such importing in the browser is still more secure than doing that in the backend (which is more privileged and has access to internal resources).

[Ark-kun]

>/import

I think we need the name to be more specific so that it does not conflict with things like importing components.

Also, I'de like the frontend to minimize the number of root route "directories". In some circumstances we need to route HTTP requests between UI and API server (on same domain) and URL prefixes makes that easier.
I'd suggest something like /app/commands/import_pipeline or /app/editor/import_pipeline

[maxy-shpfy]

In order to properly load remote resource we would need a proxy to:

1. sanitize malicious endpoints
2. avoid CORS issues
3. validate pipelines

[github-actions]

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=ycq/tangle-deploy-investigate-run/43fb8e7`

---

[yuechao-qin]

Merge activity

• Mar 12, 5:15 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 12, 5:16 PM UTC: Graphite rebased this pull request as part of a merge.
• Mar 12, 5:17 PM UTC: @yuechao-qin merged this pull request with Graphite.