Merge pull request #2990 from basecamp/card-description-turbo-refresh

Morph card title and description on broadcast refreshes

Author: flavorjones

app/javascript/controllers/morph_guard_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Marks the enclosing turbo-frame permanent while connected, so that a
+// broadcasted page refresh can't morph away an edit in progress. The attribute
+// is never in the server-rendered markup, so display mode stays morphable and
+// page replacements never transplant the frame (https://github.com/basecamp/lexxy/issues/263).
+export default class extends Controller {
+  connect() {
+    this.frame = this.element.closest("turbo-frame")
+    this.frame?.setAttribute("data-turbo-permanent", "")
+  }
+
+  disconnect() {
+    this.frame?.removeAttribute("data-turbo-permanent")
+  }
+}

app/views/cards/container/_content.html.erb

@@ -1,5 +1,4 @@
 <% if card.published? %>
-  <div data-turbo-permanent>
   <%= turbo_frame_tag card, :edit do %>
     <%# When canceling an edit (with the ESC key), restore the button area to show "Edit" instead of "Save changes". %>
     <%= turbo_stream.replace dom_id(card, :card_closure_toggle) do %>
@@ -8,7 +7,6 @@
 
     <%= render "cards/container/content_display", card: card %>
   <% end %>
-  </div>
 <% else %>
   <%= form_with model: card, id: "card_form", data: { controller: "autoresize auto-save" } do |form| %>
     <h1 class="card__title">

app/views/cards/edit.html.erb

@@ -7,7 +7,7 @@
   <% end %>
 
   <%= form_with model: @card, id: dom_id(@card, :edit_form),
-        data: { controller: "autoresize form local-save", local_save_key_value: "card-#{@card.id}", action: "turbo:submit-end->local-save#submit" } do |form| %>
+        data: { controller: "autoresize form local-save morph-guard", local_save_key_value: "card-#{@card.id}", action: "turbo:submit-end->local-save#submit" } do |form| %>
     <h1 class="card__title flex align-start gap-half">
       <%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %>
         <%= form.text_area :title, class: "card-field__title autoresize__textarea input input--textarea full-width borderless txt-align-start hide-focus-ring hide-scrollbar",

test/application_system_test_case.rb

@@ -34,4 +34,10 @@ def sign_in_as(user)
       visit session_transfer_url(user.identity.transfer_id, script_name: nil)
       assert_current_path root_path
     end
+
+    def fill_in_lexxy(selector = "lexxy-editor", with:)
+      editor_element = find(selector)
+      editor_element.set with
+      page.execute_script("arguments[0].value = '#{with}'", editor_element)
+    end
 end

test/system/card_refresh_test.rb

@@ -0,0 +1,84 @@
+require "application_system_test_case"
+
+class CardRefreshTest < ApplicationSystemTestCase
+  include ActionView::RecordIdentifier
+
+  setup do
+    sign_in_as(users(:david))
+    Current.user = users(:kevin)
+    @card = cards(:layout)
+  end
+
+  test "a broadcast refresh shows card changes made elsewhere" do
+    visit card_url(@card)
+    assert_selector "h1", text: @card.title
+
+    update_card_elsewhere
+
+    assert_selector "h1", text: "Retitled elsewhere", wait: 5
+    assert_text "Description updated elsewhere"
+  end
+
+  test "a broadcast refresh preserves an edit in progress" do
+    visit card_url(@card)
+    click_on @card.title
+
+    within_edit_frame do
+      fill_in_lexxy with: "Draft description in progress"
+    end
+
+    update_card_elsewhere
+
+    # The title change's system comment appearing proves the refresh reached the page.
+    assert_text "changed the title", wait: 5
+    within_edit_frame do
+      assert_selector "lexxy-editor", text: "Draft description in progress"
+    end
+    assert_no_text "Description updated elsewhere"
+  end
+
+  test "canceling an edit reveals card changes made elsewhere during the edit" do
+    visit card_url(@card)
+    click_on @card.title
+    within_edit_frame { assert_selector "form" }
+
+    update_card_elsewhere
+    assert_text "changed the title", wait: 5
+
+    send_keys :escape
+
+    assert_selector "h1", text: "Retitled elsewhere"
+    assert_text "Description updated elsewhere"
+  end
+
+  test "a broadcast refresh shows card changes after an edit is canceled" do
+    visit card_url(@card)
+    click_on @card.title
+    within_edit_frame { assert_selector "form" }
+
+    send_keys :escape
+    assert_selector "a.card__title-link", text: @card.title
+
+    update_card_elsewhere
+
+    assert_selector "h1", text: "Retitled elsewhere", wait: 5
+    assert_text "Description updated elsewhere"
+  end
+
+  private
+    def update_card_elsewhere
+      wait_for_cable_subscriptions
+      @card.update!(title: "Retitled elsewhere", description: "Description updated elsewhere")
+      perform_enqueued_jobs only: Turbo::Streams::BroadcastStreamJob
+    end
+
+    # A broadcast sent before the page's subscriptions are confirmed is lost.
+    def wait_for_cable_subscriptions
+      assert_selector "turbo-cable-stream-source[connected]", visible: :all
+      assert_no_selector "turbo-cable-stream-source:not([connected])", visible: :all
+    end
+
+    def within_edit_frame(&block)
+      within "##{dom_id(@card, :edit)}", &block
+    end
+end

test/system/smoke_test.rb

@@ -93,11 +93,4 @@ class SmokeTest < ApplicationSystemTestCase
     column_el.find(".cards__expander-count", text: cards_count + 1)
     assert_equal("Triage", card.reload.column.name)
   end
-
-  private
-    def fill_in_lexxy(selector = "lexxy-editor", with:)
-      editor_element = find(selector)
-      editor_element.set with
-      page.execute_script("arguments[0].value = '#{with}'", editor_element)
-    end
 end