migrate agents, users, groups, and categories tables to table component

app/components/table_component.rb

@@ -5,12 +5,13 @@ class TableComponent < ViewComponent::Base
   renders_one :header, TableRowComponent
   renders_many :rows, TableRowComponent
 
-  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false )
+  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, custom_class: '' )
     super
     @id = id
     @stripped = stripped
     @borderless = borderless
     @layout_fixed = layout_fixed
+    @custom_class = custom_class
   end
 
   def stripped_class

app/components/table_component/table_component.html.haml

@@ -1,4 +1,4 @@
-%table.table-content{id: @id, class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class}
+%table.table-content{id: @id, class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class + @custom_class}
   %thead
     = header
   %tbody{id: "#{@id}_table_body"}

app/controllers/admin/categories_controller.rb

@@ -51,7 +51,7 @@ def create
       success_message = 'New Category added successfully'
       streams = [alert_success(id: 'category') { success_message }]
 
-      streams << prepend('categories_table_content', partial: 'admin/categories/category', locals: { category: category_saved })
+      streams << prepend('admin_categories_table_body', partial: 'admin/categories/category', locals: { category: category_saved })
 
       render_turbo_stream(*streams)
     end

app/controllers/admin/groups_controller.rb

@@ -51,7 +51,7 @@ def create
       success_message = 'New Group added successfully'
       streams = [alert_success(id: 'group') { success_message }]
 
-      streams << prepend('groups_table_content', partial: 'admin/groups/group', locals: { group: group_saved })
+      streams << prepend('admin_groups_table_body', partial: 'admin/groups/group', locals: { group: group_saved })
 
       render_turbo_stream(*streams)
     end

app/controllers/agents_controller.rb

@@ -56,7 +56,7 @@ def create
       success_message = 'New Agent added successfully'
       streams = [alert_success(id: alert_id) { success_message }]
 
-      streams << prepend('agents_table_content', partial: 'agents/agent', locals: { agent: new_agent })
+      streams << prepend('admin_agents_table_body', partial: 'agents/agent', locals: { agent: new_agent })
       streams << replace_agent_form(new_agent, agent_id: nil, frame_id: params[:id],
                                     parent_id: parent_id, name_prefix: name_prefix,
                                     deletable: deletable

app/views/admin/categories/index.html.haml

@@ -5,22 +5,20 @@
                   class: "btn btn-default mb-3",
                   data: { show_modal_title_value: "Create a new category"})
 
-  %div.my-1
+  %div.my-1.border-radius-0
     = render_alerts_container
-  %table#adminCategory.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
-    %thead
-      %tr
-        %th Name
-        %th Description
-        %th Created
-        %th ID
-        %th COUNT
-        %th Actions
-    %tbody#categories_table_content
-      = render partial: 'admin/categories/category', collection: @categories
-      %tr.empty-state
-        %td.text-center{:colspan => "6"} There are currently no  categories.
+  = render TableComponent.new(id: 'admin_categories', custom_class: 'border rounded p-1') do |t|
+    - t.header do |h|
+      - h.th {'Name'}
+      - h.th {'Description'}
+      - h.th {'Created'}
+      - h.th {'ID'}
+      - h.th {'COUNT'}
+      - h.th {'Actions'}
+    = render partial: 'admin/categories/category', collection: @categories
+    %tr.empty-state
+      %td.text-center{:colspan => "6"} There are currently no  categories.
   :javascript
     $.fn.dataTable.ext.errMode = 'none';
-    $("#adminCategory").dataTable()
+    $("#admin_categories").dataTable()
 

app/views/admin/groups/index.html.haml

@@ -10,20 +10,19 @@
 
   %div.my-1
     = render_alerts_container
