Added a popup warning about deleting topic messages. (#1324)

* Added a popup warning about deleting topic messages.

* Added test for warning popup.

* Small fix.

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

@@ -59,6 +59,8 @@ const Details: React.FC<Props> = ({
     React.useContext(ClusterContext);
   const [isDeleteTopicConfirmationVisible, setDeleteTopicConfirmationVisible] =
     React.useState(false);
+  const [isClearTopicConfirmationVisible, setClearTopicConfirmationVisible] =
+    React.useState(false);
   const deleteTopicHandler = React.useCallback(() => {
     deleteTopic(clusterName, topicName);
   }, [clusterName, topicName]);
@@ -72,6 +74,7 @@ const Details: React.FC<Props> = ({
 
   const clearTopicMessagesHandler = React.useCallback(() => {
     clearTopicMessages(clusterName, topicName);
+    setClearTopicConfirmationVisible(false);
   }, [clusterName, topicName]);
 
   return (
@@ -103,7 +106,7 @@ const Details: React.FC<Props> = ({
                 </DropdownItem>
                 <DropdownItem
                   style={{ color: Colors.red[50] }}
-                  onClick={clearTopicMessagesHandler}
+                  onClick={() => setClearTopicConfirmationVisible(true)}
                 >
                   Clear messages
                 </DropdownItem>
@@ -127,6 +130,13 @@ const Details: React.FC<Props> = ({
       >
         Are you sure want to remove <b>{topicName}</b> topic?
       </ConfirmationModal>
+      <ConfirmationModal
+        isOpen={isClearTopicConfirmationVisible}
+        onCancel={() => setClearTopicConfirmationVisible(false)}
+        onConfirm={clearTopicMessagesHandler}
+      >
+        Are you sure want to clear topic messages?
+      </ConfirmationModal>
       <Navbar role="navigation">
         <NavLink
           exact

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

@@ -1,12 +1,16 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router-dom';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import ClusterContext from 'components/contexts/ClusterContext';
 import Details from 'components/Topics/Topic/Details/Details';
 import { internalTopicPayload } from 'redux/reducers/topics/__test__/fixtures';
 import { Provider } from 'react-redux';
 import { store } from 'redux/store';
 import { ThemeProvider } from 'styled-components';
+import { render } from 'lib/testHelpers';
+import { clusterTopicPath } from 'lib/paths';
 import theme from 'theme/theme';
 
 describe('Details', () => {
@@ -15,6 +19,30 @@ describe('Details', () => {
   const mockClearTopicMessages = jest.fn();
   const mockInternalTopicPayload = internalTopicPayload.internal;
 
+  const setupComponent = (pathname: string) =>
+    render(
+      <StaticRouter location={{ pathname }}>
+        <ClusterContext.Provider
+          value={{
+            isReadOnly: false,
+            hasKafkaConnectConfigured: true,
+            hasSchemaRegistryConfigured: true,
+            isTopicDeletionAllowed: true,
+          }}
+        >
+          <Details
+            clusterName={mockClusterName}
+            topicName={internalTopicPayload.name}
+            name={internalTopicPayload.name}
+            isInternal={false}
+            deleteTopic={mockDelete}
+            clearTopicMessages={mockClearTopicMessages}
+            isDeleted={false}
+          />
+        </ClusterContext.Provider>
+      </StaticRouter>
+    );
+
   describe('when it has readonly flag', () => {
     it('does not render the Action button a Topic', () => {
       const component = mount(
@@ -48,4 +76,17 @@ describe('Details', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  it('shows a confirmation popup on deleting topic messages', () => {
+    setupComponent(
+      clusterTopicPath(mockClusterName, internalTopicPayload.name)
+    );
+    const { getByText } = screen;
+    const clearMessagesButton = getByText(/Clear messages/i);
+    userEvent.click(clearMessagesButton);
+
+    expect(
+      getByText(/Are you sure want to clear topic messages?/i)
+    ).toBeInTheDocument();
+  });
 });

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

@@ -336,6 +336,11 @@ exports[`Details when it has readonly flag does not render the Action button a T
               onCancel={[Function]}
               onConfirm={[Function]}
             />
+            <ConfirmationModal
+              isOpen={false}
+              onCancel={[Function]}
+              onConfirm={[Function]}
+            />
             <styled.nav
               role="navigation"
             >