[#69073] Rework template selector on Project create form

Gemfile

@@ -232,6 +232,8 @@ gem "view_component", "~> 4.1.1"
 # Lookbook
 gem "lookbook", "2.3.13"
 
+gem "inline_svg", "~> 1.10.0"
+
 # Require factory_bot for usage with openproject plugins testing
 gem "factory_bot", "~> 6.5.6", require: false
 # require factory_bot_rails for convenience in core development

Gemfile.lock

@@ -718,6 +718,9 @@ GEM
       ostruct
     ice_cube (0.17.0)
     ice_nine (0.11.2)
+    inline_svg (1.10.0)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     interception (0.5)
     io-console (0.8.1)
     irb (1.15.3)
@@ -1610,6 +1613,7 @@ DEPENDENCIES
   i18n-tasks (~> 1.0.13)
   ice_cube (~> 0.17.0)
   ice_nine
+  inline_svg (~> 1.10.0)
   json_schemer (~> 2.4.0)
   json_spec (~> 1.1.4)
   ladle
@@ -1946,6 +1950,7 @@ CHECKSUMS
   icalendar (2.12.1) sha256=ecff56c550aed551f29ad1faad0da54bf62362dfaf22a428bd7ad782938fe764
   ice_cube (0.17.0) sha256=32deb45dda4b4acc53505c2f581f6d32b5afc04d29b9004769944a0df5a5fcbe
   ice_nine (0.11.2) sha256=5d506a7d2723d5592dc121b9928e4931742730131f22a1a37649df1c1e2e63db
+  inline_svg (1.10.0) sha256=5b652934236fd9f8adc61f3fd6e208b7ca3282698b19f28659971da84bf9a10f
   interception (0.5) sha256=a53818d636752a8df90d8c1bb2f7b6e13a7b828543cb02b50fbde98b849d7907
   io-console (0.8.1) sha256=1e15440a6b2f67b6ea496df7c474ed62c860ad11237f29b3bd187f054b925fcb
   irb (1.15.3) sha256=4349edff1efa7ff7bfd34cb9df74a133a588ba88c2718098b3b4468b81184aaa

app/components/projects/index_sub_header_component.rb

@@ -72,26 +72,23 @@ def clear_button_id
     end
 
     def new_workspace_path(type)
-      case type
-      when Project.workspace_types[:project]
-        new_project_path
-      when Project.workspace_types[:portfolio]
-        new_portfolio_path
-      when Project.workspace_types[:program]
-        new_program_path
-      end
+      return unless Project.workspace_types.key?(type)
+
+      url_for([:new, type.to_sym])
     end
 
     def new_workspace_label(type)
       I18n.t(:"label_#{type}")
     end
 
     def allowed_new_workspace_types
-      allowed_types = []
-      allowed_types << Project.workspace_types[:project] if @current_user.allowed_globally?(:add_project)
-      allowed_types << Project.workspace_types[:portfolio] if @current_user.allowed_globally?(:add_portfolios) && OpenProject::FeatureDecisions.portfolio_models_active?
-      allowed_types << Project.workspace_types[:program] if @current_user.allowed_globally?(:add_programs) && OpenProject::FeatureDecisions.portfolio_models_active?
-      allowed_types
+      @allowed_new_workspace_types ||= [].tap do |types|
+        if OpenProject::FeatureDecisions.portfolio_models_active?
+          types << "portfolio" if @current_user.allowed_globally?(:add_portfolios)
+          types << "program" if @current_user.allowed_globally?(:add_programs)
+        end
+        types << "project" if @current_user.allowed_globally?(:add_project)
+      end
     end
 
     def for_a_single_new_allowed_type

app/components/projects/template_select_component.html.erb

@@ -30,42 +30,15 @@ See COPYRIGHT and LICENSE files for more details.
 <%=
   component_wrapper do
     settings_primer_form_with(
-      url: new_project_path,
+      url: new_workspace_path,
       method: :get,
       data: {
         turbo_frame: Projects::NewComponent.wrapper_key,
         controller: "auto-submit",
         auto_submit_delay_value: 0
       }
     ) do |f|
-      render(
-        OpPrimer::InsetBoxComponent.new(my: 3)
-      ) do
-        template_id_value = template_id
-        parent_id_value = parent_id
-        render_inline_form(f) do |form|
-          form.project_autocompleter(
-            name: :template_id,
-            label: I18n.t("create_project.template_label"),
-            autocomplete_options: {
-              focusDirectly: false,
-              dropdownPosition: "bottom",
-              inputValue: template_id_value,
-              placeholder: I18n.t("label_none_parentheses"),
-              filters: [
-                { name: "user_action", operator: "=", values: ["projects/copy"] },
-                { name: "templated", operator: "=", values: ["t"] }
-              ],
-              data: {
-                action: "change->auto-submit#submit",
-                "qa-field-name": "use_template"
-              }
-            }
-          )
-
-          form.hidden name: :parent_id, value: parent_id_value
-        end
-      end
+      render Projects::TemplateSelectForm.new(f, template_id:, parent_id:, workspace_type: project.workspace_type, current_user:)
     end
   end
 %>

app/components/projects/template_select_component.rb

@@ -30,14 +30,28 @@
 
 module Projects
   class TemplateSelectComponent < ApplicationComponent
+    extend Dry::Initializer[undefined: false]
     include ApplicationHelper
     include OpPrimer::ComponentHelpers
     include OpTurbo::Streamable
 
-    options :template, :parent
+    option :project
+    option :template
+    option :parent, optional: true
+    option :current_user, default: -> { User.current }
 
     private
 
+    def new_workspace_path
+      workspace_type = if Project.workspace_types.key?(project.workspace_type)
+                         project.workspace_type.to_sym
+                       else
+                         :project
+                       end
+
+      url_for([:new, workspace_type])
+    end
+
     def template_id = template&.id
     def parent_id = parent&.id
   end

app/forms/projects/template_select_form.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module Projects
+  class TemplateSelectForm < ApplicationForm
+    extend Dry::Initializer[undefined: false]
+    include OpenProject::TextFormatting
+
+    BLANK_VALUE = ""
+    private_constant :BLANK_VALUE
+
+    option :template_id
+    option :parent_id, optional: true
+    option :workspace_type
+    option :current_user, default: -> { User.current }
+
+    delegate :strip_tags, to: :@view_context
+
+    form do |f|
+      f.advanced_radio_button_group(
+        name: :template_id,
+        label: I18n.t("create_project.template_label"),
+        scope_name_to_model: false,
+        data: {
+          action: "change->auto-submit#submit",
+          qa_field_name: "use_template"
+        }
+      ) do |group|
+        group.radio_button(
+          value: BLANK_VALUE,
+          label: blank_template_label,
+          id: "template_id_blank",
+          caption: blank_template_caption,
+          checked: template_id.blank?
+        )
+
+        available_templates.each do |template|
+          group.radio_button(
+            value: template.id,
+            label: template.name,
+            caption: format_caption(template.description),
+            checked: template.id == template_id
+          )
+        end
+      end
+
+      f.hidden(name: :parent_id, value: parent_id, scope_name_to_model: false) if parent_id
+    end
+
+    private
+
+    def available_templates
+      @available_templates ||= Project
+        .visible(current_user)
+        .active
+        .templated
+        .order(name: :asc)
+    end
+
+    def format_caption(text)
+      return I18n.t("create_project.blank_description") if text.blank?
+
+      render(Primer::Beta::Text.new(classes: %w[line-clamp-3 lh-default])) do
+        strip_tags(format_text(text))
+      end
+    end
+
+    def blank_template_label
+      return unless Project.workspace_types.key?(workspace_type)
+
+      I18n.t("create_#{workspace_type}.blank_template.label")
+    end
+
+    def blank_template_caption
+      return unless Project.workspace_types.key?(workspace_type)
+
+      I18n.t("create_#{workspace_type}.blank_template.description")
+    end
+  end
+end

app/helpers/workspace_helper.rb

@@ -29,24 +29,17 @@
 #++
 
 module WorkspaceHelper
+  WORKSPACE_ICON_MAPPING = {
+    project: :project,
+    portfolio: :briefcase,
+    program: :"project-roadmap"
+  }.with_indifferent_access.freeze
+
   def new_workspace_title(workspace)
-    if workspace.project?
-      I18n.t(:label_project_new)
-    elsif workspace.portfolio?
-      I18n.t(:label_portfolio_new)
-    elsif workspace.program?
-      I18n.t(:label_program_new)
-    end
-  end
+    return unless Project.workspace_types.key?(workspace.workspace_type)
 
-  def workspace_icon(type)
-    case type
-    when Project.workspace_types[:portfolio]
-      :briefcase
-    when Project.workspace_types[:program]
-      :"project-roadmap"
-    else
-      :project
-    end
+    I18n.t(:"label_#{workspace.workspace_type}_new")
   end
+
+  def workspace_icon(type) = WORKSPACE_ICON_MAPPING[type]
 end

app/seeders/demo_data/project_seeder.rb

@@ -164,7 +164,7 @@ def project_attributes # rubocop:disable Metrics/AbcSize
         enabled_module_names: project_data.lookup("modules"),
         types: Type.all,
         parent: Project.find_by(identifier: project_data.lookup("parent")),
-        workspace_type: Project.workspace_types[:project]
+        workspace_type: "project"
       }
     end
   end

