Fix output ids within grid and tabs

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
+      for {idx, output} <- outputs do
-        id = "#{socket.assigns.id}-grid-item-#{idx}"
+        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}

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
+      for {idx, output} <- outputs do
-        id = "#{socket.assigns.id}-tab-content-#{idx}"
+        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}

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)