From d4e336dc2a94ac5fb3efc0b6d41493171e6a02e0 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 25 Oct 2022 16:59:29 +0100
Subject: [PATCH] Further tweaks and refactoring to engagement bar

- Made a new function that checks if stubs are needed per tab
- Renamed the check for pagination to be a little more clear
- Made sure the pagination block is always to the right
- Made sure the pagination buttons don't show when there is no pagination

refs https://github.com/TryGhost/Team/issues/2149
---
 .../components/posts/post-activity-feed.hbs   | 50 ++++++++++---------
 .../components/posts/post-activity-feed.js    |  7 ++-
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/ghost/admin/app/components/posts/post-activity-feed.hbs b/ghost/admin/app/components/posts/post-activity-feed.hbs
index 719fb7ea39..2ff443ee7f 100644
--- a/ghost/admin/app/components/posts/post-activity-feed.hbs
+++ b/ghost/admin/app/components/posts/post-activity-feed.hbs
@@ -76,7 +76,7 @@
                     {{/let}}
                 {{/each}}
 
-                {{#if (not (compute (fn this.isPaginationNeeded eventsFetcher)))}}
+                {{#if (compute (fn this.areStubsNeeded eventsFetcher))}}
                     {{#let (compute (fn this.getAmountOfStubs eventsFetcher)) as |stubs|}}
                         {{#each stubs}}
                             <div class="gh-dashboard-list-item"></div>
@@ -94,36 +94,38 @@
                             {{svg-jar "filter"}}
                             See members
                         </LinkTo>
+                    {{else}}
+                        <div></div>
                     {{/if}}
 
                     <div class="gh-post-activity-feed-pagination">
-                        {{#if (compute (fn this.isPaginationNeeded eventsFetcher))}}
+                        {{#if (compute (fn this.isPaginationNotNeeded eventsFetcher))}}
                             Showing {{eventsFetcher.totalEvents}} in total
                         {{else}}
                             Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
+
+                            <div class="gh-post-activity-feed-pagination-group">
+                                <button
+                                    class="gh-post-activity-feed-pagination-button gh-post-activity-feed-prev-button"
+                                    type="button"
+                                    title="Previous page"
+                                    disabled={{compute (fn this.isPreviousButtonDisabled eventsFetcher)}}
+                                    {{on "click" eventsFetcher.loadPreviousPage}}
+                                >
+                                    {{svg-jar "arrow-left-pagination"}}
+                                </button>
+
+                                <button
+                                    class="gh-post-activity-feed-pagination-button gh-post-activity-feed-next-button"
+                                    type="button"
+                                    title="Next page"
+                                    disabled={{compute (fn this.isNextButtonDisabled eventsFetcher)}}
+                                    {{on "click" eventsFetcher.loadNextPage}}
+                                >
+                                    {{svg-jar "arrow-right-pagination"}}
+                                </button>
+                            </div>
                         {{/if}}
-
-                        <div class="gh-post-activity-feed-pagination-group">
-                            <button
-                                class="gh-post-activity-feed-pagination-button gh-post-activity-feed-prev-button"
-                                type="button"
-                                title="Previous page"
-                                disabled={{compute (fn this.isPreviousButtonDisabled eventsFetcher)}}
-                                {{on "click" eventsFetcher.loadPreviousPage}}
-                            >
-                                {{svg-jar "arrow-left-pagination"}}
-                            </button>
-
-                            <button
-                                class="gh-post-activity-feed-pagination-button gh-post-activity-feed-next-button"
-                                type="button"
-                                title="Next page"
-                                disabled={{compute (fn this.isNextButtonDisabled eventsFetcher)}}
-                                {{on "click" eventsFetcher.loadNextPage}}
-                            >
-                                {{svg-jar "arrow-right-pagination"}}
-                            </button>
-                        </div>
                     </div>
                 </div>
             </div>
diff --git a/ghost/admin/app/components/posts/post-activity-feed.js b/ghost/admin/app/components/posts/post-activity-feed.js
index 2cc2153075..9f2fdfc6f9 100644
--- a/ghost/admin/app/components/posts/post-activity-feed.js
+++ b/ghost/admin/app/components/posts/post-activity-feed.js
@@ -69,7 +69,12 @@ export default class PostActivityFeed extends Component {
     }
 
     @action
-    isPaginationNeeded({totalEvents}) {
+    isPaginationNotNeeded({totalEvents}) {
         return (totalEvents <= this._pageSize);
     }
+
+    @action
+    areStubsNeeded({totalEvents}) {
+        return totalEvents > this._pageSize || this.args.eventType === 'feedback';
+    }
 }