Namespace Attachments: Empty Search State (#788)

* migrate namespace attachment controller actions to concern

* fix translations

* undo change

* add empty search state to namespace attachments, fix delete modal dialog

* remove unused concern method

* add fr trans fix

* fix turbo to continue focus on filter bar after filtering

app/components/attachments/dialogs/delete_attachment_component.html.erb

@@ -9,10 +9,15 @@
       <p class="mb-4">
         <% if @attachment.associated_attachment %>
           <%= t(".description.paired_end",
-          filenames:
-          "'#{@attachment.file.filename.to_s}', '#{@attachment.associated_attachment.file.filename.to_s}'") %>
+            filenames:
+            "'#{@attachment.file.filename.to_s}', '#{@attachment.associated_attachment.file.filename.to_s}'",
+            attachable_type: @namespace.type.downcase)
+          %>
         <% else %>
-          <%= t(".description.single", filename: @attachment.file.filename.to_s) %>
+          <%= t(".description.single",
+            filename: @attachment.file.filename.to_s,
+            attachable_type: @namespace.type.downcase)
+            %>
         <% end %>
       </p>
       <%= form_for(:deletion, url: destroy_path, method: :delete) do |form| %>

app/components/attachments/table_component.rb

@@ -14,6 +14,7 @@ def initialize(
       q,
       namespace,
       render_individual_attachments,
+      has_attachments,
       row_actions: false,
       abilities: {},
       empty: {},
@@ -23,9 +24,10 @@ def initialize(
       @pagy = pagy
       @q = q
       @namespace = namespace
+      @render_individual_attachments = render_individual_attachments
+      @has_attachments = has_attachments
       @abilities = abilities
       @row_actions = row_actions
-      @render_individual_attachments = render_individual_attachments
       @empty = empty
       @renders_row_actions = @row_actions.select { |_key, value| value }.count.positive?
       @system_arguments = system_arguments

app/controllers/concerns/attachment_actions.rb

@@ -16,7 +16,9 @@ def index
     authorize! @authorize_object, to: :view_attachments?
 
     @render_individual_attachments = filter_requested?
-    @q = build_ransack_query
+    all_attachments = load_attachments
+    @has_attachments = all_attachments.count.positive?
+    @q = all_attachments.ransack(params[:q])
     set_default_sort
     @pagy, @attachments = pagy_with_metadata_sort(@q.result)
   end
@@ -89,13 +91,12 @@ def filter_requested?
     params.dig(:q, :puid_or_file_blob_filename_cont).present?
   end
 
-  def build_ransack_query
+  def load_attachments
     if @render_individual_attachments
-      @namespace.attachments.all.ransack(params[:q])
+      @namespace.attachments.all
     else
       @namespace.attachments
                 .where.not(Attachment.arel_table[:metadata].contains({ direction: 'reverse' }))
-                .ransack(params[:q])
     end
   end
 

app/views/groups/attachments/_table.html.erb

@@ -1,10 +1,11 @@
-<%# locals: (namespace:, pagy:, q:, attachments:, render_individual_attachments:) -%>
+<%# locals: (namespace:, pagy:, q:, attachments:, render_individual_attachments:, has_attachments:) -%>
 <%= render Attachments::TableComponent.new(
   attachments,
   pagy,
   q,
   namespace,
   render_individual_attachments,
+  has_attachments,
   abilities: {
     # Uncomment when ready to use multi-select functionality
     # select_attachments: allowed_to?(:destroy_attachment?, namespace)

app/views/groups/attachments/index.html.erb

@@ -48,7 +48,7 @@
 
   <div class="flow-root">
     <div class="flex flex-row-reverse items-center mb-4 space-x-2">
-      <%= search_form_for @q, url: group_attachments_path(@group), html: { "data-controller": "filters" } do |f| %>
+      <%= search_form_for @q, url: group_attachments_path(@group), html: { "data-controller": "filters", "data-turbo-action": "replace" } do |f| %>
         <%= hidden_field_tag :limit, @pagy.limit %>
         <%= f.hidden_field :s, value: "#{@q.sorts[0].name} #{@q.sorts[0].dir}" %>
         <%= f.label :name_cont, "SEARCH", class: "sr-only" %>
@@ -75,6 +75,7 @@
     pagy: @pagy,
     q: @q,
     namespace: @group,
-    render_individual_attachments: @render_individual_attachments
+    render_individual_attachments: @render_individual_attachments,
+    has_attachments: @has_attachments
   } %>
 </div>

app/views/projects/attachments/_table.html.erb

@@ -1,10 +1,11 @@
-<%# locals: (namespace:, pagy:, q:, attachments:, render_individual_attachments:) -%>
+<%# locals: (namespace:, pagy:, q:, attachments:, render_individual_attachments:, has_attachments:) -%>
 <%= render Attachments::TableComponent.new(
   attachments,
   pagy,
   q,
   namespace,
   render_individual_attachments,
+  has_attachments,
   abilities: {
     # Uncomment when ready to use multi-select functionality
     # select_attachments: allowed_to?(:destroy_attachment?, namespace.project)

app/views/projects/attachments/index.html.erb

@@ -48,7 +48,7 @@
 
   <div class="flow-root">
     <div class="flex flex-row-reverse items-center mb-4 space-x-2">
-      <%= search_form_for @q, url: namespace_project_attachments_path(@project.parent, @project), html: { "data-controller": "filters" } do |f| %>
+      <%= search_form_for @q, url: namespace_project_attachments_path(@project.parent, @project), html: { "data-controller": "filters", "data-turbo-action": "replace" } do |f| %>
         <%= hidden_field_tag :limit, @pagy.limit %>
         <%= f.hidden_field :s, value: "#{@q.sorts[0].name} #{@q.sorts[0].dir}" %>
         <%= f.label :puid_or_file_blob_filename_cont, "SEARCH", class: "sr-only" %>
@@ -75,6 +75,7 @@
     pagy: @pagy,
     q: @q,
     namespace: @project.namespace,
-    render_individual_attachments: @render_individual_attachments
+    render_individual_attachments: @render_individual_attachments,
+    has_attachments: @has_attachments
   } %>
 </div>

config/locales/en.yml

@@ -279,8 +279,8 @@ en:
     dialogs:
       delete_attachment_component:
         description:
-          paired_end: Are you sure that you want to delete files %{filenames} from the group?
-          single: Are you sure that you want to delete file '%{filename}' from the group?
+          paired_end: Are you sure that you want to delete files %{filenames} from the %{attachable_type}?
+          single: Are you sure that you want to delete file '%{filename}' from the %{attachable_type}?
         submit_button: Confirm
         title: Delete File
       new_attachment_component:

config/locales/fr.yml

@@ -279,8 +279,8 @@ fr:
     dialogs:
       delete_attachment_component:
         description:
-          paired_end: Are you sure that you want to delete files %{filenames} from the group?
-          single: Are you sure that you want to delete file '%{filename}' from the group?
+          paired_end: Are you sure that you want to delete files %{filenames} from the %{attachable_type}?
+          single: Are you sure that you want to delete file '%{filename}' from the %{attachable_type}?
         submit_button: Confirm
         title: Delete File
       new_attachment_component:

test/system/groups/attachments_test.rb

@@ -203,7 +203,7 @@ class AttachmentsTest < ApplicationSystemTestCase
       assert_text 'Displaying 1-2 of 2 items'
       assert_selector 'table tbody tr', count: 2
 
-      fill_in placeholder: I18n.t(:'projects.attachments.index.search.placeholder'),
+      fill_in placeholder: I18n.t(:'groups.attachments.index.search.placeholder'),
               with: @attachment1.file.filename.to_s
 
       assert_text 'Displaying 1 item'
@@ -216,7 +216,7 @@ class AttachmentsTest < ApplicationSystemTestCase
         assert_no_text @attachment2.file.filename.to_s
       end
 
-      fill_in placeholder: I18n.t(:'projects.attachments.index.search.placeholder'),
+      fill_in placeholder: I18n.t(:'groups.attachments.index.search.placeholder'),
               with: @attachment2.puid
 
       assert_text 'Displaying 1 item'
@@ -312,7 +312,7 @@ class AttachmentsTest < ApplicationSystemTestCase
       assert_text 'Displaying 1-2 of 2 items'
       assert_selector 'table tbody tr', count: 2
 
-      click_on I18n.t('projects.attachments.index.upload_files')
+      click_on I18n.t('groups.attachments.index.upload_files')
 
       within('dialog') do
         attach_file 'attachment[files][]', [Rails.root.join('test/fixtures/files/TestSample_S1_L001_R2_001.fastq.gz'),
@@ -329,7 +329,7 @@ class AttachmentsTest < ApplicationSystemTestCase
         assert_selector 'tr:first-child td:nth-child(4)', text: 'illumina_pe'
       end
 
-      fill_in placeholder: I18n.t(:'projects.attachments.index.search.placeholder'),
+      fill_in placeholder: I18n.t(:'groups.attachments.index.search.placeholder'),
               with: 'fastq.gz'
 
       assert_selector '#attachments-table table tbody tr', count: 2
@@ -344,5 +344,22 @@ class AttachmentsTest < ApplicationSystemTestCase
         assert_selector 'tr:nth-child(2) td:nth-child(4)', text: 'illumina_pe'
       end
     end
+
+    test 'empty search state' do
+      visit group_attachments_path(@namespace)
+
+      assert_text 'Displaying 1-2 of 2 items'
+      assert_selector 'table tbody tr', count: 2
+
+      fill_in placeholder: I18n.t(:'groups.attachments.index.search.placeholder'),
+              with: 'filter that results in no attachments'
+
+      assert_no_selector 'table'
+
+      within 'div[role="alert"]' do
+        assert_text I18n.t('components.viral.pagy.empty_state.title')
+        assert_text I18n.t('components.viral.pagy.empty_state.description')
+      end
+    end
   end
 end

test/system/projects/attachments_test.rb

@@ -345,5 +345,22 @@ class AttachmentsTest < ApplicationSystemTestCase
         assert_selector 'tr:nth-child(2) td:nth-child(4)', text: 'illumina_pe'
       end
     end
+
+    test 'empty search state' do
+      visit namespace_project_attachments_path(@namespace, @project1)
+
+      assert_text 'Displaying 1-2 of 2 items'
+      assert_selector 'table tbody tr', count: 2
+
+      fill_in placeholder: I18n.t(:'projects.attachments.index.search.placeholder'),
+              with: 'filter that results in no attachments'
+
+      assert_no_selector 'table'
+
+      within 'div[role="alert"]' do
+        assert_text I18n.t('components.viral.pagy.empty_state.title')
+        assert_text I18n.t('components.viral.pagy.empty_state.description')
+      end
+    end
   end
 end