Replace jquery-ujs with @hotwired/turbo

Replace our client-side dependency on `jquery-ujs` with [@hotwired/turbo][]. In addition to adding an entry to the `package.json` file, this commit replaces `[data-confirm]` attributes with `[data-turbo-confirm]`, and `[data-method]` attributes with `[data-turbo-method]`. In an effort to minimize the diff, this commit *does not* replace the `link_to` calls made with `method: :delete` with [button_to][] calls. Ideally, they'd utilize `button_to` to render a `<form>` element for the destructive action. In the future, once that change is complete, the `data: {turbo_method: :delete}` attributes can once again be passed as `method: :delete` options. [@hotwired/turbo]: https://turbo.hotwired.dev [turbo-rails]: /~https://github.com/hotwired/turbo-rails [link_to]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to [button_to]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
thoughtbot · Feb 13, 2024 · 66497ef · 66497ef
1 parent 471ede0
commit 66497ef
Show file tree

Hide file tree

Showing 12 changed files with 6,568 additions and 1,145 deletions.
diff --git a/app/assets/builds/administrate/application.js b/app/assets/builds/administrate/application.js
diff --git a/app/assets/builds/administrate/application.js.map b/app/assets/builds/administrate/application.js.map
diff --git a/app/assets/javascripts/administrate/application.js b/app/assets/javascripts/administrate/application.js
@@ -1,6 +1,6 @@
 import "./add_jquery";
 
-import {} from "jquery-ujs";
+import "@hotwired/turbo-rails";
 import "selectize/dist/js/selectize.min.js";
 
 import "./controllers";
diff --git a/app/assets/javascripts/administrate/controllers/table_controller.js b/app/assets/javascripts/administrate/controllers/table_controller.js
@@ -16,7 +16,7 @@ export default class extends Controller {
       var dataUrl = $(event.target).closest("tr").data("url");
       var selection = window.getSelection().toString();
       if (selection.length === 0 && dataUrl) {
-        window.location = window.location.protocol + '//' + window.location.host + dataUrl;
+        Turbo.visit(dataUrl);
       }
     }
   }

diff --git a/app/controllers/administrate/application_controller.rb b/app/controllers/administrate/application_controller.rb
@@ -60,7 +60,8 @@ def update
       if requested_resource.update(resource_params)
         redirect_to(
           after_resource_updated_path(requested_resource),
-          notice: translate_with_resource("update.success")
+          notice: translate_with_resource("update.success"),
+          status: :see_other
         )
       else
         render :edit, locals: {
@@ -75,7 +76,7 @@ def destroy
       else
         flash[:error] = requested_resource.errors.full_messages.join("<br/>")
       end
-      redirect_to after_resource_destroyed_path(requested_resource)
+      redirect_to after_resource_destroyed_path(requested_resource), status: :see_other
     end
 
     private

diff --git a/app/views/administrate/application/_collection_item_actions.html.erb b/app/views/administrate/application/_collection_item_actions.html.erb
@@ -11,7 +11,6 @@
     t("administrate.actions.destroy"),
     [namespace, resource],
     class: "text-color-red",
-    method: :delete,
-    data: { confirm: t("administrate.actions.confirm") }
+    data: { turbo_method: :delete, turbo_confirm: t("administrate.actions.confirm") }
   ) if accessible_action?(resource, :destroy) %></td>
 <% end %>
diff --git a/app/views/administrate/application/_javascript.html.erb b/app/views/administrate/application/_javascript.html.erb
@@ -8,7 +8,7 @@ by providing a `content_for(:javascript)` block.
 %>
 
 <% Administrate::Engine.javascripts.each do |js_path| %>
-  <%= javascript_include_tag js_path %>
+  <%= javascript_include_tag js_path, "data-turbo-track": "reload", defer: true %>
 <% end %>
 
 <%= yield :javascript %>

diff --git a/app/views/administrate/application/show.html.erb b/app/views/administrate/application/show.html.erb
@@ -34,8 +34,7 @@ as well as a link to its edit page.
       t("administrate.actions.destroy"),
       [namespace, page.resource],
       class: "button button--danger",
-      method: :delete,
-      data: { confirm: t("administrate.actions.confirm") }
+      data: { turbo_method: :delete, turbo_confirm: t("administrate.actions.confirm") }
     ) if accessible_action?(page.resource, :destroy) %>
   </div>
 </header>

diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo-rails": "^8.0.0",
     "esbuild": "^0.18.11",
     "jquery": "^3.7.0",
-    "jquery-ujs": "^1.2.3",
     "sass": "^1.63.6",
     "selectize": "^0.12.6"
   },

diff --git a/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb b/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb
@@ -12,7 +12,7 @@
     [namespace, resource],
     class: "text-color-red",
     method: :delete,
-    data: { confirm: t("administrate.actions.confirm") }
+    data: { turbo_confirm: t("administrate.actions.confirm") }
   ) if authorized_action?(resource, :destroy) %></td>
 <% end %>
 

diff --git a/spec/features/products_index_spec.rb b/spec/features/products_index_spec.rb
@@ -17,9 +17,9 @@
     visit admin_products_path
     click_row_for(product)
 
-    expect(current_path).to eq(admin_product_path(product))
     expect(page).to have_content(product.name)
     expect(page).to have_content(product.description)
+    expect(current_path).to eq(admin_product_path(product))
   end
 
   it "links to the edit page" do

diff --git a/yarn.lock b/yarn.lock
@@ -159,6 +159,19 @@
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
   integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
 
+"@hotwired/turbo-rails@^8.0.0":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo-rails/-/turbo-rails-8.0.2.tgz#c43d54d9346bcf14c897166556bfed92ed4c1d17"
+  integrity sha512-j+6THPc+CsaUdUXZTg6wQ+YcStO9kn6CuGzElqFxUmV/vyd1Jfm0RLZMIbaY8w9Qse7u6JBcrm4AcRxhIhYmaQ==
+  dependencies:
+    "@hotwired/turbo" "^8.0.2"
+    "@rails/actioncable" "^7.0"
+
+"@hotwired/turbo@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.2.tgz#c31cdadfe66b98983066a94073b26fc7e15835f0"
+  integrity sha512-3K6QZkwWfosAV8zuM5bY+kKF02jp1lMQGsWfSE6wXdZBRBP3ah+Vj26YNqYtkEomBwRWA0QKhZgyJP7xOQkVEg==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -197,6 +210,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@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==
+
 "@thoughtbot/stylelint-config@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@thoughtbot/stylelint-config/-/stylelint-config-4.0.0.tgz#35570935cef562977d848bb7d8faf8d90a2d7932"
@@ -718,11 +736,6 @@ jackspeak@^2.3.5:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jquery-ujs@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/jquery-ujs/-/jquery-ujs-1.2.3.tgz#dcac6026ab7268e5ee41faf9d31c997cd4ddd603"
-  integrity sha512-59wvfx5vcCTHMeQT1/OwFiAj+UffLIwjRIoXdpO7Z7BCFGepzq9T9oLVeoItjTqjoXfUrHJvV7QU6pUR+UzOoA==
-
 jquery@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.0.tgz#fe2c01a05da500709006d8790fe21c8a39d75612"