Bug: fix spacing in open in editor button (#949)

* Moved tooltip to button

* Extracted button

* Added condition to second button

* Removed fake assigns

* Add button_link component

* Replaced button with link on editor not found

* Fix e2e test

Author: kraleppa

e2e/tests/node-inspector.spec.ts

@@ -154,7 +154,15 @@ test('user can change nodes using node tree and see their assigns and callback t
   await expect(findTraces(dbgApp)).toHaveCount(6);
 });
 
-test('Open in editor is disabled when envs are not set', async ({ dbgApp }) => {
-  const openButton = dbgApp.getByRole('button', { name: 'Open in editor' });
-  await expect(openButton).toBeDisabled();
+test('Open in editor shows docs link when envs are not set', async ({
+  dbgApp,
+}) => {
+  const openInEditorLink = dbgApp.getByRole('link', {
+    name: 'Open in Editor',
+  });
+  await expect(openInEditorLink).toBeVisible();
+  await expect(openInEditorLink).toHaveAttribute(
+    'href',
+    /open_in_editor\.html/
+  );
 });

lib/live_debugger/app/debugger/web/live_components/node_basic_info.ex

@@ -109,8 +109,23 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
               </.button>
 
               <div class="flex flex-row items-center gap-2">
+                <.tooltip
+                  :if={!@elixir_editor}
+                  id={@id <> "-env-not-set"}
+                  content="Cannot open in editor? Click to see the documentation."
+                >
+                  <.button_link
+                    href={@editor_docs_url}
+                    id="open-in-editor"
+                    variant="secondary"
+                    size="sm"
+                    class="opacity-50 cursor-pointer"
+                  >
+                    <.icon name="icon-external-link" class="w-4 h-4" /> Open in Editor
+                  </.button_link>
+                </.tooltip>
                 <.button
-                  disabled={!@elixir_editor}
+                  :if={@elixir_editor}
                   class="shrink-0"
                   variant="secondary"
                   id="open-in-editor"
@@ -122,17 +137,6 @@ defmodule LiveDebugger.App.Debugger.Web.LiveComponents.NodeBasicInfo do
                 >
                   <.icon name="icon-external-link" class="w-4 h-4" /> Open in Editor
                 </.button>
-
-                <.tooltip
-                  id={@id <> "-env-not-set"}
-                  content="Cannot open in editor? Click to see the documentation."
-                >
-                  <span :if={!@elixir_editor} class="text-error-text">
-                    <.link href={@editor_docs_url} target="_blank">
-                      <.icon name="icon-info" class="w-4 h-4" />
-                    </.link>
-                  </span>
-                </.tooltip>
               </div>
             </div>
 

lib/live_debugger/app/web/components.ex

@@ -248,6 +248,38 @@ defmodule LiveDebugger.App.Web.Components do
     """
   end
 
+  @doc """
+  Link styled as a button. Use for external links that should match button appearance.
+  """
+  attr(:href, :string, required: true)
+  attr(:variant, :string, default: "secondary", values: ["primary", "secondary"])
+  attr(:size, :string, default: "sm", values: ["md", "sm"])
+  attr(:target, :string, default: "_blank")
+  attr(:id, :string, default: nil)
+  attr(:class, :any, default: nil, doc: "Additional classes to add.")
+  attr(:rest, :global, include: ~w(rel))
+
+  slot(:inner_block, required: true)
+
+  def button_link(assigns) do
+    ~H"""
+    <.link
+      href={@href}
+      target={@target}
+      id={@id}
+      class={[
+        "inline-flex items-center gap-1.5 shrink-0 w-max h-max rounded text-xs font-semibold",
+        button_size_classes(@size),
+        button_color_classes(@variant),
+        @class
+      ]}
+      {@rest}
+    >
+      <%= render_slot(@inner_block) %>
+    </.link>
+    """
+  end
+
   @doc """
   Collapsible element that can be toggled open and closed.
   It uses the `details` and `summary` HTML elements.