app/seeders/development_data/projects_seeder.rb

@@ -113,7 +113,7 @@ def project_data(identifier)
         identifier:,
         enabled_module_names: project_modules,
         types: Type.all,
-        workspace_type: Project.workspace_types[:project]
+        workspace_type: "project"
       }
     end
 

app/views/projects/new.html.erb

@@ -36,8 +36,10 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   render Projects::TemplateSelectComponent.new(
+    project: @new_project,
     template: @template,
-    parent: @parent
+    parent: @parent,
+    current_user:
   )
 %>
 

config/locales/en.yml

@@ -2236,6 +2236,20 @@ en:
     template_label: "Use template"
     copy_options:
       dependencies_label: "Copy from template"
+    blank_template:
+      label: "Blank project"
+      description: Start from scratch. Manually add project attributes, members and modules.
+    blank_description: No description provided.
+
+  create_portfolio:
+    blank_template:
+      label: "Blank portfolio"
+      description: Start from scratch. Manually add portfolio attributes, members and modules.
+
+  create_program:
+    blank_template:
+      label: "Blank program"
+      description: Start from scratch. Manually add program attributes, members and modules.
 
   create_wiki_page: "Create new wiki page"
   create_wiki_page_button: "Wiki page"

frontend/src/global_styles/content/_index.sass

