From 097b23252416209f45d44290e3a1395ec90c2172 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Fri, 14 Oct 2022 18:09:42 +0200
Subject: [PATCH] Fix newsletter links (#15621)

Added a button for editing links in newsletters after sending to the
Post analytics page

Co-authored-by: Rishabh <zrishabhgarg@gmail.com>
---
 .../admin/app/components/posts/analytics.hbs  |  2 +-
 ghost/admin/app/components/posts/analytics.js | 17 ++++++++
 .../app/components/posts/links-table.hbs      | 26 +++++++++++
 .../admin/app/components/posts/links-table.js | 43 ++++++++++++++++++-
 ghost/admin/app/styles/layouts/content.css    | 19 +++++++-
 5 files changed, 103 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/components/posts/analytics.hbs b/ghost/admin/app/components/posts/analytics.hbs
index f174ac904c..00b5f0f6a2 100644
--- a/ghost/admin/app/components/posts/analytics.hbs
+++ b/ghost/admin/app/components/posts/analytics.hbs
@@ -104,7 +104,7 @@
             {{#if (is-empty this.links) }}
                 {{!-- Empty state --}}
             {{else}}
-                <Posts::LinksTable @links={{this.links}} />
+                <Posts::LinksTable @links={{this.links}} @updateLink={{this.updateLink}} />
             {{/if}}
         {{/if}}
 
diff --git a/ghost/admin/app/components/posts/analytics.js b/ghost/admin/app/components/posts/analytics.js
index e751179533..e784d9b15b 100644
--- a/ghost/admin/app/components/posts/analytics.js
+++ b/ghost/admin/app/components/posts/analytics.js
@@ -94,6 +94,23 @@ export default class Analytics extends Component {
         this.sortColumn = column;
     }
 
+    @action
+    updateLink(linkId, linkTo) {
+        this.links = this.links?.map((link) => {
+            if (link.link.link_id === linkId) {
+                return {
+                    ...link,
+                    link: {
+                        ...link.link,
+                        to: this.utils.cleanTrackedUrl(linkTo, false),
+                        title: this.utils.cleanTrackedUrl(linkTo, true)
+                    }
+                };
+            }
+            return link;
+        });
+    }
+
     @action
     loadData() {
         if (this.showSources) {
diff --git a/ghost/admin/app/components/posts/links-table.hbs b/ghost/admin/app/components/posts/links-table.hbs
index 8095e6966c..8f861b70b2 100644
--- a/ghost/admin/app/components/posts/links-table.hbs
+++ b/ghost/admin/app/components/posts/links-table.hbs
@@ -13,7 +13,33 @@
         </div>
         {{#each this.visibleLinks as |link|}}
             <div class="gh-links-list-item">
+                {{#if (feature "fixNewsletterLinks")}}
+                <div class="flex items-center">
+                    {{#if link.isEditing}}
+                        <input
+                            aria-label="Link"
+                            type="text"
+                            class="gh-input"
+                            placeholder={{link.link.to}}
+                            value={{link.link.to}}
+                            maxlength="300"
+                            {{on "blur" this.setLink}}
+                            {{on-key "Enter" this.blurElement}}
+                            {{on-key "Escape" this.cancelEdit}}
+                            {{autofocus}}
+                            data-prevent-escape-close-modal="true"
+                        />
+                    {{else}}
+                        <a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">
+                            {{link.link.title}}
+                        </a>
+                        <button type="button" class="flex items-center" aria-label="Edit link" {{on "click" (fn this.editLink link.link.link_id)}}>{{svg-jar "pen"}}</button>
+                    {{/if}}
+                    {{!-- <a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a> --}}
+                </div>
+                {{else}}
                 <a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a>
+                {{/if}}
                 <p class="gh-links-list-clicks">{{link.count.clicks}}</p>
             </div>
         {{/each}}
diff --git a/ghost/admin/app/components/posts/links-table.js b/ghost/admin/app/components/posts/links-table.js
index 544bf77de6..1452fa33d9 100644
--- a/ghost/admin/app/components/posts/links-table.js
+++ b/ghost/admin/app/components/posts/links-table.js
@@ -7,12 +7,51 @@ const PAGE_SIZE = 5;
 export default class LinksTable extends Component {
     @tracked page = 1;
 
+    @tracked editingLink = false;
+
+    @action
+    blurElement(event) {
+        if (!event.shiftKey) {
+            event.preventDefault();
+            event.target.blur();
+        }
+    }
+
+    @action
+    editLink(linkId) {
+        this.editingLink = linkId;
+    }
+
+    @action
+    cancelEdit(event) {
+        event.preventDefault();
+        this.editingLink = null;
+        // event.target.value = this.args.post[property];
+        // event.target.blur();
+    }
+
+    @action
+    setLink(event) {
+        event.preventDefault();
+        this.args.updateLink(this.editingLink, event.target.value);
+        this.editingLink = null;
+        // const title = event.target.value;
+        // this.args.post.title = title.trim();
+        // this.args.post.save();
+        // this.editingLink = false;
+    }
+
     get links() {
         return this.args.links;
     }
 
     get visibleLinks() {
-        return this.links.slice(this.startOffset - 1, this.endOffset);
+        return this.links.slice(this.startOffset - 1, this.endOffset).map((link) => {
+            return {
+                ...link,
+                isEditing: this.editingLink === link.link.link_id
+            };
+        });
     }
 
     get startOffset() {
@@ -42,7 +81,7 @@ export default class LinksTable extends Component {
     get disableNextPage() {
         return this.page === this.totalPages;
     }
-    
+
     @action
     openPreviousPage() {
         if (this.disablePreviousPage) {
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index c4e197e5cd..6db7c47c31 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -1000,7 +1000,7 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 
 .gh-links-list-item a {
     margin: 0;
-    padding: 0 32px 0 0;
+    padding: 0;
     color: var(--darkgrey);
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1012,6 +1012,23 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     color: var(--midgrey-d2);
 }
 
+.gh-links-list-item svg {
+    display: none;
+    width: 14px;
+    margin-left: 8px;
+    color: var(--midgrey);
+    cursor: pointer;
+    animation: fade-in 0.3s;
+}
+
+.gh-links-list-item:hover svg {
+    display: inline;
+}
+
+.gh-links-list-item .gh-input {
+    animation: fade-in .2s ease-in-out;
+}
+
 .gh-links-list-clicks {
     margin: 0;
     color: var(--darkgrey);