From 725c3a214fdc0af33089deb424c4a6ccd79b398e Mon Sep 17 00:00:00 2001
From: Tanner Doshier <git@doshitan.com>
Date: Wed, 10 Sep 2025 11:14:56 -0400
Subject: [PATCH 1/2] WIP table partial

---
 app/previews/flex/cases/index_preview.rb      | 40 +++++++++++++++++++
 app/previews/flex/shared/table_preview.rb     | 26 ++++++++++++
 app/views/flex/cases/index.html.erb           | 36 +++++------------
 app/views/flex/shared/_table.html.erb         | 28 +++++++++++++
 .../app/views/passport_cases/index.html.erb   |  2 +-
 5 files changed, 105 insertions(+), 27 deletions(-)
 create mode 100644 app/previews/flex/cases/index_preview.rb
 create mode 100644 app/previews/flex/shared/table_preview.rb
 create mode 100644 app/views/flex/shared/_table.html.erb

diff --git a/app/previews/flex/cases/index_preview.rb b/app/previews/flex/cases/index_preview.rb
new file mode 100644
index 00000000..242ada6e
--- /dev/null
+++ b/app/previews/flex/cases/index_preview.rb
@@ -0,0 +1,40 @@
+module Flex
+  module Cases
+    # Lookbook preview for Cases Index page
+    class IndexPreview < Lookbook::Preview
+      def empty
+        render template: "flex/cases/index", locals: {
+            model_class: PassportCase,
+            cases: []
+        }
+      end
+
+      def with_cases
+        create_case = ->(attrs) {
+          kase = PassportCase.new(
+              id: attrs[:id],
+              created_at: attrs[:created_at],
+          )
+          kase.send(:status=, attrs[:status])
+          kase
+        }
+
+        render template: "flex/cases/index", locals: {
+            model_class: PassportCase,
+            cases: [
+              create_case.call({
+                  id: "45c96903-b562-4817-ba80-d21a0cc276b9",
+                  created_at: "2024-01-15",
+                  status: :open
+              }),
+              create_case.call({
+                  id: "28edb98c-3674-411e-8383-408eed8b427b",
+                  created_at: "2024-01-10",
+                  status: :closed
+              })
+            ]
+        }
+      end
+    end
+  end
+end
diff --git a/app/previews/flex/shared/table_preview.rb b/app/previews/flex/shared/table_preview.rb
new file mode 100644
index 00000000..ca19e585
--- /dev/null
+++ b/app/previews/flex/shared/table_preview.rb
@@ -0,0 +1,26 @@
+module Flex
+  module Shared
+    # Lookbook preview for Table partial
+    class TablePreview < Lookbook::Preview
+      def empty_no_headers
+          render template: "flex/shared/_table", locals: { headers: [], rows: [] }
+      end
+
+      def empty_with_headers
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [] }
+      end
+
+      def one_row
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [ [ "foo", "bar" ] ] }
+      end
+
+      def one_row_no_headers
+          render template: "flex/shared/_table", locals: { headers: [], rows: [ [ "foo", "bar" ] ] }
+      end
+
+      def multiple_row
+          render template: "flex/shared/_table", locals: { headers: [ "Col1", "Col2" ], rows: [ [ "foo", "bar" ], [ "bar", "baz" ], [ "quux", "fui" ] ] }
+      end
+    end
+  end
+end
diff --git a/app/views/flex/cases/index.html.erb b/app/views/flex/cases/index.html.erb
index c7eb534c..d46c7602 100644
--- a/app/views/flex/cases/index.html.erb
+++ b/app/views/flex/cases/index.html.erb
@@ -15,29 +15,13 @@
 </nav>
 
 <!-- Cases -->
