Merged similar history events (#16865)

closes https://github.com/TryGhost/Team/issues/2463

- it merges the similar history events by adding additional properties
to the events data
- `skip` was added to the current event when the next event is similar to
it, so that the event isn't output on the frontend
- `count` was added to the last item of the similar events and it's used
for outputting the number of repeated similar events

ghost/admin/app/components/settings/history/table.hbs

@@ -7,6 +7,7 @@
     <tbody>
         {{#each @events as |event|}}
         {{#let (parse-history-event event) as |ev|}}
+        {{#unless ev.original.skip}}
         <tr>
             <div class="gh-list-data">
                 <div class="gh-history-object flex items-center ma3">
@@ -47,6 +48,7 @@
                                 {{else}}
                                     <span class="midlightgrey">(unknown)</span>
                                 {{/if}}
+                                {{#if ev.original.count}}{{ev.original.count}} times{{/if}}
                             {{/unless}}
 
                             <span class="gh-history-name">
@@ -65,6 +67,7 @@
                 </div>
             </div>
         </tr>
+        {{/unless}}
         {{/let}}
         {{/each}}
     </tbody>

ghost/admin/app/helpers/history-event-fetcher.js

@@ -91,11 +91,30 @@ export default class HistoryEventFetcher extends Resource {
                 this.hasReachedEnd = true;
             }
 
-            actions.forEach((a) => {
+            let count = 1;
+
+            actions.reverse().forEach((a, index) => {
+                const nextAction = actions[index + 1] || null;
+
+                // depending on the similarity, add additional properties to be used on the frontend for grouping
+                // skip - used for hiding the event on the frontend
+                // count - the number of similar events which is added to the last item
+                if (nextAction || (!nextAction && actions[index - 1].skip)) {
+                    if (nextAction && a.resource_id === nextAction.resource_id && a.event === nextAction.event) {
+                        a.skip = true;
+                        count += 1;
+                    } else {
+                        if (count > 1) {
+                            a.count = count.toString();
+                            count = 1;
+                        }
+                    }
+                }
+
                 a.context = JSON.parse(a.context);
             });
 
-            this.data.push(...actions);
+            this.data.push(...actions.reverse());
         } catch (e) {
             this.isError = true;
 

ghost/admin/app/styles/layouts/settings.css

@@ -3261,7 +3261,6 @@ p.theme-validation-details {
     color: var(--darkgrey);
     white-space: nowrap;
     margin-top: 2px;
-    font-weight: 500;
 }
 
 .gh-history-description a {

ghost/admin/app/templates/settings/history.hbs

@@ -39,7 +39,7 @@
         </div>
     </GhCanvasHeader>
     <div class="view-container">
-        {{#let (history-event-fetcher filter=(history-event-filter excludedEvents=this.fullExcludedEvents excludedResources=this.fullExcludedResources user=this.user) pageSize=50) as |eventsFetcher|}}
+        {{#let (history-event-fetcher filter=(history-event-filter excludedEvents=this.fullExcludedEvents excludedResources=this.fullExcludedResources user=this.user) pageSize=200) as |eventsFetcher|}}
             {{#if eventsFetcher.data}}
             <div class="gh-list-scrolling">
                 <Settings::History::Table @events={{eventsFetcher.data}} />