feat(ui): added title for the new vector search page

Author: valkirilov

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

@@ -1,6 +1,12 @@
 import React from 'react'
 import * as reactRedux from 'react-redux'
-import { cleanup, render, screen } from 'uiSrc/utils/test-utils'
+import {
+  cleanup,
+  initialStateDefault,
+  mockStore,
+  render,
+  screen,
+} from 'uiSrc/utils/test-utils'
 import { TelemetryPageView } from 'uiSrc/telemetry/pageViews'
 import { sendPageViewTelemetry } from 'uiSrc/telemetry'
 import {
@@ -11,6 +17,7 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { redisearchListSelector } from 'uiSrc/slices/browser/redisearch'
 import VectorSearchPage from './VectorSearchPage'
 import useRedisInstanceCompatibility from '../create-index/hooks/useRedisInstanceCompatibility'
+import { RootState } from 'uiSrc/slices/store'
 
 // Mock the telemetry module, so we don't send actual telemetry data during tests
 jest.mock('uiSrc/telemetry', () => ({
@@ -22,7 +29,24 @@ jest.mock('../create-index/hooks/useRedisInstanceCompatibility', () =>
   jest.fn(),
 )
 
-const renderVectorSearchPageComponent = () => render(<VectorSearchPage />)
+const renderVectorSearchPageComponent = () => {
+  const testState: RootState = {
+    ...initialStateDefault,
+    connections: {
+      ...initialStateDefault.connections,
+      instances: {
+        ...initialStateDefault.connections.instances,
+        connectedInstance: {
+          ...initialStateDefault.connections.instances.connectedInstance,
+          ...INSTANCES_MOCK[0],
+        },
+      },
+    },
+  }
+  const store = mockStore(testState)
+
+  return render(<VectorSearchPage />, { store })
+}
 
 describe('VectorSearchPage', () => {
   const mockUseRedisInstanceCompatibility =
@@ -49,6 +73,11 @@ describe('VectorSearchPage', () => {
 
     const vectorSearchQuery = screen.getByTestId('vector-search-query')
     expect(vectorSearchQuery).toBeInTheDocument()
+
+    // Verify the title of the page
+    expect(document.title).toBe(
+      `${INSTANCES_MOCK[0].name} [db${INSTANCES_MOCK[0].db}] - Vector Search`,
+    )
   })
 
   it('should render loader while checking the database compatibility', () => {

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useLocation, useParams } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 import { TelemetryPageView } from 'uiSrc/telemetry'
 import { usePageViewTelemetry } from 'uiSrc/telemetry/usePageViewTelemetry'
@@ -10,6 +11,8 @@ import { Loader } from 'uiSrc/components/base/display'
 import useRedisInstanceCompatibility from '../create-index/hooks/useRedisInstanceCompatibility'
 import { Spacer } from 'uiSrc/components/base/layout'
 import { RqeNotAvailableCard } from '../components/rqe-not-available/RqeNotAvailableCard'
+import { formatLongName, getDbIndex, setTitle } from 'uiSrc/utils'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 
 type Params = {
   instanceId: string
@@ -20,17 +23,20 @@ const VectorSearchPage = () => {
   const { search } = useLocation()
   const { hasRedisearch, loading } = useRedisInstanceCompatibility()
 
+  const { name: connectedInstanceName, db } = useSelector(
+    connectedInstanceSelector,
+  )
+
   const defaultSavedQueriesIndex =
     new URLSearchParams(search).get('defaultSavedQueriesIndex') || undefined
 
   usePageViewTelemetry({
     page: TelemetryPageView.VECTOR_SEARCH_PAGE,
   })
 
-  // TODO: Set title, once we know the name of the page
-  // setTitle(
-  //   `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)} - Vector Search`,
-  // )
+  setTitle(
+    `${formatLongName(connectedInstanceName, 33, 0, '...')} ${getDbIndex(db)} - Vector Search`,
+  )
 
   if (loading) {
     return (