* Fix Bug where single sections was not preserved after update

* Add tests for TrailingActionButton
* Fix eslint issues
* Include review feedback

Author: HDinger

.changeset/afraid-poets-sing.md

@@ -2,4 +2,4 @@
 '@openproject/primer-view-components': minor
 ---
 
-Async loading strategy for FitlerableTreeView
+Async loading strategy for FilterableTreeView

.changeset/loud-paths-taste.md

@@ -2,4 +2,4 @@
 '@openproject/primer-view-components': minor
 ---
 
-Add trailingActionIcon slot to TreeView and FilterableTreeView
+Add trailing action button support to TreeView and FilterableTreeView

app/components/primer/open_project/filterable_tree_view.html.erb

@@ -3,7 +3,6 @@
     <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
       <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
         <%= render(@filter_input) do |input| %>
-          <%# exclude from form submissions %>
           <% input.merge_input_arguments!(form: "") %>
         <% end %>
       <% end %>

app/components/primer/open_project/filterable_tree_view.pcss

@@ -29,29 +29,28 @@ filterable-tree-view {
 }
 
 /* Highlight style for CSS Custom Highlight API */
-/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
 ::highlight(primer-filterable-tree-view-search-results) {
   background-color: var(--bgColor-attention-muted);
 }
 
 /* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
+/* stylelint-disable-next-line selector-max-type */
 filterable-tree-view mark {
   background-color: var(--bgColor-attention-muted);
   color: inherit;
 }
 
 /* Loading skeleton */
-
 .FilterableTreeViewLoadingSkeleton {
   display: none;
 }
 
-/* stylelint-disable-next-line selector-max-type */
+/* stylelint-disable selector-no-qualifying-type */
+/* stylelint-disable selector-max-type */
 filterable-tree-view[data-loading] .FilterableTreeViewLoadingSkeleton {
   display: block;
 }
 
-/* stylelint-disable-next-line selector-max-type */
 filterable-tree-view[data-loading] tree-view,
 filterable-tree-view[data-loading] [data-target~="filterable-tree-view.noResultsMessage"] {
   display: none;

app/components/primer/open_project/filterable_tree_view.rb

@@ -138,6 +138,8 @@ module OpenProject
     class FilterableTreeView < Primer::Component
       delegate :with_leaf, :with_sub_tree, to: :@tree_view
 
+      SUPPORTED_SELECT_VARIANTS = %i[multiple single none].freeze
+
       DEFAULT_FILTER_INPUT_ARGUMENTS = {
         name: :filter,
         label: I18n.t(:button_filter),
@@ -267,13 +269,11 @@ def with_filter_mode(name:, **system_arguments)
         @filter_mode_control.with_item(**system_arguments)
       end
 
-      SUPPORTED_SELECT_VARIANTS = %i[multiple single none].freeze
-
       def with_sub_tree(**system_arguments, &block)
         system_arguments[:select_variant] ||= :multiple
 
         unless SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
-          raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map { |v| "`:#{v}`" }.join(", ")} as select_variant"
+          raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
         end
 
         if system_arguments[:select_variant] != :multiple
@@ -294,7 +294,7 @@ def with_leaf(**system_arguments, &block)
         system_arguments[:select_variant] ||= :multiple
 
         unless SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
-          raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map { |v| "`:#{v}`" }.join(", ")} as select_variant"
+          raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
         end
 
         if system_arguments[:select_variant] != :multiple

app/components/primer/open_project/filterable_tree_view.ts

@@ -2,6 +2,7 @@ import {controller, target} from '@github/catalyst'
 import {SegmentedControlElement} from '../alpha/segmented_control'
 import {TreeViewElement} from '../alpha/tree_view/tree_view'
 import {TreeViewSubTreeNodeElement} from '../alpha/tree_view/tree_view_sub_tree_node_element'
+// eslint-disable-next-line import/named
 import {TreeViewCheckedValue, TreeViewNodeInfo} from '../shared_events'
 
 // This function is expected to return the following values:
