feat(workflow-form): Form View page shell, load, and the shared spec harness by yangzhang75 · Pull Request #8376 · apache/texera

yangzhang75 · 2026-09-03T04:58:01Z

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

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 · 2026-09-03T04:58:18Z

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 · 2026-09-03T05:05:20Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.04%. Comparing base (1cbe857) to head (c23e4cd).

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #8376      +/-   ##
============================================
+ Coverage     94.03%   94.04%   +0.01%     
  Complexity     4821     4821              
============================================
  Files          1204     1207       +3     
  Lines         48991    49090      +99     
  Branches       5956     5959       +3     
============================================
+ Hits          46067    46166      +99     
  Misses         1458     1458              
  Partials       1466     1466

Flag	Coverage Δ		*Carryforward flag
access-control-service	`81.00% <ø> (ø)`		Carriedforward from 1cbe857
agent-service	`99.32% <ø> (ø)`		Carriedforward from 1cbe857
amber	`89.92% <ø> (ø)`		Carriedforward from 1cbe857
computing-unit-managing-service	`73.67% <ø> (ø)`		Carriedforward from 1cbe857
config-service	`87.12% <ø> (ø)`		Carriedforward from 1cbe857
file-service	`87.91% <ø> (ø)`		Carriedforward from 1cbe857
frontend	`96.80% <100.00%> (+0.01%)`	⬆️
notebook-migration-service	`83.57% <ø> (ø)`		Carriedforward from 1cbe857
pyamber	`98.47% <ø> (ø)`		Carriedforward from 1cbe857
workflow-compiling-service	`77.19% <ø> (ø)`		Carriedforward from 1cbe857

*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 · 2026-09-03T22:49:16Z

/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:

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.
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 · 2026-09-04T03:43:51Z

Thanks @mengw15. Both addressed in a3ed02c:

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.
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.

…harness The read-only shell of the Form View page: behind the feature flag it loads the workflow the URL names, redirects to the operator canvas when the workflow does not open in the form (or the flag is off), shows it read-only, hands back to the canvas, and releases the shared singleton services on the way out. The title bar's rename/save, the read-only preview, the inputs, running and results are added on top by later PRs. Also adds the shared spec harness (workflow-form.spec-harness.ts) these specs build the component from; later slices extend it with the mocks they introduce. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

yangzhang75 · 2026-09-04T17:44:09Z

@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

…apache#8391) ### What changes were proposed in this PR? Building on the Form View page shell (apache#8376), this PR adds the title bar and the save it needs (parent issue apache#8011). Frontend only. * The workflow name, renamable inline exactly as on the operator canvas, with the same "Saved at ..." state beside it. Both follow the workflow's metadata live through the same `workflowMetaDataChanged` subscription the canvas uses, so a rename or save (this page's own, or a co-editor's) refreshes the name, its width, and the saved-at state from one place, and the two views never drift apart. * The debounced save both views share, so an edit in one view is not lost in the other. It saves only the workflow this page opened (never spawning a stray "Untitled workflow" from a payload with no id), preserves a position for every operator (a partial map makes a workflow unopenable), saves once more on the way out and before handing back to the canvas, and reports a failed save rather than losing it silently. * Locks the workflow to read-only on this page (`disableWorkflowModification`): the graph and its properties are shown, not edited. A later PR's authoring mode makes them editable with write access. The read-only preview, the inputs, running and results are added by later PRs. #### Screenshot The title bar (renamable name, "Saved at ..." state, the Canvas / Form View switch) on the read-only page: <img width="1280" height="86" alt="Screenshot 2026-09-03 at 11 18 10 PM" src="https://github.com/user-attachments/assets/b1fa29a8-8b08-4b0c-bfda-51e62d8628f6" /> ### Any related issues, documentation, discussions? Part of the Form View feature (parent issue apache#8011); stacked on apache#8376 (the page shell). Until apache#8376 merges, this PR's diff includes that PR's commit as well. close apache#8019 ### How was this PR tested? Unit tests (vitest): `workflow-form.component.spec.ts` (21 tests). As with the shell, the component injects heavy services and child components, so its spec constructs it directly with the shared harness's mocks rather than through TestBed; template rendering is therefore not exercised, but the component and the harness are at 100% of the TypeScript lines this PR adds. 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. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

