Give pipeline-management-v2 its own standalone page

redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts

@@ -114,12 +114,6 @@ const RDI_INSTANCE_ROUTES: IRoute[] = getRouteIncludedByEnv([
     component: LAZY_LOAD ? LazyPipelineManagementPage : PipelineManagementPage,
     routes: RDI_PIPELINE_MANAGEMENT_ROUTES,
   },
-  {
-    path: Pages.rdiPipelineManagementV2(':rdiInstanceId'),
-    component: LAZY_LOAD
-      ? LazyPipelineManagementV2Page
-      : PipelineManagementV2Page,
-  },
 ])
 
 const ROUTES: IRoute[] = [
@@ -190,6 +184,14 @@ const ROUTES: IRoute[] = [
       exact: true,
       featureFlag: FeatureFlags.rdi,
     },
+    {
+      path: Pages.rdiPipelineManagementV2(':rdiInstanceId'),
+      component: LAZY_LOAD
+        ? LazyPipelineManagementV2Page
+        : PipelineManagementV2Page,
+      exact: true,
+      featureFlag: FeatureFlags.rdi,
+    },
     {
       path: Pages.rdiPipeline(':rdiInstanceId'),
       component: LAZY_LOAD ? LazyRdiInstancePage : RdiInstancePage,

redisinsight/ui/src/pages/rdi/hooks/useConnectRdiInstance.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from 'uiSrc/slices/hooks'
+import {
+  appContextSelector,
+  resetDatabaseContext,
+  resetRdiContext,
+  setAppContextConnectedRdiInstanceId,
+  setLastPageContext,
+} from 'uiSrc/slices/app/context'
+import {
+  connectedInstanceSelector,
+  fetchConnectedInstanceAction,
+  fetchInstancesAction as fetchRdiInstancesAction,
+  instancesSelector as rdiInstancesSelector,
+} from 'uiSrc/slices/rdi/instances'
+import {
+  fetchInstancesAction,
+  instancesSelector as dbInstancesSelector,
+  resetConnectedInstance as resetConnectedDatabaseInstance,
+} from 'uiSrc/slices/instances/instances'
+
+export const useConnectRdiInstance = (rdiInstanceId: string) => {
+  const dispatch = useAppDispatch()
+  const { contextRdiInstanceId } = useAppSelector(appContextSelector)
+  const { data: rdiInstances } = useAppSelector(rdiInstancesSelector)
+  const { data: dbInstances } = useAppSelector(dbInstancesSelector)
+  const connectedInstance = useAppSelector(connectedInstanceSelector)
+
+  useEffect(() => {
+    if (!dbInstances?.length) {
+      dispatch(fetchInstancesAction())
+    }
+    if (!rdiInstances?.length) {
+      dispatch(fetchRdiInstancesAction())
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!contextRdiInstanceId || contextRdiInstanceId !== rdiInstanceId) {
+      dispatch(resetRdiContext())
+      dispatch(setLastPageContext(''))
+      dispatch(fetchConnectedInstanceAction(rdiInstanceId))
+    }
+    dispatch(setAppContextConnectedRdiInstanceId(rdiInstanceId))
+
+    // clear database context
+    dispatch(resetConnectedDatabaseInstance())
+    dispatch(resetDatabaseContext())
+  }, [rdiInstanceId])
+
+  return { connectedInstance, contextRdiInstanceId }
+}

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

@@ -1,25 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import { useAppDispatch, useAppSelector } from 'uiSrc/slices/hooks'
+import { useAppSelector } from 'uiSrc/slices/hooks'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
-import {
-  appContextSelector,
-  resetDatabaseContext,
-  resetRdiContext,
-  setAppContextConnectedRdiInstanceId,
-  setLastPageContext,
-} from 'uiSrc/slices/app/context'
+import { appContextSelector } from 'uiSrc/slices/app/context'
 import { IRoute, PageNames, Pages } from 'uiSrc/constants'
-import {
-  connectedInstanceSelector,
-  fetchConnectedInstanceAction,
-  fetchInstancesAction as fetchRdiInstancesAction,
-  instancesSelector as rdiInstancesSelector,
-} from 'uiSrc/slices/rdi/instances'
-import {
-  fetchInstancesAction,
-  instancesSelector as dbInstancesSelector,
-  resetConnectedInstance as resetConnectedDatabaseInstance,
-} from 'uiSrc/slices/instances/instances'
 import { isDevRdiUiEnabledSelector } from 'uiSrc/slices/app/features'
 import { Nullable } from 'uiSrc/utils'
 import { shouldUseRdiUiPipeline } from 'uiSrc/utils/rdi'
@@ -28,6 +11,7 @@ import { RdiInstancePageTemplate } from 'uiSrc/templates'
 import { AppNavigation, RdiInstanceHeader } from 'uiSrc/components'
 import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { useNavigation } from 'uiSrc/components/navigation-menu/hooks/useNavigation'
+import { useConnectRdiInstance } from '../hooks/useConnectRdiInstance'
 import InstancePageRouter from './InstancePageRouter'
 import { RdiPipelineHeader } from './components'
 import styles from './styles.module.scss'
@@ -37,43 +21,19 @@ export interface Props {
 }
 
 const RdiInstancePage = ({ routes = [] }: Props) => {
-  const dispatch = useAppDispatch()
   const history = useHistory()
   const location = useLocation<{ skipLastPageRestore?: boolean }>()
   const { pathname } = location
   const { privateRdiRoutes } = useNavigation()
 
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
-  const { lastPage, contextRdiInstanceId } = useAppSelector(appContextSelector)
-  const { data: rdiInstances } = useAppSelector(rdiInstancesSelector)
-  const { data: dbInstances } = useAppSelector(dbInstancesSelector)
-  const connectedInstance = useAppSelector(connectedInstanceSelector)
+  const { lastPage } = useAppSelector(appContextSelector)
+  const { connectedInstance, contextRdiInstanceId } =
+    useConnectRdiInstance(rdiInstanceId)
   const isDevRdiUiEnabled = useAppSelector(isDevRdiUiEnabledSelector)
 
   const [actions, setActions] = useState<Nullable<React.ReactNode>>(null)
 
-  useEffect(() => {
-    if (!dbInstances?.length) {
-      dispatch(fetchInstancesAction())
-    }
-    if (!rdiInstances?.length) {
-      dispatch(fetchRdiInstancesAction())
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!contextRdiInstanceId || contextRdiInstanceId !== rdiInstanceId) {
-      dispatch(resetRdiContext())
-      dispatch(setLastPageContext(''))
-      dispatch(fetchConnectedInstanceAction(rdiInstanceId))
-    }
-    dispatch(setAppContextConnectedRdiInstanceId(rdiInstanceId))
-
-    // clear database context
-    dispatch(resetConnectedDatabaseInstance())
-    dispatch(resetDatabaseContext())
-  }, [rdiInstanceId])
-
   useEffect(() => {
     // redirect only if there is no exact path
     if (pathname === Pages.rdiPipeline(rdiInstanceId)) {

redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.spec.tsx

@@ -29,6 +29,14 @@ describe('PipelineManagementV2Page', () => {
     ).toBeInTheDocument()
   })
 
+  it('should render the instance breadcrumb, but not the v1 shell (tabs/status bar)', () => {
+    renderPage()
+
+    expect(screen.getByTestId('breadcrumbs-container')).toBeInTheDocument()
+    expect(screen.queryByTestId('pipeline-management-page-btn')).toBeNull()
+    expect(screen.queryByTestId('pipeline-status-page-btn')).toBeNull()
+  })
+
   it('should record itself as the last visited rdi section on unmount', () => {
     const { unmount } = renderPage()
 

redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.styles.ts

@@ -1,7 +1,12 @@
 import styled from 'styled-components'
-import { FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import { Theme } from 'uiSrc/components/base/theme/types'
 
+export const PageContainer = styled(Col)`
+  height: 100%;
+  padding-bottom: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`
+
 export const PlaceholderContainer = styled(FlexItem)`
   padding: ${({ theme }: { theme: Theme }) => theme.core.space.space300};
 `

redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.tsx

@@ -1,23 +1,25 @@
 import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
 
-import { connectedInstanceSelector } from 'uiSrc/slices/rdi/instances'
-import { useAppSelector, useAppDispatch } from 'uiSrc/slices/hooks'
+import { useAppDispatch } from 'uiSrc/slices/hooks'
 import { formatLongName, setTitle } from 'uiSrc/utils'
 import { useTranslation } from 'uiSrc/i18n'
 import { Text } from 'uiSrc/components/base/text'
-import { Row } from 'uiSrc/components/base/layout/flex'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { PageNames } from 'uiSrc/constants'
 import { setLastPageContext } from 'uiSrc/slices/app/context'
+import { RdiInstanceHeader } from 'uiSrc/components'
+import { ExplorePanelTemplate } from 'uiSrc/templates'
+import { useConnectRdiInstance } from '../hooks/useConnectRdiInstance'
 import * as S from './PipelineManagementV2Page.styles'
 
 const PipelineManagementV2Page = () => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
-  const { name: connectedRdiInstanceName } = useAppSelector(
-    connectedInstanceSelector,
-  )
+  const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
+  const { connectedInstance } = useConnectRdiInstance(rdiInstanceId)
 
-  const rdiInstanceName = formatLongName(connectedRdiInstanceName, 33, 0, '...')
+  const rdiInstanceName = formatLongName(connectedInstance.name, 33, 0, '...')
   setTitle(t('rdi.pipeline.pageTitle', { name: rdiInstanceName }))
 
   useEffect(
@@ -28,15 +30,22 @@ const PipelineManagementV2Page = () => {
   )
 
   return (
-    <Row
-      justify="center"
-      align="center"
-      data-testid="pipeline-management-v2-page"
-    >
-      <S.PlaceholderContainer>
-        <Text>The new pipeline management experience is coming soon.</Text>
-      </S.PlaceholderContainer>
-    </Row>
+    <S.PageContainer gap="none" responsive={false}>
+      <FlexItem>
+        <RdiInstanceHeader />
+      </FlexItem>
+      <FlexItem grow data-testid="pipeline-management-v2-page">
+        <ExplorePanelTemplate>
+          <Row justify="center" align="center">
+            <S.PlaceholderContainer>
+              <Text>
+                The new pipeline management experience is coming soon.
+              </Text>
+            </S.PlaceholderContainer>
+          </Row>
+        </ExplorePanelTemplate>
+      </FlexItem>
+    </S.PageContainer>
   )
 }