Show confirmation modal when clear messages is clicked in topics list (#1899)

* show confirmation modal when clear messages is clicked in topics list

* change variable name

* add missing dependencies

* use useModal hook for topics list modals

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -8,6 +8,7 @@ import {
 import { useParams } from 'react-router-dom';
 import { clusterTopicCopyPath, clusterTopicNewPath } from 'lib/paths';
 import usePagination from 'lib/hooks/usePagination';
+import useModal from 'lib/hooks/useModal';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
@@ -200,15 +201,23 @@ const List: React.FC<TopicsListProps> = ({
 
   const ActionsCell = React.memo<TableCellProps<TopicWithDetailedInfo, string>>(
     ({ hovered, dataItem: { internal, cleanUpPolicy, name } }) => {
-      const [
-        isDeleteTopicConfirmationVisible,
-        setDeleteTopicConfirmationVisible,
-      ] = React.useState(false);
+      const {
+        isOpen: isDeleteTopicModalOpen,
+        setClose: closeDeleteTopicModal,
+        setOpen: openDeleteTopicModal,
+      } = useModal(false);
 
-      const [
-        isRecreateTopicConfirmationVisible,
-        setRecreateTopicConfirmationVisible,
-      ] = React.useState(false);
+      const {
+        isOpen: isRecreateTopicModalOpen,
+        setClose: closeRecreateTopicModal,
+        setOpen: openRecreateTopicModal,
+      } = useModal(false);
+
+      const {
+        isOpen: isClearMessagesModalOpen,
+        setClose: closeClearMessagesModal,
+        setOpen: openClearMessagesModal,
+      } = useModal(false);
 
       const isHidden = internal || isReadOnly || !hovered;
 
@@ -218,11 +227,13 @@ const List: React.FC<TopicsListProps> = ({
 
       const clearTopicMessagesHandler = React.useCallback(() => {
         clearTopicMessages(clusterName, name);
-      }, [name]);
+        fetchTopicsList(topicsListParams);
+        closeClearMessagesModal();
+      }, [name, fetchTopicsList, topicsListParams]);
 
       const recreateTopicHandler = React.useCallback(() => {
         recreateTopic(clusterName, name);
-        setRecreateTopicConfirmationVisible(false);
+        closeRecreateTopicModal();
       }, [name]);
 
       return (
@@ -231,37 +242,38 @@ const List: React.FC<TopicsListProps> = ({
             {!isHidden && (
               <Dropdown label={<VerticalElipsisIcon />} right>
                 {cleanUpPolicy === CleanUpPolicy.DELETE && (
-                  <DropdownItem onClick={clearTopicMessagesHandler} danger>
+                  <DropdownItem onClick={openClearMessagesModal} danger>
                     Clear Messages
                   </DropdownItem>
                 )}
                 {isTopicDeletionAllowed && (
-                  <DropdownItem
-                    onClick={() => setDeleteTopicConfirmationVisible(true)}
-                    danger
-                  >
+                  <DropdownItem onClick={openDeleteTopicModal} danger>
                     Remove Topic
                   </DropdownItem>
                 )}
-                <DropdownItem
-                  onClick={() => setRecreateTopicConfirmationVisible(true)}
-                  danger
-                >
+                <DropdownItem onClick={openRecreateTopicModal} danger>
                   Recreate Topic
                 </DropdownItem>
               </Dropdown>
             )}
           </div>
           <ConfirmationModal
-            isOpen={isDeleteTopicConfirmationVisible}
-            onCancel={() => setDeleteTopicConfirmationVisible(false)}
+            isOpen={isClearMessagesModalOpen}
+            onCancel={closeClearMessagesModal}
+            onConfirm={clearTopicMessagesHandler}
+          >
+            Are you sure want to clear topic messages?
+          </ConfirmationModal>
+          <ConfirmationModal
+            isOpen={isDeleteTopicModalOpen}
+            onCancel={closeDeleteTopicModal}
             onConfirm={deleteTopicHandler}
           >
             Are you sure want to remove <b>{name}</b> topic?
           </ConfirmationModal>
           <ConfirmationModal
-            isOpen={isRecreateTopicConfirmationVisible}
-            onCancel={() => setRecreateTopicConfirmationVisible(false)}
+            isOpen={isRecreateTopicModalOpen}
+            onCancel={closeRecreateTopicModal}
             onConfirm={recreateTopicHandler}
           >
             Are you sure to recreate <b>{name}</b> topic?