Secret improvements (#2051)

Co-authored-by: José Valim <jose.valim@dashbit.co>

assets/js/events.js

@@ -43,7 +43,9 @@ export function registerGlobalEventHandlers() {
 
   window.addEventListener("lb:clipcopy", (event) => {
     if ("clipboard" in navigator) {
-      if (event.target.tagName === "INPUT") {
+      if (event.detail.content) {
+        navigator.clipboard.writeText(event.detail.content);
+      } else if (event.target.tagName === "INPUT") {
         navigator.clipboard.writeText(event.target.value);
       } else {
         navigator.clipboard.writeText(event.target.textContent);

lib/livebook_web/live/session_live.ex

@@ -232,6 +232,7 @@ defmodule LivebookWeb.SessionLive do
             settings={@data_view.app_settings}
             app={@app}
             deployed_app_slug={@data_view.deployed_app_slug}
+            any_session_secrets?={@data_view.any_session_secrets?}
           />
         </div>
         <div data-el-runtime-info>
@@ -2275,6 +2276,8 @@ defmodule LivebookWeb.SessionLive do
       secrets: data.secrets,
       hub: Livebook.Hubs.fetch_hub!(data.notebook.hub_id),
       hub_secrets: data.hub_secrets,
+      any_session_secrets?:
+        Session.Data.session_secrets(data.secrets, data.notebook.hub_id) != [],
       file_entries: Enum.sort_by(data.notebook.file_entries, & &1.name),
       app_settings: data.notebook.app_settings,
       deployed_app_slug: data.deployed_app_slug

lib/livebook_web/live/session_live/app_info_component.ex

@@ -27,7 +27,13 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
           </div>
         </div>
       <% else %>
-        <div class="mt-5 flex space-x-2">
+        <div class="mt-5 flex flex-col gap-6">
+          <.message_box
+            :if={@any_session_secrets?}
+            kind={:warning}
+            message="You defined session secrets, but those are not available to the deployed app, only Hub secrets are."
+          />
+          <div class="flex space-x-2">
             <button
               class="button-base button-blue"
               phx-click="deploy_app"
@@ -43,6 +49,7 @@ defmodule LivebookWeb.SessionLive.AppInfoComponent do
               Configure
             </.link>
           </div>
+        </div>
         <%= if @app do %>
           <h3 class="mt-10 uppercase text-sm font-semibold text-gray-500">
             Latest deployment

lib/livebook_web/live/session_live/secrets_list_component.ex

@@ -77,12 +77,22 @@ defmodule LivebookWeb.SessionLive.SecretsListComponent do
         <%= @secret.name %>
       </span>
       <div
-        class="flex-row justify-between items-center my-1 hidden"
+        class="flex justify-between items-center my-1 hidden"
         id={"session-secret-#{@secret.name}-detail"}
       >
-        <span class="text-sm font-mono break-all flex-row tooltip right" data-tooltip={@secret.value}>
+        <div class="flex items-center gap-1">
+          <span class="text-sm font-mono break-all">
             *****
           </span>
+          <button
+            id={"session-secret-#{@secret.name}-delete"}
+            type="button"
+            phx-click={JS.dispatch("lb:clipcopy", detail: %{content: @secret.value})}
+            class="icon-button"
+          >
+            <.remix_icon icon="clipboard-line" />
+          </button>
+        </div>
         <button
           id={"session-secret-#{@secret.name}-delete"}
           type="button"
@@ -92,7 +102,7 @@ defmodule LivebookWeb.SessionLive.SecretsListComponent do
               target: @myself
             )
           }
-          class="hover:text-gray-900"
+          class="icon-button"
         >
           <.remix_icon icon="delete-bin-line" />
         </button>
@@ -149,16 +159,23 @@ defmodule LivebookWeb.SessionLive.SecretsListComponent do
             </.form>
           </div>
           <div class="flex-row justify-between items-center my-1 hidden" id={"#{@id}-detail"}>
-            <span
+            <div class="flex items-center gap-1">
-              class="text-sm font-mono break-all flex-row tooltip right"
+              <span class="text-sm font-mono break-all">
-              data-tooltip={@secret.value}
-            >
                 *****
               </span>
+              <button
+                id={"session-secret-#{@secret.name}-delete"}
+                type="button"
+                phx-click={JS.dispatch("lb:clipcopy", detail: %{content: @secret.value})}
+                class="icon-button"
+              >
+                <.remix_icon icon="clipboard-line" />
+              </button>
+            </div>
             <.link
               id={"#{@id}-edit-button"}
               navigate={~p"/hub/#{@secret.hub_id}/secrets/edit/#{@secret.name}"}
-              class="hover:text-gray-900"
+              class="icon-button"
               role="button"
             >
               <.remix_icon icon="pencil-line" />

test/livebook_web/live/session_live_test.exs

@@ -1821,5 +1821,15 @@ defmodule LivebookWeb.SessionLiveTest do
 
       Livebook.App.close(app.pid)
     end
+
+    test "shows a warning when any session secrets are defined", %{conn: conn, session: session} do
+      secret = build(:secret, name: "FOO", value: "456", hub_id: nil)
+      Session.set_secret(session.pid, secret)
+
+      {:ok, view, _} = live(conn, ~p"/sessions/#{session.id}")
+
+      assert render(view) =~
+               "You defined session secrets, but those are not available to the deployed app, only Hub secrets are."
+    end
   end
 end