From 7211a18b5770e18087ccbf159699860b31f700e8 Mon Sep 17 00:00:00 2001
From: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Date: Mon, 30 May 2022 16:55:16 +0400
Subject: [PATCH] adding success alert for partitions update and display
 changes immediately without refresh (#2038)

---
 .../reducers/topics/__test__/reducer.spec.ts  | 29 ++++++++++++++-
 .../src/redux/reducers/topics/topicsSlice.ts  | 36 ++++++++++++-------
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
index 997b88e0f2..c81eb696e1 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/__test__/reducer.spec.ts
@@ -29,6 +29,10 @@ import { consumerGroupPayload } from 'redux/reducers/consumerGroups/__test__/fix
 import fetchMock from 'fetch-mock-jest';
 import mockStoreCreator from 'redux/store/configureStore/mockStoreCreator';
 import { getTypeAndPayload } from 'lib/testHelpers';
+import {
+  alertAdded,
+  showSuccessAlert,
+} from 'redux/reducers/alerts/alertsSlice';
 
 const topic = {
   name: 'topic',
@@ -658,6 +662,17 @@ describe('topics Slice', () => {
       });
     });
     describe('updateTopicPartitionsCount', () => {
+      const RealDate = Date.now;
+
+      beforeAll(() => {
+        global.Date.now = jest.fn(() =>
+          new Date('2019-04-07T10:20:30Z').getTime()
+        );
+      });
+
+      afterAll(() => {
+        global.Date.now = RealDate;
+      });
       it('updateTopicPartitionsCount/fulfilled', async () => {
         fetchMock.patchOnce(
           `/api/clusters/${clusterName}/topics/${topicName}/partitions`,
@@ -670,9 +685,21 @@ describe('topics Slice', () => {
             partitions: 1,
           })
         );
-
         expect(getTypeAndPayload(store)).toEqual([
           { type: updateTopicPartitionsCount.pending.type },
+          { type: showSuccessAlert.pending.type },
+          {
+            type: alertAdded.type,
+            payload: {
+              id: 'message-topic-local-1',
+              title: '',
+              type: 'success',
+              createdAt: global.Date.now(),
+              message: 'Number of partitions successfully increased!',
+            },
+          },
+          { type: fetchTopicDetails.pending.type },
+          { type: showSuccessAlert.fulfilled.type },
           {
             type: updateTopicPartitionsCount.fulfilled.type,
           },
diff --git a/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts b/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
index 9aac1079b4..3a35cc3d0e 100644
--- a/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
+++ b/kafka-ui-react-app/src/redux/reducers/topics/topicsSlice.ts
@@ -33,6 +33,7 @@ import {
 import { BASE_PARAMS } from 'lib/constants';
 import { getResponse } from 'lib/errorHandling';
 import { clearTopicMessages } from 'redux/reducers/topicMessages/topicMessagesSlice';
+import { showSuccessAlert } from 'redux/reducers/alerts/alertsSlice';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 const topicsApiClient = new TopicsApi(apiClientConf);
@@ -243,21 +244,30 @@ export const updateTopicPartitionsCount = createAsyncThunk<
     topicName: TopicName;
     partitions: number;
   }
->('topic/updateTopicPartitionsCount', async (payload, { rejectWithValue }) => {
-  try {
-    const { clusterName, topicName, partitions } = payload;
+>(
+  'topic/updateTopicPartitionsCount',
+  async (payload, { rejectWithValue, dispatch }) => {
+    try {
+      const { clusterName, topicName, partitions } = payload;
 
-    await topicsApiClient.increaseTopicPartitions({
-      clusterName,
-      topicName,
-      partitionsIncrease: { totalPartitionsCount: partitions },
-    });
-
-    return undefined;
-  } catch (err) {
-    return rejectWithValue(await getResponse(err as Response));
+      await topicsApiClient.increaseTopicPartitions({
+        clusterName,
+        topicName,
+        partitionsIncrease: { totalPartitionsCount: partitions },
+      });
+      dispatch(
+        showSuccessAlert({
+          id: `message-${topicName}-${clusterName}-${partitions}`,
+          message: 'Number of partitions successfully increased!',
+        })
+      );
+      dispatch(fetchTopicDetails({ clusterName, topicName }));
+      return undefined;
+    } catch (err) {
+      return rejectWithValue(await getResponse(err as Response));
+    }
   }
-});
+);
 
 export const updateTopicReplicationFactor = createAsyncThunk<
   undefined,