Fe/feature/ri 7687 rdi page navigation (#5125)

* RI-7687: use tabs for navigation in RDI (poc)

* RI-7687: add tests and remove navigation from the left bar

Author: ArtemHoruzhenko

redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx

@@ -186,18 +186,6 @@ describe('NavigationMenu', () => {
     })
   })
 
-  it('should render private routes with connectedRdiInstanceId', () => {
-    ;(appContextSelector as jest.Mock).mockImplementation(() => ({
-      ...appContextSelector,
-      workspace: 'redisDataIntegration',
-    }))
-
-    render(<NavigationMenu />)
-
-    expect(screen.getByTestId('pipeline-status-page-btn')).toBeTruthy()
-    expect(screen.getByTestId('pipeline-management-page-btn')).toBeTruthy()
-  })
-
   describe('feature flags tests', () => {
     it('should show feature dependent items when feature flag is on', async () => {
       const initialStoreState = set(

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -4,10 +4,8 @@ import React from 'react'
 import { FeatureFlags } from 'uiSrc/constants'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 
-import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { FeatureFlagComponent } from 'uiSrc/components'
 
-import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import {
   SideBar,
   SideBarContainer,
@@ -29,63 +27,11 @@ import styles from './styles.module.scss'
 
 const NavigationMenu = () => {
   const {
-    privateRdiRoutes,
     isRdiWorkspace,
     publicRoutes,
-    getAdditionPropsForHighlighting,
     highlightedPages,
-    connectedRdiInstanceId,
   } = useNavigation()
 
-  const renderNavItem = (nav: INavigations) => {
-    const fragment = (
-      <React.Fragment key={nav.tooltipText}>
-        {renderOnboardingTourWithChild(
-          <HighlightedFeature
-            {...getAdditionPropsForHighlighting(nav.pageName)}
-            key={nav.tooltipText}
-            isHighlight={!!highlightedPages[nav.pageName]?.length}
-            dotClassName={styles.highlightDot}
-            tooltipPosition="right"
-            transformOnHover
-          >
-            <div className={styles.navigationButtonWrapper}>
-              <SideBarItem
-                isActive={nav.isActivePage}
-                onClick={nav.onClick}
-                tooltipProps={{ text: nav.tooltipText, placement: 'right' }}
-              >
-                <SideBarItemIcon
-                  icon={nav.iconType}
-                  aria-label={nav.ariaLabel}
-                  data-testid={nav.dataTestId}
-                />
-              </SideBarItem>
-              {nav.isBeta && (
-                <RiBadge className={styles.betaLabel} label="BETA" />
-              )}
-            </div>
-          </HighlightedFeature>,
-          { options: nav.onboard },
-          nav.isActivePage,
-          `ob-${nav.tooltipText}`,
-        )}
-      </React.Fragment>
-    )
-
-    return nav.featureFlag ? (
-      <FeatureFlagComponent
-        name={nav.featureFlag}
-        key={nav.tooltipText}
-        enabledByDefault
-      >
-        {fragment}
-      </FeatureFlagComponent>
-    ) : (
-      fragment
-    )
-  }
-
   const renderPublicNavItem = (nav: INavigations) => {
     const fragment = (
       <HighlightedFeature
@@ -131,9 +77,6 @@ const NavigationMenu = () => {
     >
       <SideBarContainer>
         <RedisLogo isRdiWorkspace={isRdiWorkspace} />
-        {connectedRdiInstanceId &&
-          isRdiWorkspace &&
-          privateRdiRoutes.map(renderNavItem)}
       </SideBarContainer>
       <SideBarFooter className={styles.footer}>
         <FeatureFlagComponent name={FeatureFlags.envDependent} enabledByDefault>

redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx

@@ -5,11 +5,11 @@ import {
   StyledAppNavigation,
   StyledAppNavigationContainer,
 } from './AppNavigation.styles'
-import { useNavigation } from '../hooks/useNavigation'
 import FeatureFlagComponent from 'uiSrc/components/feature-flag-component/FeatureFlagComponent'
 import { FeatureFlags } from 'uiSrc/constants'
 import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
 import NavigationTabTrigger from './AppNavigationTabTrigger'
+import { INavigations } from 'uiSrc/components/navigation-menu/navigation.types'
 
 type AppNavigationContainerProps = {
   children?: ReactNode
@@ -41,18 +41,18 @@ const AppNavigationContainer = ({
 )
 
 export type AppNavigationProps = {
+  routes: INavigations[]
   actions?: ReactNode
   onChange?: (tabValue: string) => void
 }
 
-const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
-  const { privateRoutes } = useNavigation()
-  const activeTab = privateRoutes.find((route) => route.isActivePage)
+const AppNavigation = ({ actions, onChange, routes }: AppNavigationProps) => {
+  const activeTab = routes.find((route) => route.isActivePage)
   const navTabs: (TabInfo & {
     isActivePage: boolean
     featureFlag?: FeatureFlags
     onboard?: OnboardingTourOptions
-  })[] = privateRoutes.map((route) => ({
+  })[] = routes.map((route) => ({
     label: route.tooltipText,
     content: '',
     value: route.pageName,
@@ -73,7 +73,7 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
         <Tabs.Compose
           value={activeTab?.pageName}
           onChange={(tabValue) => {
-            const tabNavItem = privateRoutes.find(
+            const tabNavItem = routes.find(
               (route) => route.pageName === tabValue,
             )
             if (tabNavItem) {

redisinsight/ui/src/components/navigation-menu/hooks/useNavigation.ts

@@ -147,16 +147,7 @@ export function useNavigation() {
 
   const privateRdiRoutes: INavigations[] = [
     {
-      tooltipText: 'Pipeline Status',
-      pageName: PageNames.rdiStatistics,
-      ariaLabel: 'Pipeline Status page button',
-      onClick: () => handleGoPage(Pages.rdiStatistics(connectedRdiInstanceId)),
-      dataTestId: 'pipeline-status-page-btn',
-      isActivePage: activePage === `/${PageNames.rdiStatistics}`,
-      iconType: PipelineStatisticsIcon,
-    },
-    {
-      tooltipText: 'Pipeline Management',
+      tooltipText: 'Pipeline',
       pageName: PageNames.rdiPipelineManagement,
       ariaLabel: 'Pipeline Management page button',
       onClick: () =>
@@ -165,6 +156,15 @@ export function useNavigation() {
       isActivePage: isPipelineManagementPath(),
       iconType: PipelineManagementIcon,
     },
+    {
+      tooltipText: 'Analytics',
+      pageName: PageNames.rdiStatistics,
+      ariaLabel: 'Pipeline Status page button',
+      onClick: () => handleGoPage(Pages.rdiStatistics(connectedRdiInstanceId)),
+      dataTestId: 'pipeline-status-page-btn',
+      isActivePage: activePage === `/${PageNames.rdiStatistics}`,
+      iconType: PipelineStatisticsIcon,
+    },
   ]
 
   const publicRoutes: INavigations[] = [

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

@@ -3,7 +3,13 @@ import React from 'react'
 import reactRouterDom, { BrowserRouter } from 'react-router-dom'
 import { instance, mock } from 'ts-mockito'
 
-import { act, cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import {
+  act,
+  cleanup,
+  mockedStore,
+  render,
+  userEvent,
+} from 'uiSrc/utils/test-utils'
 import { resetKeys, resetPatternKeysData } from 'uiSrc/slices/browser/keys'
 import { setMonitorInitialState } from 'uiSrc/slices/cli/monitor'
 import { setInitialPubSubState } from 'uiSrc/slices/pubsub/pubsub'
@@ -203,6 +209,35 @@ describe('InstancePage', () => {
     )
   })
 
+  it('should navigate to rdi pipeline management page via clicking on navigation', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({
+      push: pushMock,
+      block: jest.fn(() => jest.fn()),
+    })
+
+    reactRouterDom.useLocation = jest
+      .fn()
+      .mockReturnValue({ pathname: Pages.rdiStatistics(RDI_INSTANCE_ID_MOCK) })
+
+    const { getByRole } = render(
+      <BrowserRouter>
+        <InstancePage {...instance(mockedProps)} />
+      </BrowserRouter>,
+    )
+    expect(pushMock).not.toHaveBeenCalledWith(
+      Pages.rdiPipelineManagement(RDI_INSTANCE_ID_MOCK),
+    )
+    const analyticsTab = getByRole('tab', { name: 'Analytics' })
+    expect(analyticsTab).toBeInTheDocument()
+
+    await userEvent.click(analyticsTab)
+
+    expect(pushMock).not.toHaveBeenCalledWith(
+      Pages.rdiPipelineManagement(RDI_INSTANCE_ID_MOCK),
+    )
+  })
+
   it('should redirect to rdi pipeline statistics page', async () => {
     ;(appContextSelector as jest.Mock).mockReturnValue({
       contextRdiInstanceId: RDI_INSTANCE_ID_MOCK,
@@ -230,4 +265,35 @@ describe('InstancePage', () => {
       Pages.rdiStatistics(RDI_INSTANCE_ID_MOCK),
     )
   })
+
+  it('should navigate to rdi pipeline analytics page via clicking on navigation', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({
+      push: pushMock,
+      block: jest.fn(() => jest.fn()),
+    })
+
+    reactRouterDom.useLocation = jest
+      .fn()
+      .mockReturnValue({
+        pathname: Pages.rdiPipelineManagement(RDI_INSTANCE_ID_MOCK),
+      })
+
+    const { getByRole } = render(
+      <BrowserRouter>
+        <InstancePage {...instance(mockedProps)} />
+      </BrowserRouter>,
+    )
+    expect(pushMock).not.toHaveBeenCalledWith(
+      Pages.rdiStatistics(RDI_INSTANCE_ID_MOCK),
+    )
+    const pipelineTab = getByRole('tab', { name: 'Pipeline' })
+    expect(pipelineTab).toBeInTheDocument()
+
+    await userEvent.click(pipelineTab)
+
+    expect(pushMock).not.toHaveBeenCalledWith(
+      Pages.rdiStatistics(RDI_INSTANCE_ID_MOCK),
+    )
+  })
 })

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import {
@@ -20,11 +20,13 @@ import {
 } from 'uiSrc/slices/instances/instances'
 
 import { RdiInstancePageTemplate } from 'uiSrc/templates'
-import { RdiInstanceHeader } from 'uiSrc/components'
+import { AppNavigation, RdiInstanceHeader } from 'uiSrc/components'
 import { Col, FlexItem } from 'uiSrc/components/base/layout/flex'
 import InstancePageRouter from './InstancePageRouter'
 import { RdiPipelineHeader } from './components'
 import styles from './styles.module.scss'
+import { Nullable } from 'uiSrc/utils'
+import { useNavigation } from 'uiSrc/components/navigation-menu/hooks/useNavigation'
 
 export interface Props {
   routes: IRoute[]
@@ -34,12 +36,15 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const { pathname } = useLocation()
+  const { privateRdiRoutes } = useNavigation()
 
   const { rdiInstanceId } = useParams<{ rdiInstanceId: string }>()
   const { lastPage, contextRdiInstanceId } = useSelector(appContextSelector)
   const { data: rdiInstances } = useSelector(rdiInstancesSelector)
   const { data: dbInstances } = useSelector(dbInstancesSelector)
 
+  const [actions, setActions] = useState<Nullable<React.ReactNode>>(null)
+
   useEffect(() => {
     if (!dbInstances?.length) {
       dispatch(fetchInstancesAction())
@@ -80,6 +85,13 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
       <FlexItem>
         <RdiInstanceHeader />
       </FlexItem>
+      <FlexItem>
+        <AppNavigation
+          actions={actions}
+          onChange={() => setActions(null)}
+          routes={privateRdiRoutes}
+        />
+      </FlexItem>
       <FlexItem grow={false}>
         <RdiPipelineHeader />
       </FlexItem>

redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx

@@ -20,6 +20,7 @@ import { ImperativePanelGroupHandle } from 'uiSrc/components/base/layout/resize'
 import { AppNavigation } from 'uiSrc/components'
 import { AppNavigationActionsProvider } from 'uiSrc/contexts/AppNavigationActionsProvider'
 import { Nullable } from 'uiSrc/utils'
+import { useNavigation } from 'uiSrc/components/navigation-menu/hooks/useNavigation'
 
 export const firstPanelId = 'main-component'
 export const secondPanelId = 'cli'
@@ -51,6 +52,7 @@ const InstancePageTemplate = (props: Props) => {
 
   const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
   const { isShowMonitor } = useSelector(monitorSelector)
+  const { privateRoutes } = useNavigation()
 
   const ref = useRef<ImperativePanelGroupHandle>(null)
 
@@ -92,7 +94,11 @@ const InstancePageTemplate = (props: Props) => {
   return (
     <>
       <InstanceHeader />
-      <AppNavigation actions={actions} onChange={() => setActions(null)} />
+      <AppNavigation
+        actions={actions}
+        onChange={() => setActions(null)}
+        routes={privateRoutes}
+      />
       <Spacer size="m" />
       <ResizableContainer
         ref={ref}