[Dream-76] Primerise Interface tab of Admin/Design page

[bsatarnejad]

Ticket

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

What are you trying to accomplish?

Primerise interface tab in admin->design(interface)

Screenshots

[github-actions]

Warning

Flaky specs

• rspec ./modules/gantt/spec/features/timeline/timeline_dates_spec.rb[1:2:1]
• rspec ./spec/features/projects/lists/filters_spec.rb[1:6: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 #24854, linked for reference only):

- `rspec ./modules/gantt/spec/features/timeline/timeline_dates_spec.rb[1:2:1]`
- `rspec ./spec/features/projects/lists/filters_spec.rb[1:6:1]`

Treat this as a standalone task, unrelated to PR #24854. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #24854 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 @bsatarnejad 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 @bsatarnejad, and request a review from @bsatarnejad.
On every commit, set @bsatarnejad 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]

Warning

Flaky specs

• rspec ./modules/backlogs/spec/features/inbox_column_spec.rb[1:7:1]
• rspec ./spec/features/work_packages/table/switch_types_spec.rb[1: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 #24854, linked for reference only):

- `rspec ./modules/backlogs/spec/features/inbox_column_spec.rb[1:7:1]`
- `rspec ./spec/features/work_packages/table/switch_types_spec.rb[1:1:1]`

Treat this as a standalone task, unrelated to PR #24854. Create a new branch from origin/dev and open a new pull request targeting dev — do not stack it on PR #24854 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 @bsatarnejad 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 @bsatarnejad, and request a review from @bsatarnejad.
On every commit, set @bsatarnejad 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]

Caution

The provided work package version does not match the core version

Details:

• Work package URL: https://community.openproject.org/wp/DREAM-76
• Work package version: 18.0.0
• Core version: 17.9.0

Please make sure that:

• The work package version OR your pull request target branch is correct

[github-actions]

Caution

The Enterprise plan field is not set on the work package

Details:

• Work package URL: https://community.openproject.org/wp/DREAM-76

Please make sure that:

• The work package Enterprise plan field is set

[Copilot]

Pull request overview

This PR primerizes the Interface tab under Admin → Design, replacing the legacy form-based UI with Primer components (grouped color sections and per-color edit dialogs) and introducing an auto-submitting theme selector consistent across relevant tabs.

Changes:

• Reworks the Interface tab UI into Primer headings + grouped BorderBox sections, with per-color edit dialogs.
• Switches the theme selector to an auto-submit Primer::Alpha::Select and updates feature specs accordingly.
• Adds translations and helper logic to support grouped colors and inherited/theme-based effective values.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
spec/features/custom_styles/tabs_navigation_spec.rb	Updates feature coverage for the new Primer UI, including dialog-based editing and auto-submit theme selection.
spec/controllers/custom_styles_controller_spec.rb	Adds controller-level coverage for updating themes while preserving the selected tab.
config/locales/en.yml	Adds labels/captions for color groups and per-color editing text.
app/views/custom_styles/show.html.erb	Replaces the old theme selector UI with a Primer Select wired to an auto-submit Stimulus controller.
app/views/custom_styles/_interface.html.erb	Primerizes the Interface tab layout and replaces the bulk form with per-color edit dialogs.
app/helpers/custom_styles_helper.rb	Introduces grouping and “effective color” helper logic to support the new UI rendering.

Suppressed comments (1)

spec/features/custom_styles/tabs_navigation_spec.rb:98

• This example relies on opening and submitting a Primer dialog. In non-JS feature specs the dialog open/close behavior is not executed, which can make the test fail or become flaky. Add :js so the test runs with a JS driver.

    it "restores the inherited color by clearing an override" do

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.