[19] Adding copy to clipboard button

CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG (v0.1.X)
 
+## 0.1.11 🚀 ()
+
+### Backwards incompatible changes for 0.1.10
+ * None
+
+### Bug fixes
+ * None
+
+### Enhancements
+ * [[`ISSUE-19`](https://github.com/thiagoesteves/observer_web/issues/19)] Adding copy to clipboard button to copy tracing text.
+
 ## 0.1.10 🚀 (2025-05-26)
 
 ### Backwards incompatible changes for 0.1.9

assets/js/app.js

@@ -137,6 +137,37 @@ topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 
+window.addEventListener("phx:copy_to_clipboard", event => {
+  if ("clipboard" in navigator) {
+    const text = event.detail.text;
+    navigator.clipboard.writeText(text);
+  } else {
+    alert("Sorry, your browser does not support clipboard copy.");
+  }
+
+  const defaultMessage = document.getElementById("default-message-" + event.detail.id);
+  if (defaultMessage) {
+    defaultMessage.setAttribute("hidden", "");
+  }
+
+  const successMessage = document.getElementById("success-message-" + event.detail.id);
+  if (successMessage) {
+    successMessage.removeAttribute("hidden");
+  }
+
+  setTimeout(() => {
+    const successMessage = document.getElementById("success-message-" + event.detail.id);
+    if (successMessage) {
+      successMessage.setAttribute("hidden", "");
+    }
+
+    const defaultMessage = document.getElementById("default-message-" + event.detail.id);
+    if (defaultMessage) {
+      defaultMessage.removeAttribute("hidden");
+    }
+  }, 1000);
+});
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 

lib/web/components/copy_to_clipboard.ex

@@ -0,0 +1,55 @@
+defmodule Observer.Web.Components.CopyToClipboard do
+  @moduledoc false
+  use Observer.Web, :html
+  use Phoenix.Component
+
+  attr :id, :string, required: true
+  attr :message, :string, required: true
+
+  def content(assigns) do
+    ~H"""
+    <button
+      class="text-gray-500"
+      phx-click={JS.dispatch("phx:copy_to_clipboard", detail: %{text: @message, id: @id})}
+    >
+      <div class="flex gap-1 items-center object-center w-20">
+        <div id={"default-message-#{@id}"}>
+          <div class="flex items-center gap-0.5">
+            <svg
+              class="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+              >
+              </path>
+            </svg>
+            <span>Copy</span>
+          </div>
+        </div>
+        <div id={"success-message-#{@id}"} hidden>
+          <div class="flex items-center gap-0.5">
+            <svg
+              class="w-4 h-4 text-green-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
+              </path>
+            </svg>
+            <span> Copied! </span>
+          </div>
+        </div>
+      </div>
+    </button>
+    """
+  end
+end

lib/web/pages/tracing/page.ex

@@ -8,6 +8,7 @@ defmodule Observer.Web.Tracing.Page do
   use Observer.Web, :live_component
 
   alias Observer.Web.Components.Attention
+  alias Observer.Web.Components.CopyToClipboard
   alias Observer.Web.Components.Core
   alias Observer.Web.Components.MultiSelectList
   alias Observer.Web.Page
@@ -162,8 +163,15 @@ defmodule Observer.Web.Tracing.Page do
             <:col :let={{_id, tracing_message}} label="TYPE">
               <span>{tracing_message.type}</span>
             </:col>
-            <:col :let={{_id, tracing_message}} label="CONTENT">
-              {tracing_message.content}
+            <:col :let={{id, tracing_message}} label="CONTENT">
+              <div class="flex items-center justify-between gap-2">
+                {tracing_message.content}
+
+                <CopyToClipboard.content
+                  id={"tracing-functions-messages-#{id}"}
+                  message={tracing_message.content}
+                />
+              </div>
             </:col>
           </Core.table_tracing>
         </div>

mix.exs

@@ -2,7 +2,7 @@ defmodule ObserverWeb.MixProject do
   use Mix.Project
 
   @source_url "https://github.com/thiagoesteves/observer_web"
-  @version "0.1.10"
+  @version "0.1.11"
 
   def project do
     [