Refined link edit flow on Admin

refs https://github.com/TryGhost/Team/issues/2116

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>

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

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

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 }