Showing app configuration when clicking Launch Preview (#2507)

lib/livebook_web/live/session_live.ex

@@ -573,29 +573,21 @@ defmodule LivebookWeb.SessionLive do
     {:noreply, socket}
   end
 
-  def handle_event("deploy_app", %{}, socket) do
-    on_confirm = fn socket ->
-      Livebook.Session.deploy_app(socket.assigns.session.pid)
-      socket
-    end
-
+  def handle_event("deploy_app", _, socket) do
     data = socket.private.data
-    slug = data.notebook.app_settings.slug
-    slug_taken? = slug != data.deployed_app_slug and Livebook.Apps.exists?(slug)
+    app_settings = data.notebook.app_settings
 
-    socket =
-      if slug_taken? do
-        confirm(socket, on_confirm,
-          title: "Deploy app",
-          description:
-            "An app with this slug already exists, do you want to deploy a new version?",
-          confirm_text: "Replace"
-        )
-      else
-        on_confirm.(socket)
-      end
-
-    {:noreply, socket}
+    if Livebook.Notebook.AppSettings.valid?(app_settings) do
+      {:noreply,
+       LivebookWeb.SessionLive.AppSettingsComponent.deploy_app(
+         socket,
+         app_settings,
+         data.deployed_app_slug
+       )}
+    else
+      {:noreply,
+       push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}/settings/launch-app")}
+    end
   end
 
   def handle_event("intellisense_request", %{"cell_id" => cell_id} = params, socket) do

lib/livebook_web/live/session_live/app_info_component.ex

@@ -98,28 +98,13 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
           </div>
 
           <div class={["grid gap-2", @app && "grid-cols-2"]}>
-            <span
-              class={[
-                "flex flex-col",
-                not Livebook.Notebook.AppSettings.valid?(@settings) && "tooltip top"
-              ]}
-              data-tooltip="You must configure the app to preview it"
-            >
+            <span class="flex flex-col">
               <%= if @app do %>
-                <.button
-                  color="gray"
-                  outlined
-                  phx-click="deploy_app"
-                  disabled={not Livebook.Notebook.AppSettings.valid?(@settings)}
-                >
+                <.button color="gray" outlined phx-click="deploy_app">
                   <.remix_icon icon="slideshow-4-line" /> Relaunch
                 </.button>
               <% else %>
-                <.button
-                  color="blue"
-                  phx-click="deploy_app"
-                  disabled={not Livebook.Notebook.AppSettings.valid?(@settings)}
-                >
+                <.button color="blue" phx-click="deploy_app">
                   <.remix_icon icon="slideshow-4-line" /> Launch preview
                 </.button>
               <% end %>

lib/livebook_web/live/session_live/app_settings_component.ex

@@ -2,6 +2,7 @@ defmodule LivebookWeb.SessionLive.AppSettingsComponent do
   use LivebookWeb, :live_component
 
   alias Livebook.Notebook.AppSettings
+  import LivebookWeb.Confirm
 
   @impl true
   def update(assigns, socket) do
@@ -24,6 +25,11 @@ defmodule LivebookWeb.SessionLive.AppSettingsComponent do
       <h3 class="text-2xl font-semibold text-gray-800">
         App settings
       </h3>
+      <%= if @live_action == :app_settings_and_launch do %>
+        <.message_box kind={:info}>
+          You must configure your app before launch it.
+        </.message_box>
+      <% end %>
       <.form
         :let={f}
         for={@changeset}
@@ -125,9 +131,12 @@ defmodule LivebookWeb.SessionLive.AppSettingsComponent do
           <% end %>
         </div>
         <div class="mt-8 flex space-x-2">
-          <.button type="submit" disabled={not @changeset.valid?}>
-            <span>Save</span>
-          </.button>
+          <%= if @live_action == :app_settings do %>
+            <.button type="submit" disabled={not @changeset.valid?}>Save</.button>
+          <% end %>
+          <%= if @live_action == :app_settings_and_launch do %>
+            <.button disabled={not @changeset.valid?}>Launch</.button>
+          <% end %>
           <.button color="gray" outlined type="reset" name="reset">
             Reset
           </.button>
@@ -154,10 +163,37 @@ defmodule LivebookWeb.SessionLive.AppSettingsComponent do
   end
 
   def handle_event("save", %{"app_settings" => params}, socket) do
-    with {:ok, settings} <- AppSettings.update(socket.assigns.settings, params) do
+    app_settings = socket.assigns.settings
+    deployed_app_slug = socket.assigns.deployed_app_slug
+
+    with {:ok, settings} <- AppSettings.update(app_settings, params) do
       Livebook.Session.set_app_settings(socket.assigns.session.pid, settings)
     end
 
-    {:noreply, push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}")}
+    if socket.assigns.live_action == :app_settings_and_launch do
+      {:noreply, deploy_app(socket, app_settings, deployed_app_slug)}
+    else
+      {:noreply, push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}")}
+    end
+  end
+
+  def deploy_app(socket, app_settings, deployed_app_slug) do
+    on_confirm = fn socket ->
+      Livebook.Session.deploy_app(socket.assigns.session.pid)
+      push_patch(socket, to: ~p"/sessions/#{socket.assigns.session.id}")
+    end
+
+    slug = app_settings.slug
+    slug_taken? = slug != deployed_app_slug and Livebook.Apps.exists?(slug)
+
+    if slug_taken? do
+      confirm(socket, on_confirm,
+        title: "Deploy app",
+        description: "An app with this slug already exists, do you want to deploy a new version?",
+        confirm_text: "Replace"
+      )
+    else
+      on_confirm.(socket)
+    end
   end
 end

lib/livebook_web/live/session_live/render.ex

@@ -78,7 +78,7 @@ defmodule LivebookWeb.SessionLive.Render do
     </.modal>
 
     <.modal
-      :if={@live_action == :app_settings}
+      :if={@live_action in [:app_settings, :app_settings_and_launch]}
       id="app-settings-modal"
       show
       width={:medium}
@@ -89,6 +89,8 @@ defmodule LivebookWeb.SessionLive.Render do
         id="app-settings"
         session={@session}
         settings={@data_view.app_settings}
+        live_action={@live_action}
+        deployed_app_slug={@data_view.deployed_app_slug}
       />
     </.modal>
 

lib/livebook_web/router.ex

@@ -108,6 +108,7 @@ defmodule LivebookWeb.Router do
       live "/sessions/:id/settings/runtime", SessionLive, :runtime_settings
       live "/sessions/:id/settings/file", SessionLive, :file_settings
       live "/sessions/:id/settings/app", SessionLive, :app_settings
+      live "/sessions/:id/settings/launch-app", SessionLive, :app_settings_and_launch
       live "/sessions/:id/app-docker", SessionLive, :app_docker
       live "/sessions/:id/add-file/:tab", SessionLive, :add_file_entry
       live "/sessions/:id/rename-file/:name", SessionLive, :rename_file_entry