RI-7293: update vector search routes (#4847)

Author: KrumTy

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

@@ -2,7 +2,7 @@ import { lazy } from 'react'
 import { IRoute, FeatureFlags, PageNames, Pages } from 'uiSrc/constants'
 import {
   BrowserPage,
-  VectorSearchPage,
+  VectorSearchPageRouter,
   HomePage,
   InstancePage,
   RedisCloudDatabasesPage,
@@ -21,9 +21,12 @@ import PipelineManagementPage from 'uiSrc/pages/rdi/pipeline-management'
 import { ANALYTICS_ROUTES, RDI_PIPELINE_MANAGEMENT_ROUTES } from './sub-routes'
 import COMMON_ROUTES from './commonRoutes'
 import { getRouteIncludedByEnv, LAZY_LOAD } from '../config'
+import { VECTOR_SEARCH_ROUTES } from './sub-routes/vectorSearchRoutes'
 
 const LazyBrowserPage = lazy(() => import('uiSrc/pages/browser'))
-const LazyVectorSearchPage = lazy(() => import('uiSrc/pages/vector-search'))
+const LazyVectorSearchPageRouter = lazy(
+  () => import('uiSrc/pages/vector-search/pages/VectorSearchPageRouter'),
+)
 const LazyHomePage = lazy(() => import('uiSrc/pages/home'))
 const LazyWorkbenchPage = lazy(() => import('uiSrc/pages/workbench'))
 const LazyPubSubPage = lazy(() => import('uiSrc/pages/pub-sub'))
@@ -60,7 +63,8 @@ const INSTANCE_ROUTES: IRoute[] = [
   {
     pageName: PageNames.vectorSearch,
     path: Pages.vectorSearch(':instanceId'),
-    component: LAZY_LOAD ? LazyVectorSearchPage : VectorSearchPage,
+    component: LAZY_LOAD ? LazyVectorSearchPageRouter : VectorSearchPageRouter,
+    routes: VECTOR_SEARCH_ROUTES,
   },
   {
     pageName: PageNames.workbench,

redisinsight/ui/src/components/main-router/constants/sub-routes/vectorSearchRoutes.ts

@@ -0,0 +1,27 @@
+import { lazy } from 'react'
+
+import { IRoute, PageNames, Pages } from 'uiSrc/constants'
+import { VectorSearchCreateIndexPage, VectorSearchPage } from 'uiSrc/pages'
+import { LAZY_LOAD } from '../../config'
+
+const LazyVectorSearchPage = lazy(
+  () => import('uiSrc/pages/vector-search/pages/VectorSearchPage'),
+)
+const LazyVectorSearchCreateIndexPage = lazy(
+  () => import('uiSrc/pages/vector-search/pages/VectorSearchCreateIndexPage'),
+)
+
+export const VECTOR_SEARCH_ROUTES: IRoute[] = [
+  {
+    pageName: PageNames.vectorSearchCreateIndex,
+    path: Pages.vectorSearchCreateIndex(':instanceId'),
+    component: LAZY_LOAD
+      ? LazyVectorSearchCreateIndexPage
+      : VectorSearchCreateIndexPage,
+  },
+  {
+    pageName: PageNames.vectorSearch,
+    path: Pages.vectorSearch(':instanceId'),
+    component: LAZY_LOAD ? LazyVectorSearchPage : VectorSearchPage,
+  },
+]

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

@@ -66,6 +66,9 @@ export function useNavigation() {
       Pages.rdiPipelineManagement(connectedRdiInstanceId),
     )
 
+  const isVectorSearchPath = () =>
+    location.pathname.split('/')[2] === PageNames.vectorSearch
+
   const getAdditionPropsForHighlighting = (
     pageName: string,
   ): Omit<HighlightedFeatureProps, 'children'> => {
@@ -99,7 +102,7 @@ export function useNavigation() {
       onClick: () => handleGoPage(Pages.vectorSearch(connectedInstanceId)),
       dataTestId: 'vector-search-page-btn',
       connectedInstanceId,
-      isActivePage: activePage === `/${PageNames.vectorSearch}`,
+      isActivePage: isVectorSearchPath(),
       iconType: SlowLogIcon,
     },
     {

redisinsight/ui/src/constants/pages.ts

@@ -16,6 +16,7 @@ export interface IRoute {
 export enum PageNames {
   workbench = 'workbench',
   vectorSearch = 'vector-search',
+  vectorSearchCreateIndex = 'create-index',
   browser = 'browser',
   search = 'search',
   slowLog = 'slowlog',
@@ -52,6 +53,8 @@ export const Pages = {
   browser: (instanceId: string) => `/${instanceId}/${PageNames.browser}`,
   vectorSearch: (instanceId: string) =>
     `/${instanceId}/${PageNames.vectorSearch}`,
+  vectorSearchCreateIndex: (instanceId: string) =>
+    `/${instanceId}/${PageNames.vectorSearch}/${PageNames.vectorSearchCreateIndex}`,
   workbench: (instanceId: string) => `/${instanceId}/${PageNames.workbench}`,
   search: (instanceId: string) => `/${instanceId}/${PageNames.search}`,
   pubSub: (instanceId: string) => `/${instanceId}/${PageNames.pubSub}`,

redisinsight/ui/src/pages/vector-search/VectorSearchPage.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import reactRouterDom from 'react-router-dom'
 import {
   render,
   screen,
@@ -8,17 +9,33 @@ import {
 } from 'uiSrc/utils/test-utils'
 import { RootState } from 'uiSrc/slices/store'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { Pages } from 'uiSrc/constants'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/dbAnalysisHistoryHandlers'
-import { VectorSearchCreateIndex } from './VectorSearchCreateIndex'
+import {
+  VectorSearchCreateIndex,
+  VectorSearchCreateIndexProps,
+} from './VectorSearchCreateIndex'
 import { SampleDataContent, SampleDataType, SearchIndexType } from './types'
+import { useCreateIndex } from './hooks/useCreateIndex'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
 jest.mock('uiSrc/telemetry', () => ({
   ...jest.requireActual('uiSrc/telemetry'),
   sendEventTelemetry: jest.fn(),
 }))
 
-const renderVectorSearchCreateIndexComponent = () => {
+jest.mock('./hooks/useCreateIndex', () => ({
+  useCreateIndex: jest.fn(),
+}))
+
+const mockedUseCreateIndex = useCreateIndex as jest.MockedFunction<
+  typeof useCreateIndex
+>
+
+const renderVectorSearchCreateIndexComponent = (
+  props?: VectorSearchCreateIndexProps,
+) => {
   const testState: RootState = {
     ...initialStateDefault,
     connections: {
@@ -37,13 +54,20 @@ const renderVectorSearchCreateIndexComponent = () => {
     },
   }
   const store = mockStore(testState)
+  const utils = render(<VectorSearchCreateIndex {...props} />, { store })
 
-  return render(<VectorSearchCreateIndex />, { store })
+  return { ...utils, store }
 }
 
 describe('VectorSearchCreateIndex', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    mockedUseCreateIndex.mockReturnValue({
+      run: jest.fn(),
+      loading: false,
+      error: null,
+      success: false,
+    } as any)
   })
 
   it('should render correctly', () => {
@@ -52,6 +76,43 @@ describe('VectorSearchCreateIndex', () => {
     expect(container).toBeInTheDocument()
   })
 
+  it('should redirect to vector search page after index creation', async () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+
+    mockedUseCreateIndex.mockReturnValue({
+      run: jest.fn(),
+      loading: false,
+      error: null,
+      success: true,
+    } as any)
+
+    renderVectorSearchCreateIndexComponent({ initialStep: 2 })
+
+    // Effect should dispatch success notification and navigate
+    expect(pushMock).toHaveBeenCalledWith(Pages.vectorSearch(INSTANCE_ID_MOCK))
+  })
+
+  it('should dispatch error notification on error', () => {
+    mockedUseCreateIndex.mockReturnValue({
+      run: jest.fn(),
+      loading: false,
+      error: { message: 'Some error' },
+      success: false,
+    } as any)
+
+    const { store } = renderVectorSearchCreateIndexComponent({
+      initialStep: 2,
+    })
+
+    // Should dispatch addErrorNotification
+    const actions = store?.getActions?.() || []
+    const hasErrorAction = actions.some(
+      (a: any) => a.type === addErrorNotification.type,
+    )
+    expect(hasErrorAction).toBe(true)
+  })
+
   describe('Telemetry', () => {
     it('should send telemetry events on start step', () => {
       renderVectorSearchCreateIndexComponent()

redisinsight/ui/src/pages/vector-search/create-index/VectorSearchCreateIndex.spec.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
+import { useDispatch } from 'react-redux'
 
 import { Stepper } from '@redis-ui/components'
 import { Title } from 'uiSrc/components/base/text'
@@ -25,20 +26,29 @@ import {
   collectCreateIndexStepTelemetry,
   collectCreateIndexWizardTelemetry,
 } from '../telemetry'
+import { Pages } from 'uiSrc/constants'
+import {
+  addMessageNotification,
+  addErrorNotification,
+} from 'uiSrc/slices/app/notifications'
+import successMessages from 'uiSrc/components/notifications/success-messages'
+import { parseCustomError } from 'uiSrc/utils'
 
 const stepNextButtonTexts = [
   'Proceed to adding data',
   'Proceed to index',
   'Create index',
 ]
 
-type VectorSearchCreateIndexProps = {
+export type VectorSearchCreateIndexProps = {
   initialStep?: number
 }
 
 export const VectorSearchCreateIndex = ({
   initialStep = 1,
 }: VectorSearchCreateIndexProps) => {
+  const dispatch = useDispatch()
+  const history = useHistory()
   const { instanceId } = useParams<{ instanceId: string }>()
   const [step, setStep] = useState(initialStep)
   const [createSearchIndexParameters, setCreateSearchIndexParameters] =
@@ -52,7 +62,7 @@ export const VectorSearchCreateIndex = ({
       indexFields: selectedBikesIndexFields,
     })
 
-  const { run: createIndex, success, loading } = useCreateIndex()
+  const { run: createIndex, error, success, loading } = useCreateIndex()
 
   const setParameters = (params: Partial<CreateSearchIndexParameters>) => {
     setCreateSearchIndexParameters((prev) => ({ ...prev, ...params }))
@@ -81,9 +91,15 @@ export const VectorSearchCreateIndex = ({
     })
   }, [step])
 
-  if (success) {
-    return <>Success!</>
-  }
+  useEffect(() => {
+    if (error) {
+      dispatch(addErrorNotification(parseCustomError(error.message) as any))
+    } else if (success) {
+      dispatch(addMessageNotification(successMessages.CREATE_INDEX()))
+
+      history.push(Pages.vectorSearch(instanceId))
+    }
+  }, [success, error])
 
   return (
     <VectorSearchScreenWrapper direction="column" justify="between">

redisinsight/ui/src/pages/vector-search/create-index/VectorSearchCreateIndex.tsx

@@ -1,4 +1,3 @@
-import { VectorSearchPage } from './VectorSearchPage'
-
-export { VectorSearchPage }
-export default VectorSearchPage
+export { default as VectorSearchCreateIndexPage } from './pages/VectorSearchCreateIndexPage'
+export { default as VectorSearchPage } from './pages/VectorSearchPage'
+export { default as VectorSearchPageRouter } from './pages/VectorSearchPageRouter'

redisinsight/ui/src/pages/vector-search/index.ts

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { cleanup, render } from 'uiSrc/utils/test-utils'
+import VectorSearchCreateIndexPage from './VectorSearchCreateIndexPage'
+
+const renderVectorSearchCreateIndexPageComponent = () =>
+  render(<VectorSearchCreateIndexPage />)
+
+describe('VectorSearchCreateIndexPage', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('should render ', () => {
+    const { container } = renderVectorSearchCreateIndexPageComponent()
+
+    expect(container).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/vector-search/pages/VectorSearchCreateIndexPage.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { TelemetryPageView } from 'uiSrc/telemetry'
+import { usePageViewTelemetry } from 'uiSrc/telemetry/usePageViewTelemetry'
+
+import { VectorSearchCreateIndex } from './../create-index/VectorSearchCreateIndex'
+import { VectorSearchPageWrapper } from './../styles'
+
+const VectorSearchCreateIndexPage = () => {
+  usePageViewTelemetry({
+    page: TelemetryPageView.VECTOR_SEARCH_PAGE,
+  })
+
+  return (
+    <VectorSearchPageWrapper>
+      <VectorSearchCreateIndex />
+    </VectorSearchPageWrapper>
+  )
+}
+
+export default VectorSearchCreateIndexPage