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,7 +244,9 @@ export const updateTopicPartitionsCount = createAsyncThunk<
     topicName: TopicName;
     partitions: number;
   }
->('topic/updateTopicPartitionsCount', async (payload, { rejectWithValue }) => {
+>(
+  'topic/updateTopicPartitionsCount',
+  async (payload, { rejectWithValue, dispatch }) => {
     try {
       const { clusterName, topicName, partitions } = payload;
 
@@ -252,12 +255,19 @@ export const updateTopicPartitionsCount = createAsyncThunk<
         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,