Update modal enter and leave (#2323)

assets/css/utilities.css

@@ -35,32 +35,6 @@
 
   /* Animations */
 
-  .fade-in {
-    animation: fade-in-frames 200ms ease-out;
-  }
-
-  .fade-out {
-    animation: fade-out-frames 200ms ease-in;
-  }
-
-  @keyframes fade-in-frames {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-out-frames {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
   .delay-200 {
     animation: delay-frames 200ms;
   }

lib/livebook_web/components/core_components.ex

@@ -172,12 +172,14 @@ defmodule LivebookWeb.CoreComponents do
     ~H"""
     <div
       id={@id}
-      class={["fixed z-[10000] inset-0", if(@show, do: "fade-in", else: "hidden")]}
-      phx-remove={JS.transition("fade-out")}
+      class="fixed z-[10000] inset-0 hidden"
+      phx-mounted={@show && show_modal(@id)}
+      phx-remove={hide_modal(@id)}
+      data-cancel={modal_on_cancel(@patch, @navigate)}
       {@rest}
     >
       <!-- Modal container -->
-      <div class="h-screen flex items-center justify-center p-4">
+      <div id={"#{@id}-container"} class="h-screen flex items-center justify-center p-4">
         <!-- Overlay -->
         <div class="absolute z-0 inset-0 bg-gray-500 opacity-75" aria-hidden="true"></div>
         <!-- Modal box -->
@@ -192,17 +194,15 @@ defmodule LivebookWeb.CoreComponents do
           aria-modal="true"
           tabindex="0"
           autofocus
-          phx-window-keydown={hide_modal(@id)}
-          phx-click-away={hide_modal(@id)}
+          phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
+          phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
           phx-key="escape"
         >
-          <.link :if={@patch} patch={@patch} class="hidden" id={"#{@id}-return"}></.link>
-          <.link :if={@navigate} patch={@navigate} class="hidden" id={"#{@id}-return"}></.link>
           <button
             type="button"
             class="absolute top-6 right-6 text-gray-400 flex space-x-1 items-center"
             aria_label="close modal"
-            phx-click={hide_modal(@id)}
+            phx-click={JS.exec("data-cancel", to: "##{@id}")}
           >
             <span class="text-sm">(esc)</span>
             <.remix_icon icon="close-line" class="text-2xl" />
@@ -219,14 +219,19 @@ defmodule LivebookWeb.CoreComponents do
   defp modal_width_class(:big), do: "max-w-4xl"
   defp modal_width_class(:large), do: "max-w-6xl"
 
+  defp modal_on_cancel(nil, nil), do: JS.exec("phx-remove")
+  defp modal_on_cancel(nil, navigate), do: JS.patch(navigate)
+  defp modal_on_cancel(patch, nil), do: JS.patch(patch)
+
   @doc """
   Shows a modal rendered with `modal/1`.
   """
   def show_modal(js \\ %JS{}, id) do
     js
-    |> JS.show(
-      to: "##{id}",
-      transition: {"ease-out duration-200", "opacity-0", "opacity-100"}
+    |> JS.show(to: "##{id}")
+    |> JS.transition(
+      {"ease-out duration-200", "opacity-0", "opacity-100"},
+      to: "##{id}-container"
     )
   end
 
@@ -235,11 +240,11 @@ defmodule LivebookWeb.CoreComponents do
   """
   def hide_modal(js \\ %JS{}, id) do
     js
-    |> JS.hide(
-      to: "##{id}",
-      transition: {"ease-in duration-200", "opacity-100", "opacity-0"}
+    |> JS.transition(
+      {"ease-in duration-200", "opacity-100", "opacity-0"},
+      to: "##{id}-container"
     )
-    |> JS.dispatch("click", to: "##{id}-return")
+    |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
   end
 
   @doc """

lib/livebook_web/live/hub/edit/team_component.ex

@@ -96,13 +96,12 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
                   <.remix_icon icon="settings-line" /> Manage organization
                 </a>
 
-                <button
-                  phx-click={show_modal("show-key-modal")}
-                  phx-target={@myself}
+                <.link
+                  patch={~p"/hub/#{@hub.id}?show-key=true"}
                   class="hover:text-blue-600 cursor-pointer"
                 >
                   <.remix_icon icon="key-2-fill" /> Display Teams key
-                </button>
+                </.link>
                 <%= if @default? do %>
                   <button
                     phx-click="remove_as_default"
@@ -253,7 +252,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
             </div>
           </div>
 
-          <.modal show={@show_key} id="show-key-modal" width={:medium} patch={~p"/hub/#{@hub.id}"}>
+          <.modal :if={@show_key} id="key-modal" show width={:medium} patch={~p"/hub/#{@hub.id}"}>
             <.teams_key_modal teams_key={@hub.teams_key} />
           </.modal>
 

mix.lock

@@ -31,7 +31,7 @@
   "phoenix_html": {:hex, :phoenix_html, "3.3.2", "d6ce982c6d8247d2fc0defe625255c721fb8d5f1942c5ac051f6177bffa5973f", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "44adaf8e667c1c20fb9d284b6b0fa8dc7946ce29e81ce621860aa7e96de9a11d"},
   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.8.2", "b9e33c950d1ed98494bfbde1c34c6e51c8a4214f3bea3f07ca9a510643ee1387", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_mysql_extras, "~> 0.5", [hex: :ecto_mysql_extras, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.7", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:ecto_sqlite3_extras, "~> 1.1.7 or ~> 1.2.0", [hex: :ecto_sqlite3_extras, repo: "hexpm", optional: true]}, {:mime, "~> 1.6 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.19 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6 or ~> 1.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "67a598441b5f583d301a77e0298719f9654887d3d8bf14e80ff0b6acf887ef90"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.4.1", "2aff698f5e47369decde4357ba91fc9c37c6487a512b41732818f2204a8ef1d3", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "9bffb834e7ddf08467fe54ae58b5785507aaba6255568ae22b4d46e2bb3615ab"},
-  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "7efbe52dd345de7fa3657f56969eafadd8c3ac50", []},
+  "phoenix_live_view": {:git, "https://github.com/phoenixframework/phoenix_live_view.git", "ce7c2f09501b136e7e2b7b47384fef1f76fa28b0", []},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.1", "85f79e3ad1b0180abb43f9725973e3b8c2c3354a87245f91431eec60553ed3ef", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "157dc078f6226334c91cb32c1865bf3911686f8bcd6bcff86736f6253e6993ee"},
   "plug": {:hex, :plug, "1.15.1", "b7efd81c1a1286f13efb3f769de343236bd8b7d23b4a9f40d3002fc39ad8f74c", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "459497bd94d041d98d948054ec6c0b76feacd28eec38b219ca04c0de13c79d30"},

test/livebook_teams/web/hub/new_live_test.exs

@@ -52,11 +52,11 @@ defmodule LivebookWeb.Hub.NewLiveTest do
 
       # access the page and shows the teams key modal
       {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=true")
-      refute has_element?(view, "#show-key-modal.hidden")
+      assert has_element?(view, "#key-modal")
 
       # access the page when closes the modal
       assert {:ok, view, _html} = live(conn, "/hub/team-#{name}")
-      assert has_element?(view, "#show-key-modal.hidden")
+      refute has_element?(view, "#key-modal")
 
       # checks if the hub is in the sidebar
       assert_sidebar_hub(view, "team-#{name}", name)
@@ -113,11 +113,11 @@ defmodule LivebookWeb.Hub.NewLiveTest do
 
       # access the page and shows the teams key modal
       {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=true")
-      refute has_element?(view, "#show-key-modal.hidden")
+      assert has_element?(view, "#key-modal")
 
       # access the page when closes the modal
       assert {:ok, view, _html} = live(conn, "/hub/team-#{name}")
-      assert has_element?(view, "#show-key-modal.hidden")
+      refute has_element?(view, "#key-modal")
 
       # checks if the hub is in the sidebar
       assert_sidebar_hub(view, "team-#{name}", name)