[#63717] Filterable tree view

.changeset/tough-seas-post.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add the FilterableTreeView component

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/danger_dialog/default/aria-snapshot--after-interaction.yml

@@ -1,8 +1,8 @@
 - button "Click me"
 - alertdialog "Delete dialog":
   - heading "Delete dialog" [level=1]
-  - 'button "Translation missing: en.button_close"'
+  - button "Close"
   - heading "Delete this item?" [level=2]
   - paragraph: Do you want to continue?
-  - 'button "Translation missing: en.button_cancel"'
-  - 'button "Translation missing: en.button_delete"'
+  - button "Cancel"
+  - button "Delete"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/danger_dialog/with_confirmation_check_box/aria-snapshot--after-interaction.yml

@@ -1,10 +1,10 @@
 - button "Click me"
 - alertdialog "Delete dialog":
   - heading "Delete dialog" [level=1]
-  - 'button "Translation missing: en.button_close"'
+  - button "Close"
   - heading "Permanently delete this item?" [level=2]
   - paragraph: This action is not reversible. Please proceed with caution.
   - checkbox "I understand that this deletion cannot be reversed": "1"
   - text: I understand that this deletion cannot be reversed
-  - 'button "Translation missing: en.button_cancel"'
-  - 'button "Translation missing: en.button_delete_permanently" [disabled]'
+  - button "Cancel"
+  - button "Delete permanently" [disabled]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/feedback_dialog/default/aria-snapshot--after-interaction.yml

@@ -1,7 +1,7 @@
 - button "Click me"
 - dialog "Success dialog":
   - heading "Success dialog" [level=1]
-  - 'button "Translation missing: en.button_close"'
+  - button "Close"
   - heading "Success" [level=2]
   - paragraph: Great! Everything worked well.
-  - 'button "Translation missing: en.button_close"'
+  - button "Close"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/custom_segmented_control/aria-snapshot--after-interaction.yml

@@ -0,0 +1,14 @@
+- list "Filter mode":
+  - listitem:
+    - button "Teacher"
+  - listitem:
+    - button "All"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/custom_segmented_control/aria-snapshot.yml

@@ -0,0 +1,30 @@
+- list "Filter mode":
+  - listitem:
+    - button "Teacher"
+  - listitem:
+    - button "All"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Students" [expanded] [level=1]
+  - group:
+    - treeitem "Ravenclaw" [expanded] [level=2]
+    - group:
+      - treeitem "Luna Lovegood" [level=3]
+    - treeitem "Slytherin" [expanded] [level=2]
+    - group:
+      - treeitem "Draco Malfoy" [level=3]
+    - treeitem "Hufflepuff" [expanded] [level=2]
+    - group:
+      - treeitem "Susan Bones" [level=3]
+    - treeitem "Gryffindor" [expanded] [level=2]
+    - group:
+      - treeitem "Harry Potter" [level=3]
+      - treeitem "Ronald Weasley" [level=3]
+      - treeitem "Hermione Granger" [level=3]
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/default/aria-snapshot--after-interaction.yml

@@ -0,0 +1,30 @@
+- list "Filter mode":
+  - listitem:
+    - button "All"
+  - listitem:
+    - button "Selected"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Students" [expanded] [level=1]
+  - group:
+    - treeitem "Ravenclaw" [expanded] [level=2]
+    - group:
+      - treeitem "Luna Lovegood" [level=3]
+    - treeitem "Slytherin" [expanded] [level=2]
+    - group:
+      - treeitem "Draco Malfoy" [level=3]
+    - treeitem "Hufflepuff" [expanded] [level=2]
+    - group:
+      - treeitem "Susan Bones" [level=3]
+    - treeitem "Gryffindor" [expanded] [level=2]
+    - group:
+      - treeitem "Harry Potter" [level=3]
+      - treeitem "Ronald Weasley" [level=3]
+      - treeitem "Hermione Granger" [level=3]
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/default/aria-snapshot.yml

@@ -0,0 +1,30 @@
+- list "Filter mode":
+  - listitem:
+    - button "All"
+  - listitem:
+    - button "Selected"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Students" [expanded] [level=1]
+  - group:
+    - treeitem "Ravenclaw" [expanded] [level=2]
+    - group:
+      - treeitem "Luna Lovegood" [level=3]
+    - treeitem "Slytherin" [expanded] [level=2]
+    - group:
+      - treeitem "Draco Malfoy" [level=3]
+    - treeitem "Hufflepuff" [expanded] [level=2]
+    - group:
+      - treeitem "Susan Bones" [level=3]
+    - treeitem "Gryffindor" [expanded] [level=2]
+    - group:
+      - treeitem "Harry Potter" [level=3]
+      - treeitem "Ronald Weasley" [level=3]
+      - treeitem "Hermione Granger" [level=3]
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/playground/aria-snapshot--after-interaction.yml

@@ -0,0 +1,30 @@
+- list "Filter mode":
+  - listitem:
+    - button "All"
+  - listitem:
+    - button "Selected"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Students" [expanded] [level=1]
+  - group:
+    - treeitem "Ravenclaw" [expanded] [level=2]
+    - group:
+      - treeitem "Luna Lovegood" [level=3]
+    - treeitem "Slytherin" [expanded] [level=2]
+    - group:
+      - treeitem "Draco Malfoy" [level=3]
+    - treeitem "Hufflepuff" [expanded] [level=2]
+    - group:
+      - treeitem "Susan Bones" [level=3]
+    - treeitem "Gryffindor" [expanded] [level=2]
+    - group:
+      - treeitem "Harry Potter" [level=3]
+      - treeitem "Ronald Weasley" [level=3]
+      - treeitem "Hermione Granger" [level=3]
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

.playwright/screenshots/snapshots.test.ts-snapshots/primer/open_project/filterable_tree_view/playground/aria-snapshot.yml

@@ -0,0 +1,30 @@
+- list "Filter mode":
+  - listitem:
+    - button "All"
+  - listitem:
+    - button "Selected"
+- checkbox "Include sub-items": "1"
+- text: Include sub-items Filter
+- searchbox "Filter"
+- button "Clear"
+- tree:
+  - treeitem "Students" [expanded] [level=1]
+  - group:
+    - treeitem "Ravenclaw" [expanded] [level=2]
+    - group:
+      - treeitem "Luna Lovegood" [level=3]
+    - treeitem "Slytherin" [expanded] [level=2]
+    - group:
+      - treeitem "Draco Malfoy" [level=3]
+    - treeitem "Hufflepuff" [expanded] [level=2]
+    - group:
+      - treeitem "Susan Bones" [level=3]
+    - treeitem "Gryffindor" [expanded] [level=2]
+    - group:
+      - treeitem "Harry Potter" [level=3]
+      - treeitem "Ronald Weasley" [level=3]
+      - treeitem "Hermione Granger" [level=3]
+  - treeitem "Albus Dumbledore" [level=1]
+  - treeitem "Minerva McGonagall" [level=1]
+  - treeitem "Severus Snape" [level=1]
+  - treeitem "Rubeus Hagrid" [level=1]

app/components/primer/alpha/segmented_control.ts

@@ -1,7 +1,7 @@
 import {controller, targets} from '@github/catalyst'
 
 @controller
-class SegmentedControlElement extends HTMLElement {
+export class SegmentedControlElement extends HTMLElement {
   @targets items: HTMLElement[]
 
   connectedCallback() {
@@ -17,6 +17,21 @@ class SegmentedControlElement extends HTMLElement {
 
     button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
     button.setAttribute('aria-current', 'true')
+
+    this.dispatchEvent(
+      new CustomEvent('itemActivated', {
+        bubbles: true,
+        detail: {
+          item: button,
+          checked: false,
+          value: button.querySelector('.Button-label')?.textContent,
+        },
+      }),
+    )
+  }
+
+  get current(): HTMLElement | null {
+    return this.querySelector('[aria-current=true]')
   }
 
   // Updates the button labels to have a data-content attribute with the text

app/components/primer/alpha/stack.pcss

@@ -115,6 +115,11 @@
     flex-wrap: nowrap;
   }
 
+  &[data-wrap='reverse'],
+  &[data-wrap-narrow='reverse'] {
+    flex-wrap: wrap-reverse;
+  }
+
   /* @custom-media --veiwportRange-regular */
   @media (min-width: 48rem) {
     &[data-padding-regular='none'] {
@@ -203,6 +208,10 @@
     &[data-wrap-regular='nowrap'] {
       flex-wrap: nowrap;
     }
+
+    &[data-wrap-regular='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
   }
 
   /* @custom-media --viewportRange-wide */
@@ -293,5 +302,9 @@
     &[data-wrap-wide='nowrap'] {
       flex-wrap: nowrap;
     }
+
+    &[data-wrap-wide='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
   }
 }

app/components/primer/alpha/stack.rb

@@ -78,7 +78,8 @@ class WrapArg < Primer::ResponsiveArg
         OPTIONS = [
           nil,
           DEFAULT,
-          :wrap
+          :wrap,
+          :reverse
         ].freeze
 
         def initialize(values)

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

@@ -0,0 +1,28 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
+      <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
+        <%= render(Primer::Alpha::StackItem.new) do %>
+          <%= render(@filter_mode_control) %>
+        <% end %>
+        <%= render(Primer::Alpha::StackItem.new) do %>
+          <%= render(@include_sub_items_check_box) do |input| %>
+            <% input.merge_input_arguments!(form: "") %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
+        <%= render(@filter_input) do |input| %>
+          <%# exclude from form submissions %>
+          <% input.merge_input_arguments!(form: "") %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
+      <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+        <% tree.with_leaf(**@no_results_node_arguments) %>
+      <% end %>
+    <% end %>
+    <%= render(@tree_view) %>
+  <% end %>
+<% end %>