[#57904] meeting reload button will take you to your previous spot on the page

app/views/layouts/base.html.erb

@@ -116,7 +116,7 @@ See COPYRIGHT and LICENSE files for more details.
       </div>
     <% end %>
     <div class="content-overlay"></div>
-    <main id="content-wrapper" class="<%= initial_classes %>">
+    <%= content_tag :main, id: "content-wrapper", class: initial_classes, data: stimulus_content_data do %>
       <%# Primerized flash messages are being rendered separately  %>
       <div id="primerized-flash-messages" class="op-primer-flash">
         <%= render_primerized_flash %>
@@ -134,8 +134,7 @@ See COPYRIGHT and LICENSE files for more details.
       <% end %>
       <%= content_tag :div,
                       id: 'content',
-                      class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}",
-                      data: stimulus_content_data do %>
+                      class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}" do %>
         <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
         <% if content_for?(:content_header) %>
           <div id="content-header">
@@ -162,7 +161,7 @@ See COPYRIGHT and LICENSE files for more details.
           <%= content_for :content_body_right %>
         <% end %>
       <% end %>
-    </main>
+    <% end %>
   </div>
   <div id="ajax-indicator" style="display:none;"><span><%= t(:label_loading) %></span></div>
 </div>

docs/development/concepts/stimulus/README.md

@@ -44,7 +44,7 @@ You need to take care to prefix all actions, values etc. with the exact same pat
 
 ### Requiring a page controller
 
-If you have a single controller used in a partial, we have added a helper to use in a partial in order to append a controller to the `#content`tag. This is useful if your template doesn't have a single DOM root. For example, to load the dynamic `project-storage-form` controller and provide a custom value to it:
+If you have a single controller used in a partial, we have added a helper to use in a partial in order to append a controller to the `#content-wrapper` tag. This is useful if your template doesn't have a single DOM root. For example, to load the dynamic `project-storage-form` controller and provide a custom value to it:
 
 ```erb
 <% content_controller 'project-storage-form',

frontend/src/stimulus/controllers/poll-for-changes.controller.ts

@@ -36,11 +36,17 @@ export default class PollForChangesController extends ApplicationController {
     url: String,
     interval: Number,
     reference: String,
+    autoscrollEnabled: Boolean,
   };
 
+  static targets = ['reloadButton'];
+
+  declare reloadButtonTarget:HTMLLinkElement;
+
   declare referenceValue:string;
   declare urlValue:string;
   declare intervalValue:number;
+  declare autoscrollEnabledValue:boolean;
 
   private interval:number;
 
@@ -52,13 +58,21 @@ export default class PollForChangesController extends ApplicationController {
         void this.triggerTurboStream();
       }, this.intervalValue || 10_000);
     }
+
+    if (this.autoscrollEnabledValue) {
+      window.addEventListener('DOMContentLoaded', this.autoscrollToLastKnownPosition.bind(this));
+    }
   }
 
   disconnect() {
     super.disconnect();
     clearInterval(this.interval);
   }
 
+  reloadButtonTargetConnected() {
+    this.reloadButtonTarget.addEventListener('click', this.rememberCurrentScrollPosition.bind(this));
+  }
+
   triggerTurboStream() {
     void fetch(`${this.urlValue}?reference=${this.referenceValue}`, {
       headers: {
@@ -73,4 +87,29 @@ export default class PollForChangesController extends ApplicationController {
       }
     });
   }
+
+  rememberCurrentScrollPosition() {
+    const currentPosition = document.getElementById('content-body')?.scrollTop;
+
+    if (currentPosition !== undefined) {
+      sessionStorage.setItem(this.scrollPositionKey(), currentPosition.toString());
+    }
+  }
+
+  autoscrollToLastKnownPosition() {
+    const lastKnownPos = sessionStorage.getItem(this.scrollPositionKey());
+    if (lastKnownPos) {
+      const content = document.getElementById('content-body');
+
+      if (content) {
+        content.scrollTop = parseInt(lastKnownPos, 10);
+      }
+    }
+
+    sessionStorage.removeItem(this.scrollPositionKey());
+  }
+
+  private scrollPositionKey():string {
+    return `${this.urlValue}/scrollPosition`;
+  }
 }

modules/meeting/app/components/meetings/header_component.html.erb

@@ -1,16 +1,14 @@
 <%=
-  params = {
-      controller: "poll-for-changes",
-      poll_for_changes_reference_value: @meeting.changed_hash,
-      poll_for_changes_url_value: check_for_updates_meeting_path(@meeting),
-      poll_for_changes_interval_value: check_for_updates_interval
-  }
+  helpers.content_controller "poll-for-changes",
+                     poll_for_changes_reference_value: @meeting.changed_hash,
+                     poll_for_changes_url_value: check_for_updates_meeting_path(@meeting),
+                     poll_for_changes_interval_value: check_for_updates_interval,
+                     poll_for_changes_autoscroll_enabled_value: true
 
   component_wrapper do
     render(Primer::OpenProject::PageHeader.new(
       test_selector: "meeting-page-header",
-      state: @state,
-      data: params
+      state: @state
     )) do |header|
       header.with_title do |title|
         title.with_editable_form(model: @meeting,

modules/meeting/app/components/meetings/update_flash_component.rb

@@ -43,7 +43,7 @@ def call
         banner.with_action_button(
           tag: :a,
           href: helpers.meeting_path(meeting),
-          data: { turbo: false },
+          data: { turbo: false, poll_for_changes_target: "reloadButton" },
           size: :medium
         ) { I18n.t("label_meeting_reload") }
 

modules/meeting/spec/support/pages/structured_meeting/show.rb

@@ -43,7 +43,7 @@ def trigger_dropdown_menu_item(name)
 
     def trigger_change_poll
       script = <<~JS
-        var target = document.querySelector('[data-test-selector="meeting-page-header"]');
+        var target = document.querySelector('#content-wrapper');
         var controller = window.Stimulus.getControllerForElementAndIdentifier(target, 'poll-for-changes')
         controller.triggerTurboStream();
       JS