### What changes were proposed in this PR? Building on the title-bar frame (apache#8391), this PR adds the collapsible read-only **workflow preview** to the Form View, and the read-only support the embedded editor needs (parent issue apache#8011). Frontend only. * A "Workflow" strip on the page that opens to show the same workflow editor and mini-map the operator canvas uses, embedded here read-only. It is built the first time the reader opens the strip (a frame after the strip is revealed, so JointJS measures a real size rather than a zero-sized one that misroutes links), then centred. * `structureLocked` on the shared `workflow-editor`: a mode that locks the paper's own interactions (dragging, linking, the editor's delete/cut/port commands) without touching the workflow-modification lock the property panel rides on, and suppresses the shared cursor so a read-only view never broadcasts one. It defaults to `false`, so the operator canvas is unchanged. A container `ResizeObserver` keeps the paper sized to its own container (the strip toggles it via `display:none`, which the window-resize handler never hears), and operators already in the graph when this late-mounting editor appears are repainted so a completed run's colours are not missing. * With the flag on the form renders for any workflow, so the preview shows the graph read-only regardless of the workflow's default view. The inputs, running and results are added on top of this by later PRs. #### Screenshot The workflow preview open on the read-only page (the "Workflow" strip expanded to the embedded editor + mini-map): <img width="1247" height="543" alt="Screenshot 2026-09-04 at 1 25 22 PM" src="https://github.com/user-attachments/assets/bf5ce08e-6df9-4c68-9629-6cff55f3b491" /> ### Any related issues, documentation, discussions? Closes apache#8020. Part of the Form View feature (parent issue apache#8011). Builds on the now-merged page shell (apache#8376) and title bar (apache#8391); this PR's diff is only its own change on current main. ### How was this PR tested? Unit tests (vitest): `workflow-form.component.spec.ts` (direct construction) and `workflow-form.rendered.spec.ts` (TestBed-rendered template) cover the strip's open/build/close/walk-away behaviour and the rendered bar; the shared `workflow-editor.component.spec.ts` (106 tests) is unchanged and green, confirming the `structureLocked` split leaves the canvas untouched. The page component is at 100% of its TypeScript, and every line added to `workflow-editor` is covered. Three template lines are not exercised: the `<texera-workflow-editor>` and `<texera-mini-map>` embed behind `*ngIf`, which need a real JointJS paper jsdom cannot provide (the editor's own paper code is v8-ignored for the same reason). `ng build` is clean. ### 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. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

github-actions Bot assigned yangzhang75 Sep 3, 2026

github-actions Bot added the frontend Changes related to the frontend GUI label Sep 3, 2026

yangzhang75 force-pushed the formview-pr6 branch 4 times, most recently from 69507ad to ea2e7ae Compare September 3, 2026 22:46

yangzhang75 marked this pull request as ready for review September 3, 2026 22:49

github-actions Bot requested a review from mengw15 September 3, 2026 22:49

mengw15 requested a balanced review from Copilot September 3, 2026 22:56

Copilot started reviewing on behalf of mengw15 September 3, 2026 22:57 View session

Copilot AI reviewed Sep 3, 2026

View reviewed changes

mengw15 reviewed Sep 3, 2026

View reviewed changes

yangzhang75 force-pushed the formview-pr6 branch from ea2e7ae to a3ed02c Compare September 4, 2026 03:18

yangzhang75 requested a review from mengw15 September 4, 2026 04:07

yangzhang75 mentioned this pull request Sep 4, 2026

feat(workflow-form): Form View title bar, save, and modification lock #8391

Merged

mengw15 reviewed Sep 4, 2026

View reviewed changes

Comment thread frontend/src/app/workspace/component/workflow-form/workflow-form.component.ts Outdated

yangzhang75 force-pushed the formview-pr6 branch from a3ed02c to fcafb53 Compare September 4, 2026 17:34

yangzhang75 requested a review from mengw15 September 4, 2026 17:51

Merge branch 'main' into formview-pr6

c23e4cd

mengw15 approved these changes Sep 4, 2026

View reviewed changes

mengw15 enabled auto-merge September 4, 2026 17:59

yangzhang75 mentioned this pull request Sep 4, 2026

feat(workflow-form): embed the read-only workflow preview #8429

Merged

mengw15 added this pull request to the merge queue Sep 4, 2026

Merged via the queue into apache:main with commit ebc65b5 Sep 4, 2026
22 checks passed

mengw15 mentioned this pull request Sep 17, 2026

fix(frontend): make a result cell's download work off the canvas #8539

Open

Navigation Menu

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

feat(workflow-form): Form View page shell, load, and the shared spec harness#8376
mengw15 merged 2 commits into
apache:mainfrom
yangzhang75:formview-pr6

yangzhang75 commented Sep 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 3, 2026 •

edited

Loading

Uh oh!

codecov-commenter commented Sep 3, 2026 •

edited

Loading

Uh oh!

yangzhang75 commented Sep 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mengw15 left a comment

Uh oh!

yangzhang75 commented Sep 4, 2026

Uh oh!

mengw15 left a comment

Uh oh!

Uh oh!

yangzhang75 commented Sep 4, 2026

Uh oh!

mengw15 left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

yangzhang75 commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changes were proposed in this PR?

Screenshot

Screenshot

Any related issues, documentation, discussions?

How was this PR tested?

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

Uh oh!

github-actions Bot commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Automated Reviewer Suggestions

Uh oh!

codecov-commenter commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

yangzhang75 commented Sep 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mengw15 left a comment

Choose a reason for hiding this comment

Uh oh!

yangzhang75 commented Sep 4, 2026

Uh oh!

mengw15 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yangzhang75 commented Sep 4, 2026

Uh oh!

mengw15 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yangzhang75 commented Sep 3, 2026 •

edited

Loading

github-actions Bot commented Sep 3, 2026 •

edited

Loading

codecov-commenter commented Sep 3, 2026 •

edited

Loading