From 812e09ee1f86addf4856e788df4ce7aa4a1f4827 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Fernandes?=
 <49888340+joaopfernandesc@users.noreply.github.com>
Date: Wed, 23 Oct 2024 21:05:40 +0200
Subject: [PATCH] feat: allow to set a empty state for index table

---
 .../polaris/index_table_component.html.erb    | 36 ++++++++++---------
 .../polaris/index_table_component.rb          |  1 +
 .../previews/index_table_component_preview.rb |  3 ++
 .../empty_state.html.erb                      | 19 ++++++++++
 .../polaris/index_table_component_test.rb     | 10 ++++++
 5 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 demo/app/previews/index_table_component_preview/empty_state.html.erb

diff --git a/app/components/polaris/index_table_component.html.erb b/app/components/polaris/index_table_component.html.erb
index b23f2548..2043ec38 100644
--- 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
index e8327b26..3c8488e4 100644
--- 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
index 39c669d4..35b6b3c9 100644
--- 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
new file mode 100644
index 00000000..3fcca6bd
--- /dev/null
+++ 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
index 78265264..9b9d29cc 100644
--- 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