5906 add turbo with disabled turbo drive (#5977)

* Add turbo-rails without redis and with Turbo drive disabled by default * Remove turbolinks * Apply turbo frames to case_contacts/index to avoid re-rendering the whole page when filtering * Add turbo_action advance to update browser url with filter submits and push to history stack * Update redis comment for clarity * Disable turbo on links and buttons that appear in the index frame
rubyforgood · Aug 26, 2024 · 82a3da8 · 82a3da8
1 parent 944f286
commit 82a3da8
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 50 deletions.
diff --git a/Gemfile b/Gemfile
@@ -49,6 +49,7 @@ gem "scout_apm"
 gem "sprockets-rails" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem "stimulus-rails"
 gem "strong_migrations"
+gem "turbo-rails", "~> 2.0"
 gem "twilio-ruby" # twilio helper functions
 gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby] # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "view_component" # View components for reusability
@@ -100,3 +101,4 @@ group :test do
 end
 
 # gem "pdf-reader", "~> 2.9"
+# gem "redis", "~> 4.0" # Redis is required for Turbo Streams but is not available in production yet until the need arises.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -333,8 +333,6 @@ GEM
       racc (~> 1.4)
     nokogiri (1.16.7-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
-      racc (~> 1.4)
     noticed (2.4.1)
       rails (>= 6.1.0)
     oj (3.16.5)
@@ -541,6 +539,10 @@ GEM
     timeout (0.4.1)
     traceroute (0.8.1)
       rails (>= 3.0.0)
+    turbo-rails (2.0.6)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     twilio-ruby (7.2.3)
       faraday (>= 0.9, < 3.0)
       jwt (>= 1.5, < 3.0)
@@ -577,6 +579,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-21
+  arm64-darwin-22
   ruby
   x86_64-darwin-21
   x86_64-darwin-23
@@ -660,6 +663,7 @@ DEPENDENCIES
   stimulus-rails
   strong_migrations
   traceroute
+  turbo-rails (~> 2.0)
   twilio-ruby
   tzinfo-data
   view_component
@@ -671,4 +675,4 @@ RUBY VERSION
    ruby 3.2.2p53
 
 BUNDLED WITH
-   2.5.16
+   2.5.17
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,12 +1,14 @@
 /* global window */
 import './jQueryGlobalizer.js'
+import '@hotwired/turbo-rails'
 import 'bootstrap'
 import 'bootstrap-select'
 import './sweet-alert-confirm.js'
 import './controllers'
 import 'trix'
 import '@rails/actiontext'
 import './datatable.js'
+Turbo.session.drive = false
 
 require('datatables.net-dt')(null, window.jQuery) // First parameter is the global object. Defaults to window if null
 require('select2')(window.jQuery)

diff --git a/app/views/case_contacts/_case_contact.html.erb b/app/views/case_contacts/_case_contact.html.erb
@@ -13,7 +13,7 @@
               <% if !contact.active? %>
                 <span class="badge badge-pill light-bg text-black">Draft</span>
               <% end %>
-              <%= link_to("undelete", restore_case_contact_path(contact.id), method: :post,
+              <%= link_to("undelete", restore_case_contact_path(contact.id), method: :post, data: { turbo: false },
                           class: "btn btn-info") if policy(contact).restore? && contact.deleted? %>
             </h5>
             <h6 class="card-subtitle mb-2 text-muted">
@@ -38,14 +38,14 @@
         <% if Pundit.policy(current_user, contact).update? %>
           <%= render "case_contacts/followup", contact: contact, followup: contact.requested_followup %>
           <div class="mr-2">
-            <%= link_to edit_case_contact_path(contact), class: "text-danger" do %>
+            <%= link_to edit_case_contact_path(contact), class: "text-danger", data: { turbo: false } do %>
               <i class="lni lni-pencil-alt"></i> Edit
             <% end %>
           </div>
         <% end %>
         <div class="action">
         <% if policy(contact).destroy? && !contact.deleted? %>
-         <%= link_to case_contact_path(contact.id), class: "main-btn btn-sm danger-btn btn-hover", method: :delete  do %>
+          <%= link_to case_contact_path(contact.id), class: "main-btn btn-sm danger-btn btn-hover", method: :delete, data: { turbo: false }  do %>
           <i class="lni lni-trash-can mr-5"></i>Delete
         <% end %>
         <% end %>
@@ -59,11 +59,11 @@
           <%= contact.creator&.display_name %>
         <% else %>
           <% if contact.creator&.supervisor? %>
-            <%= link_to contact.creator&.display_name, edit_supervisor_path(contact.creator) %>
+            <%= link_to contact.creator&.display_name, edit_supervisor_path(contact.creator), data: { turbo: false } %>
           <% elsif contact.creator&.casa_admin? %>
-            <%= link_to contact.creator&.display_name, edit_users_path %>
+            <%= link_to contact.creator&.display_name, edit_users_path, data: { turbo: false } %>
           <% else %>
-            <%= link_to contact.creator&.display_name, edit_volunteer_path(contact.creator) %>
+            <%= link_to contact.creator&.display_name, edit_volunteer_path(contact.creator), data: { turbo: false } %>
           <% end %>
         <% end %>
       <% else %>

diff --git a/app/views/case_contacts/_followup.html.erb b/app/views/case_contacts/_followup.html.erb
@@ -1,14 +1,16 @@
 <% if followup %>
   <div>
-    <%= button_to resolve_followup_path(followup), method: :patch, class: "main-btn btn-sm success-btn btn-hover", id:"resolve" do %>
+    <%= button_to resolve_followup_path(followup), method: :patch, class: "main-btn btn-sm success-btn btn-hover", id:"resolve", data: { turbo: false } do %>
       <i class="bi bi-calendar"></i>Resolve Reminder
     <% end %>
   </div>
 <% else %>
   <div>
     <button type="button"
             class="followup-button main-btn btn-sm primary-btn-outline btn-hover"
-            id="followup-button-<%= contact.id %>"><i class="lni lni-calendar mr-5"></i>
+            id="followup-button-<%= contact.id %>"
+            data-turbo="false">
+      <i class="lni lni-calendar mr-5"></i>
       Make Reminder
     </button>
   </div>

diff --git a/app/views/case_contacts/index.html.erb b/app/views/case_contacts/index.html.erb
@@ -15,7 +15,8 @@
   </div>
 </div>
 
-<%= form_for_filterrific @filterrific, url: case_contacts_path, html: {class: "my-4"} do |f| %>
+<%= form_for_filterrific @filterrific, url: case_contacts_path, html: {class: "my-4"},
+  data: {turbo: true, turbo_frame: :case_contacts, turbo_action: :advance } do |f| %>
   <%= hidden_field_tag 'casa_case_id', params[:casa_case_id] %>
 
   <div class="card-style">
@@ -49,7 +50,9 @@
           <%= button_tag( :class=> "btn-sm main-btn dark-btn") do %>
             <i class="lni lni-funnel mr-10"></i> Filter
           <% end %>
-          <%= link_to("Reset filters", reset_filterrific_url, class: "btn-sm main-btn dark-btn-outline btn-hove") %>
+          <%= link_to("Reset filters", reset_filterrific_url,
+            class: "btn-sm main-btn dark-btn-outline btn-hove",
+            data: { turbo: true, turbo_frame: :case_contacts, turbo_action: :advance }) %>
         </div>
       </div>
     </div>
@@ -125,33 +128,35 @@
     </div>
   </div>
 <% end %>
-<% @presenter.case_contacts.each do |casa_case_id, data| %>
-  <div class="card-style-1 mb-5">
-    <div class="card-content">
-      <h3 class="mb-10"><%= @presenter.display_case_number(casa_case_id) %></h3>
-      <%= render partial: "case_contacts/case_contact", collection: data, as: :contact %>
-    </div>
-  </div>
-<% end %>
-<% if @presenter.case_contacts.empty? %>
-  <% if params.key?(:casa_case_id) %>
+<%= turbo_frame_tag :case_contacts do %>
+  <% @presenter.case_contacts.each do |casa_case_id, data| %>
     <div class="card-style-1 mb-5">
       <div class="card-content">
-        <h3 class="mb-10"><%= @presenter.display_case_number(params[:casa_case_id].to_i) %></h3>
-        <%= params[:filterrific] ?
-            "No case contacts have been found." :
-            "You have no case contacts for this case. \
-      Please click New Case Contact button above to create a case contact for your youth!" %>
+        <h3 class="mb-10"><%= @presenter.display_case_number(casa_case_id) %></h3>
+        <%= render partial: "case_contacts/case_contact", collection: data, as: :contact %>
       </div>
     </div>
-  <% else %>
-    <div class="card-style-1">
-      <div class="card-content">
-        <%= params[:filterrific] ?
-            "No case contacts have been found." :
-            "You have no case contacts for this case. \
-      Please click New Case Contact button above to create a case contact for your youth!" %>
+  <% end %>
+  <% if @presenter.case_contacts.empty? %>
+    <% if params.key?(:casa_case_id) %>
+      <div class="card-style-1 mb-5">
+        <div class="card-content">
+          <h3 class="mb-10"><%= @presenter.display_case_number(params[:casa_case_id].to_i) %></h3>
+          <%= params[:filterrific] ?
+              "No case contacts have been found." :
+              "You have no case contacts for this case. \
+        Please click New Case Contact button above to create a case contact for your youth!" %>
+        </div>
       </div>
-    </div>
+    <% else %>
+      <div class="card-style-1">
+        <div class="card-content">
+          <%= params[:filterrific] ?
+              "No case contacts have been found." :
+              "You have no case contacts for this case. \
+        Please click New Case Contact button above to create a case contact for your youth!" %>
+        </div>
+      </div>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -23,7 +23,7 @@
   <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
   <% if all_casa_admin_signed_in? %>
-    <%= javascript_include_tag 'all_casa_admin', 'data-turbolinks-track': 'reload', defer: true %>
+    <%= javascript_include_tag "all_casa_admin", "data-turbo-track": "reload", defer: true %>
   <% end %>
 
   <link rel="stylesheet" href="/assets/css/lineicons.css">

diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
@@ -14,7 +14,7 @@
   <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
   <% if all_casa_admin_signed_in? %>
-    <%= javascript_include_tag 'all_casa_admin', 'data-turbolinks-track': 'reload', defer: true %>
+    <%= javascript_include_tag "all_casa_admin", "data-turbo-track": "reload", defer: true %>
   <% end %>
 
   <link rel="stylesheet" href="/assets/css/lineicons.css">

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@babel/core": "^7.25.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo-rails": "^8.0.5",
     "@popperjs/core": "^2.11.8",
     "@rails/actioncable": "^7.2.0",
     "@rails/actiontext": "^7.2.0",
@@ -44,8 +45,7 @@
     "strftime": "^0.10.3",
     "sweetalert2": "^11.3.5",
     "tom-select": "^2.3.1",
-    "trix": "^2.1.5",
-    "turbolinks": "^5.2.0"
+    "trix": "^2.1.2"
   },
   "version": "0.1.0",
   "devDependencies": {
@@ -59,7 +59,8 @@
   "standard": {
     "globals": [
       "$",
-      "jQuery"
+      "jQuery",
+      "Turbo"
     ],
     "ignore": [
       "app/assets/builds/**/*"

diff --git a/yarn.lock b/yarn.lock
@@ -1223,6 +1223,19 @@
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
   integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
 
+"@hotwired/turbo-rails@^8.0.5":
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-8.0.5.tgz#18c2f0e4f7f952307650308590edf5eb9544b0d3"
+  integrity sha512-1A9G9u28IRAl0C57z8Ka3AhNPyJdwfOrbjr+ABZk2ZEUw2QO7cJ0pgs77asUj2E/tzn1PgrxrSVu24W+1Q5uBA==
+  dependencies:
+    "@hotwired/turbo" "^8.0.5"
+    "@rails/actioncable" "^7.0"
+
+"@hotwired/turbo@^8.0.5":
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.5.tgz#abae6dad018a891e4286e87fa0959217e3866d5a"
+  integrity sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -1565,10 +1578,15 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@rails/actioncable@^7.0":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.1.3.tgz#4db480347775aeecd4dde2405659eef74a458881"
+  integrity sha512-ojNvnoZtPN0pYvVFtlO7dyEN9Oml1B6IDM+whGKVak69MMYW99lC2NOWXWeE3bmwEydbP/nn6ERcpfjHVjYQjA==
+
 "@rails/actioncable@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.2.0.tgz#dee66d21bc125a9819dc8080ce896eac78d8c63f"
-  integrity sha512-crcsPF3skrqJkFZLxesZoyUEt8ol25XtTuOAUMdLa5qQKWTZpL8eLVW71bDCwKDQLbV2z5sBZ/XGEC0i+ZZa+A==
+  version "7.2.100"
+  resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.2.100.tgz#86ec1c2e00c357cef1e421fd63863d5c34339ce8"
+  integrity sha512-7xtIENf0Yw59AFDM3+xqxPCZxev3QVAqjPmUzmgsB9eL8S/zTpB0IU9srNc7XknzJI4e09XKNnCaJRx3gfYzXA==
 
 "@rails/actiontext@^7.2.0":
   version "7.2.0"
@@ -5463,7 +5481,7 @@ tr46@^3.0.0:
   dependencies:
     punycode "^2.1.1"
 
-trix@^2.1.5:
+trix@^2.1.2:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/trix/-/trix-2.1.5.tgz#512bc811172bea196de4a92fa8308c0914f263f9"
   integrity sha512-5pC4olCp7BwxTC8Joy1Kv33kDvSOApi9Tqf6c8wygqCgeCx9xPP5cxkZEhvKpMV+kjd9gszingd5fZo834+ktw==
@@ -5483,11 +5501,6 @@ tslib@^2.1.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-turbolinks@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/turbolinks/-/turbolinks-5.2.0.tgz"
-  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"