Close form on Esc key. Localize submit button.

app/views/units/_form.html.erb

@@ -1,37 +1,26 @@
 <%= fields_for @unit do |form| %>
-  <td>
-    <%= form.text_field :symbol, form: :unit_form, required: true, autofocus: true, size: 10,
-      maxlength: @unit.class.columns_hash['symbol'].limit, autocomplete: "off" %>
-  </td>
-  <td>
-    <%= form.text_field :name, form: :unit_form, size: 25,
-      maxlength: @unit.class.columns_hash['name'].limit, autocomplete: "off" %>
-  </td>
-  <td>
-    <% unless @unit.base.nil? %>
-      <%= form.number_field :multiplier, form: :unit_form, step: "any", size: 10,
-        autocomplete: "off" %>
-    <% end %>
-  </td>
+  <tr id="<%= dom_id(@unit) %>" onkeydown="processKey(event)">
+    <td>
+      <%= form.text_field :symbol, form: :unit_form, required: true, autofocus: true, size: 12,
+        maxlength: @unit.class.columns_hash['symbol'].limit, autocomplete: "off" %>
+    </td>
+    <td>
+      <%= form.text_field :name, form: :unit_form, size: 30,
+        maxlength: @unit.class.columns_hash['name'].limit, autocomplete: "off" %>
+    </td>
+    <td>
+      <% unless @unit.base.nil? %>
+        <%= form.number_field :multiplier, form: :unit_form, step: "any", size: 10,
+          autocomplete: "off" %>
+      <% end %>
+    </td>
 
-  <td class="actions">
-    <%= form.submit @unit.persisted? ? t(:update) : t(:add), form: :unit_form,
-      onclick: 'focusAddLink(event);' %>
-    <%= image_link_to t(:cancel), "close-circle-outline", units_path, class: 'dangerous',
-      onclick: 'closeForm(event); return false;' %>
-  </td>
+    <td class="actions">
+      <%= form.submit form: :unit_form, onclick: 'focusAddLink(event)' %>
+      <%= image_link_to t(:cancel), "close-circle-outline", units_path, class: 'dangerous',
+        onclick: 'closeForm(event); return false;' %>
+    </td>
+  </tr>
   <!-- TODO: display error_messages_for unit -->
 <% end %>
 
-<%= javascript_tag do %>
-  function closeForm(event) {
-    event.target.closest("tr").replaceChildren();
-    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 });
-  }
-<% end %>

app/views/units/_index.html.erb

@@ -1,5 +1,3 @@
-<tr id="<%= dom_id(Unit.new) %>" is="turbo-frame"></tr>
-
 <% Unit.each_with_level(@units) do |unit, level| %>
   <tr>
     <td class="link">

app/views/units/index.html.erb

@@ -24,3 +24,22 @@
     <%= render partial: 'index' %>
   </tbody>
 </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);
+    }
+  }
+<% end %>

app/views/units/new.turbo_stream.erb

@@ -1,4 +1,4 @@
-<%= turbo_stream.update @unit do %>
+<%= turbo_stream.prepend :units do %>
   <%= render partial: 'form' %>
 <% end %>
 

config/locales/en.yml

@@ -13,6 +13,10 @@ en:
         created_at: registered
         confirmed_at: confirmed
         unconfirmed_email: Awaiting confirmation for
+  helpers:
+    submit:
+      create: Create
+      update: Update
   units:
     index:
       add_unit: Add unit

test/system/units_test.rb

@@ -36,4 +36,10 @@ class UnitsTest < ApplicationSystemTestCase
 
     # assert_selector flash
   end
+
+  test "close new unit form with escape" do
+    click_on t('units.index.add_unit')
+    first('tbody > tr').all(:field).sample.send_keys :escape
+    within('tbody') { assert_no_selector :fillable_field }
+  end
 end