Merge pull request #1453 from basecamp/steps-flickering

Remove flickering when adding steps

app/controllers/cards/steps_controller.rb

@@ -5,7 +5,6 @@ class Cards::StepsController < ApplicationController
 
   def create
     @step = @card.steps.create!(step_params)
-    render_card_replacement
   end
 
   def show
@@ -16,12 +15,10 @@ class Cards::StepsController < ApplicationController
 
   def update
     @step.update!(step_params)
-    render_card_replacement
   end
 
   def destroy
     @step.destroy!
-    render_card_replacement
   end
 
   private

app/models/step.rb

@@ -3,6 +3,8 @@ class Step < ApplicationRecord
 
   scope :completed, -> { where(completed: true) }
 
+  validates :content, presence: true
+
   def completed?
     completed
   end

app/views/cards/display/perma/_steps.html.erb

@@ -1,9 +1,9 @@
 <ol class="steps txt-small margin-block-start-auto">
   <%= render partial: "cards/steps/step", collection: card.steps, as: :step %>
 
-  <li class="step">
+  <li id="<%= dom_id(card, :new_step) %>" class="step">
     <input type="checkbox" class="step__checkbox" disabled>
-    <%= form_with model: [card, Step.new], url: card_steps_path(card), data: { controller: "form", action: "submit->form#preventEmptySubmit" } do |form| %>
+    <%= form_with model: [card, Step.new], url: card_steps_path(card), data: { controller: "form", action: "submit->form#preventEmptySubmit turbo:submit-end->form#reset" } do |form| %>
       <%= form.text_field :content, class: "input step__content hide-focus-ring", placeholder: "Add a step…", autocomplete: "off", data: { form_target: "input" }, aria: { label: "Add a step" } %>
     <% end %>
   </li>

app/views/cards/steps/create.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.before dom_id(@card, :new_step) do %>
+  <%= render "cards/steps/step", step: @step %>
+<% end %>

app/views/cards/steps/destroy.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.remove @step %>

app/views/cards/steps/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace @step do %>
+  <%= render "cards/steps/step", step: @step %>
+<% end %>

test/controllers/cards/steps_controller_test.rb

@@ -10,7 +10,7 @@ class Cards::StepsControllerTest < ActionDispatch::IntegrationTest
 
     assert_difference -> { card.steps.count }, +1 do
       post card_steps_path(card), params: { step: { content: "Research alternatives" } }, as: :turbo_stream
-      assert_card_container_rerendered(card)
+      assert_turbo_stream action: :before, target: dom_id(card, :new_step)
     end
 
     assert_equal "Research alternatives", card.steps.last.content
@@ -22,7 +22,7 @@ class Cards::StepsControllerTest < ActionDispatch::IntegrationTest
 
     assert_changes -> { step.reload.content }, from: "Original content", to: "Updated content" do
       put card_step_path(card, step), params: { step: { content: "Updated content" } }, as: :turbo_stream
-      assert_card_container_rerendered(card)
+      assert_turbo_stream action: :replace, target: dom_id(step)
     end
   end
 
@@ -32,7 +32,7 @@ class Cards::StepsControllerTest < ActionDispatch::IntegrationTest
 
     assert_difference -> { card.steps.count }, -1 do
       delete card_step_path(card, step), as: :turbo_stream
-      assert_card_container_rerendered(card)
+      assert_turbo_stream action: :remove, target: dom_id(step)
     end
   end
 
@@ -43,13 +43,13 @@ class Cards::StepsControllerTest < ActionDispatch::IntegrationTest
     # Toggle to completed
     assert_changes -> { step.reload.completed? }, from: false, to: true do
       put card_step_path(card, step), params: { step: { completed: "1" } }, as: :turbo_stream
-      assert_card_container_rerendered(card)
+      assert_turbo_stream action: :replace, target: dom_id(step)
     end
 
     # Toggle back to incomplete
     assert_changes -> { step.reload.completed? }, from: true, to: false do
       put card_step_path(card, step), params: { step: { completed: "0" } }, as: :turbo_stream
-      assert_card_container_rerendered(card)
+      assert_turbo_stream action: :replace, target: dom_id(step)
     end
   end
 end