Make toast support preventDuplicates (#31501)

make preventDuplicates default to true, users get a clear UI feedback
and know that "a new message appears".

Fixes: https://github.com/go-gitea/gitea/issues/26651

---------

Co-authored-by: silverwind <me@silverwind.io>

web_src/js/features/repo-diff.js

@@ -7,7 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
 import {initImageDiff} from './imagediff.js';
 import {showErrorToast} from '../modules/toast.js';
-import {submitEventSubmitter, queryElemSiblings, hideElem, showElem} from '../utils/dom.js';
+import {submitEventSubmitter, queryElemSiblings, hideElem, showElem, animateOnce} from '../utils/dom.js';
 import {POST, GET} from '../modules/fetch.js';
 
 const {pageData, i18n} = window.config;
@@ -26,11 +26,7 @@ function initRepoDiffReviewButton() {
       const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
       counter.setAttribute('data-pending-comment-number', num);
       counter.textContent = num;
-
-      reviewBox.classList.remove('pulse');
-      requestAnimationFrame(() => {
-        reviewBox.classList.add('pulse');
-      });
+      animateOnce(reviewBox, 'pulse-1p5-200');
     });
   });
 }

web_src/js/modules/toast.js

@@ -1,5 +1,6 @@
 import {htmlEscape} from 'escape-goat';
 import {svg} from '../svg.js';
+import {animateOnce, showElem} from '../utils/dom.js';
 import Toastify from 'toastify-js'; // don't use "async import", because when network error occurs, the "async import" also fails and nothing is shown
 
 const levels = {
@@ -21,13 +22,28 @@ const levels = {
 };
 
 // See https://github.com/apvarun/toastify-js#api for options
-function showToast(message, level, {gravity, position, duration, useHtmlBody, ...other} = {}) {
+function showToast(message, level, {gravity, position, duration, useHtmlBody, preventDuplicates = true, ...other} = {}) {
+  const body = useHtmlBody ? String(message) : htmlEscape(message);
+  const key = `${level}-${body}`;
+
+  // prevent showing duplicate toasts with same level and message, and give a visual feedback for end users
+  if (preventDuplicates) {
+    const toastEl = document.querySelector(`.toastify[data-toast-unique-key="${CSS.escape(key)}"]`);
+    if (toastEl) {
+      const toastDupNumEl = toastEl.querySelector('.toast-duplicate-number');
+      showElem(toastDupNumEl);
+      toastDupNumEl.textContent = String(Number(toastDupNumEl.textContent) + 1);
+      animateOnce(toastDupNumEl, 'pulse-1p5-200');
+      return;
+    }
+  }
+
   const {icon, background, duration: levelDuration} = levels[level ?? 'info'];
   const toast = Toastify({
     text: `
       <div class='toast-icon'>${svg(icon)}</div>
-      <div class='toast-body'>${useHtmlBody ? message : htmlEscape(message)}</div>
-      <button class='toast-close'>${svg('octicon-x')}</button>
+      <div class='toast-body'><span class="toast-duplicate-number tw-hidden">1</span>${body}</div>
+      <button class='btn toast-close'>${svg('octicon-x')}</button>
     `,
     escapeMarkup: false,
     gravity: gravity ?? 'top',
@@ -39,6 +55,7 @@ function showToast(message, level, {gravity, position, duration, useHtmlBody, ..
 
   toast.showToast();
   toast.toastElement.querySelector('.toast-close').addEventListener('click', () => toast.hideToast());
+  toast.toastElement.setAttribute('data-toast-unique-key', key);
   return toast;
 }
 

web_src/js/standalone/devtest.js

@@ -1,11 +1,14 @@
 import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
 
-document.querySelector('#info-toast').addEventListener('click', () => {
-  showInfoToast('success 😀');
-});
-document.querySelector('#warning-toast').addEventListener('click', () => {
-  showWarningToast('warning 😐');
-});
-document.querySelector('#error-toast').addEventListener('click', () => {
-  showErrorToast('error 🙁');
-});
+function initDevtestToast() {
+  const levelMap = {info: showInfoToast, warning: showWarningToast, error: showErrorToast};
+  for (const el of document.querySelectorAll('.toast-test-button')) {
+    el.addEventListener('click', () => {
+      const level = el.getAttribute('data-toast-level');
+      const message = el.getAttribute('data-toast-message');
+      levelMap[level](message);
+    });
+  }
+}
+
+initDevtestToast();

web_src/js/utils/dom.js

@@ -306,3 +306,14 @@ export function createElementFromAttrs(tagName, attrs) {
   }
   return el;
 }
+
+export function animateOnce(el, animationClassName) {
+  return new Promise((resolve) => {
+    el.addEventListener('animationend', function onAnimationEnd() {
+      el.classList.remove(animationClassName);
+      el.removeEventListener('animationend', onAnimationEnd);
+      resolve();
+    }, {once: true});
+    el.classList.add(animationClassName);
+  });
+}