Data Table: Projects Automated Pipelines (#848)

* migrate automated pipelines table to use data table component

* remove unused file

* add test to ensure edit button is hidden when pipeline is disabled

app/components/viral/data_table/column_component.rb

@@ -9,7 +9,7 @@ class ColumnComponent < Viral::Component
       STICKY_CLASSES = {
         left: {
           header: 'sticky left-0 bg-slate-50 dark:bg-slate-700 z-10 ',
-          body: 'sticky left-0 bg-slate-50 dark:bg-slate-800 z-10'
+          body: 'sticky left-0 bg-slate-50 dark:bg-slate-900 z-10'
         },
         left_fixed_index_zero: {
           header: 'sticky left-0 min-w-56 max-w-56 bg-slate-50 dark:bg-slate-700 z-10',

app/views/projects/automated_workflow_executions/_table.html.erb

@@ -1,64 +1,73 @@
-<div class="table-container relative overflow-x-auto" data-turbo-temporary>
-  <table
-    id="automated_workflow_executions"
-    class="
-      w-full text-sm text-left rtl:text-right text-slate-500 dark:text-slate-400
-      dark:divide-slate-600 whitespace-nowrap
-    "
-  >
-    <thead
-      class="
-        text-slate-700 uppercase bg-slate-50 dark:bg-slate-700 dark:text-slate-400
-        whitespace-nowrap
-      "
-    >
-      <tr>
-        <th
-          scope="col"
-          class="
-            px-6 py-3 whitespace-nowrap text-left sticky left-0 bg-slate-50
-            dark:bg-slate-700
-          "
-        >
-          <%= t(:".headers.id") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.name") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.workflow_name") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.workflow_version") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.created_at") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.updated_at") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
-          <%= t(:".headers.status") %>
-        </th>
-        <th scope="col" class="px-6 py-3 whitespace-nowrap text-left sticky right-0">
-          <%= t(:".headers.actions") %>
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="
-        bg-white divide-y divide-slate-200 dark:bg-slate-800 dark:divide-slate-700
-      "
-    >
-      <%= render partial: "automated_workflow_execution",
-      collection: @automated_workflow_executions %>
-    </tbody>
-  </table>
+<% if @automated_workflow_executions.count.positive? %>
+  <%= viral_data_table(@automated_workflow_executions, id: "automated_workflow_executions") do |table| %>
+    <% table.with_column(t(".headers.id"),
+      sticky_key: :left
+    ) do |row| %>
+      <%= row[:id] %>
+    <% end %>
+    <% table.with_column(t(".headers.name")) do |row| %>
+      <%= row[:name] %>
+    <% end %>
+    <% table.with_column(t(".headers.workflow_name")) do |row| %>
+      <%= row.metadata["workflow_name"] %>
+    <% end %>
+    <% table.with_column(t(".headers.workflow_version")) do |row| %>
+      <%= row.metadata["workflow_version"] %>
+    <% end %>
+    <% table.with_column(t(".headers.created_at")) do |row| %>
+      <%= local_time(row[:created_at], :full_date) %>
+    <% end %>
+    <% table.with_column(t(".headers.updated_at")) do |row| %>
+      <%= local_time_ago(row[:updated_at]) %>
+    <% end %>
+    <% table.with_column(t(".headers.status")) do |row| %>
+      <% if row[:disabled] %>
+        <%= viral_pill(text: t(".disabled"), color: "red") %>
+      <% else %>
+        <%= viral_pill(text: t(".enabled"), color: "green") %>
+      <% end %>
+    <% end %>
+    <% table.with_column(t(".headers.actions"),
+        sticky_key: :right
+      ) do |row| %>
+      <% unless row.disabled %>
+        <%= link_to(
+          t(:"projects.automated_workflow_executions.actions.edit_button"),
+          edit_namespace_project_automated_workflow_execution_path(
+            @project.parent,
+            @project,
+            row,
+          ),
+          data: {
+            turbo_stream: true,
+          },
+          class:
+            "font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
+        ) %>
+      <% end %>
+      <%= link_to(
+        t(:"projects.automated_workflow_executions.actions.delete_button"),
+        namespace_project_automated_workflow_execution_path(
+          @project.parent,
+          @project,
+          row,
+        ),
+        data: {
+          turbo_method: :delete,
+          turbo_confirm:
+            t(:"projects.automated_workflow_executions.actions.delete_confirm"),
+        },
+        class:
+          "font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline cursor-pointer",
+      ) %>
+    <% end %>
+  <% end %>
+<% else %>
   <div class="empty_state_message">
     <%= viral_empty(
       title: t(:".empty.title"),
       description: t(:".empty.description"),
       icon_name: :document_text,
     ) %>
   </div>
-</div>
+<% end %>

config/locales/en.yml

@@ -1032,9 +1032,6 @@ en:
         delete_button: Delete
         delete_confirm: Are you sure that you want to delete this automated pipeline?
         edit_button: Edit
-      automated_workflow_execution:
-        disabled: DISABLED
-        enabled: ENABLED
       create:
         error: Could not create an automated pipeline for %{workflow_name}
         success: Automated pipeline for %{workflow_name} was successfully created
@@ -1054,9 +1051,11 @@ en:
       pipeline_selection_modal:
         title: Pipeline Selection
       table:
+        disabled: DISABLED
         empty:
           description: No automated pipelines have been configured for this project
           title: No automated pipelines
+        enabled: ENABLED
         headers:
           actions: Actions
           created_at: Created

config/locales/fr.yml

@@ -1032,9 +1032,6 @@ fr:
         delete_button: Delete
         delete_confirm: Are you sure that you want to delete this automated pipeline?
         edit_button: Edit
-      automated_workflow_execution:
-        disabled: DISABLED
-        enabled: ENABLED
       create:
         error: Could not create an automated pipeline for %{workflow_name}
         success: Automated pipeline for %{workflow_name} was successfully created
@@ -1054,9 +1051,11 @@ fr:
       pipeline_selection_modal:
         title: Pipeline Selection
       table:
+        disabled: DISABLED
         empty:
           description: No automated pipelines have been configured for this project
           title: No automated pipelines
+        enabled: ENABLED
         headers:
           actions: Actions
           created_at: Created

test/system/projects/automated_workflow_executions_test.rb

@@ -116,5 +116,19 @@ def setup
         assert_text 'Updated Name'
       end
     end
+
+    test 'hidden edit button when automated workflow execution is disabled' do
+      disabled_automated_pipeline = automated_workflow_executions(:disabled_automated_workflow_execution)
+      visit namespace_project_automated_workflow_executions_path(@namespace, @project)
+      within('tbody') do
+        assert_selector "tr[id='#{disabled_automated_pipeline.id}'] th:first-child",
+                        text: disabled_automated_pipeline.id
+
+        within("tr[id='#{disabled_automated_pipeline.id}'] td:last-child") do
+          assert_text I18n.t('projects.automated_workflow_executions.actions.delete_button')
+          assert_no_text I18n.t('projects.automated_workflow_executions.actions.edit_button')
+        end
+      end
+    end
   end
 end