From 5302c3e47f82410b365ddafd0bff27f4d325896c Mon Sep 17 00:00:00 2001
From: Alexander Krivonosov <31561808+GneyHabub@users.noreply.github.com>
Date: Fri, 27 Aug 2021 11:29:51 +0300
Subject: [PATCH] Fix the redirect after topic deletion (#820)

* Move redirect to a hook
---
 .../src/components/Topics/Topic/Details/Details.tsx       | 8 +++++++-
 .../components/Topics/Topic/Details/DetailsContainer.ts   | 6 +++++-
 .../Topics/Topic/Details/__test__/Details.spec.tsx        | 2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
index b3ff5ebc27..611d132788 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/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);
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts
index 475f138bd1..f4607dcc11 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts
+++ b/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 = {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx
index 0cf3a10894..eb117a9a7d 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/Details.spec.tsx
+++ b/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>