RI-7237 Rework tabs component for vector search flow

- replace the Tabs component with ButtonGroup, and make it feel like tabs

re #RI-7237

Author: valkirilov

redisinsight/ui/src/components/new-index/create-index-step/CreateIndexStepWrapper.spec.tsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import { CreateIndexStepWrapper } from './CreateIndexStepWrapper'
+import {
+  CreateIndexStepWrapper,
+  CreateIndexStepWrapperProps,
+  VectorIndexTab,
+} from './CreateIndexStepWrapper'
 
-const renderComponent = () => render(<CreateIndexStepWrapper />)
+const renderComponent = (props?: Partial<CreateIndexStepWrapperProps>) =>
+  render(<CreateIndexStepWrapper {...props} />)
 
 describe('CreateIndexStepWrapper', () => {
   beforeEach(() => {
@@ -23,22 +28,42 @@ describe('CreateIndexStepWrapper', () => {
 
     // Check if the "Use preset index" tab content is selected by default
     const usePresetIIndexTabContent = screen.queryByTestId(
-      'vector-inde-tabs--use-preset-index-content',
+      'vector-index-tabs--use-preset-index-content',
     )
     expect(usePresetIIndexTabContent).toBeInTheDocument()
   })
 
   it('should switch to "Use preset index" tab when clicked', () => {
-    renderComponent()
+    const props: CreateIndexStepWrapperProps = {
+      tabs: [
+        {
+          value: VectorIndexTab.BuildNewIndex,
+          label: 'Build new index',
+        },
+        {
+          value: VectorIndexTab.UsePresetIndex,
+          label: 'Use preset index',
+        },
+      ],
+    }
+
+    renderComponent(props)
+
+    // Verify the initial render to ensure "Build new index" is selected
+    const buildNewIndexTabContent = screen.queryByTestId(
+      'vector-index-tabs--build-new-index-content',
+    )
+    expect(buildNewIndexTabContent).toBeInTheDocument()
 
+    // Click on the "Use preset index" tab
     const buildNewIndexTabTrigger = screen.getByText('Use preset index')
     fireEvent.click(buildNewIndexTabTrigger)
 
     // Check if the "Use preset index" tab is rendered
-    const buildNewIndexTabContent = screen.queryByTestId(
-      'vector-inde-tabs--use-preset-index-content',
+    const usePresetIndexTabContent = screen.queryByTestId(
+      'vector-index-tabs--use-preset-index-content',
     )
-    expect(buildNewIndexTabContent).toBeInTheDocument()
+    expect(usePresetIndexTabContent).toBeInTheDocument()
   })
 
   it("shouldn't switch to 'Build new index' tab when clicked, since it is disabled", () => {
@@ -48,15 +73,14 @@ describe('CreateIndexStepWrapper', () => {
     const buildNewIndexTabTriggerButton =
       buildNewIndexTabTriggerLabel.closest('[type="button"]')
 
-    expect(buildNewIndexTabTriggerButton).toHaveAttribute('disabled')
-    expect(buildNewIndexTabTriggerButton).toHaveAttribute('data-disabled')
+    expect(buildNewIndexTabTriggerButton).toBeDisabled()
 
     // And when clicked, it should not change the active tab
     fireEvent.click(buildNewIndexTabTriggerLabel)
 
     // Check if the "Use preset index" tab is still active
     const usePresetIndexTabContent = screen.queryByTestId(
-      'vector-inde-tabs--use-preset-index-content',
+      'vector-index-tabs--use-preset-index-content',
     )
     expect(usePresetIndexTabContent).toBeInTheDocument()
   })

redisinsight/ui/src/components/new-index/create-index-step/CreateIndexStepWrapper.styles.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const StyledCreateIndexStepWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.components.boxSelectionGroup.defaultItem.gap};
+`

redisinsight/ui/src/components/new-index/create-index-step/CreateIndexStepWrapper.tsx

@@ -1,40 +1,73 @@
-import React from 'react'
-import { TabsProps } from '@redis-ui/components'
-import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
+import React, { useState } from 'react'
+import { ButtonGroup, ButtonGroupProps } from '@redis-ui/components'
 import { BuildNewIndexTabTrigger } from './build-new-index-tab/BuildNewIndexTabTrigger'
+import { StyledCreateIndexStepWrapper } from './CreateIndexStepWrapper.styles'
 
 export enum VectorIndexTab {
   BuildNewIndex = 'build-new-index',
   UsePresetIndex = 'use-preset-index',
 }
 
-const VECTOR_INDEX_TABS: TabInfo<string>[] = [
+interface IndexStepTab {
+  value: VectorIndexTab
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+const VECTOR_INDEX_TABS: IndexStepTab[] = [
   {
     value: VectorIndexTab.BuildNewIndex,
     label: <BuildNewIndexTabTrigger />,
-    content: null,
     disabled: true,
   },
   {
     value: VectorIndexTab.UsePresetIndex,
     label: 'Use preset index',
-    content: (
-      <div data-testid="vector-inde-tabs--use-preset-index-content">
-        TODO: Add content later
-      </div>
-    ),
   },
 ]
 
-export const CreateIndexStepWrapper = (props: Partial<TabsProps>) => {
-  const { tabs, defaultValue, ...rest } = props
+export interface CreateIndexStepWrapperProps extends ButtonGroupProps {
+  tabs?: IndexStepTab[]
+  defaultValue?: VectorIndexTab
+}
+
+export const CreateIndexStepWrapper = (
+  props: Partial<CreateIndexStepWrapperProps>,
+) => {
+  const { tabs = VECTOR_INDEX_TABS, defaultValue, ...rest } = props
+
+  const [selectedTab, setSelectedTab] = useState<VectorIndexTab | null>(
+    defaultValue ?? tabs.filter((tab) => !tab.disabled)[0]?.value ?? null,
+  )
+
+  const isTabSelected = (value: VectorIndexTab) => selectedTab === value
 
   return (
-    <Tabs
-      tabs={tabs ?? VECTOR_INDEX_TABS}
-      defaultValue={defaultValue ?? VectorIndexTab.UsePresetIndex}
-      variant="sub"
-      {...rest}
-    />
+    <StyledCreateIndexStepWrapper>
+      <ButtonGroup {...rest}>
+        {tabs.map((tab) => (
+          <ButtonGroup.Button
+            disabled={tab.disabled}
+            isSelected={isTabSelected(tab.value)}
+            onClick={() => setSelectedTab(tab.value)}
+            key={`vector-index-tab-${tab.value}`}
+          >
+            {tab.label}
+          </ButtonGroup.Button>
+        ))}
+      </ButtonGroup>
+
+      {selectedTab === VectorIndexTab.BuildNewIndex && (
+        <div data-testid="vector-index-tabs--build-new-index-content">
+          TODO: Add content later
+        </div>
+      )}
+
+      {selectedTab === VectorIndexTab.UsePresetIndex && (
+        <div data-testid="vector-index-tabs--use-preset-index-content">
+          TODO: Add content later
+        </div>
+      )}
+    </StyledCreateIndexStepWrapper>
   )
 }