Move subscription settings page content into a LiveView

[sanne-san]

Changes

Prepares the page to host the choose_plan modal as a LiveComponent in a follow-up PR. Pure refactor, no UX changes.

• Extract subscription page content into a new SubscriptionSettings LiveView
• Move data loading out of the controller and into the LiveView
• Embed the LiveView in the existing settings layout via live_render

Tests

• This PR does not require tests

Changelog

• This PR does not make a user-facing change

Documentation

• This change does not need a documentation update

Dark mode

• This PR does not change the UI

[ukutaht]

Looks good, just a couple comments

[zoldar]

This assign should be no longer needed - plug should provide it in the context already 😄

[sanne-san]

Tried removing it but it breaks; the plug runs on the HTTP request, but the LiveView uses a WebSocket which doesn't inherit it.

[zoldar]

Okay, my wrong, for some reason I started thinking assigns from conn carry over to LV, which obviously is not the case argh. There will be more LVs, for each setting screen, I presume. We can still make something executed commonly for all LVs though. There's a mechanism for that, similar to plugs but specifically for LV: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#on_mount/1

Ideally, we'd wrap this and all future LV routes for settings in something like this:

  live_session :settings, on_mount: PlausibleWeb.Live.SettingsContext do
    scope alias: Live, assigns: %{connect_live_socket: true} do
      live "/billing/subscription", SubscriptionSettings, :subscription, as: :settings
    end
  end

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live_session/3 brings a number of additional benefits:

• settings layout is consistently applied, so we can skip setting it in every LV's mount (more on that below)
• navigating between settings LVs can be potentially made more seamless by using navigate redirects which avoid full page reloads

I'm not sure if scope alias will work in this case - you might need to provide a full module path in live path definition, like PlausibleWeb.Live.SubscriptionSettings, but maybe not.

As for the context hook module, it's unfortunately tad more hairy than plug because we have to extract URI and need a lifecycle hook for that:

defmodule PlausibleWeb.Live.SettingsContext do
  import Phoenix.LiveView

  def on_mount(_arg, _params, _session, socket) do
    socket = attach_hook(socket, :get_current_path, :handle_params, &get_current_path/3)
    {:cont, socket, layout: {PlausibleWeb.Layouts, :settings}}
  end

  defp get_current_path(_params, url, socket) do
    %{path: request_path} = URI.parse(url)

    {:cont, assign(socket, :current_path, current_path}
  end
end

The above handles both, setting the layout and setting the current_path and potentially other assigns that might be shared in the context of settings LVs.

NOTE: I have not tested that code. If you stumble upon any issues implementing it and get stuck, please shout and we can try to sort this out.

[zoldar]

These assigns are indeed always set if AuthPlug is present in the pipeline - we just need to keep in mind that they both might be nil. But we should be good here 👍