Merge pull request #2787 from RedisInsight/fe/bugfix/RI-5162-fix-rerender

#RI-5162 - fix page re-render only when located on the same page

Author: mariasergeenko

redisinsight/ui/src/pages/instance/InstancePage.tsx

@@ -1,7 +1,7 @@
 import { EuiResizableContainer } from '@elastic/eui'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'react-router-dom'
 import cx from 'classnames'
 
 import { setInitialAnalyticsSettings } from 'uiSrc/slices/analytics/settings'
@@ -34,6 +34,7 @@ import { setClusterDetailsInitialState } from 'uiSrc/slices/analytics/clusterDet
 import { setDatabaseAnalysisInitialState } from 'uiSrc/slices/analytics/dbAnalysis'
 import { resetRedisearchKeysData, setRedisearchInitialState } from 'uiSrc/slices/browser/redisearch'
 import { setTriggeredFunctionsInitialState } from 'uiSrc/slices/triggeredFunctions/triggeredFunctions'
+import { getPageName } from 'uiSrc/utils/routing'
 import InstancePageRouter from './InstancePageRouter'
 
 import styles from './styles.module.scss'
@@ -66,12 +67,16 @@ const InstancePage = ({ routes = [] }: Props) => {
   const [isShouldChildrenRerender, setIsShouldChildrenRerender] = useState(false)
 
   const dispatch = useDispatch()
+  const { pathname } = useLocation()
+
   const { instanceId: connectionInstanceId } = useParams<{ instanceId: string }>()
   const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
   const { data: modulesData } = useSelector(instancesSelector)
   const { isShowMonitor } = useSelector(monitorSelector)
   const { contextInstanceId } = useSelector(appContextSelector)
 
+  const lastPageRef = useRef<string>()
+
   const isShowBottomGroup = isShowCli || isShowHelper || isShowMonitor
 
   useEffect(() => {
@@ -82,9 +87,10 @@ const InstancePage = ({ routes = [] }: Props) => {
     dispatch(fetchConnectedInstanceInfoAction(connectionInstanceId))
 
     if (contextInstanceId && contextInstanceId !== connectionInstanceId) {
-      // rerender children from scratch to clear all component states
-      setIsShouldChildrenRerender(true)
-      requestAnimationFrame(() => setIsShouldChildrenRerender(false))
+      // rerender children only if the same page from scratch to clear all component states
+      if (lastPageRef.current === getPageName(connectionInstanceId, pathname)) {
+        setIsShouldChildrenRerender(true)
+      }
 
       resetContext()
     }
@@ -93,6 +99,14 @@ const InstancePage = ({ routes = [] }: Props) => {
     dispatch(setDbConfig(localStorageService.get(BrowserStorageItem.dbConfig + connectionInstanceId)))
   }, [connectionInstanceId])
 
+  useEffect(() => {
+    lastPageRef.current = getPageName(connectionInstanceId, pathname)
+  }, [pathname])
+
+  useEffect(() => {
+    if (isShouldChildrenRerender) setIsShouldChildrenRerender(false)
+  }, [isShouldChildrenRerender])
+
   useEffect(() => () => {
     setSizes((prevSizes: ResizablePanelSize) => {
       localStorageService.set(BrowserStorageItem.cliResizableContainer, {

redisinsight/ui/src/slices/oauth/cloud.ts

@@ -12,7 +12,6 @@ import {
 } from 'uiSrc/components/notifications/components'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import { getCloudSsoUtmParams } from 'uiSrc/utils/oauth/cloudSsoUtm'
-import { resetKeys } from 'uiSrc/slices/browser/keys'
 import { CloudUser } from 'apiSrc/modules/cloud/user/models'
 import { CloudJobInfo } from 'apiSrc/modules/cloud/job/models'
 import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto'
@@ -33,7 +32,6 @@ import {
   removeInfiniteNotification
 } from '../app/notifications'
 import { checkConnectToInstanceAction, setConnectedInstanceId } from '../instances/instances'
-import { setAppContextInitialState } from '../app/context'
 
 export const initialState: StateAppOAuth = {
   loading: false,
@@ -245,8 +243,6 @@ export function createFreeDbSuccess(id: string, history: any) {
         dispatch(removeInfiniteNotification(InfiniteMessagesIds.oAuthSuccess))
 
         if (!isConnected) {
-          dispatch(resetKeys())
-          dispatch(setAppContextInitialState())
           dispatch(setConnectedInstanceId(id ?? ''))
           dispatch(checkConnectToInstanceAction(id))
         }

redisinsight/ui/src/utils/routing.ts

@@ -43,3 +43,5 @@ export const getRedirectionPage = (pageInput: string, databaseId?: string): Null
     return `/${page}`
   }
 }
+
+export const getPageName = (databaseId: string, path: string) => path?.replace(`/${databaseId}`, '')

redisinsight/ui/src/utils/test-utils.tsx

@@ -253,6 +253,7 @@ jest.mock('uiSrc/constants/recommendations', () => ({
 
 // mock to not import routes
 jest.mock('uiSrc/utils/routing', () => ({
+  ...jest.requireActual('uiSrc/utils/routing'),
   getRedirectionPage: jest.fn(),
 }))
 
@@ -281,7 +282,7 @@ const matchMediaMock = () => ({
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => matchMediaMock(query)),
+  value: jest.fn().mockImplementation((query) => matchMediaMock(query)),
 })
 
 export const getMswResourceURL = (path: string = '') => RESOURCES_BASE_URL.concat(path)

redisinsight/ui/src/utils/tests/routing.spec.ts

@@ -1,4 +1,4 @@
-import { getRedirectionPage } from 'uiSrc/utils/routing'
+import { getPageName, getRedirectionPage } from 'uiSrc/utils/routing'
 
 jest.mock('uiSrc/utils/routing', () => ({
   ...jest.requireActual('uiSrc/utils/routing')
@@ -25,3 +25,20 @@ describe('getRedirectionPage', () => {
     }
   )
 })
+
+const getPageNameTests = [
+  { input: ['instanceId', '/instanceId/page1'], expected: '/page1' },
+  { input: ['instanceId', '/instanceId/page1/page2'], expected: '/page1/page2' },
+  { input: ['instanceId', '/page1'], expected: '/page1' },
+]
+
+describe('getPageName', () => {
+  test.each(getPageNameTests)(
+    '%j',
+    ({ input, expected }) => {
+      // @ts-ignore
+      const result = getPageName(...input)
+      expect(result).toEqual(expected)
+    }
+  )
+})