reworked audit logs table to align with error reports

Author: Oaphi

app/assets/stylesheets/audit_logs.scss

@@ -1,7 +1,9 @@
 @import 'variables';
 
 .audit-log-filters {
-  .form-group-horizontal .actions, .select2-container {
+
+  .form-group-horizontal .actions,
+  .select2-container {
     height: 37px;
     margin: 4px 0px;
   }
@@ -34,3 +36,22 @@
 .audit-log-table-wrapper {
   overflow: scroll;
 }
+
+.audit-log-summary {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  word-break: break-word;
+
+  &[open] {
+    margin: 0;
+  }
+
+  &::before {
+    top: unset;
+  }
+
+  .details {
+    flex: 1;
+  }
+}

app/helpers/admin_helper.rb

@@ -1,3 +1,20 @@
-# Provides helper methods for use by views under <tt>AdminController</tt>.
 module AdminHelper
+  # Renders related model for a given log
+  # @param log [AuditLog] log to render related model for
+  # @return [String] rendered related model
+  def rendered_related(log)
+    return '' unless log.related.present?
+
+    if log.related.is_a?(User)
+      return user_link(log.related)
+    end
+
+    base = "#{log.related_type} ##{log.related_id}"
+
+    if log.related.respond_to?(:name)
+      "#{base} (#{log.related.name})"
+    else
+      base
+    end
+  end
 end

app/views/admin/_audit_log.html.erb

@@ -0,0 +1,41 @@
+<%#
+   "Renders an audit log item
+
+    Variables:
+      log : AuditLog to render
+"%>
+
+<details class="audit-log">
+  <summary class="audit-log-summary">
+    <span class="details">
+      <strong><%= log.event_type.humanize %></strong>
+      <br/>
+      <span class="has-font-size-caption has-color-tertiary-600">
+        by <%= user_link(log.user) %><% if log.related.present? %>
+          for <%= rendered_related(log) %>
+        <% end %>
+      </span>
+    </span>
+    <span class="has-padding-right-2 has-float-right has-color-tertiary-600"
+          title="<%= log.created_at.iso8601 %>">
+      <%= time_ago_in_words(log.created_at.iso8601) %> ago
+    </span>
+  </summary>
+
+  <p>
+    <strong><%= t('g.type').capitalize %>:</strong>
+    <%= log.log_type.humanize %><br/>
+
+    <strong><%= t('g.user').capitalize %>:</strong>
+    <%= user_link(log.user) %><br/>
+
+    <% if log.related.present? %>
+      <strong><%= t('g.related').capitalize %>:</strong>
+      <%= rendered_related(log) %><br/>
+    <% end %>
+  </p>
+
+  <% if log.comment.present? %>
+    <pre><%= log.comment %></pre>
+  <% end %>
+</details>

app/views/admin/audit_logs.html.erb

@@ -48,9 +48,9 @@
   </div>
 </div>
 
-<div class="audit-log-table-wrapper">
-  <%= render 'log_table' %>
-</div>
+<% @logs.each do |log| %>
+  <%= render 'admin/audit_log', log: log %>
+<% end %>
 
 <div class="has-padding-top-4">
   <%= will_paginate @logs, renderer: BootstrapPagination::Rails %>