Samples table metadata fields toggle

Gemfile

@@ -118,6 +118,8 @@ group :development do
   # Use console on exceptions pages [https://github.com/rails/web-console]
   gem 'web-console'
 
+  gem 'faker'
+
   # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
   # gem "rack-mini-profiler"
 

Gemfile.lock

@@ -171,6 +171,8 @@ GEM
     erubi (1.12.0)
     et-orbi (1.2.7)
       tzinfo
+    faker (3.2.2)
+      i18n (>= 1.8.11, < 2)
     faraday (2.0.0)
       ruby2_keywords (>= 0.0.4)
     faraday-follow_redirects (0.3.0)
@@ -557,6 +559,7 @@ DEPENDENCIES
   debug
   devise (~> 4.9.2)
   erb-formatter (~> 0.4.3)
+  faker
   faraday
   faraday-net_http_persistent (~> 2.0)
   fx

app/components/viral/time_ago_component.html.erb

@@ -1,3 +1,3 @@
 <%= viral_tooltip(title: l(original_time, format: :long)) do %>
-  <span class='text-sm text-gray-900 dark:text-white'><%= time_ago %></span>
+  <%= time_ago %>
 <% end %>

app/controllers/concerns/metadata.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+# Executes basic metadata logic for controllers
+module Metadata
+  extend ActiveSupport::Concern
+
+  included do
+    helper_method :fields_for_namespace
+  end
+
+  def fields_for_namespace(namespace: nil, show_fields: false)
+    @fields = !show_fields || namespace.nil? ? [] : namespace.metadata_summary.keys
+  end
+end

app/controllers/groups/samples_controller.rb

@@ -4,21 +4,21 @@ module Groups
   # Controller actions for Samples within a Group
   class SamplesController < ApplicationController
     layout 'groups'
+    include Metadata
     before_action :group, :current_page, only: %i[index]
 
-    def index
+    def index # rubocop:disable Metrics/AbcSize
       authorize! @group, to: :sample_listing?
 
       @q = authorized_samples.ransack(params[:q])
-
       set_default_sort
-
       respond_to do |format|
         format.html do
           @has_samples = @q.result.count.positive?
         end
         format.turbo_stream do
           @pagy, @samples = pagy(@q.result)
+          fields_for_namespace(namespace: @group, show_fields: params[:q] && params[:q][:metadata].to_i == 1)
         end
       end
     end

app/controllers/projects/samples_controller.rb

@@ -2,11 +2,13 @@
 
 module Projects
   # Controller actions for Samples
-  class SamplesController < Projects::ApplicationController
+  class SamplesController < Projects::ApplicationController # rubocop:disable Metrics/ClassLength
+    include Metadata
+
     before_action :sample, only: %i[show edit update destroy]
     before_action :current_page
 
-    def index
+    def index # rubocop:disable Metrics/AbcSize
       authorize! @project, to: :sample_listing?
 
       @q = load_samples.ransack(params[:q])
@@ -17,6 +19,10 @@ def index
         end
         format.turbo_stream do
           @pagy, @samples = pagy(@q.result)
+          fields_for_namespace(
+            namespace: @project.namespace,
+            show_fields: params[:q] && params[:q][:metadata].to_i == 1
+          )
         end
       end
     end
@@ -75,6 +81,10 @@ def destroy # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
             redirect_to namespace_project_samples_path(format: :html)
           end
           format.turbo_stream do
+            fields_for_namespace(
+              namespace: @project.namespace,
+              show_fields: params[:q] && params[:q][:metadata].to_i == 1
+            )
             render status: :ok, locals: { type: 'success',
                                           message: t('.success', sample_name: @sample.name,
                                                                  project_name: @project.namespace.human_name) }

app/views/dashboard/projects/index.html.erb

@@ -60,7 +60,7 @@
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
             <%= viral_icon(name: "magnifying_glass", classes: "h-5 w-5") %>
           </div>
-          <%= turbo_frame_tag "project_hidden_search_value" %>
+          <%= turbo_frame_tag "project_hidden_values" %>
           <%= f.search_field :namespace_name_cont,
                     "data-action": "filters#submit",
                     class:

app/views/dashboard/projects/index.turbo_stream.erb

@@ -57,6 +57,6 @@
   ) %>
 <% end %>
 
-<%= turbo_stream.update "project_hidden_search_value" do %>
+<%= turbo_stream.update "project_hidden_values" do %>
   <%= render Ransack::HiddenSortFieldComponent.new(@q) %>
 <% end %>

app/views/groups/samples/_table.html.erb

