Fix a few issues, including modal sizing, ajax error handling, auto-populating link queries.

src/javascripts/app.js

@@ -264,16 +264,12 @@ const App = (function() {
         },
 
         action_ajax: async endpoint => {
-            return await new Promise(resolve => {
+            try {
-                window.appThis.ajax
+                return await window.appThis.ajax.apply(window.appThis, endpoint);
-                    .apply(window.appThis, endpoint)
+            } catch (e) {
-                    .then(result => {
+                // e is jqXHR
-                        resolve(result);
+                throw new Error(e.responseJSON.message);
-                    })
+            }
-                    .catch(function(xhr, status, err) {
-                        console.log("Failure... status: " + status + ", err: " + err);
-                    });
-            });
         },
 
         action_linkTicket: async workItemId => {
@@ -288,7 +284,7 @@ const App = (function() {
             return await window.appThis.getLinkedWorkItemIds();
         },
 
-        action_setDirty: function () {
+        action_setDirty: function() {
             window.appThis.isDirty = true;
         },
 
@@ -472,7 +468,13 @@ const App = (function() {
                         if (typeof args === "string") {
                             args = [args];
                         }
-                        setMessageArg(await this["action_" + args[0]].call(this, args.slice(1)));
+                        let result;
+                        try {
+                            result = await this["action_" + args[0]].call(this, args.slice(1));
+                        } catch (e) {
+                            result = { err: e.message };
+                        }
+                        setMessageArg(result);
                         this._currentModalClient.trigger("execute.response");
                     }.bind(this),
                 );
@@ -546,7 +548,7 @@ const App = (function() {
             }
         },
         resize: function() {
-            this.zafClient.invoke("resize", { height: this.$("html").height(), width: "100%" });
+            this.zafClient.invoke("resize", { height: this.$("html").outerHeight(true) + 15, width: "100%" });
         },
 
         // UI

src/javascripts/modal.js

@@ -192,7 +192,11 @@ const ModalApp = BaseApp.extend({
         });
     },
     onSidebarResponse: function(response) {
-        this._nextSidebarQueryResponseResolver(response);
+        if (response && response.err) {
+            this._nextSidebarQueryResponseResolver.reject({ message: response.err });
+        } else {
+            this._nextSidebarQueryResponseResolver.resolve(response);
+        }
     },
     execQueryOnSidebar: async function(taskName) {
         this.showBusy();
@@ -200,8 +204,8 @@ const ModalApp = BaseApp.extend({
         this._parentClient.trigger("execute.query");
         let response;
         try {
-            response = await new Promise(resolve => {
+            response = await new Promise((resolve, reject) => {
-                this._nextSidebarQueryResponseResolver = resolve;
+                this._nextSidebarQueryResponseResolver = { resolve, reject };
             });
         } finally {
             this.hideBusy();
@@ -235,7 +239,7 @@ const ModalApp = BaseApp.extend({
         $modal.find(".copyLastComment").on("click", e => {
             this.onCopyLastCommentClick(e);
         });
-        this.resize({ width: "28vw", height: "28vh" });
+        this.resize({ width: "550px", height: "300px" });
     },
 
     action_initUnlinkWorkItem: function(workItem) {
@@ -251,7 +255,7 @@ const ModalApp = BaseApp.extend({
         $modal.find(".accept").on("click", e => {
             this.onUnlinkAcceptClick(e);
         });
-        this.resize({ width: "30vw", height: "18vh" });
+        this.resize({ width: "580px", height: "200px" });
     },
 
     action_initLinkWorkItem: function() {
@@ -261,8 +265,7 @@ const ModalApp = BaseApp.extend({
         $modal.find("button.search").show();
         const projectCombo = $modal.find(".project");
         this.fillComboWithProjects(projectCombo);
-        projectCombo.change();
+        this.resize({ width: "580px", height: "280px" });
-        this.resize({ width: "30vw", height: "27vh" });
 
         $modal.find(".search").on("click", () => {
             this.onLinkSearchClick();
@@ -284,6 +287,7 @@ const ModalApp = BaseApp.extend({
         $modal.find(".accept").on("click", e => {
             this.onLinkAcceptClick(e);
         });
+        projectCombo.change();
     },
 
     action_initWorkItemDetails: async function(workItem) {
@@ -298,7 +302,7 @@ const ModalApp = BaseApp.extend({
             }),
         );
         $modal.find(".modal-body").html(this.renderTemplate("details", workItem));
-        this.resize({ width: "40vw" });
+        this.resize({ width: "770px" });
     },
 
     action_initNewWorkItem: async function() {
@@ -492,10 +496,10 @@ const ModalApp = BaseApp.extend({
                 );
                 try {
                     await this.execQueryOnSidebar(["ajax", "updateVsoWorkItem", workItemId, [addLinkOperation]]);
+                    finish();
                 } catch (e) {
                     this.showErrorInModal($modal, this.I18n.t("modals.link.errCannotUpdateWorkItem") + " - " + e.message);
                 }
-                finish();
             }
         }.bind(this);
 
@@ -585,7 +589,7 @@ const ModalApp = BaseApp.extend({
     onLinkSearchClick: function() {
         const $modal = this.$("[data-main]");
         $modal.find(".search-section").show();
-        this.resize({ width: "30vw" });
+        this.resize({ width: "580px" });
     },
 
     onNewWorkItemAcceptClick: async function() {
@@ -926,12 +930,13 @@ const ModalApp = BaseApp.extend({
                 .find(".modal-body .errors")
                 .text(err)
                 .show();
+            this.resize();
         }
     },
     resize: function(size = {}) {
         // Automatically resize the iframe based on document height, if it's not in the "nav_bar" location
         if (this._context.location !== "nav_bar") {
-            this.zafClient.invoke("resize", { height: size.height || this.$("html").height(), width: size.width || "50vw" });
+            this.zafClient.invoke("resize", { height: size.height || this.$("html").height() + 40, width: size.width || this.$("html").outerWidth(true) });
         }
     },
     restrictToAllowedWorkItems: function(wits) {

src/stylesheets/app.scss

@@ -214,6 +214,13 @@
         }
     }
 
+    .modal-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
     .controlButtons {
         display: flex;
         flex-direction: row;