[DREAM-840] Show document types in a table by myabc · Pull Request #25468 · opf/openproject

myabc · 2026-09-18T20:46:01Z

Note

This PR is stacked on/depends on PR #25467 (DREAM-789); merge that first.

Ticket

https://community.openproject.org/wp/DREAM-840 (part of DREAM-837)

What are you trying to accomplish?

Replace the bespoke grid in document-type administration with the shared OpPrimer::BorderBoxTableComponent, providing table semantics, column headers, and an accessible table name while retaining drag-and-drop and move-menu reordering.

What approach did you choose and why?

Add document-type table and row components with the existing Type and Documents columns; remove the old item component and grid stylesheet.
Keep the sortable root on the index wrapper and wire the table’s rows for dragging, preserving the existing morph boundary and anchor-based move endpoint.
Retain Edit, the shared Move submenu, async Delete, and the existing empty-state text. Add coverage for two consecutive drags across a completed morph.
Drive the enumeration admin feature specs (priorities, time entry activities, document types) through a shared Pages::Admin::EnumerationList page object, subclassed per list, instead of a helper mixin.

The Documents count column now hides below the shared table’s md breakpoint (768px), rather than the old grid’s sm breakpoint (544px).

This PR covers document-type table presentation. Shared sortable-table integration is tracked separately in DREAM-838.

Follow-ups

OP-20322 / [OP-20322] Keep table row actions on screen #25581): on phone-sized screens a long name pushes the row action menu off screen. Pre-existing in the shared table's mobile grid (Statuses shows it on dev); fixed there, this PR inherits it.
DREAM-858 / [DREAM-858] Index Border Box Table rows for ARIA #25584: expose aria-rowindex / aria-rowcount on Border Box Table rows. Once it lands, the feature spec's local position: filter on the :row selector (spec/support/capybara/additional_accessible_selectors.rb) and Pages::Admin::EnumerationList#expect_order switch to the stock rowindex: filter.

Screenshots

Same fixtures in both columns: a long default type name, a type with 12 documents, a plain type. Left = old bespoke grid (base branch), right = shared Border Box Table (this PR).

Desktop, 1280 px. The old grid clipped the Default label next to a long name; the table truncates the name and keeps the label.

Desktop with the row action menu open, 1280 px.

Tablet, 700 px. The old grid cut the long name and overlapped it with the count; the table shows the full name and label but hides the Documents column below the md breakpoint (768 px), where the old grid hid it only below sm (544 px).

Phone, 400 px.

AI involvement

Collaborative – AI generated a substantial part of the code; I reviewed and understand every line.

Merge checklist

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

myabc · 2026-09-24T12:41:21Z

+
+        def name
+          flex_layout(align_items: :center) do |flex|
+            flex.with_column(mr: 2) { drag_handle }


@lwassermann while this is OK for now, I'd prefer to see BorderBoxRowComponent support rendering its own drag handle.

myabc · 2026-09-24T14:49:03Z

@opf/communicator some open questions about the responsive behaviour (see also screenshots above):

Tablet (544 to 767px) loses the Documents count. Accept, or add it to mobile_columns so it stacks under the name everywhere?
Merge order with [OP-20322] Keep table row actions on screen #25581. Wait for the phone overflow fix and rebase, or merge [DREAM-840] Show document types in a table #25468 first and accept the window where long names push the row menu off screen on phones?
Truncated long names on desktop. Ellipsis with no tooltip or title. Accept, or add a hover title on the name link?

github-actions · 2026-09-24T17:39:14Z

Warning

Flaky specs

rspec ./modules/overviews/spec/features/project_description_widget_spec.rb[1:1:1:1:1]
rspec ./spec/features/users/invite_user_modal/invite_user_modal_spec.rb[1:3:1:1:3:1:1]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #25468, linked for reference only):

- `rspec ./modules/overviews/spec/features/project_description_widget_spec.rb[1:1:1:1:1]`
- `rspec ./spec/features/users/invite_user_modal/invite_user_modal_spec.rb[1:3:1:1:3:1:1]`

Treat this as a standalone task, unrelated to PR #25468. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25468 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.

HDinger

Lgtm 👍
Regarding the open questions:

Tablet (544 to 767px) loses the Documents count. Accept, or add it to mobile_columns so it stacks under the name everywhere?

I'd vote for not showing the count on mobile but maybe @opf/communicator have a different opinion here? This is however not a blocker for me.

Merge order with #25581. Wait for the phone overflow fix and rebase, or merge #25468 first and accept the window where long names push the row menu off screen on phones?

The other has been approved, so this issue will be fixed once both are merged. The order is not too important imho.

Truncated long names on desktop. Ellipsis with no tooltip or title. Accept, or add a hover title on the name link?

