More natural click behaviour for tables

[taylordowns2000]

Description

In Ghana this week, users were having a very hard time figuring out how to access their project after signing up. While other changes are required, this is a cheap fix for a behaviour I noticed... even when people move their mouse of the projects item in the table, they can't figure out how to actually access it. (Hint: you've got to move your mouse over the text of the project name.)

This PR makes the whole row in the projects table clickable, while ensuring that individual links and buttons still prevent that row-level behaviour and take you where you want to go.

Note that I really wanted to do this for the workflow table, but that table seems to be built in a much different way and I couldn't figure it out with a quick google/chatgpt so moving on. (We don't have access to <.tr > in the workfows table 😔)

Validation steps

1. Log in.
2. Click on a project row to see that it navigates to the project.
3. Go back.
4. Click on the collaborators link and see that it takes you to collabs.
5. Go back.
6. Click on the history link and see that it takes you to history.

AI Usage

Please disclose how you've used AI in this work (it's cool, we just want to know!):

• Code generation (copilot but not intellisense)
• Learning or fact checking
• Strategy / design
• Optimisation / refactoring
• Translation / spellchecking / doc gen
• Other
• I have not used AI

You can read more details in our Responsible AI Policy

Pre-submission checklist

• I have performed a self-review of my code.
• I have implemented and tested all related authorization policies. (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[christad92]

Thanks Taylor.

Can we extend this behavior to all tables?
Workflows -> Workflows list (Addressed in the comment)
Subscriptions -> Subscriptions list
Billing Account -> BAs list

[taylordowns2000]

Yes! (Please see the PR though... workflows is different and will take more work. And the others will be in TB.)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.44%. Comparing base (e7291f3) to head (f7b2d44).
Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2889      +/-   ##
==========================================
+ Coverage   91.41%   91.44%   +0.03%     
==========================================
  Files         343      343              
  Lines       12355    12354       -1     
==========================================
+ Hits        11294    11297       +3     
+ Misses       1061     1057       -4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[taylordowns2000]

@theroinaochieng , can we try to get this reviewed and merged before release for staging tomorrow AM? it has product approval, needs Elixir

[elias-ba]

This makes the component a bit rigid. Could we instead inject the click behavior by introducing a on_row_click attribute. Something like this ?

<.tr
  :for={project <- @projects}
  id={"projects-table-row-#{project.id}"}
  class="hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
  phx-click={@on_row_click && @on_row_click.(project)}
>

and on_row_click would be something like this

<.user_projects_table
  projects={@projects}
  on_row_click={fn project -> JS.navigate(~p"/projects/#{project.id}/w") end}
/>