-  %table#adminGroup.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
-    %thead
-      %tr
-        %th Name
-        %th Description
-        %th Created
-        %th ID
-        %th COUNT
-        %th Actions
-    %tbody#groups_table_content
-      = render partial: 'admin/groups/group', collection: @groups
-      %tr.empty-state
-        %td.text-center{:colspan => "6"} There are currently no  agents.
+  = render TableComponent.new(id: 'admin_groups', custom_class: 'border rounded p-1') do |t|
+    - t.header do |h|
+      - h.th {'Name'}
+      - h.th {'Description'}
+      - h.th {'Created'}
+      - h.th {'ID'}
+      - h.th {'COUNT'}
+      - h.th {'Actions'}
+
+    = render partial: 'admin/groups/group', collection: @groups
+    %tr.empty-state
+      %td.text-center{:colspan => "6"} There are currently no  agents.
   :javascript
     $.fn.dataTable.ext.errMode = 'none';
-    $("#adminGroup").dataTable()
+    $("#admin_groups").dataTable()
 

app/views/agents/_agent.html.haml

@@ -9,13 +9,14 @@
     = raw agent.affiliations.map{|i| display_agent(i)}.join(', ')
   %td
     = agent.agentType
+  %td
+    - count = agent_usages_count(agent)
+    = link_to_modal(nil, "/agents/#{agent.id.split('/').last}/usages", style: 'width: 120px', class: "btn btn-sm btn-#{count.zero? ? 'danger' : 'light'}", data: { show_modal_title_value: "Agent \"#{agent.name}\" usages" }) do
+      = count.zero? ? "Not used" : "See usages (#{count})"
+
   %td{:class => 'delete_mappings_column'}
     - if agent.id && !agent.id.empty? && session[:user] && session[:user].admin?
       %div.d-flex{style: 'width: 250px'}
-        %span.mx-1
-          - count = agent_usages_count(agent)
-          = link_to_modal(nil, "/agents/#{agent.id.split('/').last}/usages", style: 'width: 120px', class: "btn btn-sm btn-#{count.zero? ? 'danger' : 'light'}", data: { show_modal_title_value: "Agent \"#{agent.name}\" usages" }) do
-            = count.zero? ? "Not used" : "See usages (#{count})"
         %span.mx-1
           = link_to_agent_edit_modal(agent)
         %span

app/views/agents/index.html.haml

@@ -7,19 +7,18 @@
                 data: { show_modal_title_value: "Create a new agent", show_modal_size_value: 'modal-xl' },
                 )
   = render_alerts_container(AgentsController)
-  %table#adminAgents.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
-    %thead
-      %tr
-        %th Name
-        %th Identifiers
-        %th Affiliations
-        %th Type
-        %th{:class => 'delete_mappings_column'} Actions
-    %tbody#agents_table_content
-      = render partial: 'agents/agent' , collection: @agents
-      %tr.empty-state
-        %td.text-center{:colspan => "6"} There are currently no  agents.
+  = render TableComponent.new(id: 'admin_agents', custom_class: 'border rounded p-1') do |t|
+    - t.header do |h|
+      - h.th {'First name'}
+      - h.th {'Identifiers'}
+      - h.th {'Affiliations'}
+      - h.th {'Type'}
+      - h.th {'Usages'}
+      - h.th {'Actions'}
+
+    = render partial: 'agents/agent' , collection: @agents
+    %tr.empty-state
+      %td.text-center{:colspan => "6"} There are currently no  agents.
   :javascript
     $.fn.dataTable.ext.errMode = 'none';
-
-    $("#adminAgents").dataTable()
+    $("#admin_agents").dataTable()

app/views/users/index.html.haml

@@ -1,45 +1,44 @@
 = turbo_frame_tag 'users-list' do
   %div.my-1
     = render_alerts_container
