Rails turbo "data-turbo-action: advance", handling refresh, src, and maintaining query params in turbo frames

Question

I have been tasked with refactoring one of our pages which uses ajax, j render, and bootstrap to turbo frames.

The page in question is for a specific User model -> users_controller#show

In our application a user has many user_programs which can be selected by a dropdown. Currently when loading a user the first user_program is displayed at the bottom of the page if one has not been specified in the url. To accomplish this in turbo I have created the following turbo_frame (in HAML)

= turbo_frame_tag 'user_container', 'data-turbo-action': 'advance', src: user_program_path(user_id: @user.id, id: 1)

The src attribute will autoload the specified path to the user program on the initial page load. Right now I have it hardcoded to 1 however in the future it will need to be a bit smarter, but that's besides the point.

This leads me to my first issues.

#1 On initial page load the url does not respect the provided src attribute

When navigating to the /users/2 endpoint, the url will NOT be changed to /users/2/user_programs/1 as it would if I were to click on the dropdown manually due to the 'data-turbo-action': 'advance'. I need to url to be changed so users can share links with each other and go to the correct program, this will be confusing if they have to click on a button to see the same thing they already see just so the url updates.

This leads me cleanly into my second issue

#2 When refreshing WITH the correct url (/users/2/user_programs/1) only that frame will be displayed to the user

If the user were to click on the button manually and the correct url was displayed, then they refreshed, a page only containing that frames contents will be returned to the user. Specifically the contents of user_programs#show.

I have attempted to guard the requests in the user_programs controller with the methods provided by Turbo::Frames::FrameRequest and redirecting (see below).

redirect_to user_path(id: @user.id) unless turbo_frame_request?

However this loses the context of what user_program was selected, and again removes the ability for users to share links with each other as they will be redirected to the default user_program

Is what i'm looking for even possible?

This leads me to my final question

#3 If there were query params present in the initial request 'data-turbo-action': 'advance' will remove them

Other pages in our application will redirect to the users_controller#show action with certain query_params, such as /users/2?booking_id=21. When clicking on one of the links which pertain to the user_container turbo_frame. The query params will be destroyed. Is there any way to preserve them with this attribute set?

I have been wrestling with this all afternoon and have been scouring github and the turbo docs for answers. I want to avoid writing custom logic to handle these scenarios as it seems like something turbo should be able to handle out of the box.

Here are the relevant gems

turbo-rails (1.3.2)
rails (7.0.8)

Any help with any of these questions would be greatly appreciated. Thank you in advance!

Answer 1

There is no built in way of doing that. Best I came up with is to merge turbo frame src parameters with your current url parameters:

# do whatever you have to do to pass needed parameters to turbo frame
# this will handle the refresh
<%= program_params = params.as_json.slice("user_id", "id").symbolize_keys.with_defaults({id: 1, user_id: @user.id}) %>

<%= turbo_frame_tag "user_container",
    src: user_program_path(**program_params),
    data: {turbo_action: "advance_params"}
%> #                      ^^^^^^^^^^^^^^
# we'll make our own action to only pass parameters and not the full url

// app/javascript/application.js

document.addEventListener("turbo:frame-render", (event) => {
  const frame = event.target

  // implement `data-turbo-action="advance_params"`
  if (frame.dataset.turboAction === "advance_params") {
    const url = new URL(location);
    const frameUrl = new URL(frame.src)

    frameUrl.searchParams.forEach((v,k) => {
      url.searchParams.set(k, v);
    })

    history.pushState({}, "", url);
  }
});

Now, when you navigate within a frame, current url will be updated with query parameters from the frame src. When you refresh the page these parameters will be passed down to the frame src url.

It'll be easier to work with query params, so you might want to change this route /users/2/user_programs/1 to be /user_programs/1?user_id=2.