Epic/49688 custom set of project attributes grouped in sections

.github/workflows/pullpreview.yml

@@ -45,7 +45,7 @@ jobs:
       with:
         admins: crohr,HDinger,machisuji,oliverguenther,ulferts,wielinde,cbliard
         compose_files: docker-compose.pullpreview.yml
-        instance_type: large
+        instance_type: xlarge
         ports: 80,443,8080
         default_port: 443
         ttl: 10d

app/components/_index.sass

@@ -2,3 +2,4 @@
 @import "work_packages/share/invite_user_form_component"
 @import "open_project/common/attribute_component"
 @import "filters_component"
+@import "projects/settings/project_custom_field_sections/index_component"

app/components/open_project/common/attribute_component.rb

@@ -25,7 +25,7 @@
 #
 # See COPYRIGHT and LICENSE files for more details.
 #++
-require 'nokogiri'
+require "nokogiri"
 
 module OpenProject
   module Common
@@ -34,7 +34,7 @@ class AttributeComponent < Primer::Component
                   :name,
                   :description
 
-      PARAGRAPH_CSS_CLASS = 'op-uc-p'.freeze
+      PARAGRAPH_CSS_CLASS = "op-uc-p".freeze
 
       def initialize(id, name, description, **args)
         super
@@ -73,7 +73,7 @@ def first_paragraph
                                  .inner_html
                                  .html_safe # rubocop:disable Rails/OutputSafety
                              else
-                               ''
+                               ""
                              end
       end
 
@@ -83,12 +83,12 @@ def text_ast
 
       def body_children
         text_ast
-          .xpath('html/body')
+          .xpath("html/body")
           .children
       end
 
       def multi_type?
-        first_paragraph.include?('figure') || first_paragraph.include?('macro')
+        first_paragraph.include?("figure") || first_paragraph.include?("macro")
       end
     end
   end

app/components/projects/settings/project_custom_field_sections/custom_field_row_component.html.erb

@@ -0,0 +1,50 @@
+<%=
+  component_wrapper do
+    flex_layout(align_items: :center, justify_content: :space_between, classes: 'op-project-custom-field', data: {
+      qa_selector: "project-custom-field-#{@project_custom_field.id}"
+    }) do |custom_field_container|
+      custom_field_container.with_column(flex_layout: true) do |title_container|
+        title_container.with_column(pt: 1, mr: 2) do
+          render(Primer::Beta::Text.new) do 
+            @project_custom_field.name
+          end
+        end
+        title_container.with_column(pt: 1, mr: 2, data: { qa_selector: "custom-field-type" } ) do
+          render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do
+            @project_custom_field.field_format.capitalize
+          end
+        end
+        if @project_custom_field.required?
+          title_container.with_column(pt: 1) do
+            render(Primer::Beta::Label.new(scheme: :attention, size: :medium)) do
+              t("label_required")
+            end
+          end
+        end
+      end
+      # py: 1 quick fix: prevents the row from bouncing as the toggle switch currently changes height while toggling
+      custom_field_container.with_column(py: 1, mr: 2) do
+        # buggy currently:
+        # small variant +  status_label_position: :start leads to a small bounce while toggling
+        # behavior can be seen on primer's viewbook as well -> https://view-components-storybook.eastus.cloudapp.azure.com/view-components/lookbook/inspect/primer/alpha/toggle_switch/small
+        # quick fix: don't display loading indicator which is causing the bounce
+        render(Primer::Alpha::ToggleSwitch.new(
+                  src: toggle_project_settings_project_custom_fields_path(
+                    project_custom_field_project_mapping: {
+                      project_id: @project.id,
+                      custom_field_id: @project_custom_field.id
+                    }
+                  ),
+                  csrf_token: form_authenticity_token,
+                  data: { 'turbo-method': :put, 'turbo-stream': true,
+                          qa_selector: "toggle-project-custom-field-mapping-#{@project_custom_field.id}" },
+                  checked: active_in_project?,
+                  enabled: !@project_custom_field.required?, # required fields cannot be disabled
+                  size: :small,
+                  status_label_position: :start,
+                  classes: "op-primer-adjustments__toggle-switch--hidden-loading-indicator",
+                ))
+      end
+    end
+  end
+%>

app/components/projects/settings/project_custom_field_sections/custom_field_row_component.rb

@@ -0,0 +1,59 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2023 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
+  module Settings
+    module ProjectCustomFieldSections
+      class CustomFieldRowComponent < ApplicationComponent
+        include ApplicationHelper
+        include OpPrimer::ComponentHelpers
+        include OpTurbo::Streamable
+
+        def initialize(project:, project_custom_field:)
+          super
+
+          @project = project
+          @project_custom_field = project_custom_field
+          @project_custom_field_project_mappings = project.project_custom_field_project_mappings
+        end
+
+        private
+
+        def wrapper_uniq_by
+          @project_custom_field.id
+        end
+
+        def active_in_project?
+          @project_custom_field_project_mappings.any? do |mapping|
+            mapping.custom_field_id == @project_custom_field.id
+          end
+        end
+      end
+    end
+  end
+end

app/components/projects/settings/project_custom_field_sections/index_component.html.erb

