[RI-7194] Add "Create vector search" wizard

redisinsight/ui/.eslintrc.js

@@ -93,6 +93,7 @@ module.exports = {
     'sonarjs/no-duplicate-string': 'off',
     'sonarjs/cognitive-complexity': [1, 20],
     'sonarjs/no-identical-functions': [0, 5],
+    'sonarjs/no-nested-template-literals': 'off',
     'import/order': [
       1,
       {

redisinsight/ui/src/components/base/layout/flex/flex.styles.ts

@@ -373,6 +373,7 @@
     grow?: (typeof VALID_GROW_VALUES)[number]
     $direction?: (typeof dirValues)[number]
     $padding?: (typeof VALID_PADDING_VALUES)[number]
+    $gap?: GapSizeType
   }
 
 export const StyledFlexItem = styled.div<FlexItemProps>`
@@ -393,6 +394,7 @@
         return 'column-reverse'
     }
   }};
+  ${({ $gap = 'none' }) => ($gap ? flexGroupStyles.gapSizes[$gap] : '')}
   ${({ grow }) => {
     if (!grow) {
       return flexItemStyles.growZero

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

@@ -2,6 +2,7 @@
 import { IRoute, FeatureFlags, PageNames, Pages } from 'uiSrc/constants'
 import {
   BrowserPage,
+  VectorSearchPage,
   HomePage,
   InstancePage,
   RedisCloudDatabasesPage,
@@ -22,6 +23,7 @@
 import { getRouteIncludedByEnv, LAZY_LOAD } from '../config'
 
 const LazyBrowserPage = lazy(() => import('uiSrc/pages/browser'))
+const LazyVectorSearchPage = lazy(() => import('uiSrc/pages/vector-search'))
 const LazyHomePage = lazy(() => import('uiSrc/pages/home'))
 const LazyWorkbenchPage = lazy(() => import('uiSrc/pages/workbench'))
 const LazyPubSubPage = lazy(() => import('uiSrc/pages/pub-sub'))
@@ -55,6 +57,11 @@
     path: Pages.browser(':instanceId'),
     component: LAZY_LOAD ? LazyBrowserPage : BrowserPage,
   },
+  {
+    pageName: PageNames.vectorSearch,
+    path: Pages.vectorSearch(':instanceId'),
+    component: LAZY_LOAD ? LazyVectorSearchPage : VectorSearchPage,
+  },
   {
     pageName: PageNames.workbench,
     path: Pages.workbench(':instanceId'),

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

@@ -32,6 +32,7 @@ import {
   PubSubIcon,
   SlowLogIcon,
   WorkbenchIcon,
+  SearchIcon,
   GithubIcon,
   SettingsIcon,
 } from 'uiSrc/components/base/icons'
@@ -138,6 +139,16 @@ const NavigationMenu = () => {
       iconType: WorkbenchIcon,
       onboard: ONBOARDING_FEATURES.WORKBENCH_PAGE,
     },
+    {
+      tooltipText: 'Vector Search',
+      pageName: PageNames.vectorSearch,
+      ariaLabel: 'Vector Search',
+      onClick: () => handleGoPage(Pages.vectorSearch(connectedInstanceId)),
+      dataTestId: 'vector-search-page-btn',
+      connectedInstanceId,
+      isActivePage: activePage === `/${PageNames.vectorSearch}`,
+      iconType: SearchIcon,
+    },
     {
       tooltipText: 'Analysis Tools',
       pageName: PageNames.analytics,

redisinsight/ui/src/constants/pages.ts

@@ -15,6 +15,7 @@ export interface IRoute {
 
 export enum PageNames {
   workbench = 'workbench',
+  vectorSearch = 'vector-search',
   browser = 'browser',
   search = 'search',
   slowLog = 'slowlog',
@@ -49,6 +50,8 @@ export const Pages = {
   sentinelDatabases: `${sentinel}/databases`,
   sentinelDatabasesResult: `${sentinel}/databases-result`,
   browser: (instanceId: string) => `/${instanceId}/${PageNames.browser}`,
+  vectorSearch: (instanceId: string) =>
+    `/${instanceId}/${PageNames.vectorSearch}`,
   workbench: (instanceId: string) => `/${instanceId}/${PageNames.workbench}`,
   search: (instanceId: string) => `/${instanceId}/${PageNames.search}`,
   pubSub: (instanceId: string) => `/${instanceId}/${PageNames.pubSub}`,

redisinsight/ui/src/pages/index.ts

@@ -4,3 +4,4 @@ export * from './instance'
 export * from './home'
 export * from './redis-cluster'
 export * from './autodiscover-cloud'
+export * from './vector-search'

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

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { VectorSearchCreateIndex } from './create-index/VectorSearchCreateIndex'
+import { VectorSearchQuery } from './query/VectorSearchQuery'
+
+export const VectorSearchPage = () => {
+  const hasIndexes = false
+
+  if (!hasIndexes) {
+    return <VectorSearchCreateIndex />
+  }
+
+  // TODO: QueryScreen
+
+  return <VectorSearchQuery />
+}

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

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import { Stepper } from '@redis-ui/components'
+import { Title } from 'uiSrc/components/base/text'
+import { Button, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
+import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
+
+import { stepContents } from './steps'
+import {
+  CreateIndexContent,
+  CreateIndexFooter,
+  CreateIndexHeader,
+  CreateIndexWrapper,
+} from './styles'
+import {
+  CreateSearchIndexParameters,
+  SampleDataType,
+  SearchIndexType,
+} from './types'
+
+const stepNextButtonTexts = [
+  'Proceed to adding data',
+  'Proceed to index',
+  'Create index',
+]
+
+type VectorSearchCreateIndexProps = {
+  initialStep?: number
+}
+
+export const VectorSearchCreateIndex = ({
+  initialStep = 1,
+}: VectorSearchCreateIndexProps) => {
+  const { instanceId } = useParams<{ instanceId: string }>()
+  const [step, setStep] = useState(initialStep)
+  const [createSearchIndexParameters, setCreateSearchIndexParameters] =
+    useState<CreateSearchIndexParameters>({
+      instanceId,
+      searchIndexType: SearchIndexType.REDIS_QUERY_ENGINE,
+      sampleDataType: SampleDataType.PRESET_DATA,
+      dataContent: '',
+      usePresetVectorIndex: false,
+      presetVectorIndexName: '',
+      tags: [],
+    })
+
+  const setParameters = (params: Partial<CreateSearchIndexParameters>) => {
+    setCreateSearchIndexParameters((prev) => ({ ...prev, ...params }))
+  }
+  const showBackButton = step > initialStep
+  const StepContent = stepContents[step]
+  const onNextClick = () => {
+    const isFinalStep = step === stepContents.length - 1
+    if (isFinalStep) {
+      alert(
+        `TODO: trigger index creation for params: ${JSON.stringify(createSearchIndexParameters)}`,
+      )
+      return
+    }
+
+    setStep(step + 1)
+  }
+  const onBackClick = () => {
+    setStep(step - 1)
+  }
+
+  return (
+    <CreateIndexWrapper direction="column" justify="between">
+      <CreateIndexHeader direction="row">
+        <Title size="M" data-testid="title">
+          New vector search
+        </Title>
+        <Stepper currentStep={step} title="test">
+          <Stepper.Step>Select a database</Stepper.Step>
+          <Stepper.Step>Adding data</Stepper.Step>
+          <Stepper.Step>Create Index</Stepper.Step>
+        </Stepper>
+      </CreateIndexHeader>
+      <CreateIndexContent direction="column" grow={1}>
+        <StepContent setParameters={setParameters} />
+      </CreateIndexContent>
+      <CreateIndexFooter direction="row">
+        {showBackButton && (
+          <SecondaryButton
+            iconSide="left"
+            icon={ChevronLeftIcon}
+            onClick={onBackClick}
+          >
+            Back
+          </SecondaryButton>
+        )}
+        <div />
+        <Button onClick={onNextClick}>{stepNextButtonTexts[step]}</Button>
+      </CreateIndexFooter>
+    </CreateIndexWrapper>
+  )
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+import { IStepComponent } from '../types'
+
+export const AddDataStep: IStepComponent = ({ setParameters }) => (
+  <>
+    <FlexItem direction="column" $gap="m">
+      <FlexItem direction="row" $gap="m">
+        <div>Box1</div>
+        <div>Box2</div>
+      </FlexItem>
+    </FlexItem>
+    <FlexItem direction="column" $gap="m">
+      <Text>Select sample dataset</Text>
+    </FlexItem>
+    <FlexItem direction="column" $gap="m">
+      <Text>Data content</Text>
+      <FlexItem direction="row" $gap="m">
+        <div>Box1</div>
+        <div>Box2</div>
+        <div>Box3</div>
+      </FlexItem>
+    </FlexItem>
+  </>
+)

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

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+import { IStepComponent } from '../types'
+
+export const CreateIndexStep: IStepComponent = ({ setParameters }) => (
+  <>
+    <FlexItem direction="column" $gap="m">
+      <Text>Vector index</Text>
+      <Text size="S">
+        Indexes tell Redis how to search your data. Creating an index enables
+        fast, accurate retrieval across your dataset.
+      </Text>
+    </FlexItem>
+    <FlexItem direction="column" $gap="m">
+      <Text>Index name</Text>
+      <Text>Bikes</Text>
+    </FlexItem>
+    <FlexItem direction="column" $gap="m">
+      <FlexItem direction="row" $gap="m">
+        <div>Box1</div>
+        <div>Box2</div>
+        <div>Box3</div>
+      </FlexItem>
+    </FlexItem>
+  </>
+)

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

@@ -0,0 +1,3 @@
+import { IStepComponent } from '../types'
+
+export const SelectDatabaseStep: IStepComponent = () => null

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

@@ -0,0 +1,5 @@
+import { SelectDatabaseStep } from './SelectDatabaseStep'
+import { AddDataStep } from './AddDataStep'
+import { CreateIndexStep } from './CreateIndexStep'
+
+export const stepContents = [SelectDatabaseStep, AddDataStep, CreateIndexStep]

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

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components'
+import { useTheme } from '@redis-ui/styles'
+import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
+
+export const CreateIndexWrapper = styled(FlexGroup)`
+  ${() => css`
+    margin-top: ${useTheme().core.space.space250};
+    margin-bottom: ${useTheme().core.space.space250};
+    background-color: ${useTheme().semantic.color.background.neutral100};
+    border-radius: 8px;
+  `}
+
+  width: 95%;
+  margin-left: auto;
+  margin-right: auto;
+`
+
+export const CreateIndexHeader = styled(FlexItem)`
+  ${() => css`
+    padding: ${useTheme().core.space.space300};
+    border-color: ${useTheme().color.dusk200};
+  `}
+
+  justify-content: space-between;
+  border: 1px solid;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+`
+
+export const CreateIndexContent = styled(FlexItem)`
+  ${() => css`
+    gap: ${useTheme().core.space.space550};
+    padding: ${useTheme().core.space.space300};
+    border-color: ${useTheme().color.dusk200};
+  `}
+
+  border-left: 1px solid;
+  border-right: 1px solid;
+`
+
+export const CreateIndexFooter = styled(FlexItem)`
+  ${() => css`
+    padding: ${useTheme().core.space.space300};
+    border-color: ${useTheme().color.dusk200};
+  `}
+
+  border: 1px solid;
+  justify-content: space-between;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+`

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

@@ -0,0 +1,32 @@
+export enum SearchIndexType {
+  REDIS_QUERY_ENGINE = 'redis_query_engine',
+  VECTOR_SET = 'vector_set',
+}
+
+export enum SampleDataType {
+  PRESET_DATA = 'preset_data',
+  CUSTOM_DATA = 'custom_data',
+}
+
+export type CreateSearchIndexParameters = {
+  // Select a database step
+  instanceId: string
+
+  // Adding data step
+  searchIndexType: SearchIndexType
+  sampleDataType: SampleDataType
+  dataContent: string
+
+  // Create index step
+  usePresetVectorIndex: boolean
+  presetVectorIndexName: string
+  tags: string[]
+}
+
+export type StepComponentProps = {
+  setParameters: (params: Partial<CreateSearchIndexParameters>) => void
+}
+
+export interface IStepComponent {
+  (props: StepComponentProps): JSX.Element | null
+}

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

@@ -0,0 +1,4 @@
+import { VectorSearchPage } from './VectorSearchPage'
+
+export { VectorSearchPage }
+export default VectorSearchPage

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

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export const VectorSearchQuery = () => {
+  // TODO: implement this component
+  // https://www.figma.com/design/oO2eYRuuLmfzUYLkvCkFhM/Search-page?node-id=645-37412&t=TSwcttCYa4Ld9WzC-4
+  ;
+  return <h4>TODO</h4>
+}