adding success alert for partitions update and display changes immediately without refresh (#2038)

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,
           },

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,