@@ -76,6 +76,7 @@
 @import activity_list
 @import activity_days
 @import hierachy_custom_field_layout
+@import text_utils
 
 @import menus/menu_blocks
 @import editor/index

frontend/src/global_styles/content/_text_utils.sass

@@ -0,0 +1,3 @@
+@for $i from 1 through 6
+  .line-clamp-#{$i}
+    @include line-clamp($i)

frontend/src/global_styles/openproject.sass

@@ -31,3 +31,4 @@
 // Component specific Styles
 @import "../../../app/components/_index.sass"
 @import "../../../app/forms/_index.sass"
+@import "../../../lib/primer/open_project/forms/_index.sass"

frontend/src/global_styles/openproject/_mixins.sass

@@ -388,3 +388,9 @@ $scrollbar-size: 10px
   @media (hover: hover)
     &:hover
       border-color: var(--borderColor-default) !important
+
+@mixin line-clamp($value)
+  display: -webkit-box
+  -webkit-line-clamp: $value
+  -webkit-box-orient: vertical
+  overflow: hidden

lib/api/v3/projects/create_form_api.rb

@@ -39,8 +39,7 @@ class CreateFormAPI < ::API::OpenProjectAPI
 
           post &::API::V3::Utilities::Endpoints::CreateForm.new(model: Project,
                                                                 params_modifier: ->(attributes) {
-                                                                  attributes[:workspace_type] = Project.workspace_types[:project]
-                                                                  attributes
+                                                                  attributes.merge!(workspace_type: "project")
                                                                 })
                                                            .mount
         end

lib/api/v3/projects/projects_api.rb

@@ -42,8 +42,7 @@ class ProjectsAPI < ::API::OpenProjectAPI
 
           post &::API::V3::Utilities::Endpoints::Create.new(model: Project,
                                                             params_modifier: ->(attributes) {
-                                                              attributes[:workspace_type] = Project.workspace_types[:project]
-                                                              attributes
+                                                              attributes.merge!(workspace_type: "project")
                                                             })
                                                        .mount
 

lib/primer/open_project/forms/_index.sass

@@ -0,0 +1 @@
+@import "advanced_form_group"