Add stable DOM ids to sprint backlog menus

Assign deterministic ids to sprint headers and sprint menu elements
so Turbo morphing can reconcile the old and new DOM reliably.

Author: myabc

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

@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%= component_wrapper(tag: :section) do %>
   <%= render(Primer::Beta::BorderBox.new(**@system_arguments)) do |border_box| %>
-    <% border_box.with_header do %>
+    <% border_box.with_header(id: dom_target(sprint, :header)) do %>
       <%= render(Backlogs::SprintHeaderComponent.new(sprint:, folded: folded?)) %>
     <% end %>
     <% if stories.empty? %>

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

@@ -28,7 +28,7 @@ See COPYRIGHT and LICENSE files for more details.
 ++# %>
 
 <%=
-  render(Primer::Alpha::ActionMenu.new(anchor_align: :end, classes: "hide-when-print")) do |menu|
+  render(Primer::Alpha::ActionMenu.new(**@system_arguments)) do |menu|
     menu.with_show_button(
       scheme: :invisible,
       icon: :"kebab-horizontal",
@@ -38,6 +38,7 @@ See COPYRIGHT and LICENSE files for more details.
 
     if user_allowed?(:create_sprints)
       menu.with_item(
+        id: dom_target(sprint, :menu, :edit_sprint),
         label: t(".action_menu.edit_sprint"),
         href: edit_dialog_project_sprint_path(project, sprint),
         content_arguments: { data: { controller: "async-dialog" } }
@@ -48,6 +49,7 @@ See COPYRIGHT and LICENSE files for more details.
 
     if user_allowed?(:manage_sprint_items)
       menu.with_item(
+        id: dom_target(sprint, :menu, :new_story),
         label: t(".action_menu.new_story"),
         href: new_project_work_packages_dialog_path(
           project,
@@ -66,6 +68,7 @@ See COPYRIGHT and LICENSE files for more details.
 
     menu.with_item(
       # TODO: sprint_id filter does not exist for work packages. Add?
+      id: dom_target(sprint, :menu, :stories_tasks),
       scheme: :danger,
       label: t(".action_menu.stories_tasks"),
       tag: :a,

modules/backlogs/app/components/backlogs/sprint_menu_component.rb

@@ -34,12 +34,20 @@ class SprintMenuComponent < ApplicationComponent
 
     attr_reader :sprint, :project, :current_user
 
-    def initialize(sprint:, project:, current_user: User.current)
+    def initialize(sprint:, project:, current_user: User.current, **system_arguments)
       super()
 
       @sprint = sprint
       @project = project
       @current_user = current_user
+
+      @system_arguments = system_arguments
+      @system_arguments[:menu_id] = dom_target(sprint, :menu)
+      @system_arguments[:anchor_align] = :end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "hide-when-print"
+      )
     end
 
     def stories

modules/backlogs/spec/components/backlogs/sprint_component_spec.rb

@@ -94,6 +94,12 @@ def render_component
         expect(page).to have_css(".Box-header h3", text: "Sprint 1")
       end
 
+      it "renders a stable id on the sprint header" do
+        render_component
+
+        expect(page).to have_element(:div, class: "Box-header", id: /\Aagile_sprint_#{sprint.id}_header\z/)
+      end
+
       it "renders StoryComponent for each story" do
         render_component
 

modules/backlogs/spec/components/backlogs/sprint_header_component_spec.rb

@@ -123,6 +123,12 @@ def render_component(folded: false)
 
         expect(page).to have_css("action-menu")
       end
+
+      it "renders a stable id on the sprint menu trigger" do
+        render_component
+
+        expect(page).to have_element(:button, id: /\Aagile_sprint_#{sprint.id}_menu-button\z/)
+      end
     end
 
     context "with no stories" do

modules/backlogs/spec/components/backlogs/sprint_menu_component_spec.rb

@@ -105,6 +105,14 @@ def render_component
   describe "always-visible items" do
     let(:permissions) { [:view_sprints] }
 
+    it "renders stable ids on the action menu and stories/tasks item" do
+      render_component
+
+      expect(page).to have_element(:button, id: /\Aagile_sprint_#{sprint.id}_menu-button\z/)
+      expect(page).to have_element(:ul, id: /\Aagile_sprint_#{sprint.id}_menu-list\z/)
+      expect(page).to have_element(:a, id: /\Aagile_sprint_#{sprint.id}_menu_stories_tasks\z/)
+    end
+
     it "shows Stories/Tasks link" do
       render_component