Use async connection testing

Author: bblaszkow06

lib/logflare_web/live/backends/actions/show.html.heex

@@ -28,7 +28,7 @@
   </div>
   <div>
     <.button variant="primary" phx-click="test_connection">Test connection</.button>
-    <.status_indicator status={@connection_status} />
+    <.status_indicator :if={@connection_status} status={@connection_status} />
   </div>
 </section>
 

lib/logflare_web/live/backends/backends_live.ex

@@ -141,18 +141,27 @@ defmodule LogflareWeb.BackendsLive do
   end
 
   def handle_event("test_connection", _params, socket) do
-    backend = socket.assigns.backend
-
-    case Backends.test_connection(backend) do
-      :ok ->
-        {:noreply, assign(socket, connection_status: :ok)}
+    status = socket.assigns.connection_status
 
-      {:error, reason} ->
+    socket =
+      if status && status.loading do
         socket
-        |> assign(connection_status: :error)
-        |> put_flash(:error, "Connection test failed:\n#{reason}")
-        |> then(&{:noreply, &1})
-    end
+      else
+        backend = socket.assigns.backend
+
+        assign_async(
+          socket,
+          :connection_status,
+          fn ->
+            with :ok <- Backends.test_connection(backend) do
+              {:ok, %{connection_status: :ok}}
+            end
+          end,
+          reset: true
+        )
+      end
+
+    {:noreply, socket}
   end
 
   def handle_event("toggle_default_ingest_form", _params, socket) do

lib/logflare_web/live/backends/components.ex

@@ -1,21 +1,50 @@
 defmodule LogflareWeb.Backends.Components do
   use Phoenix.Component
 
+  # TODO: Extract common parts
+
+  # def text_input(assigns) do
+  #   ~H"""
+  #   <div class="form-group">
+  #     {label(@form, @id, @label)}
+  #     {text_input(@form, @id, class: "form-control")}
+  #     <small class="form-text text-muted">
+  #       {@description}
+  #     </small>
+  #   </div>
+  #   """
+  # end
+
+  # def select_input(assigns) do
+  #   ~H"""
+  #   <div class="form-group">
+  #     {label(@form, @id, @label)}
+  #     {text_input(@form, @id, class: "form-control")}
+  #     <small class="form-text text-muted">
+  #       {@description}
+  #     </small>
+  #   </div>
+  #   """
+  # end
+
   attr :status, :atom, values: [:ok, :error, :loading]
 
   def status_indicator(assigns) do
-    case assigns.status do
-      :ok -> ~H|<.indicator icon="check" color="green-500" )} />|
-      :error -> ~H|<.indicator icon="times" color="red-500" )} />|
-      :loading -> ~H|<.indicator icon="spinner" color="white" animation="tw-animate-spin" )} />|
-      nil -> ~H""
-    end
+    ~H"""
+    <.async_result :let={_ok} assign={@status}>
+      <:loading><.indicator icon="spinner" color="tw-text-white" animation="tw-animate-spin" )} /></:loading>
+      <:failed :let={{atom, reason}}>
+        <% reason = if atom == :error, do: reason, else: "Internal error" %>
+        <.indicator icon="times" color="tw-text-red-500" )} /> <span class="inline-block tw-mx-15">{reason}</span>
+      </:failed>
+      <.indicator icon="check" color="tw-text-green-500" )} />
+    </.async_result>
+    """
   end
 
   defp indicator(assigns) do
     animation = if assigns[:animation], do: assigns.animation, else: ""
-    color = if assigns[:color], do: "tw-text-#{assigns.color}", else: ""
-    assigns = assign(assigns, color: color, animation: animation)
+    assigns = assign(assigns, animation: animation)
 
     ~H"""
     <i class={"inline-block fas fa-#{@icon} #{@color} tw-align-middle tw-text-2xl #{@animation}"}></i>