Close flash message when a modal is opened (#3711)

changes/3293-close-flash-message

@@ -0,0 +1 @@
+* Close flash message when modal opens

frontend/components/FlashMessage/FlashMessage.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import classnames from "classnames";
 
 import { INotifications } from "interfaces/notification";
@@ -28,7 +27,7 @@ const FlashMessage = ({
   isPersistent,
   onRemoveFlash,
   onUndoActionClick,
-}: IFlashMessage) => {
+}: IFlashMessage): JSX.Element | null => {
   const { alertType, isVisible, message, undoAction } = notification;
   const klass = classnames(baseClass, `${baseClass}--${alertType}`, {
     [`${baseClass}--full-width`]: fullWidth,

frontend/components/Modal/Modal.tsx

@@ -1,5 +1,8 @@
 import React, { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import classnames from "classnames";
+// @ts-ignore
+import { hideFlash } from "redux/nodes/notifications/actions";
 
 const baseClass = "modal";
 
@@ -10,7 +13,13 @@ export interface IModalProps {
   className?: string;
 }
 
-const Modal = ({ children, onExit, title, className }: IModalProps) => {
+const Modal = ({
+  children,
+  onExit,
+  title,
+  className,
+}: IModalProps): JSX.Element => {
+  const dispatch = useDispatch();
   useEffect(() => {
     const closeWithEscapeKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -18,6 +27,8 @@ const Modal = ({ children, onExit, title, className }: IModalProps) => {
       }
     };
 
+    dispatch(hideFlash);
+
     document.addEventListener("keydown", closeWithEscapeKey);
 
     return () => {