feat: display select fields in search results (#2988)

* ui: add select field example to error message

* refactor

* refactor: use HEEx components for logs search UI

* feat: display selected fields in log search results

* style: tidy up formatting

* refactor: replace live_modal_show_link references with <.modal_link /> component

* consolidate SearchLive components

* test: integration test for logs search with selected field

* include selected fields in copy to clipboard

* use last field of the path

* bump ci

* test: LogEventComponentsTest async

* ci: fix merge by removing empty file

* chore: merge with main, consolidate log_event_components_test.exs

Author: msmithstubbs

lib/logflare/lql/parser/helpers.ex

@@ -333,7 +333,7 @@ defmodule Logflare.Lql.Parser.Helpers do
           Keyword.t() | {atom(), any()} | no_return()
   def check_for_invalid_blank_select_alias({:invalid_blank_select_alias, "@"}) do
     throw(
-      "Error while parsing select clause: select alias cannot be blank, expected alias name after @"
+      "Error while parsing select clause: select alias cannot be blank, expected alias name after @. For example, s:my_field@my_alias"
     )
   end
 

lib/logflare_web/live/lql/lql_form_lvc.html.heex

@@ -1,6 +1,6 @@
 <div class="form-group">
   <%= label @f, :lql_string do %>
-    Use {LqlHelpers.lql_help_modal_link()} and source {LqlHelpers.bq_source_schema_modal_link()} to configure log event routing to sinks.
+    Use <LqlHelpers.lql_help_modal_link /> and source <LqlHelpers.bq_source_schema_modal_link /> to configure log event routing to sinks.
   <% end %>
   {text_input(@f, :lql_string, value: @lql_string, class: "form-control", disabled: @loading)}
   {error_tag(@f, :lql_string)}

lib/logflare_web/live/lql_helpers.ex

@@ -1,37 +1,27 @@
 defmodule LogflareWeb.LqlHelpers do
   @moduledoc false
-  use LogflareWeb, :view
+  use Phoenix.Component
 
   import LogflareWeb.ModalLiveHelpers
 
   alias LogflareWeb.SharedView
 
-  def lql_help_modal_link do
-    live_modal_show_link(
-      template: "lql_help.html",
-      view: SharedView,
-      modal_id: :lql_help_link,
-      title: "Logflare Query Language"
-    ) do
-      assigns = %{}
-
-      ~H"""
+  def lql_help_modal_link(assigns) do
+    ~H"""
+    <.modal_link template="lql_help.html" view={SharedView} modal_id={:lql_help_link} title="Logflare Query Language">
       <i class="fas fa-code"></i><span class="hide-on-mobile"> LQL </span>
-      """
-    end
+    </.modal_link>
+    """
   end
 
-  def bq_source_schema_modal_link do
-    live_modal_show_link(
-      component: LogflareWeb.SourceBqSchemaComponent,
-      modal_id: :bq_schema_link,
-      title: "Source Schema"
-    ) do
-      assigns = %{}
-
-      ~H"""
+  @doc """
+  Renders a link to open the BigQuery source schema modal.
+  """
+  def bq_source_schema_modal_link(assigns) do
+    ~H"""
+    <.modal_link component={LogflareWeb.SourceBqSchemaComponent} modal_id={:bq_schema_link} title="Source Schema">
       <i class="fas fa-database"></i><span class="hide-on-mobile"> schema </span>
-      """
-    end
+    </.modal_link>
+    """
   end
 end

lib/logflare_web/live/modal_live_helpers.ex

@@ -2,8 +2,7 @@ defmodule LogflareWeb.ModalLiveHelpers do
   @moduledoc """
   Modal helpers to be imported where modals may be called
   """
-  import Phoenix.Component, only: [assign: 3]
-  import Phoenix.HTML.Link, only: [link: 2]
+  use Phoenix.Component
 
   alias Phoenix.LiveView.JS
 
@@ -57,57 +56,6 @@ defmodule LogflareWeb.ModalLiveHelpers do
     end
   end
 
-  @doc """
-  Creates a link to show a modal when clicked.
-
-  # Customize click behaviour
-  You can optionally assign a custom JS command to `click` which will be executed before showing the modal.
-
-  ```
-    <%= live_modal_show_link(component: LogflareWeb.MyComponent, click: JS.push("some_event"), ...) %>
-  ```
-  """
-  def live_modal_show_link(content \\ [], opts)
-
-  def live_modal_show_link(opts, do: block) when is_list(opts) do
-    live_modal_show_link(block, opts)
-  end
-
-  def live_modal_show_link(contents, opts) when is_list(opts) do
-    {type, module_or_template} =
-      Enum.find(opts, &match?({k, _} when k in [:component, :live_view, :template], &1))
-
-    id = Keyword.fetch!(opts, :modal_id)
-    title = Keyword.fetch!(opts, :title)
-    view = Keyword.get(opts, :view)
-    return_to = Keyword.get(opts, :return_to)
-
-    click =
-      case Keyword.get(opts, :click) do
-        nil ->
-          :show_live_modal
-
-        js_command when is_struct(js_command, JS) ->
-          js_command
-          |> JS.push("show_live_modal")
-      end
-
-    opts =
-      [
-        to: "#",
-        phx_click: click,
-        phx_value_close: Keyword.get(opts, :close),
-        phx_value_module_or_template: module_or_template,
-        phx_value_type: type,
-        phx_value_id: id,
-        phx_value_title: title,
-        phx_value_return_to: return_to,
-        phx_value_view: view
-      ] ++ opts
-
-    link(contents, opts)
-  end
-
   def live_modal(template, opts)
       when is_binary(template) do
     path = Keyword.fetch!(opts, :return_to)
@@ -144,4 +92,59 @@ defmodule LogflareWeb.ModalLiveHelpers do
 
     Phoenix.Component.live_component(modal_opts)
   end
+
+  @doc """
+  Creates a link to show a modal when clicked.
+
+  Only supports component modals.
+
+  ## Customize click behaviour
+  You can optionally assign a custom JS command to `click` which will be executed before showing the modal.
+
+  ## Example
+
+      <.modal_link component={LogflareWeb.MyComponent} modal_id={:my_modal} title="My Modal">
+        <span>Open Modal</span>
+      </.modal_link>
+  """
+  attr :component, :atom, default: nil
+  attr :live_view, :atom, default: nil
+  attr :template, :string, default: nil
+  attr :modal_id, :atom, required: true
+  attr :title, :string, required: true
+  attr :view, :atom, default: nil
+  attr :return_to, :string, default: nil
+  attr :click, JS, default: nil
+  attr :close, JS, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global
+  slot :inner_block, required: true
+
+  def modal_link(assigns) do
+    {type, module_or_template} =
+      cond do
+        assigns.component -> {:component, assigns.component}
+        assigns.live_view -> {:live_view, assigns.live_view}
+        assigns.template -> {:template, assigns.template}
+        true -> raise "Must provide one of :component, :live_view, or :template"
+      end
+
+    click =
+      case assigns.click do
+        nil -> "show_live_modal"
+        js_command when is_struct(js_command, JS) -> JS.push(js_command, "show_live_modal")
+      end
+
+    assigns =
+      assigns
+      |> assign(:module_or_template, module_or_template)
+      |> assign(:phx_click, click)
+      |> assign(:type, type)
+
+    ~H"""
+    <.link href="#" class={@class} phx-click={@phx_click} phx-value-close={@close} phx-value-module-or-template={@module_or_template} phx-value-type={@type} phx-value-id={@modal_id} phx-value-title={@title} phx-value-return-to={@return_to} phx-value-view={@view} {@rest}>
+      {render_slot(@inner_block)}
+    </.link>
+    """
+  end
 end