fix topic messages old data persistence (#1838)

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 />;
   }

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);

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);
+});