From 0e06d8c0e7de0316d5d4ee1397c80a507ceef313 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 30 Oct 2023 12:51:22 +0700
Subject: [PATCH] Fix output ids within grid and tabs

---
 .../live/output/grid_component.ex             |  6 ++--
 .../live/output/tabs_component.ex             |  6 ++--
 test/livebook_web/live/session_live_test.exs  | 34 +++++++++++++++++++
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/lib/livebook_web/live/output/grid_component.ex b/lib/livebook_web/live/output/grid_component.ex
index d20e62258..182516f95 100644
--- a/lib/livebook_web/live/output/grid_component.ex
+++ b/lib/livebook_web/live/output/grid_component.ex
@@ -13,8 +13,8 @@ defmodule LivebookWeb.Output.GridComponent do
     socket = assign(socket, assigns)
 
     stream_items =
-      for {idx, output} <- Enum.reverse(outputs) do
-        id = "#{socket.assigns.id}-grid-item-#{idx}"
+      for {idx, output} <- outputs do
+        id = "#{idx}-grid-item"
         %{id: id, idx: idx, output: output}
       end
 
@@ -35,7 +35,7 @@ defmodule LivebookWeb.Output.GridComponent do
       >
         <div :for={{dom_id, output} <- @streams.outputs} id={dom_id}>
           <LivebookWeb.Output.output
-            id={"#{dom_id}-output"}
+            id={"outputs-#{output.idx}"}
             output={output.output}
             session_id={@session_id}
             session_pid={@session_pid}
diff --git a/lib/livebook_web/live/output/tabs_component.ex b/lib/livebook_web/live/output/tabs_component.ex
index b2c2bd833..d4b9214f1 100644
--- a/lib/livebook_web/live/output/tabs_component.ex
+++ b/lib/livebook_web/live/output/tabs_component.ex
@@ -24,8 +24,8 @@ defmodule LivebookWeb.Output.TabsComponent do
     socket = assign(socket, assigns)
 
     stream_items =
-      for {idx, output} <- Enum.reverse(outputs) do
-        id = "#{socket.assigns.id}-tab-content-#{idx}"
+      for {idx, output} <- outputs do
+        id = "#{idx}-tabs-item"
         %{id: id, idx: idx, output: output}
       end
 
@@ -61,7 +61,7 @@ defmodule LivebookWeb.Output.TabsComponent do
           class={[output.idx != @active_idx && "hidden"]}
         >
           <LivebookWeb.Output.output
-            id={"#{dom_id}-output"}
+            id={"outputs-#{output.idx}"}
             output={output.output}
             session_id={@session_id}
             session_pid={@session_pid}
diff --git a/test/livebook_web/live/session_live_test.exs b/test/livebook_web/live/session_live_test.exs
index ad75e41e0..09bcfdf20 100644
--- a/test/livebook_web/live/session_live_test.exs
+++ b/test/livebook_web/live/session_live_test.exs
@@ -686,6 +686,40 @@ defmodule LivebookWeb.SessionLiveTest do
       refute content =~ "In frame"
     end
 
+    test "frame output update when within grid", %{conn: conn, session: session} do
+      Session.subscribe(session.id)
+      evaluate_setup(session.pid)
+
+      section_id = insert_section(session.pid)
+      cell_id = insert_text_cell(session.pid, section_id, :code)
+
+      Session.queue_cell_evaluation(session.pid, cell_id)
+
+      frame = %{type: :frame, ref: "1", outputs: [terminal_text("In frame")], placeholder: true}
+      grid = %{type: :grid, outputs: [frame], columns: ["Frame"], gap: 8, boxed: false}
+      send(session.pid, {:runtime_evaluation_output, cell_id, grid})
+
+      {:ok, view, _} = live(conn, ~p"/sessions/#{session.id}")
+      assert render(view) =~ "In frame"
+
+      frame_update = %{
+        type: :frame_update,
+        ref: "1",
+        update: {:replace, [terminal_text("Updated frame")]}
+      }
+
+      send(session.pid, {:runtime_evaluation_output, cell_id, frame_update})
+
+      wait_for_session_update(session.pid)
+
+      # Render once, so that frame send_update is processed
+      _ = render(view)
+
+      content = render(view)
+      assert content =~ "Updated frame"
+      refute content =~ "In frame"
+    end
+
     test "client-specific output is sent only to one target", %{conn: conn, session: session} do
       user1 = build(:user, name: "Jake Peralta")
       {_, client_id} = Session.register_client(session.pid, self(), user1)