Simplify components push patch (livebook-dev#2510)

lib/livebook_web/live/file_select_component.ex

@@ -13,8 +13,7 @@ defmodule LivebookWeb.FileSelectComponent do
   #
   #   * `:extnames` - a list of file extensions that should be shown
   #
-  #   * `:submit_event` - the process event sent on form submission,
-  #     use `nil` for no action
+  #   * `:on_submit` - `%JS{}` to execute on form submission
   #
   #   * `:target` - either a pid or `{component_module, id}` to send
   #     events to
@@ -41,7 +40,7 @@ defmodule LivebookWeb.FileSelectComponent do
        # Component default attribute values
        inner_block: nil,
        file_system_select_disabled: false,
-       submit_event: nil,
+       on_submit: nil,
        # State
        current_dir: nil,
        deleting_file: nil,
@@ -100,14 +99,14 @@ defmodule LivebookWeb.FileSelectComponent do
             myself={@myself}
           />
           <form
+            id={"#{@id}-path-form"}
             class="grow"
-            phx-change="set_path"
-            phx-submit={if @submit_event, do: "submit"}
-            phx-nosubmit={!@submit_event}
-            phx-target={@myself}
+            phx-change={JS.push("set_path", target: @myself)}
+            phx-submit={@on_submit}
+            phx-nosubmit={@on_submit == nil}
           >
             <.text_field
-              id={"#{@id}-input-path"}
+              id={"#{@id}-path-input"}
               aria-label="file path"
               phx-hook="FocusOnUpdate"
               name="path"
@@ -518,14 +517,6 @@ defmodule LivebookWeb.FileSelectComponent do
     {:noreply, socket}
   end
 
-  def handle_event("submit", %{}, socket) do
-    if submit_event = socket.assigns.submit_event do
-      send_event(socket, submit_event)
-    end
-
-    {:noreply, socket}
-  end
-
   def handle_event("clear_error", %{}, socket) do
     {:noreply, put_error(socket, nil)}
   end

lib/livebook_web/live/session_live.ex

@@ -867,15 +867,6 @@ defmodule LivebookWeb.SessionLive do
   def handle_info({:error, error}, socket) do
     message = error |> to_string() |> upcase_first()
     socket = put_flash(socket, :error, message)
-
-    # If there is an immediate patch, we apply it to keep the flash
-    socket =
-      receive do
-        {:push_patch, to} -> push_patch(socket, to: to)
-      after
-        0 -> socket
-      end
-
     {:noreply, socket}
   end
 
@@ -1014,10 +1005,6 @@ defmodule LivebookWeb.SessionLive do
     end
   end
 
-  def handle_info({:push_patch, to}, socket) do
-    {:noreply, push_patch(socket, to: to)}
-  end
-
   def handle_info({:put_flash, kind, message}, socket) do
     {:noreply, put_flash(socket, kind, message)}
   end

lib/livebook_web/live/session_live/add_file_entry_file_component.ex

@@ -144,9 +144,7 @@ defmodule LivebookWeb.SessionLive.AddFileEntryFileComponent do
 
   defp add_file_entry(socket, file_entry) do
     Livebook.Session.add_file_entries(socket.assigns.session.pid, [file_entry])
-    # We can't do push_patch from update/2, so we ask the LV to do so
-    send(self(), {:push_patch, ~p"/sessions/#{socket.assigns.session.id}"})
-    socket
+    push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}")
   end
 
   defp regular?(file, file_info) do

lib/livebook_web/live/session_live/add_file_entry_url_component.ex

@@ -148,8 +148,6 @@ defmodule LivebookWeb.SessionLive.AddFileEntryUrlComponent do
 
   defp add_file_entry(socket, file_entry) do
     Livebook.Session.add_file_entries(socket.assigns.session.pid, [file_entry])
-    # We can't do push_patch from update/2, so we ask the LV to do so
-    send(self(), {:push_patch, ~p"/sessions/#{socket.assigns.session.id}"})
-    socket
+    push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}")
   end
 end

lib/livebook_web/live/session_live/persistence_component.ex

