update breadcrumb navigation to show sandbox hierarchy (#3817)

* Update breadcrumb navigation to show sandbox hierarchy

- Display parent project name before sandbox name in breadcrumbs
- Pass project attribute to header component in SandboxLive.Index
- Add comprehensive tests for breadcrumb rendering with sandboxes

* clean up

* Refactor breadcrumb logic to remove duplication

Author: elias-ba

CHANGELOG.md

@@ -37,6 +37,8 @@ and this project adheres to
 - Refactored inspector component architecture to use composition pattern with
   reusable layout shell and pure form components
   [#3768](https://github.com/OpenFn/lightning/issues/3768)
+- Updated breadcrumb navigation to display parent project name before sandbox
+  name [#3474](https://github.com/OpenFn/lightning/issues/3474)
 
 ### Fixed
 
@@ -922,8 +924,9 @@ This bug was introduced in version `v2.12.3-pre` on May 29th. If you're tracking
 - Refactor OAuth credentials to reuse existing refresh tokens for same scopes
   [#2908](https://github.com/OpenFn/lightning/issues/2908) \
   ⚠️️ Please note that you will need to migrate your existing OAuth credentials.
-  To do that run the following command: `mix run priv/repo/migrate_oauth_credentials.exs`
-  for local setup or `docker exec -it <lightning_container_name> /app/bin/lightning eval "Lightning.Credentials.OauthMigration.run()"`
+  To do that run the following command:
+  `mix run priv/repo/migrate_oauth_credentials.exs` for local setup or
+  `docker exec -it <lightning_container_name> /app/bin/lightning eval "Lightning.Credentials.OauthMigration.run()"`
   for production environments.
 
 ### Changed

lib/lightning_web/components/layout_components.ex

@@ -133,6 +133,13 @@ defmodule LightningWeb.LayoutComponents do
                 <.breadcrumb path="/projects">
                   <:label>Projects</:label>
                 </.breadcrumb>
+
+                <%= if @project.parent_id && Ecto.assoc_loaded?(@project.parent) do %>
+                  <.breadcrumb path={"/projects/#{@project.parent.id}/w"}>
+                    <:label>{@project.parent.name}</:label>
+                  </.breadcrumb>
+                <% end %>
+
                 <.breadcrumb path={"/projects/#{@project.id}/w"}>
                   <:label>{@project.name}</:label>
                 </.breadcrumb>

lib/lightning_web/live/sandbox_live/index.ex

@@ -278,7 +278,7 @@ defmodule LightningWeb.SandboxLive.Index do
     ~H"""
     <LayoutComponents.page_content>
       <:header>
-        <LayoutComponents.header current_user={@current_user}>
+        <LayoutComponents.header current_user={@current_user} project={@project}>
           <:title>Sandboxes</:title>
         </LayoutComponents.header>
       </:header>

test/lightning_web/components/layout_components_test.exs

@@ -34,4 +34,97 @@ defmodule LightningWeb.LayoutComponentsTest do
     assert element |> Floki.attribute("class") |> List.first() =~
              "menu-item-active"
   end
+
+  describe "header/1 breadcrumbs" do
+    import Lightning.ProjectsFixtures
+
+    test "renders regular project breadcrumb" do
+      user = Lightning.AccountsFixtures.user_fixture()
+      project = project_fixture()
+
+      assigns = %{
+        current_user: user,
+        socket: nil,
+        breadcrumbs: [],
+        project: project,
+        title: []
+      }
+
+      html =
+        (&LayoutComponents.header/1)
+        |> render_component(assigns)
+
+      assert html =~ "Projects"
+      assert html =~ project.name
+      refute html =~ "parent"
+    end
+
+    test "renders sandbox breadcrumb with parent project" do
+      user = Lightning.AccountsFixtures.user_fixture()
+      parent_project = project_fixture(name: "Parent Project")
+
+      sandbox_project =
+        project_fixture(name: "My Sandbox", parent_id: parent_project.id)
+        |> Lightning.Repo.preload(:parent)
+
+      assigns = %{
+        current_user: user,
+        socket: nil,
+        breadcrumbs: [],
+        project: sandbox_project,
+        title: []
+      }
+
+      html =
+        (&LayoutComponents.header/1)
+        |> render_component(assigns)
+
+      assert html =~ "Projects"
+      assert html =~ "Parent Project"
+      assert html =~ "My Sandbox"
+
+      parsed = Floki.parse_fragment!(html)
+      breadcrumb_links = Floki.find(parsed, "nav ol li a")
+
+      breadcrumb_texts =
+        breadcrumb_links
+        |> Enum.map(&Floki.text/1)
+        |> Enum.map(&String.trim/1)
+
+      assert "Parent Project" in breadcrumb_texts
+      assert "My Sandbox" in breadcrumb_texts
+
+      breadcrumb_index_parent =
+        Enum.find_index(breadcrumb_texts, &(&1 == "Parent Project"))
+
+      breadcrumb_index_sandbox =
+        Enum.find_index(breadcrumb_texts, &(&1 == "My Sandbox"))
+
+      assert breadcrumb_index_parent < breadcrumb_index_sandbox
+    end
+
+    test "renders sandbox breadcrumb without parent when parent not preloaded" do
+      user = Lightning.AccountsFixtures.user_fixture()
+      parent_project = project_fixture(name: "Parent Project")
+
+      sandbox_project =
+        project_fixture(name: "My Sandbox", parent_id: parent_project.id)
+
+      assigns = %{
+        current_user: user,
+        socket: nil,
+        breadcrumbs: [],
+        project: sandbox_project,
+        title: []
+      }
+
+      html =
+        (&LayoutComponents.header/1)
+        |> render_component(assigns)
+
+      assert html =~ "Projects"
+      refute html =~ "Parent Project"
+      assert html =~ "My Sandbox"
+    end
+  end
 end