Products_v3: URL state management broken

[dacook]

Description

Expected Behavior

When you apply a search term, producer filter, category filter, or pagination, the page state changes (different products are shown).
To reflect this, the URL in the addressbar should be updated. Also there should be a new item added in browser history, allowing you to go back/forward.

Items such as this should appear on the end of the URL: _page&_per_page , _search_term, _producer_id, _category_id.

Actual Behaviour

But the feature only seems to work in dev mode. On staging and prod, the following error appears:

Steps to Reproduce

1. Go to /admin/products with admin_style_v3 toggle ON
2. Select a filter or page number
3. The right products are shown. But the URL doesn't include filter/pagination parameters.
4. Back.
5. It takes you too far back.

Workaround

Make sure you remember what filters/pages you used. Don't click Back.

Severity

Your Environment

• au-staging
• au-prod

Possible Fix

https://openfoodnetwork.slack.com/archives/C01CXQNJ1J6/p1695915680526909?thread_ts=1695879707.687969&cid=C01CXQNJ1J6

[dacook]

I had to troubleshoot this on au-staging.

I don't think OFN_URL ever existed. It results in domain-less url which is consistent with the error message:

irb(main):001:0> Openfoodnetwork::Application.config.action_cable
=> {:mount_path=>"/cable", :precompile_assets=>true, :url=>"/cable", :allowed_request_origins=>[/http:\/\/\/*/, /https:\/\/\/*/]}

I tried changing the action_cable config to use ENV['SITE_URL']:

+  config.action_cable.url = "#{ENV['SITE_URL']}/cable"
+  config.action_cable.allowed_request_origins = [/http:\/\/#{ENV['SITE_URL']}\/*/, /https:\/\/#{ENV['SITE_URL']}\/*/]

Looks promising:

irb(main):001:0> Openfoodnetwork::Application.config.action_cable
=> {:mount_path=>"/cable", :precompile_assets=>true, :url=>"staging.openfoodnetwork.org.au/cable", :allowed_request_origins=>[/http:\/\/staging.openfoodnetwork.org.au\/*/, /https:\/\/staging.openfoodnetwork.org.au\/*/]}

But this resulted in something like:

WebSocket connection to 'wss://staging.openfoodnetwork.org.au/admin/products_v3/staging.openfoodnetwork.org.au/cable' failed:

I tried commenting out the config.action_cable.url line entirely, but that takes us back to the original error:

DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://rails/admin/products_v3?_page=1&_per_page=15&_producer_id=1772' ...

So there's something not configured right still...

[dacook]

This was hard to debug on dev. I tried to boot up rails in staging mode, and got stuck here:

# config/environments/staging.rb:
  # config.force_ssl = true

OFN_REDIS_URL=redis://localhost:6379/3 SECRET_TOKEN=blah SITE_URL=localhost:3000 RAILS_ENV=staging rails s

Loading a page generates internal_server_error but I can't see what the error was.

[dacook]

The problem remains: when you choose a pagination option (and presumably a filter), the page is submitted with a GET request with params, but the params seem to get lost on the second submit.

The most notable problem is that it is not possible to get past page 1, when you have chosen a different page size (see video and description here: https://openfoodnetwork.slack.com/archives/C01CXQNJ1J6/p1720786387419379)
We can see that the parameter values get lost on subsequent requests: (page and per_page values get blank)

[dacook]

The search/filter/pagination logic is shared with the orders screen, see:
app/views/admin/shared/_stimulus_pagination.html.haml
search_controller.js

[chahmedejaz]

The problem remains: when you choose a pagination option (and presumably a filter), the page is submitted with a GET request with params, but the params seem to get lost on the second submit.

The most notable problem is that it is not possible to get past page 1, when you have chosen a different page size (see video and description here: https://openfoodnetwork.slack.com/archives/C01CXQNJ1J6/p1720786387419379) We can see that the parameter values get lost on subsequent requests: (page and per_page values get blank)

Yes, I also noticed that. Let me check this and get back to you, my hunch is that turbo might be doing something here

[chahmedejaz]

The PR is ready for review. Thanks.