[#69702] Primerize API settings form #21365

myabc · 2025-12-06T22:06:15Z

⚠️ This PR is based on #21601. Please view/merge that PR first.

Ticket

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

What are you trying to accomplish?

Primerize the API Settings form. Uses the fieldset_group input group introduced in #21601.

Screenshots

What approach did you choose and why?

A best effort.

The "warning text" styling still needs to be discuss.

Merge checklist

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

myabc · 2026-01-08T23:17:21Z

app/forms/admin/settings/api_settings_form/apiv3_write_readonly_attributes_caption.html.erb

+<%= render(OpPrimer::InlineMessageComponent.new(scheme: :warning, tag: :p, size: :small)) do %>
+  <%= I18n.t(:setting_apiv3_write_readonly_attributes_warning) %>
+<% end %>


@HDinger I don't like the fact that Inline Message sets its own line-height which causes a mismatch with the rest of the caption text.

This could be overridden ofc:

Suggested change

<%= render(OpPrimer::InlineMessageComponent.new(scheme: :warning, tag: :p, size: :small)) do %>

<%= I18n.t(:setting_apiv3_write_readonly_attributes_warning) %>

<% end %>

<%= render(OpPrimer::InlineMessageComponent.new(scheme: :warning, size: :small)) do %>

<%= render(Primer::Beta::Text.new(tag: :p, classes: "lh-condensed")) do %>

<%= render(Primer::Beta::Text.new(tag: :strong).with_content("#{I18n.t(:warning)}:")) %>

<%= I18n.t(:setting_apiv3_write_readonly_attributes_warning) %>

<% end %>

<% end %>

vs

(however, with a condensed line-height, the text no longer baseline aligns with the alert icon)

myabc · 2026-01-09T00:17:30Z

app/forms/admin/settings/api_settings_form.rb

+
+        sf.check_box(name: :apiv3_write_readonly_attributes)
+
+        sf.fieldset_group(title: I18n.t("setting_apiv3_docs"), mt: 4) do |fg|


The caller still needs to remember to apply the appropriate margin here. This could probably be determined programmatically - either via CSS or Ruby.

Cross-referencing comments relating to the amount of 24px:

https://github.com/opf/openproject/pull/21601/changes#r2674285846
#21520 (review)

myabc · 2026-01-09T00:17:58Z

app/forms/admin/settings/api_settings_form.rb

+          fg.check_box(
+            name: :apiv3_cors_enabled,
+            data: {
+              target_name: "apiv3_cors_enabled",
+              disable_when_checked_target: "cause",
+              show_when_checked_target: "cause"
+            }
+          ) do |apiv3_cors_check_box|
+            apiv3_cors_check_box.nested_form(
+              classes: ["mt-2", { "d-none" => !Setting.apiv3_cors_enabled? }],
+              data: {
+                target_name: "apiv3_cors_enabled",
+                show_when_checked_target: "effect",
+                show_when: "checked"
+              }
+            ) do |builder|
+              CORSForm.new(builder)
+            end
+          end


This is not DRY. I'd like to create a better abstraction here!

Copilot

Pull request overview

This PR primerizes the API Settings form by replacing the old form implementation with a new Primer-based form structure. It also replaces the OpPrimer::WarningText component with a more versatile OpPrimer::InlineMessageComponent that supports multiple schemes (warning, critical, success, unavailable) and sizes.

Key changes:

Introduces OpPrimer::InlineMessageComponent to replace OpPrimer::WarningText, providing more flexibility with multiple schemes and sizes
Refactors the API settings form to use the new fieldset_group input structure with dedicated caption templates
Updates translation keys to separate instructional text from warning messages for better component reusability

Reviewed changes

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

Show a summary per file

File	Description
`app/components/op_primer/inline_message_component.rb`	New component supporting multiple message schemes (warning, critical, success, unavailable) and sizes
`app/components/op_primer/inline_message_component.erb`	Template for the new inline message component
`app/components/op_primer/inline_message_component.scss`	Styling for the inline message component with CSS custom properties
`app/components/op_primer/warning_text.html.erb`	Removed old warning text component template
`app/components/_index.sass`	Imports new inline message component stylesheet
`app/forms/admin/settings/api_settings_form.rb`	New Primer-based form implementation with fieldset groups and nested forms
`app/forms/admin/settings/api_settings_form/apiv3_write_readonly_attributes_caption.html.erb`	Caption template with instructions and warning message
`app/forms/admin/settings/api_settings_form/apiv3_max_page_size_caption.html.erb`	Caption template with instructions and warning message
`app/forms/admin/settings/cors_form/apiv3_cors_origins_caption.html.erb`	Caption template for CORS origins field
`app/views/admin/settings/api_settings/show.html.erb`	Simplified view using the new form component
`app/controllers/admin/settings/api_settings_controller.rb`	Added safe navigation operator to handle nil values
`config/locales/en.yml`	Split translation keys to separate instructions from warnings
`modules/webhooks/app/components/webhooks/outgoing/webhooks/row_component.rb`	Updated to use new inline message component
`spec/forms/admin/settings/api_settings_form_spec.rb`	New spec for the API settings form
`spec/components/op_primer/inline_message_component_spec.rb`	Comprehensive spec for the new component
`spec/components/op_primer/warning_text_spec.rb`	Removed old warning text component spec

Copilot · 2026-01-09T00:24:59Z

app/components/op_primer/inline_message_component.scss

+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+ &[data-variant='unavailable'] {


Inconsistent indentation. The selector for unavailable variant has 1 space instead of 2 spaces like the other variant selectors above it. This should be aligned with the other &[data-variant=...] selectors at lines 23, 27, and 31.

Suggested change

&[data-variant='unavailable'] {

&[data-variant='unavailable'] {

app/forms/admin/settings/api_settings_form.rb

HDinger

The changes itself look good. I am personally not a big fan of the name InlineMessage. To me, this does not transport well enough what this is actually doing... Maybe InlineStatusMessageComponent, InlineStateIndicatorComponent or InlineNoticeComponent? Wdyt?

HDinger · 2026-01-12T10:11:50Z

app/components/op_primer/inline_message_component.rb

@@ -35,21 +35,51 @@ module OpPrimer
  # uses a leading alert Octicon for additional emphasis. This component
  # is designed to be used "inline", e.g. table cells, and in places
  # where a Banner component might be overkill.


At the beginning of this comment, it stills says that this component is used to display warnings

myabc · 2026-01-13T09:12:53Z

The changes itself look good. I am personally not a big fan of the name InlineMessage

It was previously named WarningText. However i've changed it as it should now behave exactly like a Primer InlineMessage.

HDinger · 2026-01-14T06:59:06Z

The changes itself look good. I am personally not a big fan of the name InlineMessage

It was previously named WarningText. However i've changed it as it should now behave exactly like a Primer InlineMessage.

Okay, so it belongs to the PVC repo after all 👍

Introduces both an unstyled, low-level `FieldsetComponent` and the `fieldset_group` input group for use with the Primer Forms DSL. https://community.openproject.org/work_packages/70200

Co-authored-by: myabc <[email protected]>

Harmonizes spacing with other pages, e,g. Project Settings. See 1ba6344 See #21520

Aligns implementation with Primer React's InlineMessage component. See: https://primer.style/product/components/inline-message/

myabc force-pushed the feature/69702-primerize-api-settings branch from 1f0e99e to d59232b Compare December 26, 2025 20:32

myabc added feature ruby Pull requests that update Ruby code styling DO NOT MERGE labels Dec 26, 2025

myabc added this to the 17.1.x milestone Dec 26, 2025

myabc mentioned this pull request Jan 8, 2026

Primerize access tokens view #21597

Merged

myabc force-pushed the feature/69702-primerize-api-settings branch from d59232b to 3eb4e6d Compare January 8, 2026 22:20

myabc changed the base branch from dev to feature/70200-fieldset-component-input-group January 8, 2026 22:21

myabc force-pushed the feature/70200-fieldset-component-input-group branch from 0fa0e7c to 80155a0 Compare January 8, 2026 22:43

myabc mentioned this pull request Jan 8, 2026

[#70200] Introduce Fieldset component, input group #21601

Closed

3 tasks

myabc commented Jan 8, 2026

View reviewed changes

myabc force-pushed the feature/69702-primerize-api-settings branch from 3eb4e6d to cbad1f8 Compare January 9, 2026 00:13

myabc commented Jan 9, 2026

View reviewed changes

myabc marked this pull request as ready for review January 9, 2026 00:19

Copilot AI review requested due to automatic review settings January 9, 2026 00:19

myabc added needs review and removed DO NOT MERGE labels Jan 9, 2026

Copilot started reviewing on behalf of myabc January 9, 2026 00:20 View session

Copilot AI reviewed Jan 9, 2026

View reviewed changes

HDinger reviewed Jan 12, 2026

View reviewed changes

myabc changed the base branch from feature/70200-fieldset-component-input-group to dev January 14, 2026 08:30

myabc force-pushed the feature/69702-primerize-api-settings branch from cbad1f8 to ab44ec7 Compare January 14, 2026 08:30

myabc and others added 4 commits January 14, 2026 05:43

[#70200] Introduce Fieldset component, input group

5436a27

Introduces both an unstyled, low-level `FieldsetComponent` and the `fieldset_group` input group for use with the Primer Forms DSL. https://community.openproject.org/work_packages/70200

Add YARD documentation to FieldsetGroup#initialize

68b3041

Co-authored-by: myabc <[email protected]>

Improve YARD documentation with @option tags for Hash parameters

9fe7df8

Co-authored-by: myabc <[email protected]>

Increase section bottom margin to 24px

c5a165b

Harmonizes spacing with other pages, e,g. Project Settings. See 1ba6344 See #21520

myabc added 2 commits January 14, 2026 05:43

Rename WarningText to InlineMessageComponent

07ae586

Aligns implementation with Primer React's InlineMessage component. See: https://primer.style/product/components/inline-message/

[#69702] Primerize Admin API Settings form

21a0a3d

myabc force-pushed the feature/69702-primerize-api-settings branch from ab44ec7 to 21a0a3d Compare January 14, 2026 08:44

myabc merged commit a6b91b0 into dev Jan 14, 2026
17 checks passed

myabc deleted the feature/69702-primerize-api-settings branch January 14, 2026 09:05

github-actions bot locked and limited conversation to collaborators Jan 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#69702] Primerize API settings form #21365

[#69702] Primerize API settings form #21365

Uh oh!

myabc commented Dec 6, 2025 •

edited

Loading

Uh oh!

myabc Jan 8, 2026

Uh oh!

myabc Jan 8, 2026

Uh oh!

myabc Jan 9, 2026 •

edited

Loading

Uh oh!

myabc Jan 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Uh oh!

HDinger left a comment

Uh oh!

HDinger Jan 12, 2026

Uh oh!

myabc commented Jan 13, 2026

Uh oh!

HDinger commented Jan 14, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants


		sf.check_box(name: :apiv3_write_readonly_attributes)

		sf.fieldset_group(title: I18n.t("setting_apiv3_docs"), mt: 4) do \|fg\|

	&[data-variant='unavailable'] {
	&[data-variant='unavailable'] {

[#69702] Primerize API settings form #21365

[#69702] Primerize API settings form #21365

Uh oh!

Conversation

myabc commented Dec 6, 2025 • 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?

Merge checklist

Uh oh!

myabc Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

myabc Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

myabc Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HDinger left a comment

Choose a reason for hiding this comment

Uh oh!

HDinger Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

myabc commented Jan 13, 2026

Uh oh!

HDinger commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

myabc commented Dec 6, 2025 •

edited

Loading

myabc Jan 9, 2026 •

edited

Loading

HDinger commented Jan 14, 2026 •

edited

Loading