Merge pull request #4052 from RedisInsight/fe/bugfix/RI-6292-edit-rdi-name-fix

RI-6292 edit connected rdi instance fix

Author: vlad-dargel

redisinsight/ui/src/slices/rdi/instances.ts

@@ -128,6 +128,10 @@ const instancesSlice = createSlice({
     // reset connected instance
     resetConnectedInstance: (state) => {
       state.connectedInstance = initialState.connectedInstance
+    },
+
+    updateConnectedInstance: (state, { payload }: { payload: RdiInstance }) => {
+      state.connectedInstance = { ...state.connectedInstance, ...payload }
     }
   }
 })
@@ -151,7 +155,8 @@ export const {
   setConnectedInstance,
   setConnectedInstanceSuccess,
   setConnectedInstanceFailure,
-  resetConnectedInstance
+  resetConnectedInstance,
+  updateConnectedInstance,
 } = instancesSlice.actions
 
 // selectors
@@ -213,7 +218,7 @@ export function editInstanceAction(
   payload: Partial<RdiInstance>,
   onSuccess?: (data: RdiInstanceResponse) => void
 ) {
-  return async (dispatch: AppDispatch) => {
+  return async (dispatch: AppDispatch, stateInit: () => RootState) => {
     dispatch(defaultInstanceChanging())
 
     try {
@@ -226,6 +231,11 @@ export function editInstanceAction(
         dispatch(defaultInstanceChangingSuccess())
         dispatch(fetchInstancesAction())
 
+        const state = stateInit()
+        if (state.rdi.instances.connectedInstance?.id === data.id) {
+          dispatch(updateConnectedInstance(data))
+        }
+
         onSuccess?.(data)
       }
     } catch (_err) {

redisinsight/ui/src/slices/tests/rdi/instances.spec.ts

@@ -13,10 +13,15 @@ import reducer, {
   instancesSelector,
   fetchConnectedInstanceAction,
   checkConnectToRdiInstanceAction,
-} from 'uiSrc/slices/rdi/instances'
+  editInstanceAction,
+  defaultInstanceChanging,
+  defaultInstanceChangingSuccess,
+  defaultInstanceChangingFailure,
+  updateConnectedInstance } from 'uiSrc/slices/rdi/instances'
 import { apiService } from 'uiSrc/services'
 import { addErrorNotification, IAddInstanceErrorPayload } from 'uiSrc/slices/app/notifications'
 import { RdiInstance } from 'uiSrc/slices/interfaces'
+import { Rdi } from 'apiSrc/modules/rdi/models'
 
 let store: typeof mockedStore
 
@@ -160,6 +165,31 @@ describe('rdi instances slice', () => {
     })
   })
 
+  describe('updateConnectedInstance', () => {
+    it('should properly update connected instance', () => {
+      // Arrange
+      const state = {
+        ...initialState,
+        connectedInstance: {
+          ...initialState.connectedInstance,
+          ...mockRdiInstance,
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialState, updateConnectedInstance(mockRdiInstance as Rdi))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        rdi: {
+          instances: nextState
+        },
+      })
+
+      expect(instancesSelector(rootState)).toEqual(state)
+    })
+  })
+
   // thunks
 
   describe('thunks', () => {
@@ -210,6 +240,55 @@ describe('rdi instances slice', () => {
       })
     })
 
+    describe('editInstanceAction', () => {
+      it('succeed to edit data and calls a success callback', async () => {
+        const onSuccess = jest.fn()
+        const responsePayload = { data: mockRdiInstance, status: 200 }
+
+        apiService.patch = jest.fn().mockResolvedValue(responsePayload)
+
+        // Act
+        await store.dispatch<any>(
+          editInstanceAction('123', mockRdiInstance, onSuccess)
+        )
+
+        // Assert
+        const expectedActions = [
+          defaultInstanceChanging(),
+          defaultInstanceChangingSuccess(),
+        ]
+
+        expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
+        expect(onSuccess).toBeCalledWith(mockRdiInstance)
+      })
+
+      it('failed to edit data', async () => {
+        const errorMessage = 'Something was wrong!'
+        const responsePayload = {
+          response: {
+            status: 500,
+            data: { message: errorMessage },
+          },
+        }
+
+        apiService.patch = jest.fn().mockRejectedValue(responsePayload)
+
+        // Act
+        await store.dispatch<any>(
+          editInstanceAction('123', mockRdiInstance)
+        )
+
+        // Assert
+        const expectedActions = [
+          defaultInstanceChanging(),
+          defaultInstanceChangingFailure(errorMessage),
+          addErrorNotification(responsePayload as AxiosError),
+        ]
+
+        expect(store.getActions()).toEqual(expectedActions)
+      })
+    })
+
     describe('checkConnectToRdiInstanceAction', () => {
       it('succeed to fetch data', async () => {
         const responsePayload = { status: 200 }