Add site selector to switch between available sites in the cluster (#100

)
BeaconCMS · Feb 9, 2024 · f696889 · f696889
1 parent db1028b
commit f696889
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 6 deletions.
diff --git a/lib/beacon/live_admin/components/admin_components.ex b/lib/beacon/live_admin/components/admin_components.ex
@@ -707,4 +707,24 @@ defmodule Beacon.LiveAdmin.AdminComponents do
     </div>
     """
   end
+
+  @doc """
+  Renders a select input with the available sites to select.
+
+  ## Examples
+
+      <.site_selector selected_site="dev" options={[:dev, :dy]} />
+  """
+  attr :selected_site, :string, default: ""
+  attr :options, :list, default: []
+
+  def site_selector(assigns) do
+    ~H"""
+    <div class="flex justify-end">
+      <.form id="site-selector-form" for={%{}} phx-change="change-site" class="-mt-16 w-1/12">
+        <.input type="select" name="site" options={@options} value={@selected_site} />
+      </.form>
+    </div>
+    """
+  end
 end
diff --git a/lib/beacon/live_admin/live/component_editor_live/index.ex b/lib/beacon/live_admin/live/component_editor_live/index.ex
@@ -49,7 +49,7 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.Index do
       </:actions>
     </.header>
 
-    <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
+    <.simple_form :let={f} id="search-form" for={%{}} as={:search} phx-change="search">
       <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by name (showing up to 20 results)" />
     </.simple_form>
 

diff --git a/lib/beacon/live_admin/live/error_page_editor_live/index.ex b/lib/beacon/live_admin/live/error_page_editor_live/index.ex
@@ -6,8 +6,10 @@ defmodule Beacon.LiveAdmin.ErrorPageEditorLive.Index do
 
   on_mount {Beacon.LiveAdmin.Hooks.Authorized, {:error_pages, :index}}
 
+  @impl true
   def menu_link(_, :index), do: {:root, "Error Pages"}
 
+  @impl true
   def handle_params(params, _uri, socket) do
     %{beacon_page: %{site: site}} = socket.assigns
 
@@ -28,6 +30,7 @@ defmodule Beacon.LiveAdmin.ErrorPageEditorLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
   def handle_event("select-" <> status, _, socket) do
     %{beacon_page: %{site: site}} = socket.assigns
 
@@ -191,6 +194,7 @@ defmodule Beacon.LiveAdmin.ErrorPageEditorLive.Index do
     assign(socket, error_pages: error_pages)
   end
 
+  @impl true
   def render(assigns) do
     ~H"""
     <div>

diff --git a/lib/beacon/live_admin/live/layout_editor_live/index.ex b/lib/beacon/live_admin/live/layout_editor_live/index.ex
@@ -49,7 +49,7 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.Index do
       </:actions>
     </.header>
 
-    <.simple_form :let={f} for={%{}} as={:search} phx-change="search">
+    <.simple_form :let={f} id="search-form" for={%{}} as={:search} phx-change="search">
       <.input field={f[:query]} type="search" autofocus={true} placeholder="Search by title (showing up to 20 results)" />
     </.simple_form>
 

diff --git a/lib/beacon/live_admin/page_builder.ex b/lib/beacon/live_admin/page_builder.ex
@@ -79,9 +79,23 @@ defmodule Beacon.LiveAdmin.PageBuilder do
       Beacon.LiveAdmin.Private.register_on_mount_lifecycle_attribute(__MODULE__)
       @before_compile Beacon.LiveAdmin.PageBuilder
 
+      @impl true
       def init(opts), do: {:ok, opts}
       defoverridable init: 1
 
+      @impl true
+      def handle_event("change-site", %{"site" => site}, socket) do
+        site = String.to_existing_atom(site)
+
+        path =
+          case String.split(socket.assigns.beacon_page.path, "/") do
+            ["", path | _] -> beacon_live_admin_path(socket, site, path)
+            _ -> beacon_live_admin_path(socket)
+          end
+
+        {:noreply, push_navigate(socket, to: path)}
+      end
+
       def __beacon_page_table__ do
         unquote(opts)
         |> Keyword.get(:table)

diff --git a/lib/beacon/live_admin/page_live.html.heex b/lib/beacon/live_admin/page_live.html.heex
@@ -28,5 +28,7 @@
   </div>
 </aside>
 <main class="w-full px-4 pt-16 sm:px-6 lg:px-8">
