[AGILE-176] Give backlog filter panels stable ids

Pass an explicit, field-scoped `id:` to the filter `SelectPanel` so the
panel element and its trigger button keep deterministic ids across Turbo
frame replacements, instead of Primer's per-render random id.

https://community.openproject.org/wp/AGILE-176

Author: myabc

modules/backlogs/app/components/backlogs/backlog_filter_select_panel_component.html.erb

@@ -5,6 +5,7 @@
                panelClosed->backlogs--backlog-filter-select-panel#revertOnClose">
   <%= render(
         Primer::Alpha::SelectPanel.new(
+          id: panel_id,
           select_variant: :multiple,
           fetch_strategy: :local,
           title: t(".select_panel_title")
@@ -18,6 +19,7 @@
 
     <% items.each do |item| %>
       <% panel.with_item(
+           id: item_id(item),
            label: item.name,
            active: selected_ids&.include?(item.id) || false,
            content_arguments: { data: { value: item.id } }

modules/backlogs/app/components/backlogs/backlog_filter_select_panel_component.rb

@@ -44,6 +44,14 @@ def initialize(project:, field_name:)
 
     private
 
+    def panel_id
+      dom_target(filter_field_name, :filter_select_panel)
+    end
+
+    def item_id(item)
+      dom_target(panel_id, :item, item.id.to_s)
+    end
+
     def items
       if filter_field == :sprint_ids
         all_sprints_for(project)

modules/backlogs/spec/components/backlogs/backlog_filter_select_panel_component_spec.rb

@@ -61,6 +61,12 @@ def render_component(field_name:, **params)
       expect(page).to have_css("[aria-selected='true']", text: "Alpha Sprint")
       expect(page).to have_css("[aria-selected='false']", text: "Beta Sprint")
     end
+
+    it "scopes each item id under the panel id" do
+      render_component(field_name: :sprint_ids)
+      expect(page).to have_css("#sprint_filter_select_panel_item_#{sprint1.id}", visible: :all, text: "Alpha Sprint")
+      expect(page).to have_css("#sprint_filter_select_panel_item_#{sprint2.id}", visible: :all, text: "Beta Sprint")
+    end
   end
 
   describe "bucket panel" do
@@ -83,6 +89,29 @@ def render_component(field_name:, **params)
       expect(page).to have_element(aria: { selected: false }, text: "Ideas")
       expect(page).to have_element(aria: { selected: true }, text: "Backlog")
     end
+
+    it "scopes each item id under the panel id, including the inbox sentinel" do
+      render_component(field_name: :bucket_ids)
+      expect(page).to have_css("#backlog_bucket_filter_select_panel_item_#{bucket1.id}", visible: :all, text: "Ideas")
+      expect(page).to have_css("#backlog_bucket_filter_select_panel_item_#{bucket2.id}", visible: :all, text: "Backlog")
+      expect(page).to have_css("#backlog_bucket_filter_select_panel_item_inbox", visible: :all, text: I18n.t(:label_inbox))
+    end
+  end
+
+  describe "stable DOM ids" do
+    it "derives the sprint panel and its trigger button ids from the field name" do
+      render_component(field_name: :sprint_ids)
+
+      expect(page).to have_css("#sprint_filter_select_panel", visible: :all)
+      expect(page).to have_css("#sprint_filter_select_panel-button", visible: :all)
+    end
+
+    it "derives the bucket panel and its trigger button ids from the field name" do
+      render_component(field_name: :bucket_ids)
+
+      expect(page).to have_css("#backlog_bucket_filter_select_panel", visible: :all)
+      expect(page).to have_css("#backlog_bucket_filter_select_panel-button", visible: :all)
+    end
   end
 
   describe "submission wiring" do