feat(workflow-form): Form View page shell, load, and the shared spec harness

[yangzhang75]

What changes were proposed in this PR?

The base of the Form View page (parent issue #8011): a new /user/workflow/:id/form page, of which this PR lays down the read-only shell. Frontend only.

This PR is independent of the property-editor "choose exposed" PR (#8318) and builds directly on the merged foundation (feature flag #8013, default_view #8014, shared types #8015, form-binding service #8016). The Form View is two parallel tracks -- the authoring affordance (#8318) and the reader page -- and this is the first slice of the reader-page track; the later page slices (title bar/save, read-only preview, rendering the inputs, running, results, authoring) all build on this component.

• Behind the formViewEnabled flag it loads the workflow the URL names; with the flag off it hands straight to the operator canvas. With the flag on the form renders for any workflow -- default_view only picks which view a workflow lands on by default, not whether the form is reachable (per Form View: a form-based view for running a workflow #8011) -- and a failed load shows a neutral message.

• Shows the workflow read-only (the graph and its properties are not edited here) and offers a switch back to the operator canvas via a full page load.

• Releases the shared singleton services (graph, shared model, computing-unit connection, console, results) on destroy, so nothing left bound here follows the user to the next page.

• Registers the workflow/:id/form route (above the canvas workflow/:id route, so the trailing segment is not swallowed), making the page reachable at its real URL. The page still guards itself, so nothing is exposed while the flag is off.

It also adds workflow-form.spec-harness.ts, the shared mock/factory the later page slices build their specs from; each slice extends it with the dependencies it introduces.

Screenshot

Screenshot

The read-only page shell at /user/workflow/:id/form (behind the flag, a form-default workflow). Since the spec deliberately skips template rendering, this is the rendered-page evidence for the view.

Any related issues, documentation, discussions?

Closes #8018.

Part of the Form View feature (parent issue #8011); builds on the merged #8013/#8014/#8015/#8016. Independent of #8318.

How was this PR tested?

Unit tests (vitest): workflow-form.component.spec.ts (7 tests, direct construction) plus workflow-form.rendered.spec.ts (4 TestBed-rendered tests that stand the real template up -- only the two child icons are blanked, so the page's own template renders as shipped). The page component injects ~14 services and heavy child components, so the direct spec constructs it with the shared harness's mocks; the rendered spec covers the template through TestBed. The component (61/61) and the template (31/31) are both at 100% locally. The template compiles cleanly under ng build.

Was this PR authored or co-authored using generative AI tooling?

Yes. Co-authored with Claude (Anthropic), reviewed line by line by the author before submission.

[github-actions]

Automated Reviewer Suggestions

Based on the git blame history of the changed files, we recommend the following reviewers:

• Contributors with relevant context: @Neilk1021
  You can notify them by mentioning @Neilk1021 in a comment.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 74.50980% with 26 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.97%. Comparing base (1facefb) to head (a3ed02c).
⚠️ Report is 2 commits behind head on main.

Files with missing lines	Patch %	Lines
...mponent/workflow-form/workflow-form.component.html	0.00%	25 Missing ⚠️
...component/workflow-form/workflow-form.component.ts	98.30%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #8376      +/-   ##
============================================
- Coverage     94.02%   93.97%   -0.05%     
  Complexity     4819     4819              
============================================
  Files          1202     1207       +5     
  Lines         48925    49093     +168     
  Branches       5942     5960      +18     
============================================
+ Hits          46002    46136     +134     
- Misses         1459     1486      +27     
- Partials       1464     1471       +7     

Flag	Coverage Δ		*Carryforward flag
access-control-service	81.00% <ø> (ø)		Carriedforward from 1facefb
agent-service	99.32% <ø> (ø)		Carriedforward from 1facefb
amber	89.90% <ø> (ø)		Carriedforward from 1facefb
computing-unit-managing-service	73.67% <ø> (ø)		Carriedforward from 1facefb
config-service	87.12% <ø> (ø)		Carriedforward from 1facefb
file-service	87.91% <ø> (ø)		Carriedforward from 1facefb
frontend	96.68% <74.50%> (-0.14%)	⬇️
notebook-migration-service	83.57% <ø> (ø)		Carriedforward from 1facefb
pyamber	98.41% <ø> (ø)		Carriedforward from 1facefb
workflow-compiling-service	77.19% <ø> (ø)		Carriedforward from 1facefb

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

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[yangzhang75]

/request-review @mengw15

[Copilot]

🟡 Changes recommended

The new page is unreachable without route registration, and its feature-flag and error-handling behavior must be corrected.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds the initial read-only workflow Form View shell and reusable test harness.

Changes:

• Loads Form View workflows behind a feature flag.
• Adds navigation, collaborator display, and service cleanup.
• Adds shared mocks and unit tests.

File summaries

File	Review
frontend/src/app/workspace/component/workflow-form/workflow-form.spec-harness.ts	Adds reusable test mocks and fixtures. No issues found.
frontend/src/app/workspace/component/workflow-form/workflow-form.component.ts	Implements loading, redirects, read-only state, and cleanup. Critical: the component lacks route registration. Moderate: check the feature flag before requests and avoid misreporting generic failures as access errors.
frontend/src/app/workspace/component/workflow-form/workflow-form.component.spec.ts	Tests loading, redirects, read-only behavior, and cleanup. No issues found.
frontend/src/app/workspace/component/workflow-form/workflow-form.component.scss	Styles the shell and top bar. No issues found.
frontend/src/app/workspace/component/workflow-form/workflow-form.component.html	Defines the page shell and view switch. Nit: add required visual evidence to the PR description.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 4
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[mengw15]

Two asks:

1. Please register the workflow/:id/form route here rather than in the final slice — the shell already guards it fully (flag off redirects to the canvas, and even with the flag on nothing can set default_view = FORM from the UI yet), so it exposes nothing while making this and every later slice testable at the real URL. Note it must sit above workflow/:id so the segment isn't swallowed.

2. With the route in, a screenshot (or short recording) of the shell in the description becomes cheap — and since the spec deliberately skips template rendering, it would be the review's only evidence of the rendered page, as #8318's screenshots were.

[yangzhang75]

Thanks @mengw15. Both addressed in a3ed02c:

1. Registered the workflow/:id/form route above workflow/:id in app-routing.module.ts, so the trailing segment is not swallowed. As you noted, the page guards itself (flag off, or a non-form-default workflow, redirects to the canvas), so it exposes nothing while making this and every later slice testable at the real URL.
2. Added a screenshot of the read-only shell to the description; since the spec skips template rendering, it is the rendered-page evidence for this view.

[mengw15]

Left one comment, plus a coverage ask: codecov has the patch at 74.5%, with 25 of the 26 missing lines in the template (the direct-construction specs never render it). Could you add a TestBed-rendered spec covering the template — the name/avatar row, the Canvas button actually triggering the switch, and the loading/body swap — and bring the patch as close to 100% as the v8-ignored navigation allows? That also replaces the screenshot as rendering evidence going forward.

[yangzhang75]

@mengw15 on the coverage ask: added workflow-form.rendered.spec.ts, a TestBed-rendered spec that stands the real template up (only the two child icons are blanked -- their ng-zorro dropdown/menu needs a host context this page does not set up -- so the page's own template renders as shipped). It covers the name/avatar row, the Canvas control firing the switch, the loading/body swap, the co-editor row, and the beforeunload teardown. Patch is now 100% locally on both the component (61/61) and the template (31/31); it takes over from the screenshot as the rendering evidence going forward. fcafb53.

[mengw15]

LGTM, thanks for addressing the comments