We usually do not show a tooltip in these cases. The full name will be displayed once you click on it. But I'd leave the final decision to the communicators. In any case, this is also not a blocker for me.

The document type list composed its own grid on top of a plain border box, so its columns carried no table semantics and the sortable wiring sat on markup this screen alone defined. The shared table supplies both and lets the bespoke grid and its stylesheet go. https://community.openproject.org/wp/DREAM-840

The table changes the drag topology: the row is its own preview and the rows container is selected explicitly, while the list and item elements are morphed by the response to every move. A second drag after a completed morph is what proves the re-registration still holds. https://community.openproject.org/wp/DREAM-840

Replaces the EnumerationAdminHelpers mixin with a page object, Pages::Admin::EnumerationList, that priorities, time entry activities and document types subclass with their path, list selector, row selector and action button label. The specs stop redefining helper methods per file, and the drag helper lives in one place. https://community.openproject.org/wp/DREAM-840

github-actions · 2026-09-25T08:18:42Z

Warning

Flaky specs

rspec ./modules/gantt/spec/features/timeline/timeline_dates_spec.rb[1:2:1]
rspec ./spec/features/projects/settings/work_package_types_spec.rb[1:7]

🤖 Ask Copilot to investigate

Copy the prompt below into a new comment on this PR to delegate the investigation to GitHub Copilot. It will look into the flakiness and open a separate pull request with you as reviewer.

