From 25cbbff81c5febd94d9464d17f6e5806d233ce0d Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Fri, 21 Oct 2022 15:39:28 +0530
Subject: [PATCH] Refined link edit flow on Admin

refs https://github.com/TryGhost/Team/issues/2116
---
 .../app/components/posts/links-table.hbs      | 31 ++++++++------
 .../admin/app/components/posts/links-table.js | 41 +++++++------------
 .../app/components/posts/old-analytics.hbs    |  1 -
 ghost/admin/app/styles/layouts/content.css    |  4 ++
 4 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/ghost/admin/app/components/posts/links-table.hbs b/ghost/admin/app/components/posts/links-table.hbs
index 5f99136533..523f27cb9d 100644
--- a/ghost/admin/app/components/posts/links-table.hbs
+++ b/ghost/admin/app/components/posts/links-table.hbs
@@ -35,24 +35,31 @@
                             placeholder={{link.link.to}}
                             value={{link.link.to}}
                             maxlength="300"
-                            {{on "blur" this.setLink}}
-                            {{on-key "Enter" this.blurElement}}
+                            {{on "input" this.updateLinkValue}}
+                            {{on "blur" this.handleBlur}}
+                            {{on-key "Enter" this.setLink}}
                             {{on-key "Escape" this.cancelEdit}}
                             {{autofocus}}
                             data-prevent-escape-close-modal="true"
                         />
                         {{#if (eq this.showError link.link.link_id)}}
-                            <GhTaskButton
-                            @buttonText="Retry"
-                            @task={{this.setLink}}
-                            @successText="Link updated"
-                            @class="gh-btn gh-btn-red gh-btn-icon" />
+                            <button
+                                class="gh-btn gh-btn-red gh-btn-icon gh-links-list-item-update-button"
+                                type="button"
+                                {{on "mouseup" this.setLink}}
+                                data-test-button="cancel-webhook"
+                            >
+                                <span>Retry</span>
+                            </button>
                         {{else}}
-                            <GhTaskButton
-                            @buttonText="Update"
-                            @task={{this.updateLinks}}
-                            @successText="Link updated"
-                            @class="gh-btn gh-btn-green gh-btn-icon" />
+                            <button
+                                class="gh-btn gh-btn-green gh-btn-icon gh-links-list-item-update-button"
+                                type="button"
+                                {{on "mouseup" this.setLink}}
+                                data-test-button="cancel-webhook"
+                            >
+                                <span>Update</span>
+                            </button>
                         {{/if}}
                         </div>
                         <span class="gh-links-list-item-error">Please enter a valid link</span>
diff --git a/ghost/admin/app/components/posts/links-table.js b/ghost/admin/app/components/posts/links-table.js
index 4c1a912b09..ac9be92e9d 100644
--- a/ghost/admin/app/components/posts/links-table.js
+++ b/ghost/admin/app/components/posts/links-table.js
@@ -10,32 +10,40 @@ export default class LinksTable extends Component {
 
     @tracked editingLink = null;
     @tracked showError = null;
+    @tracked _linkValue = '';
 
     @action
-    blurElement(event) {
-        if (!event.shiftKey) {
-            event.preventDefault();
-            event.target.blur();
+    handleBlur(event) {
+        event?.preventDefault();
+        if (!event?.relatedTarget?.matches('.gh-links-list-item-update-button')) {
+            this.cancelEdit();
         }
     }
 
     @action
     editLink(linkId) {
         this.editingLink = linkId;
+        const linkTo = this.links.find(link => link.link.link_id === linkId)?.link?.to;
+        this._linkValue = linkTo || '';
     }
 
     @action
     cancelEdit(event) {
-        event.preventDefault();
+        event?.preventDefault();
         this.editingLink = null;
         this.showError = null;
     }
 
+    @action
+    updateLinkValue(event) {
+        this._linkValue = event.target.value;
+    }
+
     @action
     setLink(event) {
-        event.preventDefault();
+        event?.preventDefault();
         try {
-            const newUrl = new URL(event.target.value);
+            const newUrl = new URL(this._linkValue);
             const linkObj = this.links.find((_link) => {
                 return _link.link.link_id === this.editingLink;
             });
@@ -50,25 +58,6 @@ export default class LinksTable extends Component {
         }
     }
 
-    @task
-    *updateLinks() {
-        try {
-            const newUrl = new URL(event.target.value);
-            const linkObj = this.links.find((_link) => {
-                return _link.link.link_id === this.editingLink;
-            });
-            // Only call update if the new link is different from current link
-            if (linkObj.link.to !== newUrl.href) {
-                yield this.args.updateLinkTask.perform(this.editingLink, newUrl.href);
-            }
-            this.editingLink = null;
-            this.showError = null;
-            return true;
-        } catch (e) {
-            this.showError = this.editingLink;
-        }
-    }
-
     get links() {
         return this.args.links;
     }
diff --git a/ghost/admin/app/components/posts/old-analytics.hbs b/ghost/admin/app/components/posts/old-analytics.hbs
index 8642832fb5..08fb739a98 100644
--- a/ghost/admin/app/components/posts/old-analytics.hbs
+++ b/ghost/admin/app/components/posts/old-analytics.hbs
@@ -100,7 +100,6 @@
                 <Posts::LinksTable
                     @links={{this.links}}
                     @updateLink={{this.updateLink}}
-                    @updateLinkTask={{this._updateLinks}}
                     @showSuccess={{this.showSuccess}}
                 />
             {{/if}}
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 562d7b70eb..1b272ef3cc 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -1177,6 +1177,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
     display: inline;
 }
 
+.gh-links-list-item-update-button span {
+    pointer-events: none;
+}
+
 @keyframes fade-in-out {
     0% { opacity: 0; }
     20% { opacity: 1 }