Merge pull request #408 from opf/bug/69966-can-t-move-hierarchy-element-underneath-an-element-with-an-and-symbol-in-its-title

[69966] Can't move hierarchy element underneath an element with an "&" symbol in its title

Author: HDinger

.changeset/clear-cooks-mix.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Support special characters in node names of Primer::Alpha::TreeView

app/components/primer/alpha/tree_view/node.rb

@@ -129,7 +129,7 @@ def initialize(
             @content_arguments, {
             data: {
               value: value,
-              path: @path.to_json,
+              path: JSON.generate(@path),
               select_variant: @select_variant
             }
           }

app/components/primer/alpha/tree_view/skeleton_loader.html.erb

@@ -2,7 +2,7 @@
   <% with_loading_failure_message  # set the default %>
 <% end %>
 
-<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
+<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: JSON.generate(@container.path) }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
     <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :loader], node_variant: :div)) do |node| %>
       <% node.with_text_content do %>

app/components/primer/alpha/tree_view/spinner_loader.html.erb

@@ -2,7 +2,7 @@
   <% with_loading_failure_message  # set the default %>
 <% end %>
 
-<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
+<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: JSON.generate(@container.path) }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
     <%= render(Primer::Alpha::TreeView::Node.new(path: [*@container.path, :loader], data: { target: "tree-view-sub-tree-node.loadingIndicator" }, node_variant: :div)) do |node| %>
       <% node.with_text_content { "Loading..." } %>

docs/contributors/playwright-testing.md

@@ -9,7 +9,7 @@
   - [Table of Contents](#table-of-contents)
   - [Visual testing](#visual-testing)
     - [Prerequisites](#prerequisites)
-    - [Continous Integration](#continous-integration)
+    - [Continuous Integration](#continuous-integration)
   - [Other tests](#other-tests)
     - [System tests](#system-tests)
 
@@ -41,7 +41,7 @@ rendering the screenshots will match the browser in CI.
 
 Once you have the codespace open, make sure you're up to date with `script/setup`. Then you can run the `npx playwright test` command.
 
-### Continous Integration
+### Continuous Integration
 
 Playwright tests are included in the `Tests > Visual Regressions` jobs of the CI workflow.
 The results of the test run are uploaded at the end of the job and are available
@@ -55,7 +55,7 @@ When the workflow runs, it will check in screenshots of previews for visual diff
 
 ## Other tests
 
-Before running the whole test suite with: `script/test`, you must run `bundle exec rake docs:preview`.
+Before running the whole test suite with: `script/test`, you must run `script/test-setup` to start Vite and CSS builds in watch mode.
 
 Run a subset of tests by supplying arguments to `script/test`:
 

previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -7,6 +7,10 @@
       <% end %>
 
       <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3) %>
+      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5) %>
+        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6) %>
+      <% end %>
     <% end %>
 
     <%= render(Primer::Alpha::SubmitButton.new(name: :submit, label: "Submit")) %>

test/system/alpha/tree_view_test.rb

@@ -885,5 +885,20 @@ def test_initial_form_state_for_single_select
 
       assert_equal "{\"path\":[\"src\",\"button.rb\"],\"value\":\"1\"}", response.dig("form_params", "folder_structure", 0)
     end
+
+    def test_single_select_with_special_character
+      visit_preview(:form_input, expanded: true, select_variant: :single, route_format: :json)
+
+      assert_path_checked "src", "button.rb"
+      activate_at_path("Docs & legal requirements")
+      assert_path_checked "Docs & legal requirements"
+
+      find("button[type=submit]").click
+
+      # for some reason the JSON response is wrapped in HTML, I have no idea why
+      response = JSON.parse(find("pre").text)
+
+      assert_equal "{\"path\":[\"Docs & legal requirements\"],\"value\":\"4\"}", response.dig("form_params", "folder_structure", 0)
+    end
   end
 end

test/test_helpers/tree_view_helpers.rb

@@ -3,7 +3,7 @@
 module Primer
   module TreeViewHelpers
     def selector_for(*path)
-      "[role=treeitem][data-path='#{path.to_json}']"
+      "[role=treeitem][data-path='#{JSON.generate(path)}']"
     end
 
     def activate_at_path(*path)