From f21976bba503851cdcf8a03c57ffe74d7d61f89e Mon Sep 17 00:00:00 2001
From: Josh Adam <josh.adam@phac-aspc.gc.ca>
Date: Wed, 18 Dec 2024 11:28:43 -0600
Subject: [PATCH] feat: Implement editable cell component with button
 interactions and update tests for button selectors

---
 app/components/samples/editable_cell.html.erb | 29 +++++++++++++++++++
 app/components/samples/editable_cell.rb       | 29 -------------------
 test/system/groups/samples_test.rb            | 12 ++++----
 test/system/projects/samples_test.rb          |  4 +--
 4 files changed, 37 insertions(+), 37 deletions(-)
 create mode 100644 app/components/samples/editable_cell.html.erb

diff --git a/app/components/samples/editable_cell.html.erb b/app/components/samples/editable_cell.html.erb
new file mode 100644
index 0000000000..00b98510de
--- /dev/null
+++ b/app/components/samples/editable_cell.html.erb
@@ -0,0 +1,29 @@
+<td id="<%= dom_id(@sample, @field) %>" class="relative" role="gridcell">
+  <%= form_with(
+              url: editable_namespace_project_sample_metadata_field_path(
+                @sample.project.namespace.parent,
+                @sample.project,
+                @sample
+              ),
+              method: :get,
+              class: "w-full"
+            ) do |form| %>
+
+    <%= form.hidden_field :field, value: @field %>
+    <%= form.hidden_field :format, value: "turbo_stream" %>
+
+    <button
+      type="submit"
+      class="
+        w-full p-4 text-left cursor-pointer hover:bg-slate-50 focus:outline-none
+        dark:hover:bg-slate-600
+      "
+      aria-label="<%= t(:".aria_label", value: @sample.metadata[@field]) %> value"
+      <%= "autofocus" if @autofocus %>
+    >
+      <span class="block truncate">
+        <%= @sample.metadata[@field] || "" %>
+      </span>
+    </button>
+  <% end %>
+</td>
diff --git a/app/components/samples/editable_cell.rb b/app/components/samples/editable_cell.rb
index 9cafca52a2..baa8aeebda 100644
--- a/app/components/samples/editable_cell.rb
+++ b/app/components/samples/editable_cell.rb
@@ -5,35 +5,6 @@ module Samples
   class EditableCell < Component
     with_collection_parameter :field
 
-    erb_template <<~ERB
-      <td id="<%= dom_id(@sample, @field) %>"
-          class="relative"
-          role="gridcell">
-        <%= form_with(
-              url: editable_namespace_project_sample_metadata_field_path(
-                @sample.project.namespace.parent,
-                @sample.project,
-                @sample
-              ),
-              method: :get,
-              class: "w-full"
-            ) do |form| %>
-
-          <%= form.hidden_field :field, value: @field %>
-          <%= form.hidden_field :format, value: "turbo_stream" %>
-
-          <button type="submit"
-                  class="w-full p-4 text-left cursor-pointer hover:bg-slate-50 focus:ring-4 focus:outline-none focus:ring-primary-200 dark:hover:bg-slate-600 dark:focus:ring-primary-700"
-                  aria-label="<%= t(:".aria_label", value: @sample.metadata[@field]) %> value"
-                  <%= "autofocus" if @autofocus %>>
-            <span class="block truncate">
-              <%= @sample.metadata[@field] || "" %>
-            </span>
-          </button>
-        <% end %>
-      </td>
-    ERB
-
     def initialize(field:, sample:, autofocus: false)
       @sample = sample
       @field = field
diff --git a/test/system/groups/samples_test.rb b/test/system/groups/samples_test.rb
index f8216e94b7..b968930fa4 100644
--- a/test/system/groups/samples_test.rb
+++ b/test/system/groups/samples_test.rb
@@ -391,16 +391,16 @@ def retrieve_puids
       assert_selector 'table thead tr th', count: 9
       within('table tbody tr:first-child') do
         assert_text @sample30.name
-        assert_selector 'td:nth-child(7) input[value="value1"]'
-        assert_selector 'td:nth-child(8) input[value="value2"]'
-        assert_selector 'td:nth-child(9) input[type="submit"]'
+        assert_selector 'td:nth-child(7) button', text: 'value1'
+        assert_selector 'td:nth-child(8) button', text: 'value2'
+        assert_selector 'td:nth-child(9) button', text: ''
       end
 
       within('table tbody tr:nth-child(3)') do
         assert_text @sample28.name
-        assert_selector 'td:nth-child(7) input[type="submit"]'
-        assert_selector 'td:nth-child(8) input[type="submit"]'
-        assert_selector 'td:nth-child(9) input[value="unique_value"]'
+        assert_selector 'td:nth-child(7) button', text: ''
+        assert_selector 'td:nth-child(8) button', text: ''
+        assert_selector 'td:nth-child(9) button', text: 'unique_value'
       end
 
       find('label', text: I18n.t('projects.samples.shared.metadata_toggle.label')).click
diff --git a/test/system/projects/samples_test.rb b/test/system/projects/samples_test.rb
index 40e7fe25c9..ba090fcc55 100644
--- a/test/system/projects/samples_test.rb
+++ b/test/system/projects/samples_test.rb
@@ -827,8 +827,8 @@ class SamplesTest < ApplicationSystemTestCase
       assert_selector '#samples-table table thead tr th', count: 8
       within('#samples-table table tbody tr:first-child') do
         assert_text @sample3.name
-        assert_selector 'td input[type="submit"][value="value1"]'
-        assert_selector 'td input[type="submit"][value="value2"]'
+        assert_selector 'td button', text: 'value1'
+        assert_selector 'td button', text: 'value2'
       end
       find('label', text: I18n.t('projects.samples.shared.metadata_toggle.label')).click
       assert_selector '#samples-table table thead tr th', count: 6