-<table class="usa-table usa-table--borderless usa-table--striped">
-  <thead>
-    <tr>
-      <th scope="col">Case ID</th>
-      <th scope="col">Created</th>
-      <th scope="col">Action</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% if @cases.any? %>
-      <% @cases.each do |kase| %>
-        <tr>
-          <td><%= kase.id %></td>
-          <td><%= kase.created_at.strftime('%m/%d/%Y') %></td>
-          <td>
-            <%= link_to "View", polymorphic_path(kase), class: "usa-button usa-button--outline" %>
-          </td>
-        </tr>
-      <% end %>
-    <% else %>
-      <tr>
-        <td colspan="3" class="text-center">No cases</td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<%= render template: "flex/shared/_table", locals: {
+    headers: [ "Case ID", "Created", "Action" ],
+    rows: cases.map { |kase| [
+      kase.id,
+      kase.created_at.strftime('%m/%d/%Y'),
+      link_to("View", polymorphic_path(kase), class: "usa-button usa-button--outline")
+    ]},
+    empty_text: "No cases"
+  }
+%>
diff --git a/app/views/flex/shared/_table.html.erb b/app/views/flex/shared/_table.html.erb
new file mode 100644
index 00000000..8e79d605
--- /dev/null
+++ b/app/views/flex/shared/_table.html.erb
@@ -0,0 +1,28 @@
+<table class="usa-table usa-table--borderless usa-table--striped width-full">
+  <thead>
+    <tr>
+       <% headers.each do |header| %>
+          <th scope="col"><%= header %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+      <% if rows.any? %>
+        <% rows.each do |row| %>
+          <% if defined?(row_view) %>
+            <%= render partial: row_view, locals: { row: } %>
+          <% else %>
+            <tr>
+              <% row.each do |cell| %>
+              <td><%= cell %></td>
+              <% end %>
+            </tr>
+          <% end %>
+        <% end %>
+      <% else %>
+        <tr>
+          <td colspan="<%= headers.size %>" class="text-center"><%= defined?(empty_text) ? empty_text : tag.i("empty") %></td>
+        </tr>
+      <% end %>
+  </tbody>
+</table>
diff --git a/spec/dummy/app/views/passport_cases/index.html.erb b/spec/dummy/app/views/passport_cases/index.html.erb
index d299b97e..808f502b 100644
--- a/spec/dummy/app/views/passport_cases/index.html.erb
+++ b/spec/dummy/app/views/passport_cases/index.html.erb
@@ -1 +1 @@
-<%= render template: 'flex/cases/index', locals: { model_class: PassportCase } %>
+<%= render template: 'flex/cases/index', locals: { model_class: PassportCase, cases: @cases } %>

From 496c7f1320f98c6d93e131884034ba30966c7cf6 Mon Sep 17 00:00:00 2001
From: Tanner Doshier <git@doshitan.com>
Date: Fri, 12 Sep 2025 15:10:12 -0400
Subject: [PATCH 2/2] ApplicationForm table, support a striped/non-striped
 option?

---
 .../flex/application_forms/_row.html.erb      |  4 +--
 .../flex/application_forms/index.html.erb     | 36 +++++++------------
 .../passport_application_forms/_row.html.erb  |  4 +--
 3 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/app/views/flex/application_forms/_row.html.erb b/app/views/flex/application_forms/_row.html.erb
index 4bb4f979..548f03e9 100644
--- a/app/views/flex/application_forms/_row.html.erb
+++ b/app/views/flex/application_forms/_row.html.erb
@@ -1,10 +1,10 @@
 <tr>
   <td>
     <% # TODO show in local time %>
-    <%= link_to application_form[:created_at], application_form[:path] %>
+    <%= link_to row[:created_at], row[:path] %>
   </td>
   <td>
-    <%= t("flex.application_forms.statuses.#{application_form[:status]}") %>
+    <%= t("flex.application_forms.statuses.#{row[:status]}") %>
   </td>
   <td>
     TODO
diff --git a/app/views/flex/application_forms/index.html.erb b/app/views/flex/application_forms/index.html.erb
index 5ccbd09f..9b7039c6 100644
--- a/app/views/flex/application_forms/index.html.erb
+++ b/app/views/flex/application_forms/index.html.erb
@@ -40,29 +40,17 @@
   <h2 class="margin-top-6"><%= in_progress_applications_heading %></h2>
 
   <section class="d-flex flex-column flex-md-row gap-4 align-items-start justify-content-between">
-    <table class="usa-table usa-table--borderless width-full">
-      <thead>
-        <tr>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_created_at") %>
-          </th>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_status") %>
-          </th>
-          <th scope="col">
-            <%= t("flex.application_forms.index.col_actions") %>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <% application_forms.each do |application_form| %>
-          <% if local_assigns.key?(:row_view) %>
-            <%= render partial: row_view, locals: { application_form: } %>
-          <% else %>
-            <%= render partial: "flex/application_forms/row", locals: { application_form: } %>
-          <% end %>
-        <% end %>
-      </tbody>
-    </table>
+    <%= render template: "flex/shared/_table", locals: {
+        headers: [
+          t("flex.application_forms.index.col_created_at"),
+          t("flex.application_forms.index.col_status"),
+          t("flex.application_forms.index.col_actions")
+        ],
+        rows: application_forms,
+        row_view: local_assigns.key?(:row_view) ? row_view : "flex/application_forms/row",
+        empty_text: "No applications"
+      }
+    %>
   </section>
+
 <% end %>
diff --git a/spec/dummy/app/views/passport_application_forms/_row.html.erb b/spec/dummy/app/views/passport_application_forms/_row.html.erb
index 0eadf376..5eeca6b0 100644
--- a/spec/dummy/app/views/passport_application_forms/_row.html.erb
+++ b/spec/dummy/app/views/passport_application_forms/_row.html.erb
@@ -1,10 +1,10 @@
 <tr>
   <td>
     <% # TODO show in local time %>
-    <%= link_to application_form[:created_at], application_form[:path] %>
+    <%= link_to row[:created_at], row[:path] %>
   </td>
   <td>
-    <%= t("flex.application_forms.statuses.#{application_form[:status]}") %>
+    <%= t("flex.application_forms.statuses.#{row[:status]}") %>
   </td>
   <td>
     Passport TODO