@@ -32,10 +32,6 @@ defmodule LivebookWeb.SessionLive.PersistenceComponent do
      |> put_new_attr(:autosave_interval_s, autosave_interval_s)}
   end
 
-  def update(%{event: :confirm_file}, socket) do
-    {:ok, save(socket)}
-  end
-
   def update(assigns, socket) do
     {file, assigns} = Map.pop!(assigns, :file)
     {persist_outputs, assigns} = Map.pop!(assigns, :persist_outputs)
@@ -80,7 +76,7 @@ defmodule LivebookWeb.SessionLive.PersistenceComponent do
             hub={@hub}
             extnames={[LiveMarkdown.extension()]}
             running_files={@running_files}
-            submit_event={:confirm_file}
+            on_submit={JS.push("save", target: @myself)}
             target={{__MODULE__, @id}}
           />
         </div>
@@ -181,10 +177,7 @@ defmodule LivebookWeb.SessionLive.PersistenceComponent do
 
     Session.save_sync(assigns.session.pid)
 
-    # We can't do push_patch from update/2, so we ask the LV to do so
-    send(self(), {:push_patch, return_to(assigns)})
-
-    socket
+    push_patch(socket, to: return_to(assigns))
   end
 
   defp return_to(assigns) do

lib/livebook_web/live/settings_live.ex

@@ -206,7 +206,7 @@ defmodule LivebookWeb.SettingsLive do
         file={@state.file}
         extnames={[]}
         running_files={[]}
-        submit_event={:set_autosave_path}
+        on_submit={JS.push("set_autosave_path")}
         file_system_select_disabled={true}
         target={self()}
       >
@@ -328,10 +328,6 @@ defmodule LivebookWeb.SettingsLive do
     {:noreply, update(socket, :autosave_path_state, &%{&1 | file: file})}
   end
 
-  def handle_info(:set_autosave_path, socket) do
-    handle_event("set_autosave_path", %{}, socket)
-  end
-
   def handle_info({:env_var_set, env_var}, socket) do
     idx = Enum.find_index(socket.assigns.env_vars, &(&1.name == env_var.name))
 

test/livebook_web/live/open_live_test.exs

@@ -12,7 +12,7 @@ defmodule LivebookWeb.OpenLiveTest do
       path = Path.expand("../../../lib", __DIR__) <> "/"
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       # Render the view separately to make sure it received the :set_file event
@@ -25,7 +25,7 @@ defmodule LivebookWeb.OpenLiveTest do
       path = test_notebook_path("basic")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: Path.dirname(path) <> "/"})
 
       view
@@ -48,7 +48,7 @@ defmodule LivebookWeb.OpenLiveTest do
       {:ok, view, _} = live(conn, ~p"/open/storage")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: tmp_dir <> "/"})
 
       assert view
@@ -62,7 +62,7 @@ defmodule LivebookWeb.OpenLiveTest do
       path = File.cwd!() |> Path.join("nonexistent.livemd")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       assert view
@@ -80,7 +80,7 @@ defmodule LivebookWeb.OpenLiveTest do
       File.chmod!(path, 0o444)
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: tmp_dir <> "/"})
 
       view

test/livebook_web/live/session_live_test.exs

@@ -941,7 +941,7 @@ defmodule LivebookWeb.SessionLiveTest do
       path = Path.join(tmp_dir, "notebook.livemd")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       view
@@ -971,7 +971,7 @@ defmodule LivebookWeb.SessionLiveTest do
       path = Path.join(tmp_dir, "notebook.livemd")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       view
@@ -1832,7 +1832,7 @@ defmodule LivebookWeb.SessionLiveTest do
       {:ok, view, _} = live(conn, ~p"/sessions/#{session.id}/add-file/storage")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       # Validations
@@ -1862,7 +1862,7 @@ defmodule LivebookWeb.SessionLiveTest do
       {:ok, view, _} = live(conn, ~p"/sessions/#{session.id}/add-file/storage")
 
       view
-      |> element(~s{form[phx-change="set_path"]})
+      |> element(~s{form[id*="path-form"]})
       |> render_change(%{path: path})
 
       view