Fix the redirect after topic deletion (#820)

* Move redirect to a hook

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -23,6 +23,7 @@ interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
   topicName: TopicName;
   isInternal: boolean;
+  isDeleted: boolean;
   deleteTopic: (clusterName: ClusterName, topicName: TopicName) => void;
   clearTopicMessages(clusterName: ClusterName, topicName: TopicName): void;
 }
@@ -31,6 +32,7 @@ const Details: React.FC<Props> = ({
   clusterName,
   topicName,
   isInternal,
+  isDeleted,
   deleteTopic,
   clearTopicMessages,
 }) => {
@@ -41,8 +43,12 @@ const Details: React.FC<Props> = ({
     React.useState(false);
   const deleteTopicHandler = React.useCallback(() => {
     deleteTopic(clusterName, topicName);
-    history.push(clusterTopicsPath(clusterName));
   }, [clusterName, topicName]);
+  React.useEffect(() => {
+    if (isDeleted) {
+      history.push(clusterTopicsPath(clusterName));
+    }
+  }, [isDeleted]);
 
   const clearTopicMessagesHandler = React.useCallback(() => {
     clearTopicMessages(clusterName, topicName);

kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts

@@ -2,7 +2,10 @@ import { connect } from 'react-redux';
 import { ClusterName, RootState, TopicName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { deleteTopic, clearTopicMessages } from 'redux/actions';
-import { getIsTopicInternal } from 'redux/reducers/topics/selectors';
+import {
+  getIsTopicInternal,
+  getTopicList,
+} from 'redux/reducers/topics/selectors';
 
 import Details from './Details';
 
@@ -24,6 +27,7 @@ const mapStateToProps = (
   clusterName,
   topicName,
   isInternal: getIsTopicInternal(state, topicName),
+  isDeleted: !getTopicList(state).find((topic) => topic.name === topicName),
 });
 
 const mapDispatchToProps = {

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx

@@ -39,6 +39,7 @@ describe('Details', () => {
                 isInternal={mockInternalTopicPayload}
                 deleteTopic={mockDelete}
                 clearTopicMessages={mockClearTopicMessages}
+                isDeleted={false}
               />
             </ClusterContext.Provider>
           </StaticRouter>
@@ -69,6 +70,7 @@ describe('Details', () => {
                 isInternal={mockExternalTopicPayload}
                 deleteTopic={mockDelete}
                 clearTopicMessages={mockClearTopicMessages}
+                isDeleted={false}
               />
             </ClusterContext.Provider>
           </StaticRouter>