[Synthetics] Improve toast creation flow

Describe the feature:

There are lots of places in Synthetics where we rely on useEffect to fire toasts.

And many more.

There are also places where we apply Redux-driven logic to create toasts, often leveraging our Redux Saga infrastructure.

Example: https://github.com/elastic/kibana/blob/78671f113cc68f5e1696bbe4aed2320978c97e11/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/effects.ts#L52.

Describe a specific use case for the feature:

The issue with useEffect in this use case is that it is very easy to make errors in logic or dependency that cause Kibana to fire multiple toasts for a single event. These are not fun to debug and have happened a few times in the development of Synthetics UI.

The latter approach, creating an action-driven response to an event that has a 1:1 relation with the event itself, ensures that only one toast can ever be fired for the given event. This is because it's a side effect of the conclusion of the event, instead of being part of a function that can be re-evaluated many times. It also reduces the need for nesting conditional logic within the UI components themselves, or within hooks that they then call.

Proposal

We should devise a reusable way of ensuring we only dispatch toasts on a 1:1 basis with the event associated with the toast.

elastic / kibana

[Synthetics] Improve toast creation flow #157414