fix: render sibling tabs at parent level in show view

assets/js/app.js

@@ -63,6 +63,14 @@ Hooks.Show = {
        tabContent.style.setProperty('display', 'none');
       }
     };
+
+    for (const tabRow of el.querySelectorAll('[data-tab-group]')) {
+      if (urlHash.startsWith(`#${tabRow.dataset.tabGroup}_`)) {
+        tabRow.style.removeProperty('display');
+      } else {
+        tabRow.style.setProperty('display', 'none');
+      }
+    };
   },
   mounted() {
     this.setTab(this.el);

dev/populator.ex

@@ -28,7 +28,13 @@ defmodule Demo.Populator do
             body: Faker.Lorem.paragraphs() |> Enum.join("\n\n"),
             disabled_user: get_user_if(:rand.uniform(2) == 1),
             previous_versions: [
-              %Demo.Posts.Post.Version{body: Faker.Lorem.paragraphs() |> Enum.join("\n\n")}
+              %Demo.Posts.Post.Version{
+                body: Faker.Lorem.paragraphs() |> Enum.join("\n\n"),
+                links:
+                  Enum.map(1..Enum.random(1..3), fn _ ->
+                    %Demo.Posts.Post.Version.Link{url: Faker.Internet.url()}
+                  end)
+              }
             ]
           }
         ]

dev/post.ex

@@ -62,6 +62,17 @@ defmodule Demo.Posts.Post.Version do
     field :body, :string
     field :tags, {:array, :string}
 
+    embeds_many :links, __MODULE__.Link
+
     timestamps(updated_at: false)
   end
 end
+
+defmodule Demo.Posts.Post.Version.Link do
+  use Ecto.Schema
+
+  @primary_key false
+  embedded_schema do
+    field :url, :string
+  end
+end

dist/js/app.js

@@ -9008,6 +9008,14 @@ removing illegal node: "${(childNode.outerHTML || childNode.nodeValue).trim()}"
         }
       }
       ;
+      for (const tabRow of el.querySelectorAll("[data-tab-group]")) {
+        if (urlHash.startsWith(`#${tabRow.dataset.tabGroup}_`)) {
+          tabRow.style.removeProperty("display");
+        } else {
+          tabRow.style.setProperty("display", "none");
+        }
+      }
+      ;
     },
     mounted() {
       this.setTab(this.el);

lib/live_admin/components/resource/show.ex

@@ -90,7 +90,6 @@ defmodule LiveAdmin.Components.Container.Show do
     """
   end
 
-  attr(:sibling_count, :integer, default: 0)
   attr(:current_index, :integer, default: 0)
   attr(:id, :string, required: true)
   attr(:record, :map, required: true)
@@ -117,20 +116,24 @@ defmodule LiveAdmin.Components.Container.Show do
 
     ~H"""
     <div class="detail-view" id={indexed_id(@id, @current_index)}>
-      <%= if Enum.any?(@embeds) || @sibling_count > 0 do %>
+      <%= if Enum.any?(@embeds) do %>
         <div class="tabs">
           <%= if @id == "main" do %>
             <a href="#main" id="main-link"></a>
           <% end %>
           <%= for {field, _, _} <- @embeds, @record |> Map.fetch!(field) |> List.wrap() |> Enum.any? do %>
             <a href={"##{indexed_id(@id, @current_index)}_#{field}_0"}>{trans(humanize(field))}</a>
           <% end %>
-          <%= if @sibling_count > 0 do %>
-            <%= for n <- 0..@sibling_count do %>
-              <a href={"##{@id}_#{n}"}>{n}</a>
-            <% end %>
-          <% end %>
         </div>
+        <%= for {field, {_, {Ecto.Embedded, %{cardinality: :many}}}, _} <- @embeds,
+                list = Map.fetch!(@record, field),
+                Enum.any?(list) do %>
+          <div class="tabs" data-tab-group={"#{indexed_id(@id, @current_index)}_#{field}"}>
+            <%= for {_, n} <- Enum.with_index(list) do %>
+              <a href={"##{indexed_id(@id, @current_index)}_#{field}_#{n}"}>{n}</a>
+            <% end %>
+          </div>
+        <% end %>
       <% end %>
       <div class="card-section">
         <div class="detail-grid">
@@ -202,7 +205,6 @@ defmodule LiveAdmin.Components.Container.Show do
             record={record}
             title={trans(humanize(field))}
             current_index={index}
-            sibling_count={Enum.count(list) - 1}
             resource={@resource}
             resources={@resources}
             base_path={@base_path}

test/live_admin/components/container_test.exs

@@ -285,6 +285,33 @@ defmodule LiveAdmin.Components.ContainerTest do
     test "renders unique detail-view id for each parent's nested embed", %{view: view} do
       assert has_element?(view, "#main_previous_versions_1_links_0")
     end
+
+    test "renders sibling navigation tab at parent level", %{view: view} do
+      assert has_element?(view, "#main > .tabs a[href=\"#main_previous_versions_1\"]")
+    end
+
+    test "does not render sibling navigation tab inside child detail-view", %{view: view} do
+      refute has_element?(
+               view,
+               "#main_previous_versions_0 > .tabs a[href=\"#main_previous_versions_1\"]"
+             )
+    end
+
+    test "renders numbered sibling tab for plural embed with single item", %{view: view} do
+      assert has_element?(
+               view,
+               "#main_previous_versions_0 > .tabs a[href=\"#main_previous_versions_0_links_0\"]",
+               "0"
+             )
+    end
+
+    test "renders embed-type tab for nested links embed", %{view: view} do
+      assert has_element?(
+               view,
+               "#main_previous_versions_0 > .tabs a[href=\"#main_previous_versions_0_links_0\"]",
+               "Links"
+             )
+    end
   end
 
   describe "view child resource" do