Repository: provectus/kafka-ui
Issue: The result of Clear Messages is not displayed in Topic overview
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
<!--(A clear and concise description of what the bug is.)-->
When you click Clear Messages on the Topic overview page you still see the topic`s messages like nothing happened but if you refresh the page or go to the topic you see that messages are cleared.

**Set up**
<!--
(How do you run the app? 
Which version of the app are you running? Provide either docker image version or check commit hash at the top left corner. We won't be able to help you without this information.)
-->
https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to local/Topics
2. Choose some topic
3.  Click on the sandwich menu and choose Clear Messages
4. Observe: 1) there is no Warning message to Confirm clearing
                    2) Messages are still in the topic
                    3) However, if you refresh the page or click on the topic - messages are cleared.

**Expected behavior**
<!--
(A clear and concise description of what you expected to happen)
-->
1) Display the Warning message to Confirm the action
2) Clear messages of the topic in the table Topic overview.

**Screenshots**
<!--
(If applicable, add screenshots to help explain your problem)
-->


**Additional context**
<!--
(Add any other context about the problem here)
-->


Issue comments:
Update with Clear Messages available in Topic's Overview tab only after refreshing, please check the attached video:

https://user-images.githubusercontent.com/104780608/170261514-df248abf-dc73-4e64-9eeb-236ecf9f402a.mov

_**Note**: Works correctly with Clearing messages from all Topics page_

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
index 12434e6224a..6e497b017e8 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
@@ -39,11 +39,13 @@ const Overview: React.FC<Props> = ({
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
 
-  const messageCount = React.useMemo(() => {
-    return (partitions || []).reduce((memo, partition) => {
-      return memo + partition.offsetMax - partition.offsetMin;
-    }, 0);
-  }, [partitions]);
+  const messageCount = React.useMemo(
+    () =>
+      (partitions || []).reduce((memo, partition) => {
+        return memo + partition.offsetMax - partition.offsetMin;
+      }, 0),
+    [partitions]
+  );
 
   return (
     <>
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
index 5b641385a69..a4087a36cf5 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
@@ -6,7 +6,10 @@ import { useHistory, useParams } from 'react-router-dom';
 import { clusterTopicMessagesPath } from 'lib/paths';
 import jsf from 'json-schema-faker';
 import { messagesApiClient } from 'redux/reducers/topicMessages/topicMessagesSlice';
-import { fetchTopicMessageSchema } from 'redux/reducers/topics/topicsSlice';
+import {
+  fetchTopicMessageSchema,
+  fetchTopicDetails,
+} from 'redux/reducers/topics/topicsSlice';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import { alertAdded } from 'redux/reducers/alerts/alertsSlice';
 import { now } from 'lodash';
@@ -126,6 +129,7 @@ const SendMessage: React.FC = () => {
             partition,
           },
         });
+        dispatch(fetchTopicDetails({ clusterName, topicName }));
       } catch (e) {
         dispatch(
           alertAdded({
diff --git a/kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts b/kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts
index a5790776e37..8760c954943 100644
--- a/kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts
@@ -4,6 +4,7 @@ import { TopicMessage, Configuration, MessagesApi } from 'generated-sources';
 import { BASE_PARAMS } from 'lib/constants';
 import { getResponse } from 'lib/errorHandling';
 import { showSuccessAlert } from 'redux/reducers/alerts/alertsSlice';
+import { fetchTopicDetails } from 'redux/reducers/topics/topicsSlice';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 export const messagesApiClient = new MessagesApi(apiClientConf);
@@ -23,7 +24,7 @@ export const clearTopicMessages = createAsyncThunk<
         topicName,
         partitions,
       });
-
+      dispatch(fetchTopicDetails({ clusterName, topicName }));
       dispatch(
         showSuccessAlert({
           id: `message-${topicName}-${clusterName}-${partitions}`,


Test patch: