Refactor toast pattern into behaviour
Based on this MR review suggestion:
thought: I wasn't aware of this pattern (along with
flash[:toast] = ...
). It's... weird😅 Thinking out loud (not for this MR) I wonder if this should instead be a
behavior
, and extracted to an async chunk that's only fetched if there are any.js-toast-message
elements at page load🤔 That would remove the need for different entry points to do this... Though, it's only 5 at the moment
🤷
Proposal
- Add a new
initToastMessages
function toapp/assets/javascripts/behaviors/toast.js
, and run it frombehaviors/index.js
. - Function should
querySelectorAll('.js-toast-message')
, and bail early if no messages were found. Otherwise it should - Asynchronously import
showToast
from'~/vue_shared/plugins/global_toast'
- Call
showToast
for each message
We can then clean up the various places in the codebase which manually do these steps, e.g.:
- ci_cd/show/index.js
- pages/shared/wikis/wikis.js
- pages/admin/geo/index.js
- settings/ci_cd/show/index.js
- projects/settings/analytics/index.js
(probably not a conclusive list!)
Edited by Elwyn Benson