Merge pull request '[v7.0/forgejo] gitea#30535: Refactor and fix archive link bug' (#3760) from algernon/forgejo:backport/3696-to-7.0 into v7.0/forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3760
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>

web_src/js/features/repo-common.js

@@ -1,45 +1,35 @@
 import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.js';
+import {hideElem, queryElems, showElem} from '../utils/dom.js';
 import {POST} from '../modules/fetch.js';
+import {showErrorToast} from '../modules/toast.js';
+import {sleep} from '../utils.js';
 
-async function getArchive($target, url, first) {
+async function onDownloadArchive(e) {
-  const dropdownBtn = $target[0].closest('.ui.dropdown.button') ?? $target[0].closest('.ui.dropdown.btn') ?? $target[0].closest('details.download');
+  e.preventDefault();
-
+  // there are many places using the "archive-link", eg: the dropdown on the repo code page, the release list
+  const el = e.target.closest('a.archive-link[href]');
+  const targetLoading = el.closest('.ui.dropdown') ?? el;
+  targetLoading.classList.add('is-loading', 'loading-icon-2px');
   try {
-    dropdownBtn.classList.add('is-loading');
+    for (let tryCount = 0; ;tryCount++) {
-    const response = await POST(url);
+      const response = await POST(el.href);
-    if (response.status === 200) {
+      if (!response.ok) throw new Error(`Invalid server response: ${response.status}`);
-      const data = await response.json();
-      if (!data) {
-        // XXX Shouldn't happen?
-        dropdownBtn.classList.remove('is-loading');
-        return;
-      }
 
-      if (!data.complete) {
+      const data = await response.json();
-        // Wait for only three quarters of a second initially, in case it's
+      if (data.complete) break;
-        // quickly archived.
+      await sleep(Math.min((tryCount + 1) * 750, 2000));
-        setTimeout(() => {
-          getArchive($target, url, false);
-        }, first ? 750 : 2000);
-      } else {
-        // We don't need to continue checking.
-        dropdownBtn.classList.remove('is-loading');
-        window.location.href = url;
-      }
     }
-  } catch {
+    window.location.href = el.href; // the archive is ready, start real downloading
-    dropdownBtn.classList.remove('is-loading');
+  } catch (e) {
+    console.error(e);
+    showErrorToast(`Failed to download the archive: ${e}`, {duration: 2500});
+  } finally {
+    targetLoading.classList.remove('is-loading', 'loading-icon-2px');
   }
 }
 
 export function initRepoArchiveLinks() {
-  $('.archive-link').on('click', function (event) {
+  queryElems('a.archive-link[href]', (el) => el.addEventListener('click', onDownloadArchive));
-    event.preventDefault();
-    const url = this.getAttribute('href');
-    if (!url) return;
-    getArchive($(event.target), url, true);
-  });
 }
 
 export function initRepoCloneLink() {

web_src/js/utils/dom.js

@@ -16,6 +16,15 @@ function elementsCall(el, func, ...args) {
   }
 }
 
+function applyElemsCallback(elems, fn) {
+  if (fn) {
+    for (const el of elems) {
+      fn(el);
+    }
+  }
+  return elems;
+}
+
 /**
  * @param el string (selector), Node, NodeList, HTMLCollection, Array or jQuery
  * @param force force=true to show or force=false to hide, undefined to toggle
@@ -55,6 +64,10 @@ export function queryElemSiblings(el, selector) {
   return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector));
 }
 
+export function queryElems(selector, fn) {
+  return applyElemsCallback(document.querySelectorAll(selector), fn);
+}
+
 export function onDomReady(cb) {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', cb);