[#69073] Rework template selector on Project create form

[myabc]

Ticket

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

What are you trying to accomplish?

This PR reworks the Template Select Component to replace the project autocompleter with an "advanced radio button group", introducing new form components with icon support for better visual presentation.

In detail:

• Introduces new AdvancedRadioButtonGroup and AdvancedCheckBoxGroup form components with icon and caption support.
• Replaces autocompleter-based template selection with a visual radio button grid layout
• Adds SVG assets for blank and agile project templates
• Introduces line-clamp-n utility classes for vertically truncating text.

Related PRs (both WIP)

• #[#68856] Move Project template selection to separate page #21048
• #[#69068] Add support for Project template icons #21035

Screenshots

What approach did you choose and why?

Please also see the ticket for some of the choices (e.g. colours) made while working on this implementation.

Even though it's not yet needed, I implemented AdvancedCheckBoxGroup for symmetry. We also use use the Primer Forms (input methods) API rather than plain view components, since the radio button group will usually be used in a Forms context.

The implementation tries to do as much as possible in plain CSS - thanks to :hover and :checked pseudo-classes, has() and the like, there was no need for additional JavaScript.

I've added Inline SVG as a dependency. I wasn't sure how we want to handle icons - at a minimum we probably want to be able to display existing Octicons and custom SVGs.

What's currently missing from this PR

• custom icon support (e.g. via upload, see [#69068] Add support for Project template icons #21035)
• Validation specs: a number of the specs for AdvancedRadioButtonGroup and AdvancedCheckBoxGroup were copied from the PVC repo and and adapted for RSpec. However, I didn't port over the validation specs.
• Special validation styling: while we do show the standard validation error captions for the form groups, there is no additional styling - for example, a red border around the currenlty checked option might make sense.
• Lookbook previews
• Component API docs

Merge checklist

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

[Copilot]

Pull Request Overview

This PR reworks the Template Select Component to replace the project autocompleter with an advanced radio button group, introducing new form components with icon support for better visual presentation.

• Introduces new AdvancedRadioButtonGroup and AdvancedCheckBoxGroup form components with icon and caption support
• Replaces autocompleter-based template selection with a visual radio button grid layout
• Adds SVG assets for blank and agile project templates

Reviewed Changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
lib/primer/open_project/forms/dsl/input_methods.rb	Adds DSL methods for advanced radio button and checkbox groups
lib/primer/open_project/forms/dsl/advanced_radio_button_input.rb	Implements input DSL class for individual advanced radio buttons with icon support
lib/primer/open_project/forms/dsl/advanced_radio_button_group_input.rb	Implements input DSL class for grouping advanced radio buttons
lib/primer/open_project/forms/dsl/advanced_check_box_input.rb	Implements input DSL class for individual advanced checkboxes with icon and scheme support
lib/primer/open_project/forms/dsl/advanced_check_box_group_input.rb	Implements input DSL class for grouping advanced checkboxes
lib/primer/open_project/forms/advanced_radio_button.rb	ViewComponent for rendering individual advanced radio buttons
lib/primer/open_project/forms/advanced_radio_button.html.erb	Template for advanced radio button with icon and caption rendering
lib/primer/open_project/forms/advanced_radio_button_group.rb	ViewComponent for rendering advanced radio button groups
lib/primer/open_project/forms/advanced_radio_button_group.html.erb	Template for advanced radio button group fieldset
lib/primer/open_project/forms/advanced_check_box.rb	ViewComponent for rendering individual advanced checkboxes
lib/primer/open_project/forms/advanced_check_box.html.erb	Template for advanced checkbox with icon and caption rendering (contains bug)
lib/primer/open_project/forms/advanced_check_box_group.rb	ViewComponent for rendering advanced checkbox groups
lib/primer/open_project/forms/advanced_check_box_group.html.erb	Template for advanced checkbox group fieldset
frontend/src/global_styles/openproject/_forms.sass	Adds styling for advanced form controls with grid layout and visual states
app/components/projects/template_select_component.rb	Adds available_templates method to fetch templated projects
app/components/projects/template_select_component.html.erb	Replaces autocompleter with advanced radio button group for template selection
app/assets/images/templates/blank_project.svg	SVG icon for blank project template
app/assets/images/templates/agile_project.svg	SVG icon for agile project template
spec/lib/primer/open_project/forms/dsl/input_methods_spec.rb	Adds tests for new DSL methods
spec/lib/primer/open_project/forms/advanced_radio_button_group_spec.rb	Basic test for advanced radio button group rendering
spec/lib/primer/open_project/forms/advanced_check_box_group_spec.rb	Basic test for advanced checkbox group rendering
spec/components/projects/template_select_component_spec.rb	Marks test as pending (xit) without explanation
Gemfile	Adds inline_svg gem dependency for SVG rendering
Gemfile.lock	Updates with inline_svg gem and checksums

Comments suppressed due to low confidence (1)

spec/components/projects/template_select_component_spec.rb:49

• The test has been marked as pending with xit, but there's no explanation or TODO comment indicating why this test is skipped or when it should be re-enabled. Either remove this test if it's no longer relevant, or add a comment explaining why it's skipped and what needs to be done to fix it.

  xit "connects Stimulus controller actions" do
    expect(render_component).to have_element "opce-project-autocompleter", "data-input-name": "\"template_id\"" do |element|
      expect(element["data-action"]).to include "change->auto-submit#submit"
    end
  end

[Copilot]

Pull Request Overview

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

[Copilot]

Pull Request Overview

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

[HDinger]

I will review the styling questions with the product team shortly.

Regarding the code, I think the biggest questions come from the icon. I don't like the technical implementation of it, and I am also not sure, whether this is really better than having no icon. I will clarify that as well.

Regarding the components, I am missing some docs in the lookbook, but that can be done separately.

[HDinger]

Regarding the code, I think the biggest questions come from the icon. I don't like the technical implementation of it, and I am also not sure, whether this is really better than having no icon. I will clarify that as well.

I removed the icons from the template selector but left the image support in the component itself as I assume it is the pre-work for supporting custom images later on. That we will not be abe to achieve with Octicons unfortunately.

[HDinger]

Fine from my side 👍

[dombesz]

Applied a few tweaks, such as changing the template selector label and description for programs and portfolios, plus address the outstanding cr comments. LGTM!👍