default preventDuplicates to default, use single key, use it for htmx

web_src/js/components/RepoActionView.vue

@@ -241,7 +241,7 @@ const sfc = {
           ]);
         } catch (err) {
           if (err instanceof TypeError) return; // avoid network error while unloading page
-          showErrorToast(err.message);
+          showErrorToast(err.message, {preventDuplicates: true});
           // reset all step loading states, we can't easily tell which one failed at this point
           for (let i = 0; i < this.currentJob.steps.length; i++) {
             if (this.currentJobStepsStates[i].loading) {

web_src/js/htmx.js

@@ -10,11 +10,15 @@ htmx.config.scrollIntoViewOnBoost = false;
 // https://htmx.org/events/#htmx:sendError
 document.body.addEventListener('htmx:sendError', (event) => {
   // TODO: add translations
-  showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`);
+  showErrorToast(`Network error when calling ${event.detail.requestConfig.path}`, {
+    preventDuplicates: true,
+  });
 });
 
 // https://htmx.org/events/#htmx:responseError
 document.body.addEventListener('htmx:responseError', (event) => {
   // TODO: add translations
-  showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`);
+  showErrorToast(`Error ${event.detail.xhr.status} when calling ${event.detail.requestConfig.path}`, {
+    preventDuplicates: true,
+  });
 });

web_src/js/modules/toast.js

@@ -21,11 +21,12 @@ const levels = {
 };
 
 // See https://github.com/apvarun/toastify-js#api for options
-function showToast(message, level, {gravity, position, duration, useHtmlBody, allowDuplicates, ...other} = {}) {
+function showToast(message, level, {gravity, position, duration, useHtmlBody, preventDuplicates, ...other} = {}) {
   const body = String(useHtmlBody ? message : htmlEscape(message));
+  const key = `${level}-${body}`;
 
   // prevent showing duplicate toasts with same level and message
-  if (!allowDuplicates && document.querySelector(`.toastify[data-body="${CSS.escape(body)}"][data-level="${CSS.escape(level)}"]`)) {
+  if (preventDuplicates && document.querySelector(`.toastify[data-key="${CSS.escape(key)}"]`)) {
     return;
   }
 
@@ -45,8 +46,7 @@ function showToast(message, level, {gravity, position, duration, useHtmlBody, al
   });
 
   toast.showToast();
-  toast.toastElement.setAttribute('data-body', body);
-  toast.toastElement.setAttribute('data-level', level);
+  toast.toastElement.setAttribute('data-key', key);
   toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
   return toast;
 }