Skip to content

[#74088] Extract shared WorkPackageCardComponent and rename Backlogs components#22936

Merged
myabc merged 28 commits into
devfrom
code-maintenance/74088-backlog-sprints-component-renaming
May 5, 2026
Merged

[#74088] Extract shared WorkPackageCardComponent and rename Backlogs components#22936
myabc merged 28 commits into
devfrom
code-maintenance/74088-backlog-sprints-component-renaming

Conversation

@myabc
Copy link
Copy Markdown
Contributor

@myabc myabc commented Apr 26, 2026

Ticket

https://community.openproject.org/wp/74088
https://community.openproject.org/wp/73968 (foundations)
https://community.openproject.org/wp/71402 (foundations)

What are you trying to accomplish?

Reduce duplication in the Backlogs card-list components by extracting shared WorkPackageCardBoxComponent (with nested Header) and WorkPackageCardComponent (with nested Menu), then migrate SprintComponent and BucketComponent to compose them. Also tightens the component vocabulary: drops the redundant Backlog prefix on bucket components (already namespaced under Backlogs::), drops the New prefix on forms/dialogs that handle both create and edit, and singularises BacklogsComponent -> BacklogComponent.

Screenshots

WorkPackageCardBoxComponent

Sprints Inbox (and empty)
Screenshot 2026-04-28 at 18 46 38 Screenshot 2026-04-28 at 18 46 59

WorkPackageCardComponent

Work Package
Screenshot 2026-04-28 at 18 45 59

What approach did you choose and why?

Composition via slots, not inheritance. A single container: argument (Sprint, BacklogBucket, or nil for inbox) drives DOM ids, list ids, drop-target wiring, and per-card URLs. Slot lambdas enforce structure where it matters (empty_state, Header#menu); the header's actions slot is a typed renders_many so consumers call header.with_action_button(...) and pick up Primer::Beta::Button slot helpers directly.

The wireframe attached to WP #74088 has some naming drift relative to the current code. This PR series does not introduce a separate BucketsComponent; the future BacklogComponent continues to own the backlog header, bucket-list composition, and inbox composition.

Merge checklist

  • Maintenance steps
    • Create WorkPackageCardBoxComponent
    • Create WorkPackageCardComponent
    • Wire up SprintComponent to use WorkPackageCardBoxComponent
    • Rename BacklogBucket*Component to Bucket*Component (replaces [#73081] Rename bucket UI components #22886)
    • Rename New*Component/New*Form to *Component/*Form (per @toy's suggestion)
    • Rename BacklogsComponent to BacklogComponent
    • Wire up BucketComponent to use WorkPackageCardBoxComponent
    • Move inbox truncate-middle pagination into manual card-box rows
    • Wire up InboxComponent to use WorkPackageCardBoxComponent
  • Additional steps to make WorkPackageCardBoxComponent and WorkPackageCardComponent generic (OP 73968):
    • Replace hard-coded story points with an optional metric slot.
    • Allow some drag and drop config to be passed in.
    • Tidy up generation of DOM IDs, allowing container: to be customised.
    • Card and Card Box menu symmetry.
    • Ensure WorkPackageCardComponent supports non-deferred menus without src; consider exposing a top-level menu slot.
    • Consider a Backlogs-specific card wrapper that configures the common card with story points and future Backlogs-specific card concerns.
    • Add TODO: allow WorkPackageCardComponent to pass arguments through to WorkPackages::InfoLineComponent.
    • Move remaining Backlogs row behavior out of OpenProject::Common::WorkPackageCardBoxComponent::Item, excluding drag and drop cleanup tracked separately.
    • Consider whether the backlogs--story Stimulus controller can move out of the common item in this PR.
    • Move Backlogs-specific responsive metric/card CSS out of the common card stylesheet (follow-up [#74683] Simplify story point metric #23061).
  • Addressing feedback
    • Param handling (e.g. show_all_backlog) and avoiding capture in templates.
    • show_more handling: decide whether truncation/show-more belongs in a Backlogs-specific wrapper or an intermediate specialised component.
    • Check WP 72945 impact: common card box header should not depend on Backlogs fold preferences long-term.
  • Validation
    • Added/updated tests
    • Added/updated documentation in Lookbook (previews for the two public extracted components)
    • Tested major browsers (Chrome, Firefox, Edge, ...)
    • Manual smoke test on Backlog & Sprints page — sprint render, drag, kebab menu, start/finish actions, empty state, story points
    • Feature specs pass: sprint_list_spec.rb, drag_in_sprint_spec.rb, story_points_spec.rb

Comment thread modules/backlogs/spec/components/backlogs/work_package_card_component_spec.rb Outdated
Comment thread modules/backlogs/spec/components/backlogs/work_package_card_component_spec.rb Outdated
@myabc myabc requested a review from Copilot April 26, 2026 16:04
@myabc myabc changed the title Code maintenance/74088 backlog sprints component renaming [#74088] Rename components on "Backlog and Sprints" page Apr 26, 2026
@myabc myabc added DO NOT MERGE ruby Pull requests that update Ruby code labels Apr 26, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces new Backlogs ViewComponents intended to standardize rendering of work package “cards” and their kebab action menus in the Backlogs UI.

Changes:

  • Add Backlogs::WorkPackageCardComponent plus component spec coverage for URL/drag/drop/menu derivation.
  • Extract a reusable Backlogs::CardMenuComponent (ActionMenu show button + deferred fragment loading) with spec coverage.
  • Add an English i18n key for the new card_menu_component label.

Reviewed changes

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

Show a summary per file
File Description
modules/backlogs/app/components/backlogs/work_package_card_component.rb New component providing row args (DnD + stimulus data) and URL derivation based on parent (sprint/bucket/inbox).
modules/backlogs/app/components/backlogs/work_package_card_component.html.erb New card layout template rendering info line, points, subject, and extracted card menu.
modules/backlogs/app/components/backlogs/card_menu_component.rb New extracted component wrapping Primer ActionMenu setup (menu_id/src/classes).
modules/backlogs/app/components/backlogs/card_menu_component.html.erb New extracted template rendering the kebab show button with accessible label.
modules/backlogs/spec/components/backlogs/work_package_card_component_spec.rb Component specs for card content, row args, draggability, URL derivation, and all=1 param propagation.
modules/backlogs/spec/components/backlogs/card_menu_component_spec.rb Component specs asserting ActionMenu markup, stable ids, deferred fragment src, and label.
modules/backlogs/config/locales/en.yml Adds backlogs.card_menu_component.label_actions.

@myabc myabc force-pushed the code-maintenance/74088-backlog-sprints-component-renaming branch 2 times, most recently from 2be6744 to afba3c2 Compare April 27, 2026 08:10
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.html.erb Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 4 comments.

Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
@myabc myabc force-pushed the code-maintenance/74088-backlog-sprints-component-renaming branch from d0f5493 to 27e93f2 Compare April 27, 2026 11:33
@myabc myabc requested a review from Copilot April 27, 2026 11:49
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

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

Comment thread modules/backlogs/spec/support/pages/backlog.rb
Comment thread modules/backlogs/config/locales/en.yml Outdated
@myabc myabc force-pushed the code-maintenance/74088-backlog-sprints-component-renaming branch 3 times, most recently from 938af2e to 3441a3e Compare April 28, 2026 12:19
@myabc myabc requested a review from Copilot April 28, 2026 13:39
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

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

Comment thread modules/backlogs/spec/support/pages/backlog.rb
Comment thread modules/backlogs/app/components/backlogs/sprint_component.rb Outdated
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
Comment thread modules/backlogs/app/components/backlogs/work_package_card_box_component.rb Outdated
myabc added 2 commits May 1, 2026 14:54
Add readers for the sprint form component state and use them from the
template and helper methods instead of reading instance variables
directly. Cover the reader and rendering behavior with a focused
component spec.
Treat card box containers as Rails dom_target sources so shared card
boxes can accept symbols, strings, model classes, and model instances
without Backlogs-specific ID branching.

Move Backlogs drag-and-drop target IDs into explicit caller-provided
configuration, keeping the existing controller protocol while omitting
generic DnD data for consumers that do not opt in.

https://community.openproject.org/wp/73968
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 79 out of 83 changed files in this pull request and generated 2 comments.

Comment thread app/components/open_project/common/work_package_card_box_component.rb Outdated
myabc added 2 commits May 1, 2026 19:11
Extracts the BorderBox row arguments into a row-bridge object
(`WorkPackageCardBoxComponent::Item`) so the box can build rows without
forcing the visual card to render row-level concerns. The visual
`WorkPackageCardComponent` constructor narrows to
`(work_package:, menu_src:)`; in-repo callers updated.

Adds a polymorphic slot API (`with_work_package_item`,
`with_empty_item`) modeled on `Primer::Alpha::FileTreeView`, plus a
public `#build_item` for off-box callers. Renames the URL pass-through
to a generic `params:` kwarg, leaving Backlogs all-state handling at the
call sites.

https://community.openproject.org/wp/73968
Remove the story-points display from the shared work package card and
expose a generic metric slot instead. Backlogs now opts into that slot
with a small story-points component when rendering sprint, bucket, and
inbox cards.

https://community.openproject.org/wp/73968
myabc added 5 commits May 1, 2026 20:23
…ent-renaming

# Conflicts:
#	modules/backlogs/app/components/backlogs/backlog_bucket_item_component.rb
#	modules/backlogs/app/components/backlogs/inbox_item_component.rb
#	modules/backlogs/app/components/backlogs/sprint_component.rb
#	modules/backlogs/spec/components/backlogs/backlog_bucket_item_component_spec.rb
#	modules/backlogs/spec/components/backlogs/inbox_item_component_spec.rb
#	modules/backlogs/spec/components/backlogs/sprint_component_spec.rb
Move Backlogs-specific item/card concerns behind Backlogs components
while keeping the common card box API focused on generic item
rendering. The common item keeps generic draggability hooks, while
Backlogs owns story points, menu URLs, and story controller row data.

https://community.openproject.org/wp/73968
Expose a top-level menu slot on the common work package card so card
and card-box callers can configure action menus in the same style. Keep
menu_src as a compatibility shortcut for existing deferred Backlogs
menus while allowing inline non-deferred menu items through the slot.

https://community.openproject.org/wp/73968
Forward metric slot calls from the Backlogs card wrapper to the wrapped
common card so Backlogs card box items keep the same customization
surface as generic items. Keep story points as the default metric when
callers do not provide their own metric slot.

https://community.openproject.org/wp/73968
Marks the hard-coded `InfoLineComponent.new(work_package:)` call in
the common card template as the integration point for InfoLine
variants and status presentation requested by WP 73089. Defers the
actual argument forwarding so this PR keeps a narrow scope.

https://community.openproject.org/wp/73968
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 89 out of 93 changed files in this pull request and generated no new comments.

The common card box now exposes a generic `item` slot via `with_item`
for manually composed rows. Automatic rendering still only builds
work package items from the `work_packages:` argument.

The Backlogs inbox now owns the truncate-middle show-more row, its
route, Turbo frame, and draggable marker.

https://community.openproject.org/wp/73968
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 89 out of 93 changed files in this pull request and generated no new comments.

Copy link
Copy Markdown
Contributor

@dombesz dombesz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, left a few minor comments only. Feel free to merge, once the specs are also passing.

def work_package_count
@work_package_count ||= work_packages.size
def before_render
content
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the role of this method call is not trivial, I would place a comment regarding its function.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have this pattern in a few places. I agree it's non-obvious. Perhaps something for the lookbook?

end

def cards
@cards ||= visible_work_packages.map do |work_package|
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can answer the following question:

  • do we want to even keep this truncation pattern?

AFAIK, yes. In future iterations of the page, we will possibly use pagination, but it's not in our immediate priority.

Comment thread app/components/open_project/common/work_package_card_box_component/empty_item.rb Outdated
Comment thread lookbook/previews/open_project/common/work_package_card_component_preview.rb Outdated
container:,
work_packages: [],
drag_and_drop: nil,
item_component_klass: Item,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can default to the Backlogs::WorkPackageCardBoxItemComponent.

Comment thread modules/backlogs/app/components/backlogs/story_points_component.rb
@myabc myabc mentioned this pull request May 5, 2026
3 tasks
myabc added 2 commits May 5, 2026 13:26
Reuse the generic content item bridge for empty card box rows and keep
only the empty-row data override.

https://community.openproject.org/wp/73968
Removes dependency on Backlogs-specific `StoryPointsComponent`.
@myabc myabc merged commit 3f3ca4b into dev May 5, 2026
16 of 17 checks passed
@myabc myabc deleted the code-maintenance/74088-backlog-sprints-component-renaming branch May 5, 2026 13:14
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

maintenance ruby Pull requests that update Ruby code

Development

Successfully merging this pull request may close these issues.

4 participants