From a596d7cea7bf130812fbaae66ba3d98dbbb8e438 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 14 Jan 2025 16:45:29 -0600
Subject: [PATCH] Cancel and go back for forms with autofocused inputs

---
 app/views/buckets/edit.html.erb          | 4 +++-
 app/views/buckets/new.html.erb           | 5 +++--
 app/views/users/edit.html.erb            | 6 ++++--
 app/views/users/new.html.erb             | 2 +-
 app/views/users/show.html.erb            | 2 +-
 app/views/workflows/edit.html.erb        | 5 +++--
 app/views/workflows/index.html.erb       | 2 +-
 app/views/workflows/new.html.erb         | 7 ++++---
 app/views/workflows/stages/edit.html.erb | 5 +++--
 app/views/workflows/stages/new.html.erb  | 6 +++---
 10 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/app/views/buckets/edit.html.erb b/app/views/buckets/edit.html.erb
index 2b4814a2f..aa6d02076 100644
--- a/app/views/buckets/edit.html.erb
+++ b/app/views/buckets/edit.html.erb
@@ -24,7 +24,7 @@
       <label class="flex-item-grow txt-large">
         <strong><%= form.text_field :name, name: "bucket[name]", class: "input full-width",
               required: true, autofocus: true, placeholder: "Give it a name…",
-              data: { action: "keydown.enter->form#submit:prevent" } %></strong>
+              data: { action: "keydown.enter->form#submit:prevent, keydown.esc->form#cancel" } %></strong>
       </label>
     </div>
 
@@ -71,5 +71,7 @@
       <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Save</span>
     </button>
+
+    <%= link_to "Cancel and go back", buckets_path, data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
   <% end %>
 </div>
diff --git a/app/views/buckets/new.html.erb b/app/views/buckets/new.html.erb
index 0483796d6..e8e334a79 100644
--- a/app/views/buckets/new.html.erb
+++ b/app/views/buckets/new.html.erb
@@ -10,15 +10,16 @@
 <% end %>
 
 <div class="panel shadow center" style="--panel-size: 55ch; view-transition-name: new-bucket">
-  <%= form_with model: @bucket, class: "flex flex-column gap txt-large" do |form| %>
+  <%= form_with model: @bucket, class: "flex flex-column gap txt-large", data: { controller: "form" } do |form| %>
     <%= image_tag "bubbles.svg", aria: { hidden: "true" }, size: 150, class: "colorize--black center" %>
     <label class="flex align-center gap">
-      <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, placeholder: "Give it a name…" %>
+      <%= form.text_field :name, required: true, class: "input full-width", autofocus: true, placeholder: "Give it a name…", data: { action: "keydown.esc@document->form#cancel" } %>
     </label>
 
     <button type="submit" id="log_in" class="btn btn--reversed center">
       <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Save</span>
     </button>
+    <%= link_to "Cancel and go back", buckets_path, data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
   <% end %>
 </div>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 8b4714384..0646d5a29 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to user_path(@user), class: "btn flex-item-justify-start" do %>
+    <%= link_to user_path(@user), class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>
@@ -33,7 +33,7 @@
       <div class="flex align-center gap">
         <%= translation_button :user_name %>
         <label class="flex align-center gap input input--actor">
-          <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true } %>
+          <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
           <%= image_tag "person.svg", aria: { hidden: "true" }, size: 30, class: "colorize--black" %>
         </label>
       </div>
@@ -55,6 +55,8 @@
         <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
           <span class="for-screen-reader">Sign in</span>
       </button>
+
+      <%= link_to "Cancel and go back", user_path(@user), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
     <% end %>
 
     <%= form_with url: user_avatar_url(@user), method: :delete, id: "avatar-delete-form" %>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 3add264c2..c0f464cb6 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to new_session_path, class: "btn flex-item-justify-end" do %>
+    <%= link_to new_session_path, class: "btn flex-item-justify-end", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <span class="for-screen-reader">Sign in instead</span>
     <% end %>
   </nav>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index f126ae6b0..fafe90d19 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to account_users_path, class: "btn flex-item-justify-start" do %>
+    <%= link_to account_users_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>
diff --git a/app/views/workflows/edit.html.erb b/app/views/workflows/edit.html.erb
index 6414e9347..a1ca8aec1 100644
--- a/app/views/workflows/edit.html.erb
+++ b/app/views/workflows/edit.html.erb
@@ -1,9 +1,10 @@
 <%= turbo_frame_tag dom_id(@workflow, :header) do %>
   <div class="flex align-center gap-half">
-    <%= form_with model: @workflow, url: workflow_path(@workflow), id: dom_id(@workflow, :form), class: "full-width" do |form| %>
+    <%= form_with model: @workflow, url: workflow_path(@workflow), id: dom_id(@workflow, :form), class: "full-width", data: { controller: "form" } do |form| %>
       <h3 class="txt-large margin-none">
