diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js index 15e5b21204de0..f8d0c0cac0c33 100644 --- a/web_src/js/bootstrap.js +++ b/web_src/js/bootstrap.js @@ -8,10 +8,21 @@ __webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`; export function showGlobalErrorMessage(msg) { const pageContent = document.querySelector('.page-content'); if (!pageContent) return; - const el = document.createElement('div'); - el.innerHTML = `
`; - el.childNodes[0].textContent = msg; - pageContent.prepend(el.childNodes[0]); + + // compact the message to a data attribute to avoid too many duplicated messages + const msgCompact = msg.replace(/\W/g, '').trim(); + let msgDiv = pageContent.querySelector(`.js-global-error[data-global-error-msg-compact="${msgCompact}"]`); + if (!msgDiv) { + const el = document.createElement('div'); + el.innerHTML = ``; + msgDiv = el.childNodes[0]; + } + // merge duplicated messages into "the message (count)" format + const msgCount = Number(msgDiv.getAttribute(`data-global-error-msg-count`)) + 1; + msgDiv.setAttribute(`data-global-error-msg-compact`, msgCompact); + msgDiv.setAttribute(`data-global-error-msg-count`, msgCount.toString()); + msgDiv.textContent = msg + (msgCount > 1 ? ` (${msgCount})` : ''); + pageContent.prepend(msgDiv); } /** diff --git a/web_src/js/bootstrap.test.js b/web_src/js/bootstrap.test.js new file mode 100644 index 0000000000000..a6b901b92c230 --- /dev/null +++ b/web_src/js/bootstrap.test.js @@ -0,0 +1,12 @@ +import {showGlobalErrorMessage} from './bootstrap.js'; + +test('showGlobalErrorMessage', () => { + document.body.innerHTML = ''; + showGlobalErrorMessage('test msg 1'); + showGlobalErrorMessage('test msg 2'); + showGlobalErrorMessage('test msg 1'); // duplicated + + expect(document.body.innerHTML).toContain('>test msg 1 (2)<'); + expect(document.body.innerHTML).toContain('>test msg 2<'); + expect(document.querySelectorAll('.js-global-error').length).toEqual(2); +}); diff --git a/web_src/js/test/setup.js b/web_src/js/test/setup.js index 52355c7adcbcd..6fb0f5dc8f8bf 100644 --- a/web_src/js/test/setup.js +++ b/web_src/js/test/setup.js @@ -1,3 +1,5 @@ +window.__webpack_public_path__ = ''; + window.config = { csrfToken: 'test-csrf-token-123456', pageData: {},