@@ -1,78 +1,126 @@
-<table class="min-w-full table-fixed dark:divide-slate-600">
-  <thead class="text-slate-700 bg-slate-50 dark:bg-slate-700 dark:text-slate-400">
+<div class="relative overflow-x-auto" data-turbo-temporary>
+  <table
+    class="
+      w-full
+      text-sm
+      text-left
+      rtl:text-right
+      text-slate-500
+      dark:text-slate-400
+    "
+  >
+    <thead
+      class="
+        text-xs
+        text-slate-700
+        uppercase
+        bg-slate-50
+        dark:bg-slate-700
+        dark:text-slate-400
+      "
+    >
     <tr>
-      <th scope="col" class="px-4 py-3 text-left">
+      <th
+        scope="col"
+        class="
+            px-6
+            py-3
+            whitespace-nowrap
+            text-left
+            bg-slate-50
+            dark:bg-slate-700
+            sticky
+            left-0
+            z-10
+          "
+      >
         <%= render Ransack::SortComponent.new(
           ransack_obj: @q,
           label: t(".sample"),
           url: sorting_url(@q, :name),
           field: :name
         ) %>
       </th>
-      <th scope="col" class="px-4 py-3 text-left cursor-not-allowed">
+      <th
+        scope="col"
+        class="px-6 py-3 whitespace-nowrap text-left cursor-not-allowed"
+      >
         <%= t(".project") %>
       </th>
-      <th scope="col" class="px-4 py-3 text-left">
+      <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
         <%= render Ransack::SortComponent.new(
           ransack_obj: @q,
           label: t(".created_at"),
           url: sorting_url(@q, :created_at),
           field: :created_at
         ) %>
       </th>
-      <th scope="col" class="px-4 py-3 text-left">
+      <th scope="col" class="px-6 py-3 whitespace-nowrap text-left">
         <%= render Ransack::SortComponent.new(
           ransack_obj: @q,
           label: t(".updated_at"),
           url: sorting_url(@q, :updated_at),
           field: :updated_at
         ) %>
       </th>
+      <% @fields.each do |column| %>
+        <th
+          scope="col"
+          class="px-6 py-3 text-left whitespace-nowrap cursor-not-allowed"
+        ><%= column %></th>
+      <% end %>
     </tr>
-  </thead>
-  <tbody
-    id="group-samples-table-body"
-    class="
-      bg-white
-      divide-y
-      divide-slate-200
-      dark:bg-slate-800
-      dark:divide-slate-700
-    "
-  >
+    </thead>
+    <tbody
+      id="group-samples-table-body"
+      class="
+        bg-white
+        divide-y
+        divide-slate-200
+        dark:bg-slate-800
+        dark:divide-slate-700
+      "
+    >
     <% samples.each do |sample| %>
       <tr
         id="<%= dom_id(sample) %>"
-        class="text-sm font-normal text-slate-500 dark:text-slate-400"
+        class="bg-white border-b dark:bg-slate-800 dark:border-slate-700"
       >
-        <td class="px-4 py-3 whitespace-nowrap"><%= link_to sample.name,
-          namespace_project_sample_path(
-            id: sample.id,
-            namespace_id: sample.project.namespace.parent.full_path,
-            project_id: sample.project.path
-          ),
-          data: {
-            turbo: false
-          },
-          class: "text-grey-900 dark:text-grey-100 font-semibold hover:underline" %>
+        <td class="px-6 py-3 whitespace-nowrap left-0 sticky bg-white dark:bg-slate-800">
+          <%= link_to sample.name,
+                      namespace_project_sample_path(
+                        id: sample.id,
+                        namespace_id: sample.project.namespace.parent.full_path,
+                        project_id: sample.project.path
+                      ),
+                      data: {
+                        turbo: false
+                      },
+                      class: "text-slate-900 dark:text-slate-100 font-semibold hover:underline" %>
         </td>
-        <td class="px-4 py-3 whitespace-nowrap">
+        <td class="px-6 py-3 whitespace-nowrap">
           <%= viral_tooltip(title: project_path(sample.project)) do %>
             <%= link_to sample.project.abbreviated_path,
-            project_path(sample.project),
-            data: {
-              turbo: false
-            },
-            class: "text-grey-900 dark:text-grey-100 font-semibold hover:underline" %>
+                        project_path(sample.project),
+                        data: {
+                          turbo: false
+                        },
+                        class: "text-slate-900 dark:text-slate-100 font-semibold hover:underline" %>
           <% end %>
         </td>
-        <td class="px-4 py-3 whitespace-nowrap">
+        <td class="px-6 py-3 whitespace-nowrap">
           <%= l(sample.created_at.localtime, format: :full_date) %>
         </td>
-        <td class="px-4 py-3 whitespace-nowrap">
+        <td class="px-6 py-3 whitespace-nowrap">
           <%= viral_time_ago(original_time: sample.updated_at) %>
         </td>
+        <% @fields.each do |column| %>
+          <td class="px-6 py-3 whitespace-nowrap">
+            <%= sample.metadata[column] %>
+          </td>
+        <% end %>
       </tr>
     <% end %>
-  </tbody>
-</table>
+    </tbody>
+  </table>
+</div>