From a94e9b2e74a3dcd88735c8958f80795a14fe2618 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 25 Aug 2022 13:06:53 +0200
Subject: [PATCH] Updated Audit log table view

refs. https://github.com/TryGhost/Toolbox/issues/356

- the readability of the Audit log table wasn't great as the very repetitive "actor" was the primary info
- the link to the actor (staff user) was missing
---
 .../components/settings/audit-log/table.hbs   | 78 +++++++++----------
 .../app/helpers/parse-audit-log-event.js      |  2 +-
 ghost/admin/app/styles/layouts/settings.css   | 47 +++++++----
 3 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/ghost/admin/app/components/settings/audit-log/table.hbs b/ghost/admin/app/components/settings/audit-log/table.hbs
index cf141f5cf7..a56cbf7904 100644
--- a/ghost/admin/app/components/settings/audit-log/table.hbs
+++ b/ghost/admin/app/components/settings/audit-log/table.hbs
@@ -1,59 +1,51 @@
 <table class="gh-list gh-audit-log-table">
     <thead>
         <tr>
-            <th>User</th>
-            <th>Event</th>
-            <th></th>
-            <th>Time</th>
+            <th>&nbsp;</th>
         </tr>
     </thead>
     <tbody>
         {{#each @events as |event|}}
         {{#let (parse-audit-log-event event) as |ev|}}
         <tr>
-            <div class="gh-list-data gh-list-cellwidth-30">
-                <div class="flex items-center">
-                    <span class="user-list-item-figure" style={{background-image-style (or ev.actor.profileImageUrl ev.actor.iconImage)}}>
-                        <span class="hidden">Photo of {{ev.actor.name}}</span>
-                    </span>
-                    <h3 class="ma0 pa0 gh-audit-log-name">{{ev.actor.name}}</h3>
-                </div>
-            </div>
-            <div class="gh-list-data gh-list-cellwidth-10 gh-audit-log-action">
-                <div class="gh-audit-log-container">
+            <div class="gh-list-data">
+                <div class="gh-audit-log-object flex items-center ma3">
                     <div class="gh-audit-log-icon">{{svg-jar ev.actionIcon}}</div>
-                    <div class="gh-audit-log-event">
-                        <span class="gh-audit-log-description">
-                            {{capitalize-first-letter ev.action}}
-                        </span>
+                    <div>
+                        <div class="gh-audit-log-description">
+                            <span>
+                                {{capitalize-first-letter ev.action}}: 
+                            </span>
+                            {{#if ev.contextResource}}
+                                <span>
+                                    <span>{{capitalize-first-letter ev.contextResource.first}}</span>
+                                    {{#if (not (eq ev.contextResource.first ev.contextResource.second))}}
+                                        <code>({{ev.contextResource.second}})</code>
+                                    {{/if}}
+                                </span>
+                            {{else if (or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name)}}
+                                {{#if ev.linkTarget}}
+                                    <LinkTo @route={{ev.linkTarget.route}} @models={{ev.linkTarget.models}} class="permalink fw6">
+                                        {{or ev.original.resource.title ev.original.resource.name}}
+                                    </LinkTo>
+                                {{else}}
+                                    <span>{{or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name}}</span>
+                                {{/if}}
+                            {{else}}
+                                <span class="midlightgrey">(unknown)</span>
+                            {{/if}}
+                            
+                            <span class="gh-audit-log-name">
+                                <span class="midgrey">&ndash; by </span>
+                                <LinkTo @route="settings.staff.user" @model={{ev.actor.slug}}>
+                                    {{ev.actor.name}}
+                                </LinkTo>
+                            </span>
+                        </div>
+                        <div class="gh-audit-log-datetime">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
                     </div>
                 </div>
             </div>
-            <div class="gh-list-data gh-audit-log-object">
-                <div class="gh-audit-log-container">
-                    {{#if ev.contextResource}}
-                        <span class="midlightgrey-d1">
-                            <span class="fw5">{{capitalize-first-letter ev.contextResource.first}}</span>
-                            {{#if (not (eq ev.contextResource.first ev.contextResource.second))}}
-                                <code>({{ev.contextResource.second}})</code>
-                            {{/if}}
-                        </span>
-                    {{else if (or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name)}}
-                        {{#if ev.linkTarget}}
-                            <LinkTo @route={{ev.linkTarget.route}} @models={{ev.linkTarget.models}} class="permalink">
-                                <strong>{{or ev.original.resource.title ev.original.resource.name}}</strong>
-                            </LinkTo>
-                        {{else}}
-                            <span class="midlightgrey-d1">
-                                <span class="fw5">{{or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name}}</span>
-                            </span>
-                        {{/if}}
-                    {{else}}
-                        <span class="midlightgrey">(unknown)</span>
-                    {{/if}}
-                </div>
-            </div>
-            <div class="gh-list-data midgrey">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
         </tr>
         {{/let}}
         {{/each}}
diff --git a/ghost/admin/app/helpers/parse-audit-log-event.js b/ghost/admin/app/helpers/parse-audit-log-event.js
index ef3b396346..1549268669 100644
--- a/ghost/admin/app/helpers/parse-audit-log-event.js
+++ b/ghost/admin/app/helpers/parse-audit-log-event.js
@@ -117,7 +117,7 @@ function getAction(ev) {
         }
     }
 
-    return `${ev.event} ${resourceType}`;
+    return `${resourceType} ${ev.event}`;
 }
 
 function getContextResource(ev) {
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index f183589ac1..b9d676ddfa 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -2870,7 +2870,6 @@ p.theme-validation-details {
 .gh-audit-log-container {
     display: flex;
     align-items: center;
-    padding: 7px 0;
 }
 
 .gh-audit-log-container strong {
@@ -2888,7 +2887,7 @@ p.theme-validation-details {
 .gh-audit-log-object code {
     background: none;
     border: none;
-    color: var(--middarkgrey);
+    color: var(--midgrey);
 }
 
 .gh-audit-log-dash {
@@ -2898,19 +2897,46 @@ p.theme-validation-details {
 }
 
 .gh-audit-log-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
+    width: 18px;
+    height: 18px;
+    margin: 0 20px 0 4px;
 }
 
 .gh-audit-log-icon svg path {
-    fill: var(--middarkgrey);
+    fill: var(--midgrey-l1);
 }
 
 .gh-audit-log-description {
-    font-size: 1.3rem;
-    color: var(--middarkgrey);
+    font-size: 1.4rem;
+    color: var(--darkgrey);
     white-space: nowrap;
+    margin-top: 2px;
+    font-weight: 500;
+}
+
+.gh-audit-log-description a {
+    font-weight: 700;
+}
+
+.gh-audit-log-name {
+    font-size: 1.35rem;
+    font-weight: 400;
+    margin-bottom: 0 !important;
+    color: var(--midgrey);
+}
+
+.gh-audit-log-name a {
+    color: var(--midgrey) !important;
+    font-weight: 400;
+}
+
+.gh-audit-log-name a:hover {
+    color: var(--darkgrey) !important;
+}
+
+.gh-audit-log-datetime {
+    font-size: 1.2rem;
+    color: var(--midlightgrey);
 }
 
 .gh-audit-log-table .user-list-item-figure {
@@ -2918,11 +2944,6 @@ p.theme-validation-details {
     width: 30px;
 }
 
-.gh-audit-log-name {
-    margin-bottom: 0 !important;
-    min-width: 160px;
-}
-
 @media (max-width: 620px) {
     .gh-audit-log-table .user-list-item-figure {
         display: none;