Repository: provectus/kafka-ui
Issue: Pop up for Clear Messages (not clear/remove at once)
Labels: type/enhancement
scope/frontend
status/accepted
status/confirmed

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

When accessing the Messages tab in a specific topic, you have the option to clear messages
![image](https://user-images.githubusercontent.com/39586798/145584117-92aaec22-e550-4f06-a08d-7bb46ea84bcd.png)
When clicked, all messages are removed at once - no warning pop up is displayed; you cannot restore deleted messages.

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

Please add a warning pop up so that users don't accidentally delete all messages, and have no ability to restore them.

### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

--

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

--


Issue comments:
Fixed within #1324

Pull request review comments:

Patch that resolved the issue:
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 7328f8a532a..cfa97253125 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
@@ -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
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 608405fbce7..50eb93990e0 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
@@ -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();
+  });
 });
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
index 56295bf19ed..264390262f9 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
@@ -326,6 +326,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"
             >


Test patch: