RI-7160 Stop fetching key details for key that was opened in another … (#4648)

* RI-7160 Stop fetching key details for key that was opened in another database after switch
RI-7132 fix duplicated calls on refresh on the details view for a json key

* Update redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/useChangeEditorType.tsx

Co-authored-by: Pavel Angelov <[email protected]>

---------

Co-authored-by: Pavel Angelov <[email protected]>

Author: ArtemHoruzhenko

redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/useChangeEditorType.spec.ts

@@ -2,16 +2,22 @@ import * as reactRedux from 'react-redux'
 import { renderHook, act } from '@testing-library/react-hooks'
 import { EditorType } from 'uiSrc/slices/interfaces'
 import { FeatureFlags } from 'uiSrc/constants'
-
+import { stringToBuffer } from 'uiSrc/utils'
 import { useChangeEditorType } from './useChangeEditorType'
 
 jest.mock('react-redux', () => ({
   useDispatch: jest.fn(),
   useSelector: jest.fn(),
 }))
 
+jest.mock('uiSrc/slices/browser/rejson', () => ({
+  ...jest.requireActual('uiSrc/slices/browser/rejson'),
+  fetchReJSON: jest.fn((key) => ({ type: 'FETCH_REJSON', payload: key })),
+}))
+
 const mockedUseDispatch = reactRedux.useDispatch as jest.Mock
 const mockedUseSelector = reactRedux.useSelector as jest.Mock
+const mockKeyName = stringToBuffer('test-key')
 
 describe('useChangeEditorType', () => {
   const dispatchMock = jest.fn()
@@ -59,6 +65,50 @@ describe('useChangeEditorType', () => {
     })
   })
 
+  it('should fetch json when type switched', async () => {
+    mockedUseSelector.mockReturnValue({
+      editorType: EditorType.Default,
+    }).mockReturnValue({
+      [FeatureFlags.envDependent]: { flag: false },
+    }).mockReturnValue({
+      name: mockKeyName,
+    })
+
+    const { result } = renderHook(() => useChangeEditorType())
+
+    act(() => {
+      result.current.switchEditorType()
+    })
+
+    expect(dispatchMock).toHaveBeenCalledWith({
+      type: 'rejson/setEditorType',
+      payload: EditorType.Default,
+    })
+    expect(dispatchMock).toHaveBeenCalledWith({
+      type: 'FETCH_REJSON',
+      payload: mockKeyName,
+    })
+  })
+
+  it('should not fetch json when there is no selected key', () => {
+    mockedUseSelector.mockReturnValue({
+      editorType: EditorType.Default,
+    }).mockReturnValue({
+      [FeatureFlags.envDependent]: { flag: false },
+    })
+
+    const { result } = renderHook(() => useChangeEditorType())
+
+    act(() => {
+      result.current.switchEditorType()
+    })
+
+    expect(dispatchMock).not.toHaveBeenCalledWith({
+      type: 'FETCH_REJSON',
+      payload: expect.anything(),
+    })
+  })
+
   describe('isTextEditorDisabled', () => {
     it('should be false when isWithinThreshold is true', () => {
       mockedUseSelector

redisinsight/ui/src/pages/browser/modules/key-details/components/change-editor-type-button/useChangeEditorType.tsx

@@ -2,22 +2,32 @@ import { useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { FeatureFlags } from 'uiSrc/constants'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
-import { rejsonSelector, setEditorType } from 'uiSrc/slices/browser/rejson'
+import {
+  fetchReJSON,
+  rejsonSelector,
+  setEditorType,
+} from 'uiSrc/slices/browser/rejson'
 import { EditorType } from 'uiSrc/slices/interfaces'
+import { selectedKeyDataSelector } from 'uiSrc/slices/browser/keys'
 
 export const useChangeEditorType = () => {
   const dispatch = useDispatch()
   const { editorType, isWithinThreshold } = useSelector(rejsonSelector)
   const { [FeatureFlags.envDependent]: envDependentFeature } = useSelector(
     appFeatureFlagsFeaturesSelector,
   )
+  const selectedKey = useSelector(selectedKeyDataSelector)?.name
 
   const isTextEditorDisabled = !isWithinThreshold && !envDependentFeature?.flag
 
   const switchEditorType = useCallback(() => {
     const opposite =
       editorType === EditorType.Default ? EditorType.Text : EditorType.Default
     dispatch(setEditorType(opposite))
+
+    if (selectedKey) {
+      dispatch(fetchReJSON(selectedKey))
+    }
   }, [dispatch, editorType])
 
   return { switchEditorType, editorType, isTextEditorDisabled }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { instance, mock } from 'ts-mockito'
 import { render } from 'uiSrc/utils/test-utils'
-import { fetchReJSON } from 'uiSrc/slices/browser/rejson'
 import { EditorType } from 'uiSrc/slices/interfaces'
 import { stringToBuffer } from 'uiSrc/utils'
 
@@ -66,7 +65,7 @@ describe('RejsonDetailsWrapper', () => {
     ).toBeTruthy()
   })
 
-  it('should dispatch fetchReJSON when editorType changes', () => {
+  it('should not dispatch fetchReJSON on init', () => {
     let editorType = EditorType.Default
 
     mockUseSelector.mockImplementation((selector) => {
@@ -83,7 +82,9 @@ describe('RejsonDetailsWrapper', () => {
     editorType = EditorType.Text
     rerender(<RejsonDetailsWrapper {...instance(mockedProps)} />)
 
-    const expectedKey = stringToBuffer('test-key')
-    expect(mockDispatch).toHaveBeenCalledWith(fetchReJSON(expectedKey))
+    expect(mockDispatch).not.toHaveBeenCalledWith({
+      type: 'FETCH_REJSON',
+      payload: expect.anything(),
+    })
   })
 })

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { EuiProgress } from '@elastic/eui'
 import { isUndefined } from 'lodash'
 
 import {
-  fetchReJSON,
   rejsonDataSelector,
   rejsonSelector,
 } from 'uiSrc/slices/browser/rejson'
@@ -36,7 +35,6 @@ export interface Props extends KeyDetailsHeaderProps {}
 const RejsonDetailsWrapper = (props: Props) => {
   const { loading, editorType } = useSelector(rejsonSelector)
   const { data, downloaded, type, path } = useSelector(rejsonDataSelector)
-  const dispatch = useDispatch()
 
   const {
     name: selectedKey,
@@ -54,20 +52,6 @@ const RejsonDetailsWrapper = (props: Props) => {
     setExpandedRows(new Set())
   }, [nameString])
 
-  // TODO: the whole workflow should be refactored
-  // in a way that this component will not be responsible for fetching data
-  // based on the editor type
-  useEffect(() => {
-    if (!selectedKey) return
-
-    // Not including `loading` in deps is intentional
-    // This check avoids double fetching of data
-    // which happens when new key is selected for example.
-    if (loading) return
-
-    dispatch(fetchReJSON(selectedKey))
-  }, [editorType, selectedKey, dispatch])
-
   const reportJSONKeyCollapsed = (level: number) => {
     sendEventTelemetry({
       event: getBasedOnViewTypeEvent(