@@ -108,6 +109,15 @@ export class FilterableTreeViewElement extends HTMLElement {
           this.#checkedNodeIds.delete(nodeId)
           this.#checkedNodeFormPayloads.delete(nodeId)
         } else {
+          // In single-select mode, TreeView clears the previous selection internally
+          // (via checkOnlyAtPath) but the treeViewNodeChecked event only contains the
+          // newly selected node. Clear our tracked state so #restoreSelectionState does
+          // not re-check previously selected nodes after a tree replacement.
+          if (node.getAttribute('data-select-variant') === 'single') {
+            this.#checkedNodeIds.clear()
+            this.#checkedNodeFormPayloads.clear()
+          }
+
           this.#checkedNodeIds.set(nodeId, nodeInfo.checkedValue)
           const payload: {path: string[]; value?: string} = {path: nodeInfo.path}
           const dataValue = node.getAttribute('data-value')
@@ -391,12 +401,14 @@ export class FilterableTreeViewElement extends HTMLElement {
   // Applies a previously captured expansion snapshot to the current tree.
   #applyExpansionSnapshot(snapshot: Map<string, boolean>) {
     for (const [nodeId, wasExpanded] of snapshot) {
-      const treeitem = this.querySelector<HTMLElement>(
-        `[role=treeitem][data-node-id="${CSS.escape(nodeId)}"]`,
-      )
+      const treeitem = this.querySelector<HTMLElement>(`[role=treeitem][data-node-id="${CSS.escape(nodeId)}"]`)
       const subTreeNode = treeitem?.closest('tree-view-sub-tree-node') as TreeViewSubTreeNodeElement | null
       if (subTreeNode) {
-        wasExpanded ? subTreeNode.expand() : subTreeNode.collapse()
+        if (wasExpanded) {
+          subTreeNode.expand()
+        } else {
+          subTreeNode.collapse()
+        }
       }
     }
   }

app/components/primer/open_project/filterable_tree_view/sub_tree.rb

@@ -12,7 +12,7 @@ def with_sub_tree(**system_arguments, &block)
           system_arguments[:select_variant] ||= :multiple
 
           unless FilterableTreeView::SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
-            raise ArgumentError, "FilterableTreeView only supports #{FilterableTreeView::SUPPORTED_SELECT_VARIANTS.map { |v| "`:#{v}`" }.join(", ")} as select_variant"
+            raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
           end
 
           super(
@@ -27,7 +27,7 @@ def with_leaf(**system_arguments, &block)
           system_arguments[:select_variant] ||= :multiple
 
           unless FilterableTreeView::SUPPORTED_SELECT_VARIANTS.include?(system_arguments[:select_variant])
-            raise ArgumentError, "FilterableTreeView only supports #{FilterableTreeView::SUPPORTED_SELECT_VARIANTS.map { |v| "`:#{v}`" }.join(", ")} as select_variant"
+            raise ArgumentError, "FilterableTreeView only supports #{SUPPORTED_SELECT_VARIANTS.map(&:inspect).to_sentence} as select_variant"
           end
 
           super(
@@ -37,11 +37,11 @@ def with_leaf(**system_arguments, &block)
         end
 
         def with_loading_spinner(**system_arguments)
-          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the wole component load asynchronously."
+          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the whole component load asynchronously."
         end
 
         def with_loading_skeleton(**system_arguments)
-          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the wole component load asynchronously."
+          raise ArgumentError, "FilterableTreeView does not support select variants for sub-trees loaded asynchronously. Please make the whole component load asynchronously."
         end
       end
     end

app/controllers/primer/view_components/filterable_tree_view_items_controller.rb

@@ -6,7 +6,7 @@ module ViewComponents
     # :nocov:
     class FilterableTreeViewItemsController < ApplicationController
       # A node in the demo tree. Leaf nodes have no children.
-      TreeNode = Struct.new(:id, :label, :children, :all_descendant_ids, keyword_init: true) do
+      TreeNode = Data.define(:id, :label, :children, :all_descendant_ids) do
         def leaf?
           children.nil? || children.empty?
         end
@@ -23,7 +23,7 @@ def filter(query)
           else
             filtered_children = children.filter_map { |child| child.filter(query) }
             if matches?(query) || !filtered_children.empty?
-              TreeNode.new(
+              self.class.new(
                 id: id,
                 label: label,
                 children: filtered_children,
@@ -165,34 +165,26 @@ def self.branch(id:, label:, children:)
       def index
         query = params[:query].to_s.strip
         select_variant = (params[:select_variant].presence || "multiple").to_sym
-        include_sub_items = params[:include_sub_items] == "true"
-        checked_ids = Array(params["checked_ids[]"]).map(&:to_s)
         nodes = TREE.filter_map { |node| node.filter(query) }
 
         render locals: {
           nodes: nodes,
           query: query,
-          select_variant: select_variant,
-          include_sub_items: include_sub_items,
-          checked_ids: checked_ids
+          select_variant: select_variant
         }
       end
 
       def async_form_tree
         query = params[:query].to_s.strip
         name = params[:name].to_s.presence || "characters"
-        include_sub_items = params[:include_sub_items] == "true"
-        checked_ids = Array(params["checked_ids[]"]).map(&:to_s)
         nodes = TREE.filter_map { |node| node.filter(query) }
         builder = ActionView::Helpers::FormBuilder.new("", nil, view_context, {})
 
         render locals: {
           nodes: nodes,
           query: query,
           name: name,
-          builder: builder,
-          include_sub_items: include_sub_items,
-          checked_ids: checked_ids
+          builder: builder
         }
       end
     end

previews/primer/open_project/filterable_tree_view_preview/link_nodes.html.erb

@@ -2,17 +2,17 @@
   tree_view_arguments: { node_variant: :anchor },
   filter_mode_control_arguments: { hidden: true }
 )) do |tree| %>
-  <% tree.with_sub_tree(label: "Cloud Services", select_variant: :none, expanded: expanded, href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank") do |cloud| %>
-    <% cloud.with_leaf(label: "OpenProject", select_variant: :none, href: "https://www.openproject.org", target: "blank") do |node| %>
+  <% tree.with_sub_tree(label: "Cloud Services", select_variant: :none, expanded: expanded, href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "_blank") do |cloud| %>
+    <% cloud.with_leaf(label: "OpenProject", select_variant: :none, href: "https://www.openproject.org", target: "_blank") do |node| %>
       <% node.with_trailing_visual_icon(icon: :"link-external") %>
     <% end %>
 
-    <% cloud.with_leaf(label: "Hetzner", select_variant: :none, href: "https://www.hetzner.com", target: "blank") do |node| %>
+    <% cloud.with_leaf(label: "Hetzner", select_variant: :none, href: "https://www.hetzner.com", target: "_blank") do |node| %>
       <% node.with_trailing_visual_icon(icon: :"link-external") %>
     <% end %>
   <% end %>
 
-  <% tree.with_leaf(label: "GitHub", select_variant: :none, href: "https://github.com", target: "blank") do |node| %>
+  <% tree.with_leaf(label: "GitHub", select_variant: :none, href: "https://github.com", target: "_blank") do |node| %>
     <% node.with_trailing_visual_icon(icon: :"link-external") %>
   <% end %>
 <% end %>

test/components/component_test.rb

@@ -231,6 +231,7 @@ def test_registered_components
       "Primer::Alpha::TreeView::IconPair",
       "Primer::Alpha::TreeView::Icon",
       "Primer::Alpha::TreeView::LeadingAction",
+      "Primer::Alpha::TreeView::TrailingAction",
       "Primer::Alpha::TreeView::LeafNode",
       "Primer::Alpha::TreeView::LoadingFailureMessage",
       "Primer::Alpha::TreeView::Node",