Replace $.ajax() with fetch()

Ticket: https://progress.opensuse.org/issues/166310
Co-authored-by: Martchus <[email protected]>

assets/javascripts/admin_assets.js

@@ -121,21 +121,23 @@ function reloadAssetsTable() {
 }
 
 function deleteAsset(assetId) {
-  $.ajax({
-    url: urlWithBase('/api/v1/assets/' + assetId),
-    method: 'DELETE',
-    dataType: 'json',
-    success: function () {
-      addFlash(
-        'info',
-        'The asset was deleted successfully. The asset table\'s contents are cached. Hence the removal is not immediately visible. To update the view use the "Trigger asset cleanup" button. Note that this is an expensive operation which might take a while.'
-      );
-    },
-    error: function (xhr, ajaxOptions, thrownError) {
-      var error_message = xhr.responseJSON.error;
-      addFlash('danger', error_message);
-    }
-  });
+  fetchWithCSRF(urlWithBase(`/api/v1/assets/${assetId}`), {method: 'DELETE'})
+    .then(response => {
+      return response.json()
+    })
+    .then(response => {
+      if (response.error) throw(response.error);
+        addFlash(
+          'info',
+          "The asset was deleted successfully. The asset table's contents are cached." +
+            'Hence the removal is not immediately visible. To update the view use the "Trigger asset cleanup" button.' +
+            'Note that this is an expensive operation which might take a while.'
+        );
+    })
+    .catch(error => {
+      console.error(error);
+      addFlash('danger', `Error deleting asset: ${error}`);
+    });
 }
 
 function triggerAssetCleanup(form) {

assets/javascripts/comments.js

@@ -34,10 +34,6 @@ function renderCommentHeading(comment, commentId) {
   return heading;
 }
 
-function showXhrError(context, jqXHR, textStatus, errorThrown) {
-  window.alert(context + getXhrError(jqXHR, textStatus, errorThrown));
-}
-
 function updateNumerOfComments() {
   const commentsLink = document.querySelector('a[href="#comments"]');
   if (commentsLink) {
@@ -51,15 +47,15 @@ function deleteComment(deleteButton) {
   if (!window.confirm('Do you really want to delete the comment written by ' + author + '?')) {
     return;
   }
-  $.ajax({
-    url: deleteButton.dataset.deleteUrl,
-    method: 'DELETE',
-    success: () => {
+  fetchWithCSRF(deleteButton.dataset.deleteUrl, {method: 'DELETE'})
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
       $(deleteButton).parents('.comment-row, .pinned-comment-row').remove();
       updateNumerOfComments();
-    },
-    error: showXhrError.bind(undefined, "The comment couldn't be deleted: ")
-  });
+    })
+    .catch(error => {
+      window.alert(`The comment couldn't be deleted: ${error}`);
+    });
 }
 
 function updateComment(form) {
@@ -75,31 +71,30 @@ function updateComment(form) {
   displayElements([textElement, form.applyChanges, form.discardChanges], 'none');
   markdownElement.style.display = '';
   markdownElement.innerHTML = '<em>Loading…</em>';
-  $.ajax({
-    url: url,
-    method: 'PUT',
-    data: $(form).serialize(),
-    success: () => {
-      $.ajax({
-        url: url,
-        method: 'GET',
-        success: response => {
+  fetchWithCSRF(url, {method: 'PUT', body: new FormData(form)})
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+      // get rendered markdown
+      fetch(url)
+        .then(response => {
+          if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+          return response.json();
+        })
+        .then(comment => {
           const commentId = headingElement.querySelector('.comment-anchor').href.split('#comment-')[1];
-          headingElement.replaceWith(renderCommentHeading(response, commentId));
-          textElement.value = response.text;
-          markdownElement.innerHTML = response.renderedMarkdown;
+          headingElement.replaceWith(renderCommentHeading(comment, commentId));
+          textElement.value = comment.text;
+          markdownElement.innerHTML = comment.renderedMarkdown;
           hideCommentEditor(form);
-        },
-        error: () => location.reload()
-      });
-    },
-    error: (jqXHR, textStatus, errorThrown) => {
-      textElement.value = text;
-      markdownElement.innerHTML = markdown;
-      showCommentEditor(form);
-      window.alert("The comment couldn't be updated: " + getXhrError(jqXHR, textStatus, errorThrown));
-    }
-  });
+        })
+        .catch(error => {
+          console.error(error);
+          location.reload();
+        });
+    })
+    .catch(error => {
+      window.alert(`The comment couldn't be updated : ${error}`);
+    });
 }
 
 function addComment(form, insertAtBottom) {
@@ -109,22 +104,26 @@ function addComment(form, insertAtBottom) {
     return window.alert("The comment text mustn't be empty.");
   }
   const url = form.action;
-  $.ajax({
-    url: url,
-    method: 'POST',
-    data: $(form).serialize(),
-    success: response => {
-      const commentId = response.id;
+  fetch(url, {method: 'POST', body: new FormData(form)})
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+      return response.json();
+    })
+    .then(data => {
+      const commentId = data.id;
+      console.log(`Created comment #${commentId}`);
       // get rendered markdown
-      $.ajax({
-        url: url + '/' + commentId,
-        method: 'GET',
-        success: response => {
+      fetch(`${url}/${commentId}`)
+        .then(response => {
+          if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+          return response.json();
+        })
+        .then(comment => {
           const templateElement = document.getElementById('comment-row-template');
           const commentRow = $(templateElement.innerHTML.replace(/@comment_id@/g, commentId))[0];
-          commentRow.querySelector('[name="text"]').value = response.text;
-          commentRow.querySelector('h4').replaceWith(renderCommentHeading(response, commentId));
-          commentRow.querySelector('.markdown').innerHTML = response.renderedMarkdown;
+          commentRow.querySelector('[name="text"]').value = comment.text;
+          commentRow.querySelector('h4').replaceWith(renderCommentHeading(comment, commentId));
+          commentRow.querySelector('.markdown').innerHTML = comment.renderedMarkdown;
           let nextElement;
           if (!insertAtBottom) {
             nextElement = document.querySelectorAll('.comment-row')[0];
@@ -136,12 +135,15 @@ function addComment(form, insertAtBottom) {
           $('html, body').animate({scrollTop: commentRow.offsetTop}, 1000);
           textElement.value = '';
           updateNumerOfComments();
-        },
-        error: () => location.reload()
-      });
-    },
-    error: showXhrError.bind(undefined, "The comment couldn't be added: ")
-  });
+        })
+        .catch(error => {
+          console.error(error);
+          location.reload();
+        });
+    })
+    .catch(error => {
+      window.alert(`The comment couldn't be added: ${error}`);
+    });
 }
 
 function insertTemplate(button) {

assets/javascripts/index.js

@@ -93,28 +93,25 @@ function loadBuildResults(queryParams) {
   };
 
   // query build results via AJAX using parameters from filter form
-  $.ajax({
-    url: buildResultsElement.data('build-results-url'),
-    data: queryParams ? queryParams : window.location.search.substr(1),
-    success: function (response) {
-      showBuildResults(response);
+  var url = new URL(buildResultsElement.data('build-results-url'), window.location.href);
+  url.search = queryParams ? queryParams : window.location.search.substr(1);
+  fetch(url)
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+      return response.text();
+    })
+    .then(responsetext => {
+      showBuildResults(responsetext);
       window.buildResultStatus = 'success';
-    },
-    error: function (xhr, textStatus, thrownError) {
-      // ignore error if just navigating away
-      if (textStatus !== 'timeout' && !xhr.getAllResponseHeaders()) {
-        return;
-      }
-      const error = xhr.responseJSON?.error;
+    })
+    .catch(error => {
       const message = error ? htmlEscape(error) : 'Unable to fetch build results.';
       showBuildResults(
         '<div class="alert alert-danger" role="alert">' +
           message +
           '<a href="javascript:loadBuildResults();" style="float: right;">Try again</a></div>'
       );
-      window.buildResultStatus = 'error: ' + thrownError;
-    }
-  });
+    });
 }
 
 function autoRefreshRestart() {

assets/javascripts/openqa.js

@@ -23,6 +23,16 @@ function setupForAll() {
   });
 }
 