-  %table#adminUsers.zebra{:cellpadding => "0", :cellspacing => "0", :width => "100%"}
-    %thead
-      %tr
-        %th First name
-        %th Last name
-        %th Username
-        %th Email
-        %th Roles
-        %th Ontologies
-        %th Project
-        %th Created At
-        %th Actions
-    %tbody#users_table_content
-      - @users.each do |user|
-        %tr.human{:id => user.id.split('/').last}
+  = render TableComponent.new(id: 'admin_users', custom_class: 'border rounded p-1') do |t|
+    - t.header do |h|
+      - h.th {'First name'}
+      - h.th {'Last name'}
+      - h.th {'Username'}
+      - h.th {'Email'}
+      - h.th {'Roles'}
+      - h.th {'Ontologies'}
+      - h.th {'Project'}
+      - h.th {'Created At'}
+      - h.th {'Actions'}
+    - @users.each do |user|
+      - t.row(id: user.id.split('/').last) do |r|
+        - r.td {user.firstName}
+        - r.td {user.lastName}
+        - r.td {user.username}
+        - r.td {user.email}
+        - r.td {user.role.join(', ')}
+        - r.td {(user.ontologies&.size || 0).to_s}
+        - r.td {(user.projects&.size || 0).to_s}
+        - r.td {Date.parse(user.created).to_s}
+        - r.td do
           - count = (user.ontologies&.size || 0) +  (user.projects&.size || 0)
-          %td= user.firstName
-          %td= user.lastName
-          %td= user.username
-          %td= user.email
-          %td= user.role.join(', ')
-          %td= user.ontologies&.size || 0
-          %td= user.projects&.size || 0
-          %td= Date.parse(user.created)
-          %td
-            %div.d-flex.align-items-center{style: 'width: 250px'}
-              %span.mx-1
-                = link_to 'Detail', "/accounts/#{user.username}", {data: {turbo_frame: '_top'}}
-              %span.mx-1
-                - if count.zero?
-                  = button_to "Delete", CGI.unescape(user_path(user.id.split('/').last)), method: :delete, class: 'btn btn-link',  form: {data: { turbo: true, turbo_confirm: "Are you sure?", turbo_frame: '_top'}}
-                - else
-                  %span{data: { controller: 'tooltip' }, title: "Can't delete this user because still used"}
-                    = link_to "Delete", "", class: 'btn btn-link disabled'
-              %span.mx-1
-                = link_to 'Login as', "login_as/#{user.username}", {data: {turbo_frame: '_top'}}
-      %tr.empty-state
-        %td.text-center{:colspan => "6"} There are currently no  agents.
+          %div.d-flex.align-items-center{style: 'width: 250px'}
+            %span.mx-1
+              = link_to 'Detail', "/accounts/#{user.username}", {data: {turbo_frame: '_top'}}
+            %span.mx-1
+              - if count.zero?
+                = button_to "Delete", CGI.unescape(user_path(user.id.split('/').last)), method: :delete, class: 'btn btn-link',  form: {data: { turbo: true, turbo_confirm: "Are you sure?", turbo_frame: '_top'}}
+              - else
+                %span{data: { controller: 'tooltip' }, title: "Can't delete this user because still used"}
+                  = link_to "Delete", "", class: 'btn btn-link disabled'
+            %span.mx-1
+              = link_to 'Login as', "login_as/#{user.username}", {data: {turbo_frame: '_top'}}
+    %tr.empty-state
+      %td.text-center{:colspan => "6"} There are currently no  agents.
+
   :javascript
     $.fn.dataTable.ext.errMode = 'none';
-    $("#adminUsers").dataTable()
+    $("#admin_users").dataTable()
 

test/system/agent_flows_test.rb

@@ -64,7 +64,7 @@ def create_agent_flow(new_agent, person_count: , organization_count:)
     sleep 1
     assert_text "New Agent added successfully"
     find('.close').click
-    within "table#adminAgents" do
+    within "table#admin_agents" do
       assert_selector '.human',  count: person_count + organization_count #  all created  agents
       assert_text new_agent.name
       new_agent.identifiers.map{|x| "https://orcid.org/#{x["notation"]}"}.each do |orcid|
@@ -86,7 +86,7 @@ def edit_agent_flow(agent, person_count: , organization_count: )
     agent_fill(agent, parent_id: agent.id)
     # assert_text "New Agent added successfully"
     find('.close').click
-    within "table#adminAgents" do
+    within "table#admin_agents" do
       assert_selector '.human',  count: person_count + organization_count # all created  agents
       assert_text agent.name
       agent.identifiers.map{|x| "https://orcid.org/#{x["notation"]}"}.each do |orcid|