More natural click behaviour for tables (#2889)

* natural clicking for projects * fix tests * cl
OpenFn · Feb 5, 2025 · e926588 · e926588
1 parent ac0b0d0
commit e926588
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,8 @@ and this project adheres to
 
 ### Changed
 
+- Makes the whole project row in the projects table clickable.
+  [#2889](https://github.com/OpenFn/lightning/pull/2889)
 - Standardizes date formats to YYYY-MM-DD
   [#2884](https://github.com/OpenFn/lightning/pull/2884)
 

diff --git a/lib/lightning_web/live/dashboard_live/components.ex b/lib/lightning_web/live/dashboard_live/components.ex
@@ -4,6 +4,7 @@ defmodule LightningWeb.DashboardLive.Components do
   import PetalComponents.Table
 
   alias LightningWeb.Components.Common
+  alias Phoenix.LiveView.JS
 
   def welcome_banner(assigns) do
     ~H"""
@@ -173,15 +174,11 @@ defmodule LightningWeb.DashboardLive.Components do
           <.tr
             :for={project <- @projects}
             id={"projects-table-row-#{project.id}"}
-            class="hover:bg-gray-100 transition-colors duration-200"
+            class="hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
+            phx-click={JS.navigate(~p"/projects/#{project.id}/w")}
           >
             <.td>
-              <.link
-                class="break-words max-w-[15rem] text-gray-800"
-                href={~p"/projects/#{project.id}/w"}
-              >
-                <%= project.name %>
-              </.link>
+              <%= project.name %>
             </.td>
             <.td class="break-words max-w-[25rem]">
               <%= project.role
@@ -195,6 +192,7 @@ defmodule LightningWeb.DashboardLive.Components do
               <.link
                 class="link"
                 href={~p"/projects/#{project.id}/settings#collaboration"}
+                onclick="event.stopPropagation()"
               >
                 <%= project.collaborators_count %>
               </.link>
@@ -210,6 +208,7 @@ defmodule LightningWeb.DashboardLive.Components do
               <.link
                 class="table-action"
                 navigate={~p"/projects/#{project.id}/history"}
+                onclick="event.stopPropagation()"
               >
                 History
               </.link>

diff --git a/test/lightning_web/live/dashboard_live_test.exs b/test/lightning_web/live/dashboard_live_test.exs
@@ -332,7 +332,7 @@ defmodule LightningWeb.DashboardLiveTest do
 
     assert has_element?(
              view,
-             "tr#projects-table-row-#{project.id} > td:nth-child(1) > a[href='/projects/#{project.id}/w']",
+             "tr#projects-table-row-#{project.id}",
              project.name
            )
 
@@ -437,7 +437,7 @@ defmodule LightningWeb.DashboardLiveTest do
     |> Floki.parse_document!()
     |> Floki.find("#projects-table tr")
     |> Enum.map(fn tr ->
-      Floki.find(tr, "td:nth-child(1) a")
+      Floki.find(tr, "td:nth-child(1)")
       |> Floki.text()
       |> String.trim()
     end)