Implementation/74970 backlogs pragmatic dnd

[myabc]

Note

This PR is based off #23074. Please review that PR first.

Ticket

https://community.openproject.org/wp/74970

What are you trying to accomplish?

Migrate Backlogs drag and drop to Pragmatic Drag and Drop while preserving the existing Backlogs workflows for inbox items, sprint items, and backlog buckets.

Screenshots

What approach did you choose and why?

Working checklist

• Create child implementation branch for the Backlogs-only Pragmatic DnD migration
• Port Backlogs item dragging to Pragmatic Drag and Drop
• Add Selenium-native drag-and-drop feature helper coverage
• Add diagnostic native drag probe for Selenium/WebDriver behavior
• Cover existing Backlogs DnD flows for inbox, sprint, and backlog bucket lists
• Add failing feature specs for post-Turbo-morph DnD in inbox, sprint, and bucket lists
• Instrument failing feature specs to identify the post-morph DnD lifecycle failure
• Add a Vitest Stimulus integration spec for Turbo morph lifecycle behavior if instrumentation confirms the reproduction
• Handle picking up an item and dropping (without moving)
• Fix Stimulus/Pragmatic DnD lifecycle handling after Turbo morphs
• Re-run bundle exec rspec modules/backlogs/spec/features/work_packages
• Re-run focused frontend tests for Backlogs Stimulus controllers
• Manually smoke-test Backlogs drag and drop after Turbo updates
• Investigate behavior on server error (e.g. rollback)
• Investigate optimistic updates

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[github-actions]

Deploying openproject with ⚡ PullPreview

Field	Value
Latest commit	10fa291
Job	deploy
Status	✅ Deploy successful
Preview URL	https://pr-23218-74970-backlogs-p-ip-157-90-247-104.my.opf.run:443

View logs

[Copilot]

Pull request overview

This PR migrates Backlogs drag-and-drop from the legacy approach to Atlassian’s Pragmatic Drag and Drop, moving Stimulus wiring onto the inner work package card and introducing new frontend helpers/controllers to compute drop targets and ordering.

Changes:

• Introduces Pragmatic DnD-based Stimulus controllers/helpers for Backlogs item dragging and list drop targeting.
• Moves Backlogs-specific data attributes (story + draggable item wiring) from BorderBox rows to the inner work package card, and updates Backlogs views/components accordingly.
• Adds Atlaskit Pragmatic DnD dependencies and updates Ruby/JS specs to reflect the new DOM + data attributes.

Reviewed changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
spec/components/open_project/common/work_package_card_component_spec.rb	Adds coverage for forwarding system arguments to the root card element.
modules/backlogs/spec/support/pages/backlog.rb	Updates test selectors to target the new draggable item data attribute on the card.
modules/backlogs/spec/requests/backlogs/backlog_spec.rb	Adds assertions for Backlogs controller wiring and list targets in rendered backlog HTML.
modules/backlogs/spec/components/backlogs/work_package_card_list_item_component_spec.rb	Adjusts expectations to verify Backlogs Stimulus wiring is on the card, not the row.
modules/backlogs/spec/components/backlogs/work_package_card_list_component_spec.rb	Updates list/component specs for new target attributes and card-level data wiring.
modules/backlogs/spec/components/backlogs/story_points_component_spec.rb	Adds expectation around wrapper positioning for SR-only label placement.
modules/backlogs/spec/components/backlogs/sprint_component_spec.rb	Updates sprint DnD expectations to use Backlogs list targets + card-level draggable attributes.
modules/backlogs/spec/components/backlogs/inbox_component_spec.rb	Updates inbox drop-target assertions to new Backlogs list target attributes.
modules/backlogs/spec/components/backlogs/bucket_component_spec.rb	Updates bucket drop-target + card wiring assertions for new DnD approach.
modules/backlogs/app/views/backlogs/backlog/show.html.erb	Removes legacy content_controller wiring for Backlogs.
modules/backlogs/app/views/backlogs/backlog/_backlog_list.html.erb	Replaces legacy generic-drag-and-drop wiring with data-controller="backlogs" root.
modules/backlogs/app/components/backlogs/work_package_card_list_item_component.rb	Moves Backlogs Stimulus wiring/data to the inner card; adds draggable card args.
modules/backlogs/app/components/backlogs/work_package_card_list_component.rb	Changes list target data attributes to data-backlogs-target="list" + id.
modules/backlogs/app/components/backlogs/work_package_card_component.rb	Forwards system arguments to the shared/common work package card.
modules/backlogs/app/components/backlogs/inbox_component.html.erb	Updates inbox list container data attributes to match Backlogs controller targets.
frontend/src/stimulus/controllers/dynamic/backlogs/item.controller.ts	Adds a Stimulus controller to make individual cards draggable + item drop targets.
frontend/src/stimulus/controllers/dynamic/backlogs/item.controller.spec.ts	Adds unit tests for item controller state rendering + preventUnhandled integration.
frontend/src/stimulus/controllers/dynamic/backlogs/drag-and-drop.ts	Adds helper utilities for resolving targets and computing prev_id for move requests.
frontend/src/stimulus/controllers/dynamic/backlogs/drag-and-drop.spec.ts	Adds unit tests for drag-and-drop helper logic (target resolution, ordering).
frontend/src/stimulus/controllers/dynamic/backlogs.controller.ts	Replaces HAL-events refresh behavior with Pragmatic DnD monitoring + move requests.
frontend/src/global_styles/primer/_overrides.sass	Updates styles for new drag/drop indicators and Box-card dragging visuals.
frontend/package.json	Adds Atlaskit Pragmatic DnD dependencies.
frontend/package-lock.json	Locks Atlaskit Pragmatic DnD dependencies and transitive packages.
app/components/open_project/common/work_package_card_component.rb	Allows forwarding system arguments; ensures Box-card class on root; adds card_arguments.
app/components/open_project/common/work_package_card_component.html.erb	Uses card_arguments to apply forwarded system arguments to the root element.

Files not reviewed (1)

• frontend/package-lock.json: Language not supported