Enhancement: Created empty search state (#770)

* chore: Created empty search state

* chore: Updated empty state to new styles and used that if table search comes up empty

* chore: Added previews and testing

* chore: Fixed project samples test

* chore: Better border styling

* chore: Fixed samples test

* chore: Fixed empty component test

* chore: Fixed data export tests

* chore: Fixed broken test

app/components/viral/empty_state_component.html.erb

@@ -1,15 +1,21 @@
-<div class="flex justify-center py-20 mt-4">
-  <div class="flex items-center inline-block">
-    <%= viral_icon(name: icon_name, color: :primary, classes: "w-20 h-20 shrink mr-4") %>
-    <div class="flex flex-col grow">
-      <p class="text-2xl font-bold dark:text-slate-300 text-slate-700">
-        <%= title %>
+<div
+  class="
+    flex items-center p-4 space-x-4 border border-gray-200 rounded-lg
+    dark:border-gray-800
+  "
+  role="alert"
+>
+  <span class="flex-shrink text-gray-500 dark:text-gray-400">
+    <%= viral_icon(name: icon_name, classes: "size-10") %>
+  </span>
+  <div>
+    <h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+      <%= title %>
+    </h1>
+    <% if description.present? %>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        <%= description %>
       </p>
-      <% if description.present? %>
-        <p class="text-slate-600 dark:text-slate-400">
-          <%= description %>
-        </p>
-      <% end %>
-    </div>
+    <% end %>
   </div>
 </div>

app/components/viral/pagy/full_component.html.erb

@@ -0,0 +1,12 @@
+<% if pagy.vars[:size].positive? && pagy.count.positive? %>
+  <div class="flex items-center justify-between">
+    <%= render Viral::Pagy::LimitComponent.new(pagy, item: item) %>
+    <%= render Viral::Pagy::PaginationComponent.new(pagy) %>
+  </div>
+<% else %>
+  <%= render Viral::EmptyStateComponent.new(
+    icon_name: :magnifying_glass,
+    title: t("components.viral.pagy.empty_state.title"),
+    description: t("components.viral.pagy.empty_state.description"),
+  ) %>
+<% end %>

app/components/viral/pagy/full_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Viral
+  module Pagy
+    # FullComponent is a component that renders the full pagy pagination
+    # including the limit and pagination components.
+    class FullComponent < Viral::Component
+      def initialize(pagy, item:)
+        @pagy = pagy
+        @item = item
+      end
+
+      private
+
+      attr_reader :pagy, :item
+    end
+  end
+end

config/locales/en.yml

@@ -356,6 +356,11 @@ en:
       copied: Copied!
       copy: Copy to clipboard
       toggle_visible: Toggle visibility
+    viral:
+      pagy:
+        empty_state:
+          description: No items found matching your search
+          title: No items found
   concerns:
     bot_actions:
       create:

config/locales/fr.yml

@@ -356,6 +356,11 @@ fr:
       copied: Copied!
       copy: Copy to clipboard
       toggle_visible: Toggle visibility
+    viral:
+      pagy:
+        empty_state:
+          description: No items found matching your search
+          title: No items found
   concerns:
     bot_actions:
       create:

test/components/previews/viral_pagy_full_component_preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class ViralPagyFullComponentPreview < ViewComponent::Preview
+  def default
+    pagy = Pagy.new(count: 100, page: 1)
+    render(Viral::Pagy::FullComponent.new(pagy, item: 'items'))
+  end
+
+  def empty_state
+    pagy = Pagy.new(count: 0, page: 1)
+    pagy.vars[:size] = 9
+    render(Viral::Pagy::FullComponent.new(pagy, item: 'items'))
+  end
+end

test/components/viral/empty_component_test.rb

@@ -7,7 +7,7 @@ class EmptyComponentTest < ViewComponentTestCase
     test 'default' do
       render_preview(:default)
       assert_selector 'span.Viral-Icon svg'
-      assert_selector 'p', text: I18n.t(:'groups.show.shared_namespaces.no_shared.title')
+      assert_selector 'h1', text: I18n.t(:'groups.show.shared_namespaces.no_shared.title')
       assert_selector 'p', text: I18n.t(:'groups.show.shared_namespaces.no_shared.description')
     end
   end

test/components/viral/pagy_full_component_preview_test.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'application_system_test_case'
+
+class PagyFullComponentPreviewTest < ApplicationSystemTestCase
+  test 'renders default' do
+    visit('/rails/view_components/viral_pagy_full_component/default')
+
+    assert_selector 'nav.pagy.nav'
+    assert_selector 'li button[disabled]', text: 'Previous'
+    assert_selector 'li > a', text: 'Next'
+    assert_selector 'li button[disabled]', text: '1'
+    assert_selector 'li > a:not([data-aria-disabled="true"])', count: '5'
+  end
+
+  test 'renders empty state' do
+    visit('/rails/view_components/viral_pagy_full_component/empty_state')
+
+    assert_selector 'h1', text: I18n.t('components.viral.pagy.empty_state.title')
+    assert_selector 'p', text: I18n.t('components.viral.pagy.empty_state.description')
+    assert_no_selector 'nav.pagy.nav'
+  end
+end

test/system/data_exports_test.rb

@@ -21,6 +21,9 @@ def setup # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
     @sample30 = samples(:sample30)
     @workflow_execution1 = workflow_executions(:irida_next_example_completed_with_output)
     @workflow_execution2 = workflow_executions(:workflow_execution_valid)
+
+    Project.reset_counters(@project1.id, :samples_count)
+
     login_as @user
   end
 
@@ -367,6 +370,7 @@ def setup # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
   test 'checking off samples on different page does not affect current page\'s export samples' do
     subgroup12a = groups(:subgroup_twelve_a)
     project29 = projects(:project29)
+    Project.reset_counters(project29.id, :samples_count)
     sample32 = samples(:sample32)
 
     visit namespace_project_samples_url(subgroup12a, project29)
@@ -555,6 +559,7 @@ def setup # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
 
   test 'projects with samples containing no metadata should have linelist export link disabled' do
     project = projects(:project2)
+    Project.reset_counters(project.id, :samples_count)
     sample3 = samples(:sample3)
 
     visit namespace_project_samples_url(@group1, project)

test/system/projects/samples_test.rb

@@ -497,6 +497,7 @@ class SamplesTest < ApplicationSystemTestCase
       sign_in users(:jean_doe)
       namespace = namespaces_user_namespaces(:john_doe_namespace)
       project = projects(:john_doe_project2)
+      Project.reset_counters(project.id, :samples_count)
       visit namespace_project_samples_url(namespace, project)
       within '#samples-table table tbody' do
         all('input[type=checkbox]').each { |checkbox| checkbox.click unless checkbox.checked? }
@@ -2220,6 +2221,7 @@ class SamplesTest < ApplicationSystemTestCase
       sign_in users(:jean_doe)
       namespace = namespaces_user_namespaces(:john_doe_namespace)
       project = projects(:john_doe_project2)
+      Project.reset_counters(project.id, :samples_count)
       visit namespace_project_samples_url(namespace, project)
       within '#samples-table table tbody' do
         all('input[type=checkbox]').each { |checkbox| checkbox.click unless checkbox.checked? }
@@ -2431,12 +2433,9 @@ def retrieve_puids
       end
       assert_text I18n.t('projects.samples.deletions.destroy_multiple.success')
 
-      within '.table-container' do
-        assert_no_selector 'tr'
-        assert_no_text @sample1.name
-        assert_no_text @sample2.name
-        assert_no_text @sample3.name
+      within 'div[role="alert"]' do
         assert_text I18n.t('projects.samples.index.no_samples')
+        assert_text I18n.t('projects.samples.index.no_associated_samples')
       end
     end
 
@@ -2515,12 +2514,9 @@ def retrieve_puids
       end
       assert_text I18n.t('projects.samples.deletions.destroy_multiple.success')
 
-      within '.table-container' do
-        assert_no_selector 'tr'
-        assert_no_text @sample1.name
-        assert_no_text @sample2.name
-        assert_no_text @sample3.name
+      within 'div[role="alert"]' do
         assert_text I18n.t('projects.samples.index.no_samples')
+        assert_text I18n.t('projects.samples.index.no_associated_samples')
       end
 
       assert_selector 'a.cursor-not-allowed.pointer-events-none', count: 4