Skip to content

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 to app/assets/javascripts/behaviors/toast.js, and run it from behaviors/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.:

(probably not a conclusive list!)

Edited by Elwyn Benson