Adjust Alerts to be retrieved using Redux

[carma12]

The Alerts are currently being handled via the useAlert custom hook. This approach requires to define the alert object from any component and consume it as a JSX element. I.e.,

import useAlerts from "src/hooks/useAlerts";

const MyComponent = () => {
  const alerts = useAlerts();

  const setAlertMessage = () => {
     alerts.addAlert(
         "success-alert",      // name: string
         "Everything went fine!",   // title: string
         "success"   // variant: AlertVariant
     );
  };

  (...)

  return (
     <>
        <alerts.ManagedAlerts />
        (...)
     </>
  );
};

export default MyComponent;

The problem with this approach is that it lacks consistency when a new Alert is defined in "short-live" components (e.g., Modal dialogs that are destroyed when closed. In some cases, they don't even disappear). Besides, a new Alert object must be defined every time to use the addAlert function, which is inefficient.

Ideally, the alert state would be handled globally (via dispatching redux action), thus allowing a single element to display alerts from multiple sources.