Fix redirect after the topic deletion (#842)

* Implement event canceling

* remove unnecessary API call

* Remove the codesmell

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

@@ -13,6 +13,8 @@ import {
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
+import { useDispatch } from 'react-redux';
+import { deleteTopicAction } from 'redux/actions';
 
 import OverviewContainer from './Overview/OverviewContainer';
 import TopicConsumerGroupsContainer from './ConsumerGroups/TopicConsumerGroupsContainer';
@@ -37,6 +39,7 @@ const Details: React.FC<Props> = ({
   clearTopicMessages,
 }) => {
   const history = useHistory();
+  const dispatch = useDispatch();
   const { isReadOnly, isTopicDeletionAllowed } =
     React.useContext(ClusterContext);
   const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
@@ -44,8 +47,10 @@ const Details: React.FC<Props> = ({
   const deleteTopicHandler = React.useCallback(() => {
     deleteTopic(clusterName, topicName);
   }, [clusterName, topicName]);
+
   React.useEffect(() => {
     if (isDeleted) {
+      dispatch(deleteTopicAction.cancel());
       history.push(clusterTopicsPath(clusterName));
     }
   }, [isDeleted]);

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

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

kafka-ui-react-app/src/redux/actions/actions.ts

@@ -97,8 +97,9 @@ export const updateTopicAction = createAsyncAction(
 export const deleteTopicAction = createAsyncAction(
   'DELETE_TOPIC__REQUEST',
   'DELETE_TOPIC__SUCCESS',
-  'DELETE_TOPIC__FAILURE'
+  'DELETE_TOPIC__FAILURE',
-)<undefined, TopicName, undefined>();
+  'DELETE_TOPIC__CANCEL'
+)<undefined, TopicName, undefined, undefined>();
 
 export const fetchConsumerGroupsAction = createAsyncAction(
   'GET_CONSUMER_GROUPS__REQUEST',

kafka-ui-react-app/src/redux/reducers/loader/reducer.ts

@@ -4,9 +4,9 @@ export const initialState: LoaderState = {};
 
 const reducer = (state = initialState, action: Action): LoaderState => {
   const { type } = action;
-  const matches = /(.*)__(REQUEST|SUCCESS|FAILURE)$/.exec(type);
+  const matches = /(.*)__(REQUEST|SUCCESS|FAILURE|CANCEL)$/.exec(type);
 
-  // not a *__REQUEST / *__SUCCESS /  *__FAILURE actions, so we ignore them
+  // not a *__REQUEST / *__SUCCESS /  *__FAILURE /  *__CANCEL actions, so we ignore them
   if (!matches) return state;
 
   const [, requestName, requestState] = matches;
@@ -27,6 +27,11 @@ const reducer = (state = initialState, action: Action): LoaderState => {
         ...state,
         [requestName]: 'errorFetching',
       };
+    case 'CANCEL':
+      return {
+        ...state,
+        [requestName]: 'notFetched',
+      };
     default:
       return state;
   }

kafka-ui-react-app/src/redux/reducers/topics/selectors.ts

@@ -31,6 +31,12 @@ const getPartitionsCountIncreaseStatus =
 const getReplicationFactorUpdateStatus = createFetchingSelector(
   'UPDATE_REPLICATION_FACTOR'
 );
+const getTopicDeletingStatus = createFetchingSelector('DELETE_TOPIC');
+
+export const getIsTopicDeleted = createSelector(
+  getTopicDeletingStatus,
+  (status) => status === 'fetched'
+);
 
 export const getAreTopicsFetching = createSelector(
   getTopicListFetchingStatus,