[chore] render filterable tree view in fieldset

Fieldset-style inputs never go through the `FormControl` wrapper, so the
legend needs the `FormControl-label` class applied by the component. The
input does not support validation for the time being.

Wrapper arguments stay on the fieldset, while the component-specific and
form arguments flow to the inner tree view.

lib/primer/open_project/forms/_index.sass

@@ -1 +1,2 @@
 @import "advanced_form_group"
+@import "filterable_tree_view"

lib/primer/open_project/forms/dsl/filterable_tree_view_input.rb

@@ -59,6 +59,10 @@ module Primer
             true
           end
           # :nocov:
+
+          def supports_validation?
+            false
+          end
         end
       end
     end

lib/primer/open_project/forms/filterable_tree_view.html.erb

@@ -1,7 +1,19 @@
-<%=
-  render(FormControl.new(input: @input)) do
-    render(Primer::OpenProject::FilterableTreeView.new(**@input.input_arguments)) do |tree_view|
-      @input.block&.call(tree_view)
-    end
-  end
-%>
+<div class="FormControl-filterable-tree-view-wrap">
+  <%= content_tag(:fieldset, **@fieldset_arguments) do %>
+    <% if @input.label %>
+      <%= content_tag(:legend, **@input.label_arguments) do %>
+        <%= @input.label %>
+      <% end %>
+    <% end %>
+    <div class="mb-2">
+      <%= render(Caption.new(input: @input)) %>
+    </div>
+    <%= render(SpacingWrapper.new) do %>
+      <%=
+        render(Primer::OpenProject::FilterableTreeView.new(**@tree_view_arguments)) do |tree_view|
+          @input.block&.call(tree_view)
+        end
+      %>
+    <% end %>
+  <% end %>
+</div>

lib/primer/open_project/forms/filterable_tree_view.rb

@@ -39,10 +39,18 @@ module Primer
           super()
 
           @input = input
+          @input.add_label_classes("FormControl-label")
 
-          @input.input_arguments[:form_arguments] = {
-            name: @input.name,
-            builder: builder
+          @fieldset_arguments = @input.input_arguments.extract!(:hidden, :class, :classes)
+          Primer::Forms::Utils.classify(@fieldset_arguments)
+          @fieldset_arguments.delete(:class) if @fieldset_arguments[:class].blank?
+
+          @tree_view_arguments = {
+            **@input.input_arguments,
+            form_arguments: {
+              name: @input.name,
+              builder: builder
+            }
           }
         end
       end

lib/primer/open_project/forms/filterable_tree_view.sass

@@ -0,0 +1,5 @@
+.FormControl-filterable-tree-view-wrap
+  & fieldset
+    padding: 0
+    margin: 0
+    border: 0

modules/wikis/app/forms/wikis/link_existing_wiki_page_form.rb

@@ -37,6 +37,7 @@ module Wikis
 
       f.filterable_tree_view(
         name: "wiki_page_selection",
+        label: I18n.t("wikis.link_existing_wiki_page_form.label"),
         src: helpers.search_wiki_pages_path(provider_id: model.provider_id, name: "wiki_page_selection"),
         filter_mode_control_arguments: { hidden: true },
         filter_input_arguments: {

modules/wikis/config/locales/en.yml

@@ -151,6 +151,7 @@ en:
     link_existing_wiki_page_dialog:
       title: Add existing wiki page
     link_existing_wiki_page_form:
+      label: Wiki page
       no_results: No wiki pages found
       placeholder: Search for a wiki page
     oauth_login_component:

spec/lib/primer/open_project/forms/filterable_tree_view_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe Primer::OpenProject::Forms::FilterableTreeView, type: :forms do
       render_in_view_context(model, params) do |model, params|
         primer_form_with(url: "/foo", model:) do |f|
           render_inline_form(f) do |form|
-            form.filterable_tree_view(name: :ingredients, **params) do |tree|
+            form.filterable_tree_view(name: :ingredients, label: "Ingredients", **params) do |tree|
               tree.with_leaf(select_variant: :multiple, label: "flour")
               tree.with_leaf(select_variant: :multiple, label: "sugar")
               tree.with_leaf(select_variant: :multiple, label: "eggs")
@@ -60,10 +60,30 @@ RSpec.describe Primer::OpenProject::Forms::FilterableTreeView, type: :forms do
       expect(rendered_form).to have_element :"filterable-tree-view"
     end
 
+    it "renders the fieldset" do
+      expect(rendered_form).to have_selector :fieldset, "Ingredients"
+    end
+
+    it "renders the label as the fieldset legend" do
+      expect(rendered_form).to have_element :legend, class: "FormControl-label", text: "Ingredients"
+    end
+
     it "renders the leafs", :aggregate_failures do
       expect(rendered_form).to have_element(:li, class: "TreeViewItem", role: "none", text: "flour")
       expect(rendered_form).to have_element(:li, class: "TreeViewItem", role: "none", text: "sugar")
       expect(rendered_form).to have_element(:li, class: "TreeViewItem", role: "none", text: "eggs")
     end
+
+    it "wires the tree view up for form submission" do
+      expect(rendered_form).to have_element :input, type: "hidden", name: "comment[ingredients][]", visible: :all
+    end
+
+    context "when hidden" do
+      let(:params) { { hidden: true } }
+
+      it "hides the whole fieldset" do
+        expect(rendered_form).to have_selector :fieldset, visible: :hidden
+      end
+    end
   end
 end