-        <%= form.text_field :name, required: true, autofocus: true, class: "input full-width", style: "--input-padding: 0.2em 0.5em;" %>
+        <%= form.text_field :name, required: true, autofocus: true, class: "input full-width", style: "--input-padding: 0.2em 0.5em;", data: { action: "keydown.esc@document->form#cancel" } %>
       </h3>
+      <%= link_to "Cancel", workflow_path(@workflow), data: { form_target: "cancel", turbo_frame: dom_id(@workflow) }, hidden: true %>
     <% end %>
 
     <%= tag.button type: :submit, class: "btn btn--small btn--positive", form: dom_id(@workflow, :form) do %>
diff --git a/app/views/workflows/index.html.erb b/app/views/workflows/index.html.erb
index bd8cc5c2a..dd35872b2 100644
--- a/app/views/workflows/index.html.erb
+++ b/app/views/workflows/index.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to account_users_path, class: "btn flex-item-justify-start" do %>
+    <%= link_to account_users_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Go back</span>
     <% end %>
diff --git a/app/views/workflows/new.html.erb b/app/views/workflows/new.html.erb
index aac4ac355..ad6fb3a6b 100644
--- a/app/views/workflows/new.html.erb
+++ b/app/views/workflows/new.html.erb
@@ -2,7 +2,7 @@
 
 <% content_for :header do %>
   <nav>
-    <%= link_to workflows_path, class: "btn flex-item-justify-start" do %>
+    <%= link_to workflows_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Go back</span>
     <% end %>
@@ -13,12 +13,13 @@
 
 <%= turbo_frame_tag :workflows do %>
   <article class="panel center margin-block-start flex flex-column gap" style="view-transition-name: <%= dom_id(@workflow) %>">
-    <%= form_with model: @workflow, url: workflows_path do |form| %>
-      <%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…" %>
+    <%= form_with model: @workflow, url: workflows_path, data: { controller: "form" } do |form| %>
+      <%= form.text_field :name, required: true, autofocus: true, class: "input txt-large", placeholder: "Name your Workflow…", data: { action: "keydown.esc@document->form#cancel" } %>
       <%= form.button type: :submit, class: "btn btn--reversed center margin-block-start txt-large" do %>
         <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
         <span class="for-screen-reader">Create Workflow</span>
       <% end %>
+      <%= link_to "Go back", workflows_path, data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
     <% end %>
   </article>
 <% end %>
diff --git a/app/views/workflows/stages/edit.html.erb b/app/views/workflows/stages/edit.html.erb
index bb3be76e8..e63d6fed7 100644
--- a/app/views/workflows/stages/edit.html.erb
+++ b/app/views/workflows/stages/edit.html.erb
@@ -1,6 +1,7 @@
 <%= turbo_frame_tag @stage do %>
-  <%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage), id: dom_id(@stage, :form), class: "full-width" do |form| %>
-    <%= form.text_field :name, required: true, autofocus: true, class: "input full-width" %>
+  <%= form_with model: @stage, url: workflow_stage_path(@stage.workflow, @stage), id: dom_id(@stage, :form), class: "full-width", data: { controller: "form" } do |form| %>
+    <%= form.text_field :name, required: true, autofocus: true, class: "input full-width", data: { action: "keydown.esc@document->form#cancel" } %>
+    <%= link_to "Cancel", workflow_path(@workflow), data: { form_target: "cancel", turbo_frame: dom_id(@workflow) }, hidden: true %>
   <% end %>
 
   <div class="flex align-center gap-half">
diff --git a/app/views/workflows/stages/new.html.erb b/app/views/workflows/stages/new.html.erb
index ce9ef5fb8..ae3bd8bda 100644
--- a/app/views/workflows/stages/new.html.erb
+++ b/app/views/workflows/stages/new.html.erb
@@ -1,11 +1,11 @@
 <%= turbo_frame_tag dom_id(@stage.workflow, :stages) do %>
-  <%= form_with model: @stage, url: workflow_stages_path(@stage.workflow), class: "flex align-center gap-half" do |form| %>
-    <%= form.text_field :name, required: true, autofocus: true, class: "input" %>
+  <%= form_with model: @stage, url: workflow_stages_path(@stage.workflow), class: "flex align-center gap-half", data: { controller: "form" } do |form| %>
+    <%= form.text_field :name, required: true, autofocus: true, class: "input", data: { action: "keydown.esc@document->form#cancel" } %>
     <%= form.button type: :submit, class: "btn btn--positive txt-small" do %>
       <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Add stage</span>
     <% end %>
-    <%= link_to workflow_path(@workflow), class: "btn btn--small" do %>
+    <%= link_to workflow_path(@workflow), class: "btn btn--small", data: { form_target: "cancel", controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
       <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Cancel</span>
     <% end %>