@copilot The following spec(s) are flaky in CI (first seen on PR #25468, linked for reference only):

- `rspec ./modules/gantt/spec/features/timeline/timeline_dates_spec.rb[1:2:1]`
- `rspec ./spec/features/projects/settings/work_package_types_spec.rb[1:7]`

Treat this as a standalone task, unrelated to PR #25468. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #25468 or reuse that branch.

Follow the playbook in docs/development/testing/handling-flaky-tests/README.md to find the root cause and fix the underlying race — do not skip, delete, or weaken the spec to make it pass; disabling is a last resort per the playbook, and only with a bug ticket. Verify the fix by running the spec(s) repeatedly (e.g. `script/bulk_run_rspec --run-count 10`).

If you cannot reproduce the flake or are not confident in a fix after reasonable investigation, do not fabricate a change or skip the spec to force CI green. Instead, leave the pull request in draft and document what you tried, the suspected cause, and any leads in its description, then assign @myabc to take over.

Once the fix is verified, title the PR after the spec(s) it fixes, and use the PR description to explain the root cause, how the change resolves it, and the before/after results. Label the PR `flaky-spec`, assign @myabc, and request a review from @myabc.
On every commit, set @myabc as the sole co-author with a `Co-authored-by:` trailer (use their GitHub no-reply email so it links to their account), so it is traceable who dispatched the fix.

github-actions · 2026-09-25T13:03:05Z

Deploying openproject with ⚡ PullPreview

Field	Value
Latest commit	`245904d`
Job	`deploy`
Status	✅ Deploy successful
Preview URL	https://pr-25468-dream-840-documen-ip-128-140-89-31.my.opf.run:443

View logs

akabiru

Thanks for making the changes, Alex! They look good to me and I agree that we can leave out the documents count on mobile. Some refinement notes for your consideration. 👍🏾

akabiru · 2026-09-25T17:28:52Z


-        def item_component_class
-          ::Documents::Admin::DocumentTypes::ItemComponent
+        def wrapper_data_attributes


🍊 This root wiring and the move URL template are now a copy of Admin::Enumerations::IndexComponent, comment included, so a new outlet or renamed value has to land in both. Worth a small shared module that both include, with each defining its own move_url_template? Fine as a follow-up.

I'd prefer to handle this as a follow-up. It could be done as part of #24669 (DREAM 805) / DREAM-838. / @HDinger

Brings back the documents-count test selector the old template had, so the feature spec no longer finds the count through its column index and keeps working when columns are added or reordered. The row component spec locates the cell by its column class for the same reason. https://community.openproject.org/wp/DREAM-840

Gives the blank state the alert icon the statuses table and the enumeration lists show, and drops the comment on the rows container selector, which the statuses and roles tables set without one. https://community.openproject.org/wp/DREAM-840

Adds with_move_submenu to SortableLists::MoveMenu beside with_move_items, so the submenu's label, icon, select variant and moveMenu target are stated once. Document types, enumerations and roles call it in place of their own copies; the rendered markup is unchanged. Menus that render the directions flat, such as text transform actions, keep calling with_move_items.

Drops five examples that repeat what the shared sortable-lists examples assert or that only prove deleted markup stays deleted. The per-row example stays, reduced to the row id and the preview target, which the shared examples do not cover. Renames the action button example, whose label is the same on every row, and shortens the page object comment to its purpose. https://community.openproject.org/wp/DREAM-840

Locates the drag handle, the labels and the menu items of the document type row by role and accessible name instead of CSS and test selectors, and resolves the Move submenu through the item that controls it. https://community.openproject.org/wp/DREAM-840

myabc · 2026-09-28T14:33:17Z

@akabiru thanks for the helpful feedback! I've tried to incorporate most of the suggestions you provided.

myabc added this pull request to stack #25488 September 21, 2026 07:27

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 8b52a74 to 1c02b97 Compare September 24, 2026 10:02

myabc closed this Sep 24, 2026

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 1c02b97 to ca3c4de Compare September 24, 2026 11:59

github-actions Bot locked and limited conversation to collaborators Sep 24, 2026

myabc reopened this Sep 24, 2026

myabc added the DO NOT MERGE label Sep 24, 2026

myabc requested a lite review from Copilot September 24, 2026 12:07

Copilot started reviewing on behalf of myabc September 24, 2026 12:07 View session

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from b88903c to 5479f84 Compare September 24, 2026 12:16

opf unlocked this conversation Sep 24, 2026

myabc added this to the 18.0.x milestone Sep 24, 2026

myabc added ruby Pull requests that update Ruby code maintenance labels Sep 24, 2026

myabc commented Sep 24, 2026

View reviewed changes

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 5479f84 to 03c9532 Compare September 24, 2026 13:04

github-actions Bot added the ai: Collaborative 💻 AI generated a substantial part of the code; A human reviewed and understands every line. label Sep 24, 2026

myabc mentioned this pull request Sep 24, 2026

[OP-20322] Keep table row actions on screen #25581

Merged

1 of 3 tasks

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 96edc02 to 49847af Compare September 24, 2026 14:40

myabc removed the DO NOT MERGE label Sep 24, 2026

myabc marked this pull request as ready for review September 24, 2026 14:42

myabc added the needs review label Sep 24, 2026

akabiru self-requested a review September 24, 2026 15:04

This was referenced Sep 24, 2026

[DREAM-858] Index Border Box Table rows for ARIA #25584

Open

[DREAM-789] Move enumerations via sortable-lists #25467

Merged

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 49847af to 3701763 Compare September 24, 2026 17:12

HDinger approved these changes Sep 25, 2026

View reviewed changes

Base automatically changed from code-maintenance/dream-789-enumerations-sortable-lists to dev September 25, 2026 07:53

myabc added 3 commits September 25, 2026 08:53

myabc force-pushed the code-maintenance/dream-840-document-types-borderboxtable branch from 3701763 to 2c29378 Compare September 25, 2026 07:53

akabiru added the pullpreview label Sep 25, 2026

akabiru approved these changes Sep 28, 2026

View reviewed changes

myabc added 5 commits September 28, 2026 14:24

[DREAM-840] Align table with sibling tables

0094fc1

Gives the blank state the alert icon the statuses table and the enumeration lists show, and drops the comment on the rows container selector, which the statuses and roles tables set without one. https://community.openproject.org/wp/DREAM-840

myabc merged commit cca8908 into dev Sep 28, 2026
15 of 16 checks passed

myabc deleted the code-maintenance/dream-840-document-types-borderboxtable branch September 28, 2026 15:39

github-actions Bot locked and limited conversation to collaborators Sep 28, 2026

github-actions Bot removed the pullpreview label Sep 28, 2026

Navigation Menu

[DREAM-840] Show document types in a table - #25468

[DREAM-840] Show document types in a table#25468
myabc merged 8 commits into
devfrom
code-maintenance/dream-840-document-types-borderboxtable

myabc commented Sep 18, 2026 •

edited

Loading

Uh oh!

myabc Sep 24, 2026

Uh oh!

myabc commented Sep 24, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 24, 2026

Uh oh!

HDinger left a comment

Uh oh!

github-actions Bot commented Sep 25, 2026

Uh oh!

github-actions Bot commented Sep 25, 2026 •

edited

Loading

Uh oh!

akabiru left a comment

Uh oh!

Uh oh!

akabiru Sep 25, 2026

Uh oh!

myabc Sep 28, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

myabc commented Sep 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Ticket

What are you trying to accomplish?

What approach did you choose and why?

Follow-ups

Screenshots

AI involvement

Merge checklist

Uh oh!

myabc Sep 24, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Sep 24, 2026

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 25, 2026

Uh oh!

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

Uh oh!

Deploying openproject with ⚡ PullPreview

Uh oh!

akabiru left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

akabiru Sep 25, 2026

Choose a reason for hiding this comment

Uh oh!

myabc Sep 28, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

myabc commented Sep 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

myabc commented Sep 18, 2026 •

edited

Loading

myabc commented Sep 24, 2026 •

edited

Loading

github-actions Bot commented Sep 25, 2026 •

edited

Loading