[#73688] Spike porting Angular boards to React (with Primer React)#22666
Draft
[#73688] Spike porting Angular boards to React (with Primer React)#22666
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds `@primer/react` ^38.14.0 for use in React-based UI components rendered via the Angular-to-React bridge. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a "Configure" menu item to status action board columns that opens a Primer `SelectPanel` modal for selecting which statuses a column displays. Uses a new Angular-to-React bridge (`ReactBridge`) to render React components within the Angular app, wrapped in Primer's `ThemeProvider`. Key pieces: - `ReactBridge.openDialog()` — Promise-based helper that mounts a React component into a temporary DOM container and resolves on submit/cancel - `PrimerProviderWrapper` — applies OpenProject's light/dark theme to Primer components - `StatusMappingDialog` — `SelectPanel` with multi-select, search, and color-coded status items - `BoardStatusMappingService` — Angular service that loads available statuses, opens the dialog, and persists filter changes to the board Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a `boards_react` feature flag that toggles between the existing Angular board view and a new React-based board view. When the flag is active, the `show` action loads the `Boards::Grid` model and renders with the base layout. The show template conditionally renders a `#react-board-root` mount div with data attributes for the board configuration. When the flag is inactive (default), the existing Angular behavior is preserved unchanged.
BoardApp root with QueryClient + Primer providers. BoardContext for board-level state (id, project, permissions). Components: BoardCanvas, BoardColumn, BoardCard, CardList, ColumnHeader, BoardToolbar, BoardFilterBar, DropIndicator, AddCardAction, AddColumnAction. Includes Pragmatic DnD integration for card dragging and live-region accessibility.
Self-initializing entrypoint mounts BoardApp onto #react-board-root. Handles DOMContentLoaded and Turbo Drive lifecycle. Imported from main.ts as side-effect.
The query API returns work packages under
`_embedded.results._embedded.elements`, not at a top-level
`results` key. Updates `QueryResult` type and `BoardColumn`
to read from the correct path.
Also fixes filter parsing to handle HAL filter objects
(with `_links.filter.href` and `_links.values[].href`)
instead of the simple `{status_id: ...}` format used in
widget options.
myabc
changed the base branch from
dev
to
spike/boards-react-column-status-mapping-board-cards
myabc
changed the base branch from
spike/boards-react-column-status-mapping-board-cards
to
spike/boards-react-column-status-mapping
myabc
force-pushed
the
spike/boards-primer-react
branch
from
599e24d to
ea3ee37
Compare
myabc
added
experiment
javascript
Deploying openproject with ⚡ PullPreview
|
myabc
changed the title
myabc
changed the title
myabc
changed the title
myabc
changed the base branch from
spike/boards-react-column-status-mapping
to
dev
Tighten the supported React board subset to free boards and status action boards, with Angular fallback for the rest. Fix project scoping, persisted filters, Turbo mounting, and the React board DnD/state plumbing. Add focused frontend coverage plus controller and supported-path smoke specs. https://community.openproject.org/wp/73688
Normalize board query ids, stop column polling, and align the React API client with OpenProject's authenticated request headers. Also surface backend workflow errors through the existing toast service so invalid status transitions are visible to users. https://community.openproject.org/wp/73688
Bring the React board card styling closer to the Figma direction, reuse the existing type highlight classes, and avoid duplicating status text when no assignee is present. https://community.openproject.org/wp/73688
myabc
force-pushed
the
spike/boards-primer-react
branch
from
472e688 to
abd429b
Compare
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket
https://community.openproject.org/wp/73688
What are you trying to accomplish?
This spike moves the boards UI toward Primer React, but the intended shippable subset is intentionally narrow for now:
freeboards andactionboards withattribute == "status".Other board types such as version, assignee, subproject, and subtasks should continue to use the existing Angular path until their move semantics and UI behavior are ported deliberately.
Screenshots
What approach did you choose and why?
The approach is to keep the existing feature flag, add an explicit React support boundary, and harden the supported subset against the current board behavior instead of broadening support prematurely.
That means reusing the existing board semantics for filters, query ordering, status transitions, and smoke-test selectors, while falling back to Angular for unsupported board types. The goal is to make the spike safe and testable now, and leave broader board-type parity as a follow-up pass built on the same abstractions.
Merge checklist