Merge pull request #1475 from RedisInsight/fe/bugfix/RI-3796_fix-bulk-actions-context

#RI-3796 - fix bulk actions context

Author: vlad-dargel

redisinsight/ui/src/pages/browser/BrowserPage.spec.tsx

@@ -5,14 +5,20 @@ import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/tes
 import { setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
 import { loadKeys, resetKeyInfo, toggleBrowserFullScreen } from 'uiSrc/slices/browser/keys'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
-import { setBrowserBulkActionOpen } from 'uiSrc/slices/app/context'
+import {
+  setBrowserBulkActionOpen,
+  setBrowserPanelSizes,
+  setBrowserSelectedKey,
+  setLastPageContext
+} from 'uiSrc/slices/app/context'
 import BrowserPage from './BrowserPage'
 import KeyList, { Props as KeyListProps } from './components/key-list/KeyList'
 import KeyDetailsWrapper, {
   Props as KeyDetailsWrapperProps
 } from './components/key-details/KeyDetailsWrapper'
 import AddKey, { Props as AddKeyProps } from './components/add-key/AddKey'
-import KeysHeader, { Props as KeysHeaderProps } from './components/keys-header'
+import KeysHeader from './components/keys-header'
+import { Props as KeysHeaderProps } from './components/keys-header/KeysHeader'
 
 jest.mock('./components/key-list/KeyList', () => ({
   __esModule: true,
@@ -123,7 +129,7 @@ describe('BrowserPage', () => {
 
     fireEvent.click(screen.getByTestId('handleBulkActionsPanel-btn'))
 
-    const expectedActions = [resetKeyInfo(), toggleBrowserFullScreen(false), setBrowserBulkActionOpen(true)]
+    const expectedActions = [resetKeyInfo(), toggleBrowserFullScreen(false)]
     expect(store.getActions()).toEqual([...afterRenderActions, ...expectedActions])
   })
 
@@ -144,4 +150,20 @@ describe('BrowserPage', () => {
 
     expect(store.getActions()).toEqual([...afterRenderActions, toggleBrowserFullScreen(true)])
   })
+
+  it('should call proper actions on onmount', () => {
+    const { unmount } = render(<BrowserPage />)
+    const afterRenderActions = [...store.getActions()]
+
+    unmount()
+
+    const unmountActions = [
+      setBrowserPanelSizes(expect.any(Object)),
+      setBrowserBulkActionOpen(expect.any(Boolean)),
+      setBrowserSelectedKey(null),
+      setLastPageContext('browser'),
+    ]
+
+    expect(store.getActions()).toEqual([...afterRenderActions, ...unmountActions])
+  })
 })

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -27,6 +27,7 @@ import {
   appContextBrowser,
   setBrowserPanelSizes,
   setLastPageContext,
+  setBrowserBulkActionOpen,
 } from 'uiSrc/slices/app/context'
 import { resetErrors } from 'uiSrc/slices/app/notifications'
 import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
@@ -68,6 +69,7 @@ const BrowserPage = () => {
 
   const prevSelectedType = useRef<string>(type)
   const selectedKeyRef = useRef<Nullable<RedisResponseBuffer>>(selectedKey)
+  const isBulkActionsPanelOpenRef = useRef<boolean>(isBulkActionsPanelOpen)
 
   const dispatch = useDispatch()
 
@@ -86,11 +88,16 @@ const BrowserPage = () => {
         dispatch(setBrowserPanelSizes(prevSizes))
         return {}
       })
+      dispatch(setBrowserBulkActionOpen(isBulkActionsPanelOpenRef.current))
       dispatch(setBrowserSelectedKey(selectedKeyRef.current))
       dispatch(setLastPageContext('browser'))
     }
   }, [])
 
+  useEffect(() => {
+    isBulkActionsPanelOpenRef.current = isBulkActionsPanelOpen
+  }, [isBulkActionsPanelOpen])
+
   useEffect(() => {
     selectedKeyRef.current = selectedKey
   }, [selectedKey])

redisinsight/ui/src/pages/browser/components/bulk-actions/BulkActions.tsx

@@ -22,7 +22,6 @@ import {
 import { BulkActionsType } from 'uiSrc/constants'
 import { keysSelector } from 'uiSrc/slices/browser/keys'
 import { getMatchType, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { setBrowserBulkActionOpen } from 'uiSrc/slices/app/context'
 
 import BulkDelete from './BulkDelete'
 import BulkActionsTabs from './BulkActionsTabs'
@@ -52,8 +51,6 @@ const BulkActions = (props: Props) => {
 
   const dispatch = useDispatch()
   useEffect(() => {
-    dispatch(setBrowserBulkActionOpen(true))
-
     let matchValue = '*'
     if (search !== '*' && !!search) {
       matchValue = getMatchType(search)
@@ -86,7 +83,6 @@ const BulkActions = (props: Props) => {
   const closePanel = () => {
     onBulkActionsPanel(false)
     dispatch(setBulkActionsInitialState())
-    dispatch(setBrowserBulkActionOpen(false))
 
     onClosePanel()