@@ -0,0 +1,33 @@
+<%=
+  component_wrapper(data: wrapper_data_attributes) do
+    flex_layout do |flex|
+      flex.with_row(mt: 3) do
+        render(Primer::Alpha::TextField.new(
+          name: "project-custom-fields-mapping-filter",
+          label: t('projects.settings.project_custom_fields.filter.label'),
+          visually_hide_label: true,
+          placeholder: t('projects.settings.project_custom_fields.filter.label'),
+          leading_visual: {
+            icon: :search,
+            size: :small
+          },
+          show_clear_button: true,
+          clear_button_id: "project-custom-fields-mapping-filter-clear-button",
+          data: {
+            action: "input->projects--settings--project-custom-fields-mapping-filter#filterLists",
+            "projects--settings--project-custom-fields-mapping-filter-target": "filter"
+          }
+        ))
+      end
+
+      @project_custom_field_sections.each do |project_custom_field_section|
+        flex.with_row do
+          render(Projects::Settings::ProjectCustomFieldSections::ShowComponent.new(
+            project: @project,
+            project_custom_field_section:
+          ))
+        end
+      end
+    end
+  end
+%>

app/components/projects/settings/project_custom_field_sections/index_component.rb

@@ -0,0 +1,55 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2023 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
+  module Settings
+    module ProjectCustomFieldSections
+      class IndexComponent < ApplicationComponent
+        include ApplicationHelper
+        include OpPrimer::ComponentHelpers
+        include OpTurbo::Streamable
+
+        def initialize(project:, project_custom_field_sections:)
+          super
+
+          @project = project
+          @project_custom_field_sections = project_custom_field_sections
+        end
+
+        private
+
+        def wrapper_data_attributes
+          {
+            controller: 'projects--settings--project-custom-fields-mapping-filter',
+            'application-target': 'dynamic'
+          }
+        end
+      end
+    end
+  end
+end

app/components/projects/settings/project_custom_field_sections/index_component.sass

@@ -0,0 +1,3 @@
+.Box
+  .hidden-by-filter
+    display: none

app/components/projects/settings/project_custom_field_sections/show_component.html.erb

@@ -0,0 +1,73 @@
+<%=
+  component_wrapper do
+    render(Primer::Beta::BorderBox.new(mt: 3, classes: 'op-project-custom-field-section', data: {
+        qa_selector: "project-custom-field-section-#{@project_custom_field_section.id}"
+      })) do |component|
+      component.with_header(font_weight: :bold, py: 2) do
+        flex_layout(justify_content: :space_between, align_items: :center) do |section_header_container|
+          section_header_container.with_column(py: 2) do |content_container|
+            # adding py: 2 here to match the padding of the actions_container
+            # otherwise the header height changes when the actions gets hidden when filtering
+            render(Primer::Beta::Text.new(font_weight: :bold)) do
+              @project_custom_field_section.name
+            end
+          end
+          section_header_container.with_column(flex_layout: true, justify_content: :flex_end) do |actions_container|
+            actions_container.with_column(data: { 'projects--settings--project-custom-fields-mapping-filter-target': 'bulkActionContainer' }) do
+              render(Primer::Beta::Button.new(
+                tag: :a,
+                href: enable_all_of_section_project_settings_project_custom_fields_path(
+                  project_custom_field_project_mapping: {
+                    project_id: @project.id,
+                    custom_field_section_id: @project_custom_field_section.id
+                  }
+                ),
+                scheme: :invisible,
+                font_weight: :bold,
+                color: :subtle,
+                'aria-label': t('projects.settings.project_custom_fields.actions.label_enable_all'),
+                data: { 'turbo-method': :put, 'turbo-stream': true, qa_selector: "enable-all-project-custom-field-mappings-#{@project_custom_field_section.id}" }
+              )) do |button|
+                button.with_leading_visual_icon(icon: 'check-circle', color: :subtle)
+                t('projects.settings.project_custom_fields.actions.label_enable_all')
+              end
+            end
+            actions_container.with_column(data: { 'projects--settings--project-custom-fields-mapping-filter-target': 'bulkActionContainer' }) do
+              render(Primer::Beta::Button.new(
+                tag: :a,
+                href: disable_all_of_section_project_settings_project_custom_fields_path(
+                  project_custom_field_project_mapping: {
+                    project_id: @project.id,
+                    custom_field_section_id: @project_custom_field_section.id
+                  }
+                ),
+                scheme: :invisible,
+                font_weight: :bold,
+                color: :subtle,
+                'aria-label': t('projects.settings.project_custom_fields.actions.label_disable_all'),
+                data: { 'turbo-method': :put, 'turbo-stream': true, qa_selector: "disable-all-project-custom-field-mappings-#{@project_custom_field_section.id}" }
+              )) do |button|
+                button.with_leading_visual_icon(icon: 'x-circle', color: :subtle)
+                t('projects.settings.project_custom_fields.actions.label_disable_all')
+              end
+            end
+          end
+        end
+      end
+      if @project_custom_fields.empty?
+        component.with_row do
+          render(Primer::Beta::Text.new(color: :subtle)) { t("settings.project_attributes.label_no_project_custom_fields") }
+        end
+      else
+        @project_custom_fields.each do |project_custom_field|
+          component.with_row(data: { 'projects--settings--project-custom-fields-mapping-filter-target': 'searchItem' }) do
+            render(Projects::Settings::ProjectCustomFieldSections::CustomFieldRowComponent.new(
+              project: @project,
+              project_custom_field:,
+            ))
+          end
+        end
+      end
+    end
+  end
+%>

app/components/projects/settings/project_custom_field_sections/show_component.rb

@@ -0,0 +1,53 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2023 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
+  module Settings
+    module ProjectCustomFieldSections
+      class ShowComponent < ApplicationComponent
+        include ApplicationHelper
+        include OpPrimer::ComponentHelpers
+        include OpTurbo::Streamable
+
+        def initialize(project:, project_custom_field_section:)
+          super
+
+          @project = project
+          @project_custom_field_section = project_custom_field_section
+          @project_custom_fields = project_custom_field_section.custom_fields
+        end
+
+        private
+
+        def wrapper_uniq_by
+          @project_custom_field_section.id
+        end
+      end
+    end
+  end
+end