UI Enhancements for Shared Index Table component

[pranavrao145]

TL;DR

• Make rows clickable and add styling for hover:

• Move actions to a separate menu (reduce visual repetition):

• Add subtle animations to index table component.

Checklist

• Changes have been top-hatted locally
• Tests have been added or updated
• Documentation has been updated (if applicable)
• Linked related issues

[Copilot]

Pull request overview

This PR enhances Shared::IndexTableComponent to support per-row action menus and clickable row navigation, updating multiple views and i18n keys to use the new capabilities.

Changes:

• Extend Shared::IndexTableComponent with actions, clickable_rows, and optional Turbo Stream row navigation.
• Introduce a Stimulus controller to handle row navigation and an actions dropdown menu UI.
• Update translations and multiple pages to use the new actions dropdown API.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
config/locales/es/shared.es.yml	Restructures index table “actions” translations and adds search placeholder (ES).
config/locales/en/shared.en.yml	Restructures index table “actions” translations and adds search placeholder (EN).
config/i18n-tasks.yml.erb	Adds an ignore rule for index table action keys in i18n-tasks.
app/views/users/show.html.erb	Migrates log entries table to new actions: API + Turbo Stream row navigation.
app/views/users/index.html.erb	Migrates users table to new actions: API.
app/views/subprojects/show.html.erb	Migrates log/journal tables to new actions: API + Turbo Stream for log entries.
app/views/reports/edit.html.erb	Disables clickable rows for the journal picker table.
app/views/regions/index.html.erb	Migrates regions table to new actions: API and disables clickable rows.
app/views/projects/show.html.erb	Migrates subprojects table to new actions: API and adds enter animation wrapper.
app/models/user.rb	Adds to_polymorphic_path for row navigation.
app/models/subproject.rb	Adds to_polymorphic_path for nested routing.
app/models/region.rb	Adds to_polymorphic_path for row navigation.
app/models/log_entry.rb	Adds to_polymorphic_path for nested routing.
app/models/journal.rb	Adds to_polymorphic_path for nested routing.
app/javascript/controllers/table_actions_dropdown_controller.js	New Stimulus controller for dropdown actions + row navigation (including Turbo Stream fetch).
app/components/shared/index_table_component.rb	Adds actions/clickable row options and row path generation helper.
app/components/shared/index_table_component.html.erb	Updates markup for searchable input, clickable rows, and dropdown action menus.
app/assets/images/icons/ellipsis-v.svg	Adds an ellipsis icon used by the actions dropdown trigger.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

app/views/users/show.html.erb:70

• This table still renders in-row ActionButtonComponents (view/edit/delete), but Shared::IndexTableComponent now makes rows clickable by default. Click events on those buttons will bubble to the row and trigger navigateToRecord, which can override the intended edit/delete behavior. Consider setting clickable_rows: false for this table, or migrating it to the new actions: dropdown API so only the row background is clickable.

      <%= render Shared::IndexTableComponent.new(records: @user.journals) do |table| %>
        <% table.column :title do |journal| %>
          <%= journal.title %>
        <% end %>
        <% table.column :created_at do |journal_entry| %>
          <%= l(journal_entry.created_at) %>
        <% end %>
        <% table.column :updated_at do |journal_entry| %>
          <%= l(journal_entry.updated_at) %>
        <% end %>
        <% table.column :project do |journal_entry| %>
          <%= journal_entry.subproject.project.name %>
        <% end %>
        <% table.column :subproject do |journal_entry| %>
          <%= journal_entry.subproject.name %>
        <% end %>
        <% table.column :actions, header: t("shared.index_table_component.actions.label"), col_size: "90px" do |journal_entry| %>
          <div class="flex flex-row gap-2 items-center">
            <%= render ActionButtonComponent.new(to: project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), icon: "view", turbo_stream: true) %>
            <%= render ActionButtonComponent.new(to: edit_project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), icon: "edit", turbo_stream: true, colour: :info) %>
            <%= render ActionButtonComponent.new(to: project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), method: :delete, icon: "delete", colour: :error, confirm: t("projects.subprojects.journals.destroy.confirm")) %>
          </div>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[CulmoneY]

I think the clickable box logic can be simplied, there seems to be alot of code for what it achives. What do you think of the following?

Having to derrive the clickable row path within the component adds alot of cross model dependency. To properly use this table for any nested route, we must be sure to override the to_polymorphic_path method, which isn't ideal.

It seems very realistic to just have the caller provide the path, within the block.

table.clickable_path <path>, turbo_stream: ture

[CulmoneY]

Use a similar pattern as the render_method(&) in app/components/action_button_component.rb to conditionally have this as a button_to or a div depending on whether or not the row is clickable.

There really isn't a need for all this javascript.

app/components/action_button_component.rb

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

app/views/users/show.html.erb:69

• These action buttons request Turbo Stream responses (turbo_stream: true), but the journals controller/actions don’t have show.turbo_stream.erb/edit.turbo_stream.erb templates (only HTML). This will raise MissingTemplate when clicked. Remove turbo_stream: true for these links or add the missing turbo_stream responses/templates.

            <%= render ActionButtonComponent.new(to: project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), icon: "view", turbo_stream: true) %>
            <%= render ActionButtonComponent.new(to: edit_project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), icon: "edit", turbo_stream: true, colour: :info) %>
            <%= render ActionButtonComponent.new(to: project_subproject_journal_path(journal_entry.subproject.project, journal_entry.subproject, journal_entry), method: :delete, icon: "delete", colour: :error, confirm: t("projects.subprojects.journals.destroy.confirm")) %>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

edit_project_subproject_journal_path is requested with turbo_stream: true, but there is no edit.turbo_stream.erb for journals (only HTML), so this will raise MissingTemplate. Remove turbo_stream: true for the edit action or add a turbo_stream edit response/template.

Suggested change

	<%= render ActionButtonComponent.new(to: edit_project_subproject_journal_path(@project, @subproject, journal), icon: "edit", turbo_stream: true, colour: :info) %>
	<%= render ActionButtonComponent.new(to: edit_project_subproject_journal_path(@project, @subproject, journal), icon: "edit", colour: :info) %>