RI-7489: use Stepper component for Vector Search onboarding (#5004)

* RI-7489: use Stepper component for Vector Search onboarding

* update unit test

Author: KrumTy

redisinsight/ui/src/assets/img/icons/DottedArrow.svg

@@ -8,6 +8,7 @@ import RiEmptyPrompt from './empty-prompt/RiEmptyPrompt'
 export * from './card'
 export * from './horizontal-spacer'
 export * from './spacer'
+export * from './stepper'
 export {
   HorizontalRule,
   LoadingContent,

redisinsight/ui/src/assets/img/icons/DottedArrowDark.svg

@@ -0,0 +1 @@
+export { Stepper } from '@redis-ui/components'

redisinsight/ui/src/components/base/layout/index.ts

@@ -46,7 +46,7 @@ describe('VectorSearchOnboarding', () => {
     // Verify that the content sections are rendered correctly
     const header = screen.getByTestId('vector-search-onboarding--header')
     const features = screen.getByTestId('vector-search-onboarding--features')
-    const stepper = screen.getByTestId('vector-search-onboarding--stepper')
+    const stepper = screen.getByText('Select or create a database')
     const actions = screen.getByTestId('vector-search-onboarding--actions')
     const footer = screen.getByTestId('vector-search-onboarding--footer')
 

redisinsight/ui/src/components/base/layout/stepper/index.ts

@@ -1,56 +1,19 @@
 import React from 'react'
-import { FlexGroup } from 'uiSrc/components/base/layout/flex'
-import { DottedArrow, Step, StepBadge, StepLabel } from './Stepper.styles'
+import { Stepper } from 'uiSrc/components/base/layout'
 
-export interface StepItem {
-  step: string
-  text: string
-  isCompleted?: boolean
-}
-
-const VECTOR_SEARCH_ONBOARDING_STEPS: StepItem[] = [
-  {
-    step: '1',
-    text: 'Select or create a database',
-    isCompleted: true,
-  },
-  {
-    step: '2',
-    text: 'Add data',
-  },
-  {
-    step: '3',
-    text: 'Create an index',
-  },
-  {
-    step: '4',
-    text: 'Search & query',
-  },
+const VECTOR_SEARCH_ONBOARDING_STEPS = [
+  'Select or create a database',
+  'Add data',
+  'Create an index',
+  'Search & query',
 ]
 
-const Stepper: React.FC = () => (
-  <FlexGroup
-    grow={false}
-    gap="l"
-    data-testid="vector-search-onboarding--stepper"
-  >
-    {VECTOR_SEARCH_ONBOARDING_STEPS.map((item) => (
-      <Step gap="m" align="center" key={item.step}>
-        <StepBadge justify="center" align="center">
-          {item.step}
-        </StepBadge>
-
-        <StepLabel size="M" color="primary" $isCompleted={item.isCompleted}>
-          {item.text}
-        </StepLabel>
-
-        {item.step !==
-          VECTOR_SEARCH_ONBOARDING_STEPS[
-            VECTOR_SEARCH_ONBOARDING_STEPS.length - 1
-          ].step && <DottedArrow />}
-      </Step>
+const StepperComponent = () => (
+  <Stepper currentStep={1}>
+    {VECTOR_SEARCH_ONBOARDING_STEPS.map((step) => (
+      <Stepper.Step key={step}>{step}</Stepper.Step>
     ))}
-  </FlexGroup>
+  </Stepper>
 )
 
-export default Stepper
+export default StepperComponent

redisinsight/ui/src/pages/vector-search/components/onboarding/VectorSearchOnboarding.spec.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
-import { Stepper } from '@redis-ui/components'
+import { Stepper } from 'uiSrc/components/base/layout'
 import { Title, Text } from 'uiSrc/components/base/text'
 import { Button, SecondaryButton } from 'uiSrc/components/base/forms/buttons'
 import { ChevronLeftIcon } from 'uiSrc/components/base/icons'