#RI-3007,3021-remove fetch data after claim and ack (#738)

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/browser/components/stream-details/constants.ts

@@ -10,7 +10,7 @@ interface StreamTabs {
 export const streamViewTypeTabs: StreamTabs[] = [
   {
     id: StreamViewType.Data,
-    label: 'Stream data',
+    label: 'Stream Data',
   },
   {
     id: StreamViewType.Groups,

redisinsight/ui/src/slices/browser/stream.ts

@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { remove } from 'lodash'
 import axios, { AxiosError, CancelTokenSource } from 'axios'
 
 import { apiService } from 'uiSrc/services'
@@ -300,6 +301,9 @@ const streamSlice = createSlice({
       state.groups.loading = false
       state.groups.error = payload
     },
+    deleteMessageFromList: (state, { payload }) => {
+      remove(state.groups?.selectedGroup?.selectedConsumer?.data!, (message) => message?.id === payload)
+    },
   },
 })
 
@@ -350,6 +354,7 @@ export const {
   ackPendingEntries,
   ackPendingEntriesSuccess,
   ackPendingEntriesFailure,
+  deleteMessageFromList,
 } = streamSlice.actions
 
 // A selector
@@ -957,9 +962,9 @@ export function claimPendingMessages(
       )
       if (isStatusSuccessful(status)) {
         dispatch(claimConsumerMessagesSuccess())
-        dispatch<any>(fetchConsumerMessages())
         dispatch<any>(fetchConsumers())
         if (data.affected.length) {
+          dispatch(deleteMessageFromList(data.affected[0]))
           dispatch(addMessageNotification(
             successMessages.MESSAGE_ACTION(data.affected[0], 'claimed')
           ))
@@ -1008,7 +1013,7 @@ export function ackPendingEntriesAction(
       if (isStatusSuccessful(status)) {
         onSuccessAction?.()
         dispatch(ackPendingEntriesSuccess())
-        dispatch<any>(fetchConsumerMessages())
+        dispatch(deleteMessageFromList(entries[0]))
         dispatch<any>(fetchConsumers())
         dispatch(addMessageNotification(
           successMessages.MESSAGE_ACTION(entries[0], 'acknowledged')

redisinsight/ui/src/slices/tests/browser/stream.spec.ts

@@ -67,7 +67,8 @@ import reducer, {
   claimPendingMessages,
   claimConsumerMessages,
   claimConsumerMessagesSuccess,
-  claimConsumerMessagesFailure
+  claimConsumerMessagesFailure,
+  deleteMessageFromList
 } from 'uiSrc/slices/browser/stream'
 import { StreamViewType } from 'uiSrc/slices/interfaces/stream'
 import { cleanup, initialStateDefault, mockedStore, } from 'uiSrc/utils/test-utils'
@@ -1403,7 +1404,6 @@ describe('stream slice', () => {
         const entries = ['0-1']
         const responsePayload = { status: 200 }
 
-        apiService.post = jest.fn().mockResolvedValue(responsePayload)
         apiService.post = jest.fn().mockResolvedValue(responsePayload)
         apiService.post = jest.fn().mockResolvedValue(responsePayload)
 
@@ -1414,7 +1414,7 @@ describe('stream slice', () => {
         const expectedActions = [
           ackPendingEntries(),
           ackPendingEntriesSuccess(),
-          loadConsumerGroups(),
+          deleteMessageFromList('0-1'),
           loadConsumerGroups(),
           addMessageNotification(
             successMessages.MESSAGE_ACTION(
@@ -1456,7 +1456,7 @@ describe('stream slice', () => {
     })
 
     describe('claimPendingMessagesAction', () => {
-      it('succeed to fetch data', async () => {
+      it('succeed to claim message', async () => {
         // Arrange
         const data: Partial<ClaimPendingEntryDto> = {
           keyName: 'key',
@@ -1468,7 +1468,6 @@ describe('stream slice', () => {
 
         const responsePayload = { status: 200 }
 
-        apiService.post = jest.fn().mockResolvedValue(responsePayload)
         apiService.post = jest.fn().mockResolvedValue(responsePayload)
 
         const responsePayloadPost = { data: { affected: ['0-1'] }, status: 200 }
@@ -1483,7 +1482,7 @@ describe('stream slice', () => {
           claimConsumerMessages(),
           claimConsumerMessagesSuccess(),
           loadConsumerGroups(),
-          loadConsumerGroups(),
+          deleteMessageFromList('0-1'),
           addMessageNotification(
             successMessages.MESSAGE_ACTION('0-1', 'claimed')
           )
@@ -1492,6 +1491,40 @@ describe('stream slice', () => {
         expect(store.getActions()).toEqual(expectedActions)
       })
 
+      it('succeed to claim message with 0 affected', async () => {
+        // Arrange
+        const data: Partial<ClaimPendingEntryDto> = {
+          keyName: 'key',
+          groupName: 'group',
+          consumerName: 'name',
+          minIdleTime: 0,
+          entries: ['0-1']
+        }
+
+        const responsePayload = { status: 200 }
+
+        apiService.post = jest.fn().mockResolvedValue(responsePayload)
+
+        const responsePayloadPost = { data: { affected: [] }, status: 200 }
+
+        apiService.post = jest.fn().mockResolvedValue(responsePayloadPost)
+
+        // Act
+        await store.dispatch<any>(claimPendingMessages(data))
+
+        // Assert
+        const expectedActions = [
+          claimConsumerMessages(),
+          claimConsumerMessagesSuccess(),
+          loadConsumerGroups(),
+          addMessageNotification(
+            successMessages.NO_CLAIMED_MESSAGES()
+          )
+        ]
+
+        expect(store.getActions()).toEqual(expectedActions)
+      })
+
       it('failed to fetch data', async () => {
         const data: Partial<ClaimPendingEntryDto> = {
           keyName: 'key',
@@ -1524,4 +1557,4 @@ describe('stream slice', () => {
       })
     })
   })
-})
+})