feat: Implement editable cell component with button interactions and …

…update tests for button selectors
phac-nml · Dec 20, 2024 · 63b6f3e · 63b6f3e
1 parent 99ddd67
commit 63b6f3e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 37 deletions.
diff --git a/app/components/samples/editable_cell.html.erb 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
@@ -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
@@ -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
@@ -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