From 0f98a25b0c184aac2c0f780c45e137afabfd30d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20Olek=C5=A1=C3=A1k?= <soleksak@redhat.com>
Date: Thu, 2 Dec 2021 13:48:16 +0100
Subject: [PATCH] fix: Improve notification clearing (#1398)

---
 .../CVEDetailsPage/CVEDetailsPage.js                |  2 ++
 src/Components/SmartComponents/Modals/BaseModal.js  | 11 ++---------
 .../SystemDetailsPage/SystemDetailsPage.js          | 13 +++++++++++--
 .../SmartComponents/SystemsPage/SystemsPage.js      |  2 ++
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js b/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
index e9631f5d4..1acfe4d23 100644
--- a/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
+++ b/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
@@ -21,6 +21,7 @@ import GroupedCVELabels from '../../PresentationalComponents/Snippets/GroupedCVE
 import ErrorHandler from '../../PresentationalComponents/ErrorHandler/ErrorHandler';
 import { useRbac } from '../../../Helpers/Hooks';
 import { NotAuthorized } from '../../PresentationalComponents/EmptyStates/EmptyStates';
+import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 export const CVEPageContext = React.createContext({ isLoading: true });
 
@@ -77,6 +78,7 @@ const CVEDetailsPage = ({ match }) => {
     useEffect(() => {
         return () => {
             dispatch(clearCveStore());
+            dispatch(clearNotifications());
         };
     }, [dispatch]);
 
diff --git a/src/Components/SmartComponents/Modals/BaseModal.js b/src/Components/SmartComponents/Modals/BaseModal.js
index 33ea827ba..bd3cdc754 100644
--- a/src/Components/SmartComponents/Modals/BaseModal.js
+++ b/src/Components/SmartComponents/Modals/BaseModal.js
@@ -1,10 +1,9 @@
 import { Button, FormGroup, FormSelect, FormSelectOption, Modal, TextArea } from '@patternfly/react-core';
 import {
-    addNotification,
-    clearNotifications
+    addNotification
 } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import propTypes from 'prop-types';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { ReadOnlyNotification, STATUS_OPTIONS } from '../../../Helpers/constants';
 import messages from '../../../Messages';
@@ -64,12 +63,6 @@ export const BaseModal = ({ items, title, onSave, onSuccessNotification, onFailu
         handleClose();
     };
 
-    useEffect(() => {
-        return () => {
-            dispatch(clearNotifications());
-        };
-    }, [dispatch]);
-
     return (
         <Modal
             variant="small"
diff --git a/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js b/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js
index 414ba0ae0..51cfa0804 100644
--- a/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js
+++ b/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js
@@ -1,8 +1,8 @@
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { addNotification, clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import propTypes from 'prop-types';
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { fetchSystemDetails, optOutSystemsAction } from '../../../Store/Actions/Actions';
 import { systemDetailsPageStore } from '../../../Store/Reducers/SystemDetailsPageStore';
@@ -15,12 +15,20 @@ import messages from '../../../Messages';
 import { AppInfo, DetailWrapper, InventoryDetailHead } from '@redhat-cloud-services/frontend-components/Inventory';
 
 const InventoryDetail = ({ fetchSystemDetails, systemDetails = {}, optOutSystem, match, addNotification, intl, errors }) => {
+    const dispatch = useDispatch();
+
     const inventoryId = match.params.inventoryId;
 
     useEffect(() => {
         fetchSystemDetails(inventoryId);
     }, [fetchSystemDetails, inventoryId]);
 
+    useEffect(() => {
+        return () => {
+            dispatch(clearNotifications());
+        };
+    }, [dispatch]);
+
     const notifications = systemName => ({
         exclude: {
             success: {
@@ -67,6 +75,7 @@ const InventoryDetail = ({ fetchSystemDetails, systemDetails = {}, optOutSystem,
     };
 
     const { opt_out: isOptOut = false, entity, loaded } = systemDetails;
+
     return (
         <DetailWrapper>
             <Header
diff --git a/src/Components/SmartComponents/SystemsPage/SystemsPage.js b/src/Components/SmartComponents/SystemsPage/SystemsPage.js
index aa1771733..10a543bc7 100644
--- a/src/Components/SmartComponents/SystemsPage/SystemsPage.js
+++ b/src/Components/SmartComponents/SystemsPage/SystemsPage.js
@@ -24,6 +24,7 @@ import { useGetEntities, useOptOutSystems } from '../../../Helpers/Hooks';
 import * as APIHelper from '../../../Helpers/APIHelper';
 import { EmptyStateNoSystems } from '../../PresentationalComponents/EmptyStates/EmptyStates';
 import ColumnManagementModal from '../Modals/ColumnManagementModal';
+import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 const SystemsPage = () => {
     const inventoryRef = React.createRef();
@@ -55,6 +56,7 @@ const SystemsPage = () => {
         return () => {
             dispatch(clearSystemStore());
             dispatch(clearInventoryStore());
+            dispatch(clearNotifications());
         };
     }, [dispatch]);