feat: allow to set a empty state for index table

baoagency · Oct 23, 2024 · 812e09e · 812e09e
1 parent b7bd93e
commit 812e09e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 16 deletions.
diff --git a/app/components/polaris/index_table_component.html.erb b/app/components/polaris/index_table_component.html.erb
@@ -1,21 +1,25 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-  <div class="Polaris-IndexTable-ScrollContainer">
-    <table class="Polaris-IndexTable__Table">
-      <thead>
-        <tr>
-          <% columns.each_with_index do |column, index| %>
-            <th class="Polaris-IndexTable__TableHeading">
-              <%= column.title %>
-            </th>
-          <% end %>
-        </tr>
-      </thead>
-      <tbody>
-        <% @data.each do |row| %>
-          <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
+  <% if @data.empty? %>
+    <%= empty_state %>
+  <% else %>
+    <div class="Polaris-IndexTable-ScrollContainer">
+      <table class="Polaris-IndexTable__Table">
+        <thead>
+          <tr>
             <% columns.each_with_index do |column, index| %>
-              <%= render_cell(flush: column.flush, **column.system_arguments) do %>
-                <%= column.call(row) %>
+              <th class="Polaris-IndexTable__TableHeading">
+                <%= column.title %>
+              </th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody>
+          <% @data.each do |row| %>
+            <%= render Polaris::BaseComponent.new(**row_arguments(row)) do %>
+              <% columns.each_with_index do |column, index| %>
+                <%= render_cell(flush: column.flush, **column.system_arguments) do %>
+                  <%= column.call(row) %>
+                <% end %>
               <% end %>
             <% end %>
           <% end %>

diff --git a/app/components/polaris/index_table_component.rb b/app/components/polaris/index_table_component.rb
@@ -3,6 +3,7 @@ class IndexTableComponent < Polaris::Component
     renders_many :columns, ->(title, **system_arguments, &block) do
       IndexTable::ColumnComponent.new(title, **system_arguments, &block)
     end
+    renders_one :empty_state
 
     def initialize(data, **system_arguments)
       @data = data

diff --git a/demo/app/previews/index_table_component_preview.rb b/demo/app/previews/index_table_component_preview.rb
@@ -1,4 +1,7 @@
 class IndexTableComponentPreview < ViewComponent::Preview
   def without_checkboxes
   end
+
+  def empty_state
+  end
 end
diff --git a/demo/app/previews/index_table_component_preview/empty_state.html.erb b/demo/app/previews/index_table_component_preview/empty_state.html.erb
@@ -0,0 +1,19 @@
+<% data = [] %>
+<%= polaris_index_table(data) do |table| %>
+  <% table.with_column("Name") do |row| %>
+    <%= polaris_text_strong { row[:name] } %>
+  <% end %>
+
+  <% table.with_empty_state do %>
+    <%= polaris_card do %>
+      <%= polaris_empty_state(
+        heading: "Manage your inventory transfers",
+        image: "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png",
+      ) do |state| %>
+        <% state.with_primary_action { "Add transfer" } %>
+        <% state.with_secondary_action(url: "#") { "Learn more" } %>
+        <p>Track and receive your incoming inventory from suppliers.</p>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/test/components/polaris/index_table_component_test.rb b/test/components/polaris/index_table_component_test.rb
@@ -37,4 +37,14 @@ def test_default_table
       end
     end
   end
+
+  def test_empty_state
+    render_inline(Polaris::IndexTableComponent.new([])) do |table|
+      table.with_empty_state do |row|
+        "Empty state"
+      end
+    end
+
+    assert_selector ".Polaris-IndexTable", text: "Empty state"
+  end
 end