Do not delete teams key modal, require confirmation (#2327)

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

@@ -11,7 +11,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
   def update(assigns, socket) do
     socket = assign(socket, assigns)
     changeset = Teams.change_hub(assigns.hub)
-    show_key? = assigns.params["show-key"] == "true"
+    show_key = assigns.params["show-key"]
     secrets = Hubs.get_secrets(assigns.hub)
     file_systems = Hubs.get_file_systems(assigns.hub, hub_only: true)
     secret_name = assigns.params["secret_name"]
@@ -37,7 +37,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
        file_system: file_system,
        file_system_id: file_system_id,
        file_systems: file_systems,
-       show_key: show_key?,
+       show_key: show_key,
        secret_name: secret_name,
        secret_value: secret_value,
        hub_metadata: Provider.to_metadata(assigns.hub),
@@ -97,7 +97,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
                 </a>
 
                 <.link
-                  patch={~p"/hub/#{@hub.id}?show-key=true"}
+                  patch={~p"/hub/#{@hub.id}?show-key=yes"}
                   class="hover:text-blue-600 cursor-pointer"
                 >
                   <.remix_icon icon="key-2-fill" /> Display Teams key
@@ -253,7 +253,10 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
           </div>
 
           <.modal :if={@show_key} id="key-modal" show width={:medium} patch={~p"/hub/#{@hub.id}"}>
-            <.teams_key_modal teams_key={@hub.teams_key} />
+            <.teams_key_modal
+              teams_key={@hub.teams_key}
+              confirm_url={if @show_key == "confirm", do: ~p"/hub/#{@hub.id}"}
+            />
           </.modal>
 
           <.modal
@@ -311,7 +314,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
         required for you and invited users to join this organization.
         We recommend storing it somewhere safe:
       </div>
-      <div class=" w-full">
+      <div class="w-full">
         <div id="teams-key-toggle" class="relative flex">
           <input
             type="password"
@@ -366,6 +369,9 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
           </div>
         </div>
       </div>
+      <.link :if={@confirm_url} patch={@confirm_url} class="button-base button-blue block text-center">
+        <.remix_icon class="mr-2" icon="thumb-up-fill" /> I've saved my Teams key in a secure location
+      </.link>
     </div>
     """
   end
@@ -377,7 +383,7 @@ defmodule LivebookWeb.Hub.Edit.TeamComponent do
         {:noreply,
          socket
          |> put_flash(:success, "Hub updated successfully")
-         |> push_navigate(to: ~p"/hub/#{hub.id}")}
+         |> push_patch(to: ~p"/hub/#{hub.id}")}
 
       {:error, changeset} ->
         {:noreply, assign_form(socket, changeset)}

lib/livebook_web/live/hub/edit_live.ex

@@ -18,10 +18,8 @@ defmodule LivebookWeb.Hub.EditLive do
 
   @impl true
   def handle_params(params, _url, socket) do
-    hub = Hubs.fetch_hub!(params["id"])
-    type = Provider.type(hub)
-
-    {:noreply, assign(socket, hub: hub, type: type, params: params, counter: 0)}
+    {id, params} = Map.pop(params, "id")
+    {:noreply, socket |> load_hub(id) |> assign(:params, params)}
   end
 
   @impl true
@@ -32,13 +30,7 @@ defmodule LivebookWeb.Hub.EditLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <.hub_component
-        type={@type}
-        hub={@hub}
-        live_action={@live_action}
-        params={@params}
-        counter={@counter}
-      />
+      <.hub_component type={@type} hub={@hub} live_action={@live_action} params={@params} />
     </LayoutHelpers.layout>
     """
   end
@@ -50,7 +42,6 @@ defmodule LivebookWeb.Hub.EditLive do
       hub={@hub}
       params={@params}
       live_action={@live_action}
-      counter={@counter}
       id="personal-form"
     />
     """
@@ -89,14 +80,20 @@ defmodule LivebookWeb.Hub.EditLive do
 
   @impl true
   def handle_info({:hub_connected, id}, %{assigns: %{hub: %{id: id}}} = socket) do
-    {:noreply, push_navigate(socket, to: ~p"/hub/#{id}")}
+    {:noreply, load_hub(socket, id)}
   end
 
   def handle_info({_event, id, _reason}, %{assigns: %{hub: %{id: id}}} = socket) do
-    {:noreply, push_navigate(socket, to: ~p"/hub/#{id}")}
+    {:noreply, load_hub(socket, id)}
   end
 
   def handle_info(_message, socket) do
     {:noreply, socket}
   end
+
+  defp load_hub(socket, id) do
+    hub = Hubs.fetch_hub!(id)
+    type = Provider.type(hub)
+    assign(socket, hub: hub, type: type)
+  end
 end

lib/livebook_web/live/hub/new_live.ex

@@ -298,7 +298,7 @@ defmodule LivebookWeb.Hub.NewLive do
         {:noreply,
          socket
          |> put_flash(:success, "Hub added successfully")
-         |> push_navigate(to: ~p"/hub/#{hub.id}?show-key=true")}
+         |> push_navigate(to: ~p"/hub/#{hub.id}?show-key=confirm")}
 
       {:error, :expired} ->
         changeset =

test/livebook_teams/web/hub/edit_live_test.exs

@@ -30,13 +30,13 @@ defmodule LivebookWeb.Integration.Hub.EditLiveTest do
              |> element("#team-form .invalid-feedback")
              |> has_element?()
 
-      assert {:ok, view, _html} =
-               view
-               |> element("#team-form")
-               |> render_submit(%{"team" => attrs})
-               |> follow_redirect(conn)
+      view
+      |> element("#team-form")
+      |> render_submit(%{"team" => attrs})
 
-      assert render(view) =~ "Hub updated successfully"
+      update = render(view)
+      assert update =~ "Hub updated successfully"
+      assert update =~ "🐈"
 
       id = hub.id
       assert_receive {:hub_changed, ^id}

test/livebook_teams/web/hub/new_live_test.exs

@@ -48,10 +48,14 @@ defmodule LivebookWeb.Hub.NewLiveTest do
       # check if the page redirected to edit hub page
       # and check the flash message
       %{"success" => "Hub added successfully"} =
-        assert_redirect(view, "/hub/team-#{name}?show-key=true", check_completion_data_interval())
+        assert_redirect(
+          view,
+          "/hub/team-#{name}?show-key=confirm",
+          check_completion_data_interval()
+        )
 
       # access the page and shows the teams key modal
-      {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=true")
+      {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=confirm")
       assert has_element?(view, "#key-modal")
 
       # access the page when closes the modal
@@ -109,10 +113,14 @@ defmodule LivebookWeb.Hub.NewLiveTest do
       # check if the page redirected to edit hub page
       # and check the flash message
       %{"success" => "Hub added successfully"} =
-        assert_redirect(view, "/hub/team-#{name}?show-key=true", check_completion_data_interval())
+        assert_redirect(
+          view,
+          "/hub/team-#{name}?show-key=confirm",
+          check_completion_data_interval()
+        )
 
       # access the page and shows the teams key modal
-      {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=true")
+      {:ok, view, _html} = live(conn, "/hub/team-#{name}?show-key=confirm")
       assert has_element?(view, "#key-modal")
 
       # access the page when closes the modal