[DREAM-697] Migrate export templates

Ports the export-template selector and its accessible toggles.

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

Author: myabc

app/components/work_package_types/export_template_list_component.html.erb

@@ -29,54 +29,50 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   component_wrapper(data: wrapper_data_attributes) do
-    render(border_box_container(mb: 3, data: (readonly? ? {} : drag_and_drop_target_config))) 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
-            render(Primer::Beta::Text.new(font_weight: :bold)) do
-              I18n.t("types.edit.export_configuration.pdf_export_templates.label")
-            end
+    render(
+      OpenProject::Common::BorderBoxListComponent.new(
+        container: "pdf-export-templates",
+        position: :relative,
+        mb: 3,
+        data: (readonly? ? {} : drag_and_drop_target_config)
+      )
+    ) do |list|
+      list.with_header(title: I18n.t("types.edit.export_configuration.pdf_export_templates.label")) do |header|
+        unless readonly?
+          header.with_action_button(
+            tag: :a,
+            href: enable_all_type_pdf_export_template_index_path(type_id: @type.id),
+            scheme: :invisible,
+            font_weight: :bold,
+            color: :subtle,
+            aria: { label: t("projects.settings.actions.label_enable_all") },
+            test_selector: "enable-all-pdf-export-templates",
+            data: { turbo_method: :put, turbo_stream: true }
+          ) do |button|
+            button.with_leading_visual_icon(icon: "check-circle", color: :subtle)
+            I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_enable_all")
           end
-          unless readonly?
-            section_header_container.with_column(flex_layout: true, justify_content: :flex_end) do |actions_container|
-              actions_container.with_column do
-                render(
-                  Primer::Beta::Button.new(
-                    tag: :a,
-                    href: enable_all_type_pdf_export_template_index_path(type_id: @type.id),
-                    scheme: :invisible,
-                    font_weight: :bold,
-                    color: :subtle,
-                    "aria-label": t("projects.settings.actions.label_enable_all"),
-                    data: { "turbo-method": :put, "turbo-stream": true, test_selector: "enable-all-pdf-export-templates" }
-                  )
-                ) do |button|
-                  button.with_leading_visual_icon(icon: "check-circle", color: :subtle)
-                  I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_enable_all")
-                end
-              end
-              actions_container.with_column do
-                render(
-                  Primer::Beta::Button.new(
-                    tag: :a,
-                    href: disable_all_type_pdf_export_template_index_path(type_id: @type.id),
-                    scheme: :invisible,
-                    font_weight: :bold,
-                    color: :subtle,
-                    "aria-label": t("projects.settings.actions.label_disable_all"),
-                    data: { "turbo-method": :put, "turbo-stream": true, test_selector: "disable-all-pdf-export-templates" }
-                  )
-                ) do |button|
-                  button.with_leading_visual_icon(icon: "x-circle", color: :subtle)
-                  I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_disable_all")
-                end
-              end
-            end
+          header.with_action_button(
+            tag: :a,
+            href: disable_all_type_pdf_export_template_index_path(type_id: @type.id),
+            scheme: :invisible,
+            font_weight: :bold,
+            color: :subtle,
+            aria: { label: t("projects.settings.actions.label_disable_all") },
+            test_selector: "disable-all-pdf-export-templates",
+            data: { turbo_method: :put, turbo_stream: true }
+          ) do |button|
+            button.with_leading_visual_icon(icon: "x-circle", color: :subtle)
+            I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_disable_all")
           end
         end
       end
+
       @type.pdf_export_templates.list.each do |template|
