Merge pull request #4280 from RedisInsight/fe/feature/RI-6372-remember-context-when-switching-btw-rdi

RI-6372 remember context when switching btw rdis

Author: mariasergeenko

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/InstancesNavigationPopover.tsx

@@ -137,6 +137,7 @@ const InstancesNavigationPopover = ({ name }: Props) => {
             selectedTab={selectedTab}
             filteredDbInstances={filteredDbInstances}
             filteredRdiInstances={filteredRdiInstances}
+            onItemClick={showPopover}
           />
           <div>
             <EuiSpacer size="m" />

redisinsight/ui/src/components/instance-header/components/instances-navigation-popover/components/instances-list/InstancesList.tsx

@@ -1,14 +1,10 @@
 import React, { useState } from 'react'
 import { EuiListGroup, EuiListGroupItem, EuiLoadingSpinner, EuiText } from '@elastic/eui'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
-import { checkConnectToRdiInstanceAction, instancesSelector as rdiInstancesSelector } from 'uiSrc/slices/rdi/instances'
-import { checkConnectToInstanceAction, instancesSelector as dbInstancesSelector, setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
+import { checkConnectToRdiInstanceAction } from 'uiSrc/slices/rdi/instances'
+import { checkConnectToInstanceAction, setConnectedInstanceId } from 'uiSrc/slices/instances/instances'
 import { Pages } from 'uiSrc/constants'
-import { resetRdiContext, setAppContextInitialState } from 'uiSrc/slices/app/context'
-import { resetKeys } from 'uiSrc/slices/browser/keys'
-import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
-import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
 import { Instance, RdiInstance } from 'uiSrc/slices/interfaces'
 import { TelemetryEvent, getRedisModulesSummary, sendEventTelemetry } from 'uiSrc/telemetry'
 import { getDbIndex } from 'uiSrc/utils'
@@ -19,31 +15,32 @@ export interface InstancesListProps {
   selectedTab: InstancesTabs
   filteredDbInstances: Instance[]
   filteredRdiInstances: RdiInstance[]
+  onItemClick: () => void
 }
 
 const InstancesList = ({
   selectedTab,
   filteredDbInstances,
   filteredRdiInstances,
+  onItemClick,
 } :InstancesListProps) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [selected, setSelected] = useState<string>('')
 
   const { instanceId, rdiInstanceId } = useParams<{ instanceId: string, rdiInstanceId: string }>()
   const history = useHistory()
   const dispatch = useDispatch()
-  const { connectedInstance: connectedRdiInstance } = useSelector(rdiInstancesSelector)
-  const { connectedInstance: connectedDbInstance } = useSelector(dbInstancesSelector)
   const instances = selectedTab === InstancesTabs.Databases ? filteredDbInstances : filteredRdiInstances
 
   const connectToInstance = (id = '') => {
     dispatch(setConnectedInstanceId(id))
     setLoading(false)
+    onItemClick?.()
     history.push(Pages.browser(id))
   }
 
   const goToInstance = (instance: Instance) => {
-    if (connectedDbInstance?.id === instance.id) {
+    if (instanceId === instance.id) {
       // already connected so do nothing
       return
     }
@@ -62,7 +59,7 @@ const InstancesList = ({
   }
 
   const goToRdiInstance = (instance: RdiInstance) => {
-    if (connectedRdiInstance?.id === instance.id) {
+    if (rdiInstanceId === instance.id) {
       // already connected so do nothing
       return
     }
@@ -71,7 +68,7 @@ const InstancesList = ({
       instance.id,
       (id: string) => {
         setLoading(false)
-
+        onItemClick?.()
         history.push(Pages.rdiPipelineConfig(id))
       },
       () => setLoading(false)

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

@@ -29,7 +29,7 @@ import {
   setConnectedInstance,
   setDefaultInstance
 } from 'uiSrc/slices/instances/instances'
-import { resetConnectedInstance as resetRdiConnectedInstance, loadInstances as loadRdiInstances } from 'uiSrc/slices/rdi/instances'
+import { loadInstances as loadRdiInstances } from 'uiSrc/slices/rdi/instances'
 import { clearExpertChatHistory } from 'uiSrc/slices/panels/aiAssistant'
 import { getAllPlugins } from 'uiSrc/slices/app/plugins'
 import { FeatureFlags } from 'uiSrc/constants'
@@ -138,7 +138,6 @@ describe('InstancePage', () => {
       clearExpertChatHistory(),
       setAppContextConnectedInstanceId(INSTANCE_ID_MOCK),
       setDbConfig(undefined),
-      resetRdiConnectedInstance(),
     ]
 
     expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)

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

@@ -97,9 +97,6 @@ const InstancePage = ({ routes = [] }: Props) => {
     dispatch(setAppContextConnectedInstanceId(connectionInstanceId))
     dispatch(setDbConfig(localStorageService.get(BrowserStorageItem.dbConfig + connectionInstanceId)))
 
-    // clear rdi connection
-    dispatch(resetRdiConnectedInstance())
-
     return () => {
       intervalId && clearInterval(intervalId)
     }

redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.tsx

@@ -13,7 +13,6 @@ import {
   deleteInstancesAction,
   checkConnectToRdiInstanceAction,
   instancesSelector,
-  resetConnectedInstance as resetConnectedRdiInstance,
 } from 'uiSrc/slices/rdi/instances'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { Nullable, formatLongName, lastConnectionFormat } from 'uiSrc/utils'
@@ -80,10 +79,7 @@ const RdiInstancesListWrapper = ({ width, onEditInstance, editedInstance, onDele
     dispatch(checkConnectToRdiInstanceAction(
       id,
       (id: string) => history.push(Pages.rdiPipeline(id)),
-      () => {
-        dispatch(resetConnectedRdiInstance())
-        dispatch(setAppContextConnectedRdiInstanceId(''))
-      }
+      () => dispatch(setAppContextConnectedRdiInstanceId(''))
     ))
   }
 

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

@@ -13,7 +13,6 @@ import {
   resetPipelineManagement,
   setAppContextConnectedRdiInstanceId,
   setAppContextInitialState,
-  setPipelineDialogState,
 } from 'uiSrc/slices/app/context'
 import { resetCliHelperSettings } from 'uiSrc/slices/cli/cli-settings'
 import { resetRedisearchKeysData, setRedisearchInitialState } from 'uiSrc/slices/browser/redisearch'
@@ -28,7 +27,7 @@ import {
 } from 'uiSrc/slices/instances/instances'
 import { setConnectedInstance, loadInstances as loadRdiInstances } from 'uiSrc/slices/rdi/instances'
 import { PageNames, Pages } from 'uiSrc/constants'
-import { getPipelineStatus, setPipelineInitialState } from 'uiSrc/slices/rdi/pipeline'
+import { getPipelineStatus, setPipelineConfig, setPipelineInitialState, setPipelineJobs } from 'uiSrc/slices/rdi/pipeline'
 import { clearExpertChatHistory } from 'uiSrc/slices/panels/aiAssistant'
 
 import InstancePage, { Props } from './InstancePage'
@@ -106,6 +105,8 @@ describe('InstancePage', () => {
       loadRdiInstances(),
       setAppContextConnectedRdiInstanceId(''),
       setPipelineInitialState(),
+      setPipelineConfig(''),
+      setPipelineJobs([]),
       resetPipelineManagement(),
       setConnectedInstance(),
       setAppContextConnectedRdiInstanceId('rdiInstanceId'),
@@ -136,6 +137,8 @@ describe('InstancePage', () => {
       loadRdiInstances(),
       setAppContextConnectedRdiInstanceId(''),
       setPipelineInitialState(),
+      setPipelineConfig(''),
+      setPipelineJobs([]),
       resetPipelineManagement(),
       setConnectedInstance()
     ]
@@ -187,20 +190,4 @@ describe('InstancePage', () => {
 
     expect(pushMock).toBeCalledWith(Pages.rdiStatistics(RDI_INSTANCE_ID_MOCK))
   })
-
-  it('should save proper page on unmount', () => {
-    const { unmount } = render(
-      <BrowserRouter>
-        <InstancePage {...instance(mockedProps)} />
-      </BrowserRouter>
-    )
-
-    unmount()
-    const expectedActions = [
-      setPipelineInitialState(),
-      setPipelineDialogState(true)
-    ]
-
-    expect(store.getActions().slice(0 - expectedActions.length)).toEqual(expectedActions)
-  })
 })

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

@@ -1,15 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
-import { Formik, FormikProps } from 'formik'
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'
 import {
   appContextSelector,
   resetDatabaseContext,
   resetRdiContext,
   setAppContextConnectedRdiInstanceId,
-  setPipelineDialogState,
 } from 'uiSrc/slices/app/context'
 import { IRoute, PageNames, Pages } from 'uiSrc/constants'
 import {
@@ -22,50 +20,26 @@ import {
   fetchInstancesAction,
   instancesSelector as dbInstancesSelector
 } from 'uiSrc/slices/instances/instances'
-import {
-  deployPipelineAction,
-  getPipelineStatusAction,
-  rdiPipelineSelector,
-  resetPipelineAction,
-  resetPipelineChecked,
-  setPipelineInitialState,
-} from 'uiSrc/slices/rdi/pipeline'
-import { IActionPipelineResultProps, IPipeline } from 'uiSrc/slices/interfaces'
-import { createAxiosError, isContainJSONModule, Nullable, pipelineToJson } from 'uiSrc/utils'
-import { rdiErrorMessages } from 'uiSrc/pages/rdi/constants'
-import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import { RdiInstancePageTemplate } from 'uiSrc/templates'
 import { RdiInstanceHeader } from 'uiSrc/components'
-import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import InstancePageRouter from './InstancePageRouter'
-import { ConfirmLeavePagePopup, RdiPipelineHeader } from './components'
-import { useUndeployedChangesPrompt } from './hooks'
+import { RdiPipelineHeader } from './components'
 import styles from './styles.module.scss'
 
 export interface Props {
   routes: IRoute[]
 }
 
-const getInitialValues = (data: Nullable<IPipeline>): IPipeline => ({
-  config: data?.config ?? '',
-  jobs: data?.jobs ?? [],
-})
-
 const RdiInstancePage = ({ routes = [] }: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const { pathname } = useLocation()
 
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
   const { lastPage, contextRdiInstanceId } = useSelector(appContextSelector)
-  const { data, resetChecked } = useSelector(rdiPipelineSelector)
   const { data: rdiInstances } = useSelector(rdiInstancesSelector)
   const { data: dbInstances } = useSelector(dbInstancesSelector)
-  const { showModal, handleCloseModal, handleConfirmLeave } = useUndeployedChangesPrompt()
-
-  const [initialFormValues, setInitialFormValues] = useState<IPipeline>(getInitialValues(data))
-  const formikRef = useRef<FormikProps<IPipeline>>(null)
 
   useEffect(() => {
     if (!dbInstances?.length) {
@@ -99,74 +73,18 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
     }
   }, [])
 
-  useEffect(() => {
-    setInitialFormValues(getInitialValues(data))
-    formikRef.current?.resetForm()
-  }, [data])
-
-  // set initial values
-  useEffect(() => () => {
-    dispatch(setPipelineInitialState())
-    dispatch(setPipelineDialogState(true))
-  }, [])
-
-  const actionPipelineCallback = (event: TelemetryEvent, result: IActionPipelineResultProps) => {
-    sendEventTelemetry({
-      event,
-      eventData: {
-        id: rdiInstanceId,
-        ...result,
-      }
-    })
-    dispatch(getPipelineStatusAction(rdiInstanceId))
-  }
-
-  const updatePipelineStatus = () => {
-    if (resetChecked) {
-      dispatch(resetPipelineChecked(false))
-      dispatch(resetPipelineAction(rdiInstanceId,
-        (result: IActionPipelineResultProps) => actionPipelineCallback(TelemetryEvent.RDI_PIPELINE_RESET, result),
-        (result: IActionPipelineResultProps) => actionPipelineCallback(TelemetryEvent.RDI_PIPELINE_RESET, result)))
-    } else {
-      dispatch(getPipelineStatusAction(rdiInstanceId))
-    }
-  }
-
-  const onSubmit = (values: IPipeline) => {
-    const JSONValues = pipelineToJson(values, (errors) => {
-      dispatch(addErrorNotification(createAxiosError({
-        message: rdiErrorMessages.invalidStructure(errors[0].filename, errors[0].msg)
-      })))
-    })
-    if (!JSONValues) {
-      return
-    }
-    dispatch(deployPipelineAction(rdiInstanceId, JSONValues, updatePipelineStatus,
-      () => dispatch(getPipelineStatusAction(rdiInstanceId))),)
-  }
-
   return (
-    <Formik
-      initialValues={initialFormValues}
-      enableReinitialize
-      onSubmit={onSubmit}
-      innerRef={formikRef}
-    >
-      <>
-        <EuiFlexGroup className={styles.page} direction="column" gutterSize="none" responsive={false}>
-          <EuiFlexItem grow={false}>
-            <RdiInstanceHeader />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <RdiPipelineHeader />
-          </EuiFlexItem>
-          <RdiInstancePageTemplate>
-            <InstancePageRouter routes={routes} />
-            {showModal && <ConfirmLeavePagePopup onClose={handleCloseModal} onConfirm={handleConfirmLeave} />}
-          </RdiInstancePageTemplate>
-        </EuiFlexGroup>
-      </>
-    </Formik>
+    <EuiFlexGroup className={styles.page} direction="column" gutterSize="none" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <RdiInstanceHeader />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <RdiPipelineHeader />
+      </EuiFlexItem>
+      <RdiInstancePageTemplate>
+        <InstancePageRouter routes={routes} />
+      </RdiInstancePageTemplate>
+    </EuiFlexGroup>
   )
 }