+  <.site_selector selected_site={@beacon_page.site} options={@__beacon_sites__} />
+
   <%= render_page(@beacon_page.module, assigns) %>
 </main>
diff --git a/test/beacon/live_admin/live/component_editor_live/index_test.exs b/test/beacon/live_admin/live/component_editor_live/index_test.exs
@@ -30,16 +30,26 @@ defmodule Beacon.LiveAdmin.ComponentEditorLive.IndexTest do
 
     html =
       live
-      |> element("form")
+      |> element("#search-form")
       |> render_change(%{search: %{query: "nope"}})
 
     refute html =~ "Site A - Header"
 
     html =
       live
-      |> element("form")
+      |> element("#search-form")
       |> render_change(%{search: %{query: "header"}})
 
     assert html =~ "Site A - Header"
   end
+
+  test "display a site selector", %{conn: conn} do
+    {:ok, live, _html} = live(conn, "/admin/site_a/components")
+
+    live
+    |> element("#site-selector-form")
+    |> render_change(%{site: "site_c"})
+
+    assert_redirected(live, "/admin/site_c/components")
+  end
 end
diff --git a/test/beacon/live_admin/live/error_page_editor_live/index_test.exs b/test/beacon/live_admin/live/error_page_editor_live/index_test.exs
@@ -76,4 +76,14 @@ defmodule Beacon.LiveAdmin.ErrorPageEditorLive.IndexTest do
     refute has_element?(view, "#delete-modal")
     refute has_element?(view, "span", "500")
   end
+
+  test "display a site selector", %{conn: conn} do
+    {:ok, live, _html} = live(conn, "/admin/site_a/error_pages")
+
+    live
+    |> element("#site-selector-form")
+    |> render_change(%{site: "site_c"})
+
+    assert_redirected(live, "/admin/site_c/error_pages")
+  end
 end
diff --git a/test/beacon/live_admin/live/layout_editor_live/index_test.exs b/test/beacon/live_admin/live/layout_editor_live/index_test.exs
@@ -23,16 +23,26 @@ defmodule Beacon.LiveAdmin.LayoutEditorLive.IndexTest do
 
     html =
       live
-      |> element("form")
+      |> element("#search-form")
       |> render_change(%{search: %{query: "nope"}})
 
     refute html =~ "Site A - Main Layout"
 
     html =
       live
-      |> element("form")
+      |> element("#search-form")
       |> render_change(%{search: %{query: "main"}})
 
     assert html =~ "Site A - Main Layout"
   end
+
+  test "display a site selector", %{conn: conn} do
+    {:ok, live, _html} = live(conn, "/admin/site_a/layouts")
+
+    live
+    |> element("#site-selector-form")
+    |> render_change(%{site: "site_c"})
+
+    assert_redirected(live, "/admin/site_c/layouts")
+  end
 end
diff --git a/test/beacon/live_admin/live/media_library_live/index_test.exs b/test/beacon/live_admin/live/media_library_live/index_test.exs
@@ -23,4 +23,14 @@ defmodule Beacon.LiveAdmin.MediaLibraryLive.IndexTest do
            |> element("#search-form")
            |> render_change(%{search: "ar"}) =~ "test_search.webp"
   end
+
+  test "display a site selector", %{conn: conn} do
+    {:ok, live, _html} = live(conn, "/admin/site_a/media_library")
+
+    live
+    |> element("#site-selector-form")
+    |> render_change(%{site: "site_c"})
+
+    assert_redirected(live, "/admin/site_c/media_library")
+  end
 end
diff --git a/test/beacon/live_admin/live/page_editor_live/index_test.exs b/test/beacon/live_admin/live/page_editor_live/index_test.exs
@@ -18,6 +18,16 @@ defmodule Beacon.LiveAdmin.PageEditorLive.IndexTest do
     assert html =~ "site_a_home_page"
   end
 
+  test "display a site selector", %{conn: conn} do
+    {:ok, live, _html} = live(conn, "/admin/site_a/pages")
+
+    live
+    |> element("#site-selector-form")
+    |> render_change(%{site: "site_c"})
+
+    assert_redirected(live, "/admin/site_c/pages")
+  end
+
   test "raises when missing beacon_live_admin_url in the session" do
     assert_raise RuntimeError, fn ->
       conn =