Improved Audit log filtering UI

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

- the existing structure of 1 checkbox per resource was becoming unsustainable
  as we added events for more resources
- instead, we're going to group resources together into categories so
  they can be disabled/enabled together
- this implements that, and also enables showing Tier and Offer events
  now we have something that works nicely

ghost/admin/app/components/settings/audit-log/event-filter.hbs

@@ -34,7 +34,7 @@
                             id="resource-type-{{idx}}"
                             name="resourceTypes"
                             class="gh-input post-settings-featured"
-                            {{on "input" (fn this.toggleResourceType type.event)}}>
+                            {{on "input" (fn this.toggleResourceType type.targets)}}>
                         <span class="input-toggle-component"></span>
                         <p>{{type.name}}</p>
                     </label>

ghost/admin/app/components/settings/audit-log/event-filter.js

@@ -8,15 +8,12 @@ const ALL_EVENT_TYPES = [
 ];
 
 const ALL_RESOURCE_TYPES = [
-    {event: 'post', name: 'Posts'},
-    {event: 'page', name: 'Pages'},
-    {event: 'tag', name: 'Tags'},
-    {event: 'label', name: 'Member labels'},
-    {event: 'user', name: 'Users'},
-    {event: 'setting', name: 'Settings'},
-    {event: 'integration', name: 'Integrations'},
-    {event: 'api_key', name: 'API keys'},
-    {event: 'webhook', name: 'Webhooks'}
+    {targets: 'post', name: 'Posts'},
+    {targets: 'page', name: 'Pages'},
+    {targets: 'tag', name: 'Tags'},
+    {targets: 'label,member', name: 'Members'},
+    {targets: 'offer,product', name: 'Tiers & offers'},
+    {targets: 'api_key,integration,setting,user,webhook', name: 'Settings & users'}
 ];
 
 export default class AuditLogEventFilter extends Component {
@@ -34,12 +31,12 @@ export default class AuditLogEventFilter extends Component {
     }
 
     get resourceTypes() {
-        const excludedEvents = (this.args.excludedResources || '').split(',');
+        const excludedResources = (this.args.excludedResources || '').split(',');
 
         return ALL_RESOURCE_TYPES.map(type => ({
-            event: type.event,
+            targets: type.targets,
             name: type.name,
-            isSelected: !excludedEvents.includes(type.event)
+            isSelected: !type.targets.split(',').every(t => excludedResources.includes(t))
         }));
     }
 
@@ -62,12 +59,15 @@ export default class AuditLogEventFilter extends Component {
 
     @action
     toggleResourceType(resourceType) {
-        const excludedResources = new Set(this.resourceTypes.reject(type => type.isSelected).map(type => type.event));
+        const resourceTypeElements = resourceType.split(',');
+        const excludedResources = new Set(this.resourceTypes.reject(type => type.isSelected).flatMap(type => type.targets.split(',')));
 
-        if (excludedResources.has(resourceType)) {
-            excludedResources.delete(resourceType);
-        } else {
-            excludedResources.add(resourceType);
+        for (const resource of resourceTypeElements) {
+            if (excludedResources.has(resource)) {
+                excludedResources.delete(resource);
+            } else {
+                excludedResources.add(resource);
+            }
         }
 
         this.excludedResources = Array.from(excludedResources).join(',');

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

@@ -26,7 +26,7 @@ export default class AuditLogEventFilter extends Helper {
             filterParts.push(`event:-[${excludedEventsArray.join(',')}]`);
         }
 
-        const IGNORED_RESOURCES = ['offer', 'product'];
+        const IGNORED_RESOURCES = [];
         const excludedResourcesArray = Array.from(excludedResourcesSet).concat(IGNORED_RESOURCES).reject(isBlank);
         if (excludedResourcesArray.length > 0) {
             filterParts.push(`resource_type:-[${excludedResourcesArray.join(',')}]`);