[openstreetmap/openstreetmap-website] Add Turbo to replace custom JS (PR #4562)

[Gregory Igelmund]

## Context

This PR is part of a conversation with @gravitystorm and @tordans on the recent OSM Hackweekend in Karlsruhe and following conversations. The goal is to show how to integrate Rails Trubo to the project and what a migration path would look like.

## Why are the changes necessary?

Navigating the OSM website should be smooth. [Rails UJS](https://github.com/rails/rails/tree/main/actionview/app/assets/javascripts) and custom JavaScript enables users to manage their Messages in a SPA-like fashion without adding too much complexity to the codebase.

[Turbo](https://turbo.hotwired.dev) is the successor of Rails UJS. It provides SPA-like behaviour to Rails applications similar to Rails UJS but works a bit differently and allows to write even less JavaScript.

With the latest changes to [Turbo](https://turbo.hotwired.dev) (see [v8.0.0](https://github.com/hotwired/turbo/releases/tag/v8.0.0) page refreshes with morphing) it has gotten even easier to manage front-end state without custom JavaScript.

## What has changed?

- Adds the [`@hotwired/turbo`](https://www.npmjs.com/package/@hotwired/turbo) npm-package which provides client-side capabilities for [`Turbo Drive`](https://turbo.hotwired.dev/handbook/drive) (which is used in this PR) and [`Turbo Frames`](https://turbo.hotwired.dev/handbook/frames) and [`Turbo Streams`](https://turbo.hotwired.dev/handbook/streams) which are not used in this PR
- Adds the [`turbo-rails`](https://github.com/hotwired/turbo-rails)-gem which provides utility code to integrate Turbo Drive, Frames and Streams – the PR is only using the `turbo_refresh_method_tag`- and `turbo_refresh_scroll_tag`- helper methods. Most of the gem-code is not used, so theoretically it could be dropped but it is installed by default for all Rails 7+ applications (unless skipped)

<details>
  <summary>
  The UI/UX is mostly identical with 2 exceptions:
<ul>
<li>Flash Messages are rendered.</li>
<li>The Messages front end state not just partially but fully updated.</li>
</ul>
</summary>

### UI / UX Changes

**TBD**: The flash messages are now displayed (they were not displayed using UJS + custom JS). While the flash message is a bit disruptive, I am not sure if I want to suppress/hide them or keep them.

The main difference between the Rails UJS and the Turbo version is that not just dedicated sections of the front-end state are managed, but the full page is managed.

See e.g. what happens when all messages are deleted.

**Before**

![delete-last-before](https://github.com/grekko/openstreetmap-website/assets/28648/7e88b66c-ac79-4f25-8f37-b1f6d2be14a9)

**After**

![delete-last-after](https://github.com/grekko/openstreetmap-website/assets/28648/da5704ea-daa2-44dc-a28c-f67b3634746e)


### Demo

Besides the now-appearing flash messages the UX for managing messages should be identical.

- The Message Counters are all updated
- Deleted messages are faded out
- The scroll position is preserved

![Deleting messages](https://github.com/grekko/openstreetmap-website/assets/28648/d63fe236-984f-4b69-ae43-4922ffc54ac7)

</details>


## Dev Notes

- Turbo and Rails UJS can co-exist
  - Turbo (Drive) is therefore setup so that its behaviour must be enabled via opt-in data-attributes
- Turbo relies on the concept of `HTML over the Wire` (see <https://hotwired.dev>). If there is still the need to send/receive JSON payloads, Rails UJS might be the right tool


## Next steps

I'd like to get feedback on the state of the PR and would like to know if other developers are happy with the outcome or if they foresee any issues with gradually replacing Rails UJS with Turbo.

Gradually replacing Rails UJS and integrating Turbo into other places of the OSM website application could be a good next EWG project.
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4562

-- Commit Summary --

  * Gemfile: Add turbo-rails
  * package.json: Add @hotwired/turbo-rails
  * Enable Turbo Drive with morphing for Messages#{destroy,mark}
  * application.js: Call updateHeader when turbo:render completed

-- File Changes --

    M Gemfile (1)
    M Gemfile.lock (5)
    M app/assets/javascripts/application.js (6)
    M app/assets/javascripts/messages.js (43)
    M app/controllers/messages_controller.rb (8)
    M app/views/layouts/_meta.html.erb (2)
    M app/views/messages/_message_summary.html.erb (10)
    M app/views/messages/_messages_table.html.erb (2)
    M app/views/messages/_sent_message_summary.html.erb (2)
    D app/views/messages/destroy.json.jbuilder (4)
    D app/views/messages/mark.json.jbuilder (4)
    M config/eslint.json (3)
    M package.json (3)
    M test/controllers/messages_controller_test.rb (10)
    M test/system/messages_test.rb (3)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4562.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4562.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4562
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4562 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240306/87ea16c0/attachment-0001.htm>