RI-7317: Add Wizard flow start button (#4845)

Author: pawelangelow

redisinsight/ui/src/pages/vector-search/query/HeaderActions.styles.ts

@@ -6,5 +6,8 @@ export const StyledHeaderAction = styled(FlexGroup)`
   flex-direction: row;
   justify-content: flex-end;
   gap: ${({ theme }) => theme.core.space.space100};
+`
+
+export const StyledWrapper = styled(FlexGroup)`
   margin-bottom: ${({ theme }) => theme.core.space.space100};
 `

redisinsight/ui/src/pages/vector-search/query/HeaderActions.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import { useParams } from 'react-router-dom'
-import { StyledHeaderAction } from './HeaderActions.styles'
+
+import { StyledHeaderAction, StyledWrapper } from './HeaderActions.styles'
 import { ManageIndexesDrawer } from '../manage-indexes/ManageIndexesDrawer'
 import { collectSavedQueriesPanelToggleTelemetry } from '../telemetry'
+import { StartWizardButton } from './StartWizardButton'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 
 export type HeaderActionsProps = {
@@ -30,7 +32,9 @@ export const HeaderActions = ({
   }
 
   return (
-    <>
+    <StyledWrapper>
+      <StartWizardButton />
+
       <StyledHeaderAction data-testid="vector-search-header-actions">
         <EmptyButton onClick={handleSavedQueriesClick}>
           Saved queries
@@ -44,6 +48,6 @@ export const HeaderActions = ({
         open={isManageIndexesDrawerOpen}
         onOpenChange={setIsManageIndexesDrawerOpen}
       />
-    </>
+    </StyledWrapper>
   )
 }

redisinsight/ui/src/pages/vector-search/query/StartWizardButton.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { cleanup, render, screen, userEvent } from 'uiSrc/utils/test-utils'
+import { Pages } from 'uiSrc/constants'
+
+import { StartWizardButton } from './StartWizardButton'
+
+const renderComponent = () => render(<StartWizardButton />)
+
+describe('StartWizardButton', () => {
+  beforeEach(() => {
+    cleanup()
+    jest.clearAllMocks()
+  })
+
+  it('should navigate to vector search create index page when "Get started" is clicked', async () => {
+    const mockPush = jest.fn()
+
+    const useHistoryMock = jest.spyOn(require('react-router-dom'), 'useHistory')
+    useHistoryMock.mockImplementation(() => ({
+      push: mockPush,
+    }))
+
+    renderComponent()
+
+    const getStartedButton = screen.getByText('Get started')
+    await userEvent.click(getStartedButton)
+
+    expect(mockPush).toHaveBeenCalledWith(
+      Pages.vectorSearchCreateIndex('instanceId'),
+    )
+    expect(mockPush).toHaveBeenCalledTimes(1)
+
+    useHistoryMock.mockRestore()
+  })
+
+  it('should maintain callback reference stability with useCallback', () => {
+    const { rerender } = renderComponent()
+
+    const firstRenderButton = screen.getByText('Get started')
+
+    rerender(<StartWizardButton />)
+
+    const secondRenderButton = screen.getByText('Get started')
+
+    // Both buttons should exist (they're the same element after rerender)
+    expect(firstRenderButton).toBeInTheDocument()
+    expect(secondRenderButton).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/vector-search/query/StartWizardButton.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
+import { Pages } from 'uiSrc/constants'
+
+export const StartWizardButton = () => {
+  const history = useHistory()
+  const { instanceId } = useParams<{ instanceId: string }>()
+
+  const startCreateIndexWizard = useCallback(() => {
+    history.push(Pages.vectorSearchCreateIndex(instanceId))
+  }, [history, instanceId])
+
+  return (
+    <CallOut
+      variant="success"
+      actions={{
+        primary: {
+          label: 'Get started',
+          onClick: startCreateIndexWizard,
+        },
+      }}
+    >
+      Power fast, real-time semantic AI search with vector search.
+    </CallOut>
+  )
+}