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>

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}}
 

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) {

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}}

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) {

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);