Show staff action log details in a modal

app/assets/javascripts/admin/controllers/admin_logs_staff_action_logs_controller.js

@@ -20,10 +20,6 @@ Discourse.AdminLogsStaffActionLogsController = Ember.ArrayController.extend(Disc
     });
   }.observes('filters.action_name', 'filters.staff_user', 'filters.target_user', 'filters.subject'),
 
-  toggleFullDetails: function(target) {
-    target.set('showFullDetails', !target.get('showFullDetails'));
-  },
-
   filtersExists: function() {
     return (_.size(this.get('filters')) > 0);
   }.property('filters.action_name', 'filters.staff_user', 'filters.target_user', 'filters.subject'),

app/assets/javascripts/admin/controllers/admin_staff_action_log_details_controller.js

@@ -0,0 +1,10 @@
+/**
+  The modal for viewing the details of a staff action log record.
+
+  @class AdminStaffActionLogDetailsController
+  @extends Discourse.Controller
+  @namespace Discourse
+  @uses Discourse.ModalFunctionality
+  @module Discourse
+**/
+Discourse.AdminStaffActionLogDetailsController = Discourse.ObjectController.extend(Discourse.ModalFunctionality, {});

app/assets/javascripts/admin/models/staff_action_log.js

@@ -17,7 +17,7 @@ Discourse.StaffActionLog = Discourse.Model.extend({
     var formatted = "";
     formatted += this.format('email', 'email');
     formatted += this.format('admin.logs.staff_actions.ip_address', 'ip_address');
-    if (!this.get('useModalForDetails')) {
+    if (!this.get('useCustomModalForDetails')) {
       formatted += this.format('admin.logs.staff_actions.new_value', 'new_value');
       formatted += this.format('admin.logs.staff_actions.previous_value', 'previous_value');
     }
@@ -33,6 +33,10 @@ Discourse.StaffActionLog = Discourse.Model.extend({
   },
 
   useModalForDetails: function() {
+    return (this.get('details') && this.get('details').length > 0);
+  }.property('action_name'),
+
+  useCustomModalForDetails: function() {
     return _.contains(['change_site_customization', 'delete_site_customization'], this.get('action_name'));
   }.property('action_name')
 });

app/assets/javascripts/admin/routes/admin_logs_routes.js

@@ -35,6 +35,11 @@ Discourse.AdminLogsStaffActionLogsRoute = Discourse.Route.extend({
 
   events: {
     showDetailsModal: function(logRecord) {
+      Discourse.Route.showModal(this, 'admin_staff_action_log_details', logRecord);
+      this.controllerFor('modal').set('modalClass', 'log-details-modal');
+    },
+
+    showCustomDetailsModal: function(logRecord) {
       Discourse.Route.showModal(this, logRecord.action_name + '_details', logRecord);
       this.controllerFor('modal').set('modalClass', 'tabbed-modal log-details-modal');
     }

app/assets/javascripts/admin/templates/logs/details_modal.js.handlebars

@@ -0,0 +1,6 @@
+<div class="modal-body">
+  <pre>{{details}}</pre>
+</div>
+<div class="modal-footer">
+  <button class='btn btn-primary' {{action closeModal}}>{{i18n close}}</button>
+</div>

app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars

@@ -17,15 +17,11 @@
 <div class="col value created_at">{{unboundAgeWithTooltip created_at}}</div>
 <div class="col value details">
   {{{formattedDetails}}}
+  {{#if useCustomModalForDetails}}
+    <a {{action showCustomDetailsModal this}}>{{i18n admin.logs.staff_actions.show}}</a>
+  {{/if}}
   {{#if useModalForDetails}}
     <a {{action showDetailsModal this}}>{{i18n admin.logs.staff_actions.show}}</a>
-  {{else}}
-    {{#if showFullDetails}}
-      <a {{action toggleFullDetails this}}>{{i18n less}}</a><br/>
-      {{details}}
-    {{else}}
-      <a {{action toggleFullDetails this}}>{{i18n more}}</a>
-    {{/if}}
   {{/if}}
 </div>
 <div class="col value context">{{context}}</div>

app/assets/javascripts/admin/views/modals/admin_staff_action_log_details_view.js

@@ -0,0 +1,12 @@
+/**
+  A modal view for details of a staff action log record in a modal.
+
+  @class AdminStaffActionLogDetailsView
+  @extends Discourse.ModalBodyView
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.AdminStaffActionLogDetailsView = Discourse.ModalBodyView.extend({
+  templateName: 'admin/templates/logs/details_modal',
+  title: I18n.t('admin.logs.staff_actions.modal_title')
+});