[DREAM-900] Migrate administration work package settings towards Primer by klappradla · Pull Request #26044 · opf/openproject

klappradla · 2026-10-15T09:59:01Z

Ticket

What are you trying to accomplish?

This migrates the project and work package settings pages for admins to Primer.

Screenshots

before	after

What approach did you choose and why?

I extracted form objects for both forms and a shared component that wraps the AngularJS component for editing columns.

AI involvement

None/Assisted – No AI assistance used OR only autocomplete/pasted snippets. I effectively wrote and understand all the code.

Merge checklist

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

HDinger

Looks already quite solid 👍 As mention in async, please also draft the doc changes by updating the images in here (the numbers in the image you can ignore), and here

HDinger · 2026-10-15T11:14:22Z

+    module ProjectSettings
+      # NOTE: Wrapping this in a component to get around the issue that the helpers
+      # aren't re-evaluated with every request when called from a form.
+      class DefaultColumnsComponent < ApplicationComponent


This indeed reads strange, but I asume that this is the workaround you mentioned, you want to get rid of?

Yes. I updated the helper delegation in e81a0bd and then removed those components in 788f008.

HDinger · 2026-10-15T11:15:27Z

+          },
+          input_width: :medium
+        )
+        sf.group(


Primer offers so called nested_forms which I think make sense here, as the checkboxes are dependend and should be intended as such. You can have a look here how this is used.

It's unfortunately only available on checkboxes or radio buttons (see search in repo for instance), not for a select like we have here.

Primer already implicitly wraps the check_box_group into a group behind the scenes. By doing it explicitly in the markup myself, I get control over which attributes are set on the group wrapper. I need that in order to set the hidden attribute for determining the initial state of the component when rendering the HTML on the server.

If I set the hidden attribute on the check_box_group, the same markup is rendered, with the difference, that the hidden attribute is nested too deep: Primer will initially set a d-none class on the outer wrapping container and won't remove it again when the hidden attribute is toggled 🙈

HDinger · 2026-10-15T11:17:42Z

-      def initialize(pane:)
+module Admin
+  module Settings
+    class ColumnSelectionComponent < ApplicationComponent


Nice 👍
It would be good to add a small preview in lookbook for this component.

Done in a39a4fb ✅

HDinger · 2026-10-15T11:20:39Z

+    within "opce-draggable-autocompleter" do
+      items = page.all(".op-draggable-autocomplete--item")
+      expect(items.map(&:text)).to eq ["Name", "Status", "Identifier"]
+    end


I guess it makes sense to navigate to the project list and check wether the correct columns are shown

HDinger · 2026-10-15T11:22:26Z

+
+require "spec_helper"
+
+RSpec.describe "Work packages general admin settings", :js do


Same as in the other test: The check whether the setting actually worked is missing (next to checking whether the page itself shows the correct values). So either you navigate to the WP table and check wehter the settings is applied correctly, or you check the stored setting value

Here I went with a combination: for the columns, I'm looking at the actual page, for the other settings only in the database to not extend the test too long.

https://community.openproject.org/wp/DREAM-900

Unfortunately due to the way helper delegation is set up for `ApplicationForm`, I also had to extract separate components for the usage within the project and work package forms…

Instead of delegating the helpers call to ApplicationController, we want to take the view context. Otherwise, any helper call that gets memorized will return the same result for all requests and only change when a new version of the app is deployed. That has effects on e.g. translations.

It's not necessary to have separate components for them any more.

Update specs to also check the effect of the settings changes. For some, the check is done in the database, for some others in the UI.

HDinger

Very nice 👏 👍
I have two minor remarks and would like to have @MayaBerd opinion on the doc changes

HDinger · 2026-10-16T11:59:12Z

 1. **Allow cross-project work package relations**, i.e. that work packages created in one project can have relations to work packages in another project, for example parent-children work packages.

-2. **Display subprojects work packages in main projects** by default. This way the work packages of subprojects will always be visible in the main project if a user has the corresponding role in the subproject to see work packages.
+2. **Display subprojects work packages on main projects** by default. This way the work packages of subprojects will always be visible in the main project if a user has the corresponding role in the subproject to see work packages.


I am not 100% sure whether this is correct. I think in might actually be better.

Yes, I think so too. I'll update the translation 🚜

I agree, "in" is better

HDinger · 2026-10-16T12:01:44Z

+module OpenProject
+  module Admin
+    module Settings
+      class ColumnSelectionComponentPreview < ViewComponent::Preview


Please add a comment like this:

# @logical_path OpenProject/Admin/Settings

Otherwise, the module gets automatically transformed with a space between "Open" and "Project":

Oh, good catch, thanks 🙇

I just always looked at it through the filtered view 🙈

HDinger · 2026-10-16T12:24:21Z

@klappradla there is also a test that seems to fail only here, so it is probably caused by some of the changes although it looks not related to the settings. Maybe it's the helper change

The mocked call failed because the helper calls now go through the actual view context. So updating the stub to allow calling anything and just add a specific mock for the part the test cares about.

HDinger

Changes look good 👍 Thanks for the effort on this 🙇
Good to merge once the tests are green

MayaBerd · 2026-10-16T13:35:26Z

I'm not entirely sure about the size of the image here, but let's merge it. I want to see it on the actual page. If an update is needed, I can take care of it.

klappradla changed the title ~~Setup lib + build pipeline + demo app~~ [DREAM-900] Migrate administration work package settings towards Primer Oct 15, 2026

github-actions Bot added the ai: None/Assisted 👤 No AI assistance used OR only snippets. A human effectively wrote and understands all the code. label Oct 15, 2026

HDinger added this to the 18.0.x milestone Oct 15, 2026

HDinger added Passion time feature labels Oct 15, 2026

HDinger requested changes Oct 15, 2026

View reviewed changes

klappradla requested a review from HDinger October 16, 2026 10:31

klappradla added 11 commits October 16, 2026 12:31

[DREAM-900] Migrate administration work package settings towards Primer

cbcb31d

https://community.openproject.org/wp/DREAM-900

Migrate admin general work package settings to Primer

015a70e

Move admin project settings to Primer

d684da6

Extract shared component for column selection

bdc14ae

Unfortunately due to the way helper delegation is set up for `ApplicationForm`, I also had to extract separate components for the usage within the project and work package forms…

Move column selection components into forms

3d95017

It's not necessary to have separate components for them any more.

Add lookbook preview for column selection component

06849eb

Update feature specs

35d3cc4

Update specs to also check the effect of the settings changes. For some, the check is done in the database, for some others in the UI.

Update images for work package settings docs

616b591

Fix alt texts and typos in work package settings docs

6a73a1e

Update images for project list settings docs

6564e90

klappradla force-pushed the feature/dream-900-migrate-administration-work-package-settings-towards-primer branch from b347df1 to 6564e90 Compare October 16, 2026 10:31

HDinger reviewed Oct 16, 2026

View reviewed changes

HDinger requested a review from MayaBerd October 16, 2026 12:03

klappradla added 3 commits October 16, 2026 14:27

Fix path for view component preview

4160616

Update translation

e65c173

Update stub in view spec

e853b95

The mocked call failed because the helper calls now go through the actual view context. So updating the stub to allow calling anything and just add a specific mock for the part the test cares about.

HDinger approved these changes Oct 16, 2026

View reviewed changes

Update docs for env variables

0b41ee0

MayaBerd reviewed Oct 16, 2026

View reviewed changes

MayaBerd approved these changes Oct 16, 2026

View reviewed changes

HDinger merged commit 1dedcf1 into opf:dev Oct 19, 2026
20 of 21 checks passed

github-actions Bot locked and limited conversation to collaborators Oct 19, 2026


		require "spec_helper"

		RSpec.describe "Work packages general admin settings", :js do

Conversation

klappradla commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

AI involvement

Merge checklist

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HDinger commented Oct 16, 2026

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

klappradla commented Oct 15, 2026 •

edited

Loading