From 11bea8d9f00c221c63001699e9b213b397d459a8 Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Fri, 21 Oct 2022 14:53:02 +0100
Subject: [PATCH] Better matching the pagination styles across modules for post
 analytics

- Careful of flags, having different paginations depending on those
- Little stylistic adjustment to how pagination is shown on engagement bar
- Quite a few feature flag checks to make sure the right style is showing

refs https://github.com/TryGhost/Team/issues/2136
---
 .../app/components/posts/links-table.hbs      | 77 +++++++++++++++----
 .../components/posts/post-activity-feed.hbs   |  2 +-
 ghost/admin/app/styles/layouts/content.css    |  3 +-
 3 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/ghost/admin/app/components/posts/links-table.hbs b/ghost/admin/app/components/posts/links-table.hbs
index ac4e3d128a..1c74a5f4ec 100644
--- a/ghost/admin/app/components/posts/links-table.hbs
+++ b/ghost/admin/app/components/posts/links-table.hbs
@@ -88,22 +88,69 @@
             <div class="gh-links-pagination">
                 {{#if (feature "fixNewsletterLinks")}}
                 <span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span>
-                {{else}}
-                <div class="gh-links-pagination-progress">
-                    Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
-                </div>
+
+                    {{#if (not (feature "audienceFeedback"))}}
+                        <div class="gh-links-pagination-actions">
+                            <button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
+                                {{svg-jar "arrow-left-pagination"}}
+                                Previous
+                            </button>
+                            <button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
+                                Next
+                                {{svg-jar "arrow-right-pagination"}}
+                            </button>
+                        </div>
+                    {{/if}}
                 {{/if}}
-                {{#if this.showPagination}}
-                <div class="gh-links-pagination-actions">
-                    <button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
-                        {{svg-jar "arrow-left-pagination"}}
-                        Previous
-                    </button>
-                    <button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
-                        Next
-                        {{svg-jar "arrow-right-pagination"}}
-                    </button>
-                </div>
+
+                {{#if (and (not (feature "fixNewsletterLinks")) (not (feature "audienceFeedback")))}}
+                    <div class="gh-links-pagination-progress">
+                        Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
+                    </div>
+                    {{#if this.showPagination}}
+                        <div class="gh-links-pagination-actions">
+                            <button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
+                                {{svg-jar "arrow-left-pagination"}}
+                                Previous
+                            </button>
+                            <button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
+                                Next
+                                {{svg-jar "arrow-right-pagination"}}
+                            </button>
+                        </div>
+                    {{/if}}
+                {{/if}}
+
+                {{#if (feature "audienceFeedback")}}
+                    <div class="gh-post-activity-feed-pagination">
+                        {{#if (feature "fixNewsletterLinks")}}
+                            Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
+                        {{/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={{this.disablePreviousPage}}
+                                {{on "click" this.openPreviousPage}}
+                            >
+                                {{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={{this.disableNextPage}}
+                                {{on "click" this.openNextPage}}
+                            >
+                                {{svg-jar "arrow-right-pagination"}}
+                            </button>
+                        </div>
+                        {{#if (not (feature "fixNewsletterLinks"))}}
+                            Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
+                        {{/if}}
+                    </div>
                 {{/if}}
             </div>
         {{/if}}
diff --git a/ghost/admin/app/components/posts/post-activity-feed.hbs b/ghost/admin/app/components/posts/post-activity-feed.hbs
index 18add2128c..d4f47fa849 100644
--- a/ghost/admin/app/components/posts/post-activity-feed.hbs
+++ b/ghost/admin/app/components/posts/post-activity-feed.hbs
@@ -61,7 +61,7 @@
                     </button>
                 </div>
 
-                Showing {{eventsFetcher.previousEvents}} - {{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
+                Showing {{eventsFetcher.previousEvents}}-{{eventsFetcher.shownEvents}} of {{eventsFetcher.totalEvents}}
             </div>
 
             {{#if (and @linkQuery @linkText)}}
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index a86b366caf..ae0fb3b272 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -857,7 +857,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 .gh-post-analytics-split {
     display: flex;
     gap: 2.4rem;
-    min-height: 440px;
+    min-height: 445px;
 }
 
 .gh-newsletter-clicks-header {
@@ -1696,6 +1696,7 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
     gap: 16px;
     margin-top: 16px;
     border-top: 1px solid #eceef0;
+    padding: 18px 0;
 }
 
 .gh-post-activity-feed-pagination {