Verification: Add super-admin report displaying diagnostics (#4554)

* Verification: Add super-admin report displaying diagnostics

* Revert LSP not catching up with formatter rules on time

* Remove redundant condition

lib/plausible_web/live/components/verification.ex

@@ -10,17 +10,21 @@ defmodule PlausibleWeb.Live.Components.Verification do
 
   import PlausibleWeb.Components.Generic
 
-  attr :domain, :string, required: true
+  attr(:domain, :string, required: true)
 
-  attr :message, :string, default: "We're visiting your site to ensure that everything is working"
+  attr(:message, :string,
+    default: "We're visiting your site to ensure that everything is working"
+  )
 
-  attr :finished?, :boolean, default: false
-  attr :success?, :boolean, default: false
-  attr :interpretation, Plausible.Verification.Diagnostics.Result, default: nil
-  attr :attempts, :integer, default: 0
-  attr :flow, :string, default: ""
-  attr :installation_type, :string, default: nil
-  attr :awaiting_first_pageview?, :boolean, default: false
+  attr(:super_admin?, :boolean, default: false)
+  attr(:finished?, :boolean, default: false)
+  attr(:success?, :boolean, default: false)
+  attr(:verification_state, Plausible.Verification.State, default: nil)
+  attr(:interpretation, Plausible.Verification.Diagnostics.Result, default: nil)
+  attr(:attempts, :integer, default: 0)
+  attr(:flow, :string, default: "")
+  attr(:installation_type, :string, default: nil)
+  attr(:awaiting_first_pageview?, :boolean, default: false)
 
   def render(assigns) do
     ~H"""
@@ -121,6 +125,31 @@ defmodule PlausibleWeb.Live.Components.Verification do
               </.styled_link>
             </:item>
           </.focus_list>
+          <div
+            :if={@verification_state && @super_admin? && @finished?}
+            class="flex flex-col dark:text-gray-200 border-t border-gray-300 dark:border-gray-700"
+            x-data="{ showDiagnostics: false }"
+            id="super-admin-report"
+          >
+            <p class="mt-4 text-sm">
+              <a
+                href="#"
+                @click.prevent="showDiagnostics = !showDiagnostics"
+                class="bg-yellow-100 dark:text-gray-800"
+              >
+                As a super-admin, you're eligible to see diagnostics details. Click to expand.
+              </a>
+            </p>
+            <div x-show="showDiagnostics" x-cloak>
+              <.focus_list>
+                <:item :for={{diag, value} <- Map.from_struct(@verification_state.diagnostics)}>
+                  <span class="text-sm">
+                    <%= Phoenix.Naming.humanize(diag) %>: <span class="font-mono"><%= value %></span>
+                  </span>
+                </:item>
+              </.focus_list>
+            </div>
+          </div>
         </:footer>
       </PlausibleWeb.Components.Generic.focus_box>
     </div>

lib/plausible_web/live/verification.ex

@@ -27,9 +27,12 @@ defmodule PlausibleWeb.Live.Verification do
 
     private = Map.get(socket.private.connect_info, :private, %{})
 
+    super_admin? = Plausible.Auth.is_super_admin?(socket.assigns.current_user)
+
     socket =
       assign(socket,
         site: site,
+        super_admin?: super_admin?,
         domain: domain,
         has_pageviews?: has_pageviews?(site),
         component: @component,
@@ -61,6 +64,7 @@ defmodule PlausibleWeb.Live.Verification do
       attempts={@attempts}
       flow={@flow}
       awaiting_first_pageview?={not @has_pageviews?}
+      super_admin?={@super_admin?}
     />
     """
   end
@@ -118,7 +122,8 @@ defmodule PlausibleWeb.Live.Verification do
     update_component(socket,
       finished?: true,
       success?: interpretation.ok?,
-      interpretation: interpretation
+      interpretation: interpretation,
+      verification_state: state
     )
 
     {:noreply, assign(socket, checks_pid: nil)}

test/plausible_web/live/components/verification_test.exs

@@ -10,6 +10,7 @@ defmodule PlausibleWeb.Live.Components.VerificationTest do
   @check_circle ~s|div#progress-indicator #check-circle|
   @error_circle ~s|div#progress-indicator #error-circle|
   @recommendations ~s|#recommendation|
+  @super_admin_report ~s|#super-admin-report|
 
   test "renders initial state" do
     html = render_component(@component, domain: "example.com")
@@ -22,6 +23,7 @@ defmodule PlausibleWeb.Live.Components.VerificationTest do
     refute class_of_element(html, @pulsating_circle) =~ "hidden"
     refute element_exists?(html, @recommendations)
     refute element_exists?(html, @check_circle)
+    refute element_exists?(html, @super_admin_report)
   end
 
   test "renders error badge on error" do
@@ -51,6 +53,30 @@ defmodule PlausibleWeb.Live.Components.VerificationTest do
     assert recommendations == [
              "If your site is running at a different location, please manually check your integration.  Learn more"
            ]
+
+    refute element_exists?(html, @super_admin_report)
+  end
+
+  test "renders super-admin report" do
+    state = %Plausible.Verification.State{
+      url: "example.com"
+    }
+
+    interpretation =
+      Plausible.Verification.Checks.interpret_diagnostics(state)
+
+    html =
+      render_component(@component,
+        domain: "example.com",
+        success?: false,
+        finished?: true,
+        interpretation: interpretation,
+        verification_state: state,
+        super_admin?: true
+      )
+
+    assert element_exists?(html, @super_admin_report)
+    assert text_of_element(html, @super_admin_report) =~ "Snippets found in body: 0"
   end
 
   test "hides pulsating circle when finished, shows check circle" do

test/plausible_web/live/verification_test.exs

@@ -127,6 +127,7 @@ defmodule PlausibleWeb.Live.VerificationTest do
       assert element_exists?(html, @retry_button)
 
       assert html =~ "Please insert the snippet into your site"
+      refute element_exists?(html, "#super-admin-report")
     end
   end