Fixed showing actor icons for deleted actors

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

- if an actor has been deleted, their icon would just be blank
- we want to show the default user icon
- to accommodate this, and to improve some code along the way, I've also
  added `include=actor` to the API request so we get the actor inline in
  the response instead of sending off another request
- I should really switch to using models + the store at some point to
  cleanup parsing all the API responses manually

ghost/admin/app/components/settings/audit-log/table.hbs

@@ -10,15 +10,17 @@
         <tr>
             <div class="gh-list-data">
                 <div class="gh-audit-log-object flex items-center ma3">
-                    <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 class="user-list-item-figure" style={{background-image-style ev.actorIcon}}>
+                        {{#if ev.actor.name}}
+                            <span class="hidden">Photo of {{ev.actor.name}}</span>
+                        {{/if}}
                         <div class="gh-audit-log-icon">{{svg-jar ev.actionIcon}}</div>
                     </span>
                     {{!--  --}}
                     <div>
                         <div class="gh-audit-log-description">
                             <span>
-                                {{capitalize-first-letter ev.action}}: 
+                                {{capitalize-first-letter ev.action}}:
                             </span>
                             {{#if ev.contextResource}}
                                 <span>
@@ -38,12 +40,16 @@
                             {{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>
+                                {{#if ev.actorLinkTarget}}
+                                    <LinkTo @route={{ev.actorLinkTarget.route}} @models={{ev.actorLinkTarget.models}}>
+                                        {{ev.actor.name}}
+                                    </LinkTo>
+                                {{else}}
+                                    (deleted user)
+                                {{/if}}
                             </span>
                         </div>
                         <div class="gh-audit-log-datetime">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>

ghost/admin/app/helpers/audit-log-event-fetcher.js

@@ -76,7 +76,7 @@ export default class AuditLogEventFetcher extends Resource {
 
             const url = this.ghostPaths.url.api('actions');
             const data = Object.assign({}, queryParams, {
-                include: 'resource',
+                include: 'actor,resource',
                 limit: this.args.named.pageSize
             });
             const {actions} = yield this.ajax.request(url, {data});

ghost/admin/app/helpers/parse-audit-log-event.js

@@ -2,28 +2,79 @@ import Helper from '@ember/component/helper';
 import {inject as service} from '@ember/service';
 
 export default class ParseAuditLogEvent extends Helper {
-    @service store;
+    @service ghostPaths;
 
     compute([ev]) {
         const action = getAction(ev);
         const actionIcon = getActionIcon(ev);
-        const getActor = () => this.store.findRecord(ev.actor_type, ev.actor_id, {reload: false});
         const contextResource = getContextResource(ev);
         const linkTarget = getLinkTarget(ev);
 
+        const actor = getActor(ev);
+        const actorLinkTarget = getActorLinkTarget(ev);
+
+        const assetRoot = this.ghostPaths.assetRoot.replace(/\/$/, '');
+        const actorIcon = getActorIcon(ev, assetRoot);
+
         return {
-            get actor() {
-                return getActor();
-            },
             contextResource,
             linkTarget,
             actionIcon,
             action,
+            actor,
+            actorIcon,
+            actorLinkTarget,
             original: ev
         };
     }
 }
 
+function getActor(ev) {
+    if (!ev.actor.id) {
+        return null;
+    }
+
+    return ev.actor;
+}
+
+function getActorIcon(ev, assetRoot) {
+    if (!ev.actor.id) {
+        return `${assetRoot}/img/user-image.png`;
+    }
+
+    return ev.actor.image;
+}
+
+function getActorLinkTarget(ev) {
+    const actor = getActor(ev);
+    if (!actor) {
+        return null;
+    }
+
+    switch (ev.actor_type) {
+    case 'integration':
+        if (!actor.id) {
+            return null;
+        }
+
+        return {
+            route: 'settings.integration',
+            models: [actor.id]
+        };
+    case 'user':
+        if (!actor.slug) {
+            return null;
+        }
+
+        return {
+            route: 'settings.staff.user',
+            models: [actor.slug]
+        };
+    }
+
+    return null;
+}
+
 function getLinkTarget(ev) {
     let resourceType = ev.resource_type;