Repository: provectus/kafka-ui
Issue: Frontend: Messages view is showing old data  
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->

When switching to Messages view it is showing previous rendered table for couples moments 

**Steps to Reproduce**
Steps to reproduce the behavior:

1. go to non-empty topic -> Messages
2. go to empty topic -> Messages 
3. table will show first topic's messages and then cleared 

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->

we don't see invalid table render

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->

https://user-images.githubusercontent.com/702205/155094088-bae58230-296b-42a9-b07a-ddb04f303d84.mov


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
index 3b821658d2f..941eaa251e2 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Topic.tsx
@@ -14,12 +14,14 @@ interface RouterParams {
 
 interface TopicProps {
   isTopicFetching: boolean;
+  resetTopicMessages: () => void;
   fetchTopicDetails: (clusterName: ClusterName, topicName: TopicName) => void;
 }
 
 const Topic: React.FC<TopicProps> = ({
   isTopicFetching,
   fetchTopicDetails,
+  resetTopicMessages,
 }) => {
   const { clusterName, topicName } = useParams<RouterParams>();
 
@@ -27,6 +29,12 @@ const Topic: React.FC<TopicProps> = ({
     fetchTopicDetails(clusterName, topicName);
   }, [fetchTopicDetails, clusterName, topicName]);
 
+  React.useEffect(() => {
+    return () => {
+      resetTopicMessages();
+    };
+  }, []);
+
   if (isTopicFetching) {
     return <PageLoader />;
   }
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
index d0a33cab032..713a3693478 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
-import { fetchTopicDetails } from 'redux/actions';
+import { fetchTopicDetails, resetTopicMessages } from 'redux/actions';
 import { getIsTopicDetailsFetching } from 'redux/reducers/topics/selectors';
 
 import Topic from './Topic';
@@ -11,6 +11,7 @@ const mapStateToProps = (state: RootState) => ({
 
 const mapDispatchToProps = {
   fetchTopicDetails,
+  resetTopicMessages,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Topic);
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
index d5ee996f749..eaea0421560 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/__tests__/Topic.spec.tsx
@@ -22,6 +22,7 @@ jest.mock('components/common/PageLoader/PageLoader', () => () => (
   <div>Loading</div>
 ));
 
+const resetTopicMessages = jest.fn();
 const fetchTopicDetailsMock = jest.fn();
 
 const renderComponent = (pathname: string, topicFetching: boolean) =>
@@ -29,6 +30,7 @@ const renderComponent = (pathname: string, topicFetching: boolean) =>
     <Route path={clusterTopicPath(':clusterName', ':topicName')}>
       <Topic
         isTopicFetching={topicFetching}
+        resetTopicMessages={resetTopicMessages}
         fetchTopicDetails={fetchTopicDetailsMock}
       />
     </Route>,
@@ -59,3 +61,12 @@ it('fetches topicDetails', () => {
   renderComponent(clusterTopicPath('local', 'myTopicName'), false);
   expect(fetchTopicDetailsMock).toHaveBeenCalledTimes(1);
 });
+
+it('resets topic messages after unmount', () => {
+  const component = renderComponent(
+    clusterTopicPath('local', 'myTopicName'),
+    false
+  );
+  component.unmount();
+  expect(resetTopicMessages).toHaveBeenCalledTimes(1);
+});


Test patch: