Manage client-side js with turbo_stream actions

app/views/units/_form.html.erb

@@ -17,9 +17,9 @@
     </td>
 
     <td class="actions">
-      <%= form.submit form: :unit_form, onclick: 'focusAddLink(event)' %>
+      <%= form.submit form: :unit_form %>
       <%= image_link_to t(:cancel), "close-circle-outline", units_path, class: 'dangerous',
-        onclick: 'closeForm(event); return false;' %>
+        onclick: turbo_stream_handler('form_close'), name: :cancel %>
     </td>
   </tr>
   <!-- TODO: display error_messages_for unit -->

app/views/units/_form_close.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.remove @unit %>
+<%= turbo_stream.enable_all 'td.actions .button' %>
+<%= turbo_stream.enable :add_unit %>
+<%= turbo_stream.focus :add_unit %>

app/views/units/index.html.erb

@@ -2,7 +2,7 @@
   <% if current_user.at_least(:active) %>
     <%= turbo_frame_tag do %>
       <%= image_link_to t('.add_unit'), 'plus-outline', new_unit_path, id: :add_unit,
-      onclick: 'this.blur(); this.style.visibility = "hidden";', data: {turbo_stream: true} %>
+        onclick: 'this.blur();', data: {turbo_stream: true} %>
     <% end %>
   <% end %>
 </div>
@@ -26,20 +26,9 @@
 </table>
 
 <%= javascript_tag do %>
-  function closeForm(event) {
-    event.target.closest("tr").remove();
-    focusAddLink(event);
-  }
-
-  function focusAddLink(event) {
-    var add_unit_link = document.querySelector("a#add_unit");
-    add_unit_link.style.visibility = "visible";
-    add_unit_link.focus({ focusVisible: true });
-  }
-
   function processKey(event) {
     if (event.key == "Escape") {
-      closeForm(event);
+      event.target.closest("tr").querySelector("a[name=cancel]").click();
     }
   }
 <% end %>