diff --git a/redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts b/redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts index 58f3a42a4c..e149a842d6 100644 --- a/redisinsight/ui/src/components/main-router/constants/defaultRoutes.ts +++ b/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, diff --git a/redisinsight/ui/src/pages/rdi/hooks/useConnectRdiInstance.ts b/redisinsight/ui/src/pages/rdi/hooks/useConnectRdiInstance.ts new file mode 100644 index 0000000000..c9848c9dd9 --- /dev/null +++ b/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 } +} diff --git a/redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx b/redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx index 543d8eee9d..5a9e3d323e 100644 --- a/redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx +++ b/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>(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)) { diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.spec.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.spec.tsx index 334065d75b..aed3885186 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.spec.tsx +++ b/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() diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.styles.ts b/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.styles.ts index 771727d392..74af090ddd 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.styles.ts +++ b/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}; ` diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.tsx index 622a56c331..82779d691f 100644 --- a/redisinsight/ui/src/pages/rdi/pipeline-management-v2/PipelineManagementV2Page.tsx +++ b/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 ( - - - The new pipeline management experience is coming soon. - - + + + + + + + + + + The new pipeline management experience is coming soon. + + + + + + ) }