Skip to content

Commit 0664a81

Browse files
valkirilovpawelangelow
authored andcommitted
RI-7191 Selector tabs component (#4670)
* feat: created base wrapper for the "create index" step part of the new vector search * integrate the tab component to serve as a base wrapper * created a minimal implementation for the "use preset index" scenario re #RI-7191
1 parent b993a06 commit 0664a81

File tree

5 files changed

+118
-0
lines changed

5 files changed

+118
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from 'styled-components'
2+
3+
export const StyledBuildNewIndexTabTrigger = styled.div`
4+
display: flex;
5+
align-items: center;
6+
gap: ${({ theme }) => theme.core.space.space050};
7+
`
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
import { Badge } from '@redis-ui/components'
3+
import { StyledBuildNewIndexTabTrigger } from './BuildNewIndexTabTrigger.styles'
4+
5+
export const BuildNewIndexTabTrigger = () => (
6+
<StyledBuildNewIndexTabTrigger>
7+
Build new index <Badge label="Coming soon" />
8+
</StyledBuildNewIndexTabTrigger>
9+
)
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
3+
import { CreateIndexStepWrapper } from './CreateIndexStepWrapper'
4+
5+
const renderComponent = () => render(<CreateIndexStepWrapper />)
6+
7+
describe('CreateIndexStepWrapper', () => {
8+
it('should render', () => {
9+
const { container } = renderComponent()
10+
11+
expect(container).toBeTruthy()
12+
13+
// Check if the tabs are rendered
14+
const buildNewIndexTabTrigger = screen.getByText('Build new index')
15+
const usePresetIndexTabTrigger = screen.getByText('Use preset index')
16+
17+
expect(buildNewIndexTabTrigger).toBeInTheDocument()
18+
expect(usePresetIndexTabTrigger).toBeInTheDocument()
19+
20+
// Check if the "Use preset index" tab content is selected by default
21+
const usePresetIIndexTabContent = screen.queryByTestId(
22+
'vector-inde-tabs--use-preset-index-content',
23+
)
24+
expect(usePresetIIndexTabContent).toBeInTheDocument()
25+
})
26+
27+
it('should switch to "Use preset index" tab when clicked', () => {
28+
renderComponent()
29+
30+
const buildNewIndexTabTrigger = screen.getByText('Use preset index')
31+
fireEvent.click(buildNewIndexTabTrigger)
32+
33+
// Check if the "Use preset index" tab is rendered
34+
const buildNewIndexTabContent = screen.queryByTestId(
35+
'vector-inde-tabs--use-preset-index-content',
36+
)
37+
expect(buildNewIndexTabContent).toBeInTheDocument()
38+
})
39+
40+
it('shouldn\'t switch to "Build new index" tab when clicked, since it is disabled', () => {
41+
renderComponent()
42+
43+
const buildNewIndexTabTriggerLabel = screen.getByText('Build new index')
44+
const buildNewIndexTabTriggerButton =
45+
buildNewIndexTabTriggerLabel.closest('[type="button"]')
46+
47+
expect(buildNewIndexTabTriggerButton).toHaveAttribute('disabled')
48+
expect(buildNewIndexTabTriggerButton).toHaveAttribute('data-disabled')
49+
50+
// And when clicked, it should not change the active tab
51+
fireEvent.click(buildNewIndexTabTriggerLabel)
52+
53+
// Check if the "Use preset index" tab is still active
54+
const usePresetIndexTabContent = screen.queryByTestId(
55+
'vector-inde-tabs--use-preset-index-content',
56+
)
57+
expect(usePresetIndexTabContent).toBeInTheDocument()
58+
})
59+
})
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react'
2+
import { TabsProps } from '@redis-ui/components'
3+
import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
4+
import { BuildNewIndexTabTrigger } from './BuildNewIndex/BuildNewIndexTabTrigger'
5+
6+
export enum VectorIndexTab {
7+
BuildNewIndex = 'build-new-index',
8+
UsePresetIndex = 'use-preset-index',
9+
}
10+
11+
const VECTOR_INDEX_TABS: TabInfo<string>[] = [
12+
{
13+
value: VectorIndexTab.BuildNewIndex,
14+
label: <BuildNewIndexTabTrigger />,
15+
content: null,
16+
disabled: true,
17+
},
18+
{
19+
value: VectorIndexTab.UsePresetIndex,
20+
label: 'Use preset index',
21+
content: (
22+
<div data-testid="vector-inde-tabs--use-preset-index-content">
23+
TODO: Add content later
24+
</div>
25+
),
26+
},
27+
]
28+
29+
export const CreateIndexStepWrapper = (props: Partial<TabsProps>) => {
30+
const { tabs, defaultValue, ...rest } = props
31+
32+
return (
33+
<Tabs
34+
tabs={tabs ?? VECTOR_INDEX_TABS}
35+
defaultValue={defaultValue ?? VectorIndexTab.UsePresetIndex}
36+
variant="sub"
37+
{...rest}
38+
/>
39+
)
40+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { CreateIndexStepWrapper } from './CreateIndexStepWrapper'
2+
3+
export default CreateIndexStepWrapper

0 commit comments

Comments
 (0)