-        component.with_row(data: (readonly? ? {} : draggable_item_config(template))) do
+        list.with_item(
+          test_selector: "pdf-export-template-row-#{template.id}",
+          data: (readonly? ? {} : draggable_item_config(template))
+        ) do
           render(
             WorkPackageTypes::ExportTemplateRowComponent.new(
               type: @type,

app/components/work_package_types/export_template_list_component.rb

@@ -54,18 +54,16 @@ def wrapper_data_attributes
     def drag_and_drop_target_config
       {
         generic_drag_and_drop_target: "container",
-        "target-container-accessor": ":scope > ul",
-        "target-allowed-drag-type": "template",
-        test_selector: "pdf-export-template-rows"
+        target_container_accessor: ":scope > ul",
+        target_allowed_drag_type: "template"
       }
     end
 
     def draggable_item_config(template)
       {
-        "draggable-id": template.id,
-        "draggable-type": "template",
-        "drop-url": drop_type_pdf_export_template_path(type_id: @type.id, id: template.id),
-        test_selector: "pdf-export-template-row-#{template.id}"
+        draggable_id: template.id,
+        draggable_type: "template",
+        drop_url: drop_type_pdf_export_template_path(type_id: @type.id, id: template.id)
       }
     end
   end

app/components/work_package_types/export_template_row_component.html.erb

@@ -52,14 +52,15 @@ See COPYRIGHT and LICENSE files for more details.
           enabled: !readonly?,
           size: :small,
           status_label_position: :start,
+          aria: { label: toggle_label },
           test_selector: "toggle-pdf-export-template-row-#{@template.id}"
         }
         # A read-only toggle is disabled, so it never posts; omit the mutation wiring entirely.
         unless readonly?
           toggle_options.merge!(
             src: toggle_type_pdf_export_template_path(type_id: @type.id, id: @template.id),
             csrf_token: form_authenticity_token,
-            data: { "turbo-method": :post, "turbo-stream": true },
+            data: { turbo_method: :post, turbo_stream: true },
             classes: "op-primer-adjustments__toggle-switch--hidden-loading-indicator"
           )
         end

app/components/work_package_types/export_template_row_component.rb

@@ -43,5 +43,18 @@ def initialize(type:, template:, readonly: false)
     end
 
     def readonly? = @readonly
+
+    def wrapper_uniq_by
+      @template.id
+    end
+
+    private
+
+    def toggle_label
+      I18n.t(
+        "types.edit.export_configuration.pdf_export_templates.actions.label_toggle_template",
+        template: @template.label
+      )
+    end
   end
 end

config/locales/en.yml

@@ -6148,6 +6148,7 @@ en:
           actions:
             label_disable_all: "Disable all"
             label_enable_all: "Enable all"
+            label_toggle_template: "Toggle %{template}"
           label: "PDF Export templates"
         tab: "Generate PDF"
         templates:

spec/components/work_package_types/export_template_list_component_spec.rb

@@ -0,0 +1,87 @@
+# 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.
+#++
+
+require "rails_helper"
+
+RSpec.describe WorkPackageTypes::ExportTemplateListComponent, type: :component do
+  include Rails.application.routes.url_helpers
+
+  let(:type) { create(:type) }
+  let(:draggable_records) { type.pdf_export_templates.list }
+
+  subject(:rendered_component) { render_inline(described_class.new(type:)) }
+
+  def drop_url_for(template)
+    drop_type_pdf_export_template_path(type_id: type.id, id: template.id)
+  end
+
+  it_behaves_like "rendering Box", row_count: 3
+  it_behaves_like "a reorderable Border Box List", drag_type: "template"
+
+  it "renders the enable-all and disable-all header actions", :aggregate_failures do
+    expect(rendered_component).to have_link(accessible_name: I18n.t("projects.settings.actions.label_enable_all"))
+    expect(rendered_component).to have_link(accessible_name: I18n.t("projects.settings.actions.label_disable_all"))
+  end
+
+  it "renders a unique wrapper for each template row" do
+    draggable_records.each do |template|
+      expect(rendered_component)
+        .to have_css("#work-package-types-export-template-row-component-#{template.id}", count: 1)
+    end
+  end
+
+  it "labels each template toggle button with its template" do
+    draggable_records.each do |template|
+      expect(rendered_component).to have_button(
+        accessible_name: I18n.t(
+          "types.edit.export_configuration.pdf_export_templates.actions.label_toggle_template",
+          template: template.label
+        ),
+        aria: { pressed: template.enabled }
+      )
+    end
+  end
+
+  context "when readonly" do
+    subject(:rendered_component) { render_inline(described_class.new(type:, readonly: true)) }
+
+    it "renders no drag-and-drop wiring", :aggregate_failures do
+      expect(rendered_component).to have_no_css('[data-controller~="generic-drag-and-drop"]')
+      expect(rendered_component).to have_no_css("[data-generic-drag-and-drop-target]")
+      expect(rendered_component).to have_no_css("[data-draggable-id]")
+      expect(rendered_component).to have_no_css(".op-draggable-list-item--drag-handle")
+    end
+
+    it "renders no header actions", :aggregate_failures do
+      expect(rendered_component).to have_no_link(accessible_name: I18n.t("projects.settings.actions.label_enable_all"))
+      expect(rendered_component).to have_no_link(accessible_name: I18n.t("projects.settings.actions.label_disable_all"))
+    end
+  end
+end

spec/components/work_package_types/export_template_row_component_spec.rb

@@ -31,6 +31,8 @@
 require "rails_helper"
 
 RSpec.describe WorkPackageTypes::ExportTemplateRowComponent, type: :component do
+  include Rails.application.routes.url_helpers
+
   let(:type) { create(:type) }
   let(:template) { Type::PdfExportTemplates::Template.new(id: 1, label: "Full", caption: "A4", enabled: true) }
 
@@ -45,11 +47,31 @@
   end
 
   context "when editable (default)" do
+    subject(:rendered_component) { render_inline(described_class.new(type:, template:)) }
+
     it "renders an interactive toggle switch", :aggregate_failures do
-      render_inline(described_class.new(type:, template:))
+      expect(rendered_component).to have_css("[data-test-selector='toggle-pdf-export-template-row-1']")
+      expect(rendered_component).to have_no_css(".ToggleSwitch--disabled")
+    end
 
-      expect(page).to have_css("[data-test-selector='toggle-pdf-export-template-row-1']")
-      expect(page).to have_no_css(".ToggleSwitch--disabled")
+    it "renders a unique wrapper derived from the template id" do
+      expect(rendered_component)
+        .to have_css("#work-package-types-export-template-row-component-#{template.id}", count: 1)
+    end
+
+    it "renders the template label and caption" do
+      expect(rendered_component).to have_text(template.label)
+      expect(rendered_component).to have_text(template.caption)
+    end
+
+    it "labels the toggle button with its template and reflects the enabled state" do
+      expect(rendered_component).to have_button(
+        accessible_name: I18n.t(
+          "types.edit.export_configuration.pdf_export_templates.actions.label_toggle_template",
+          template: template.label
+        ),
+        aria: { pressed: template.enabled }
+      )
     end
   end
 end

spec/features/types/export_configuration_spec.rb

@@ -41,46 +41,57 @@
     visit edit_type_pdf_export_template_index_path(type)
   end
 
-  def within_pdf_export_template_container(template_id, &)
-    within("[data-test-selector='pdf-export-template-row-#{template_id}']", &)
+  def within_pdf_export_template_container(template, &)
+    within_test_selector("pdf-export-template-row-#{template.id}", &)
   end
 
-  def toggle_pdf_export_template(template_id)
-    page
-      .find("[data-test-selector='toggle-pdf-export-template-row-#{template_id}'] > button")
-      .click
+  def toggle_pdf_export_template(template)
+    find(:button, accessible_name: toggle_pdf_export_template_label(template)).click
   end
 
-  def expect_checked_state
-    expect(page).to have_css(".ToggleSwitch-statusOn")
+  def expect_checked_state(template)
+    expect(page).to have_button(
+      accessible_name: toggle_pdf_export_template_label(template),
+      aria: { pressed: true }
+    )
   end
 
-  def expect_unchecked_state
-    expect(page).to have_css(".ToggleSwitch-statusOff")
+  def expect_unchecked_state(template)
+    expect(page).to have_button(
+      accessible_name: toggle_pdf_export_template_label(template),
+      aria: { pressed: false }
+    )
+  end
+
+  def toggle_pdf_export_template_label(template)
+    I18n.t(
+      "types.edit.export_configuration.pdf_export_templates.actions.label_toggle_template",
+      template: template.label
+    )
   end
 
   it "disables/enables all" do
-    page.find("[data-test-selector='disable-all-pdf-export-templates']").click
+    click_link(I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_disable_all"))
     wait_for_reload
     type.reload
     expect(type.pdf_export_templates.list_enabled.length).to eq(0)
-    page.find("[data-test-selector='enable-all-pdf-export-templates']").click
+    click_link(I18n.t("types.edit.export_configuration.pdf_export_templates.actions.label_enable_all"))
     wait_for_reload
     type.reload
     expect(type.pdf_export_templates.list_enabled.length).to eq(type.pdf_export_templates.list.length)
   end
 
   it "disables/enables one" do
     first = type.pdf_export_templates.list_enabled.first
-    within_pdf_export_template_container(first.id) do
-      expect_checked_state
-      toggle_pdf_export_template(first.id)
-      expect_unchecked_state
+    within_pdf_export_template_container(first) do
+      expect_checked_state(first)
+      toggle_pdf_export_template(first)
+      expect_unchecked_state(first)
       wait_for_reload
       type.reload
       expect(type.pdf_export_templates.list.first.enabled).to be(false)
-      toggle_pdf_export_template(first.id)
-      expect_checked_state
+      toggle_pdf_export_template(first)
+      expect_checked_state(first)
       wait_for_reload
       type.reload
       expect(type.pdf_export_templates.list.first.enabled).to be(true)
@@ -90,10 +101,13 @@ def expect_unchecked_state
   it "reorders by drag and drop" do
     first_id = type.pdf_export_templates.list_enabled.first.id
     second_id = type.pdf_export_templates.list_enabled[1].id
-    source = page.find("[data-test-selector='pdf-export-template-row-#{first_id}'] .DragHandle")
-    target = page.find("[data-test-selector='pdf-export-template-row-#{second_id}'] .DragHandle")
-    source.native.drag_to(target.native, delay: 0.1)
-    sleep 1
+    Pages::Page.new.drag_and_drop_list(
+      from: 0,
+      to: 1,
+      elements: "[data-test-selector^='pdf-export-template-row-']",
+      handler: ".DragHandle"
+    )
+    wait_for_network_idle
 
     type.reload
     expect(type.pdf_export_templates.list[1].id).to eq(first_id)