+function getCSRFToken() {
+  return document.querySelector('meta[name="csrf-token"]').content;
+}
+
+function fetchWithCSRF(resource, options) {
+  options.headers ??= {};
+  options.headers['X-CSRF-TOKEN'] ??= getCSRFToken();
+  return fetch(resource, options);
+}
+
 function makeFlashElement(text) {
   return typeof text === 'string' ? '<span>' + text + '</span>' : text;
 }
@@ -238,11 +248,12 @@ function restartJob(ajaxUrl, jobId) {
     addFlash('danger', errorMessage);
   };
 
-  return $.ajax({
-    type: 'POST',
-    url: ajaxUrl,
-    success: function (data, res, xhr) {
-      var responseJSON = xhr.responseJSON;
+  return fetchWithCSRF(ajaxUrl, {method: 'POST'})
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
+      return response.json();
+    })
+    .then(responseJSON => {
       var newJobUrl;
       try {
         newJobUrl = responseJSON.test_url[0][jobId];
@@ -261,13 +272,12 @@ function restartJob(ajaxUrl, jobId) {
       if (newJobUrl) {
         window.location.replace(newJobUrl);
       } else {
-        showError('URL for new job not available');
+        throw 'URL for new job not available';
       }
-    },
-    error: function (xhr, ajaxOptions, thrownError) {
-      showError(xhr.responseJSON ? xhr.responseJSON.error : undefined);
-    }
-  });
+    })
+    .catch(error => {
+      showError(error);
+    });
 }
 
 function htmlEscape(str) {

assets/javascripts/overview.js

@@ -301,20 +301,17 @@ function addComments(form) {
     controls.style.display = 'inline';
     window.addCommentsModal.hide();
   };
-  $.ajax({
-    url: form.action,
-    method: 'POST',
-    data: $(form).serialize(),
-    success: response => {
+  fetchWithCSRF(form.action, {method: 'POST', body: new FormData(form)})
+    .then(response => {
+      if (response.status != 200) throw `Server returned ${response.status}: ${response.statusText}`;
       addFlash(
         'info',
         'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.'
       );
       done();
-    },
-    error: (jqXHR, textStatus, errorThrown) => {
-      addFlash('danger', 'The comments could not be added: ' + getXhrError(jqXHR, textStatus, errorThrown));
+    })
+    .catch(error => {
+      addFlash('danger', `The comments could not be added: ${error}`);
       done();
-    }
-  });
+    });
 }