Replace Search Console property select with ComboBox (#5689)

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Custom events can now be marked as non-interactive in events API and tracker script. Events marked as non-interactive are not counted towards bounce rate.
 - Ability to leave team via Team Settings > Leave Team
 - Properties are now included in full site exports done via Site Settings > Imports & Exports
+- Google Search Console integration settings: properties can be dynamically sought
 
 ### Removed
 

lib/plausible_web/live/plain_combo.ex

@@ -0,0 +1,48 @@
+defmodule PlausibleWeb.Live.PlainCombo do
+  @moduledoc """
+  Plain ComboBox live view wrapper, suitable for drop-in
+  select element replacement, embeddable in dead views.
+  """
+  use PlausibleWeb, :live_view
+
+  alias PlausibleWeb.Live.Components.ComboBox
+
+  def mount(
+        _params,
+        %{
+          "options" => options,
+          "prompt" => prompt,
+          "name" => name,
+          "id" => id,
+          "selected" => selected
+        },
+        socket
+      ) do
+    socket =
+      assign(socket,
+        options: options,
+        id: id,
+        prompt: prompt,
+        submit_name: name,
+        selected: selected
+      )
+
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <.live_component
+        id={@id}
+        submit_name={@submit_name}
+        selected={@selected}
+        module={ComboBox}
+        placeholder={@prompt}
+        suggest_fun={&ComboBox.StaticSearch.suggest/2}
+        options={@options}
+      />
+    </div>
+    """
+  end
+end

lib/plausible_web/templates/site/settings_integrations.html.heex

@@ -53,14 +53,16 @@
               class="max-w-xs"
               action={"/#{URI.encode_www_form(@site.domain)}/settings/google"}
             >
-              <div class="inline-block relative w-full">
-                <.input
-                  options={domains}
-                  type="select"
-                  field={f[:property]}
-                  prompt="(Choose property)"
-                  class="dark:bg-gray-800 mt-1 block w-full pl-3 pr-10 py-2 border-gray-300 dark:border-gray-500 outline-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:rounded-md"
-                />
+              <div class="mt-2 w-full">
+                {live_render(@conn, PlausibleWeb.Live.PlainCombo,
+                  session: %{
+                    "options" => Enum.zip(domains, domains),
+                    "prompt" => "(Choose property)",
+                    "name" => f[:property].name,
+                    "id" => f[:property].id,
+                    "selected" => f[:property].value
+                  }
+                )}
               </div>
 
               <.button type="submit">Save</.button>