Skip to content

Commit e8f346b

Browse files
valkirilovvalkirilov
committed
feat(ui): created simple proof-of-copncept for namepsaces browser component
1 parent eaa0f36 commit e8f346b

File tree

6 files changed

+139
-6
lines changed

6 files changed

+139
-6
lines changed

‎redisinsight/ui/src/pages/vector-search/components/namespaces-browser/NamespacesBrowser.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react'
2+
3+
import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
4+
import { Row } from 'uiSrc/components/base/layout/flex'
5+
import { RiIcon } from 'uiSrc/components/base/icons'
6+
import { Text } from 'uiSrc/components/base/text'
7+
import {
8+
StyledHeader,
9+
StyledNamespacesBrowser,
10+
StyledRadioGroup,
11+
StyledTableContainer,
12+
VerticalSeparator,
13+
} from './styles'
14+
import { RowRadioButton } from './TableRowRadioButton'
15+
import { NampespacesBrowserTableDataProps } from './types'
16+
import { EXAMPLE_DATA } from './data'
17+
18+
export const NAMESPACES_BROWSER_TABLE_COLUMNS = [
19+
{
20+
id: 'row-selection',
21+
size: 10,
22+
// We can implement customn selection via a radio button
23+
cell: ({ row }) => <RowRadioButton row={row} />,
24+
// Or we can use the built-in checkbox selection
25+
// cell: ({ row }) => <Table.RowSelectionButton row={row} />,
26+
},
27+
{
28+
accessorKey: 'namespace',
29+
id: 'namespace',
30+
cell: ({ row }) => (
31+
<Row gap="s">
32+
<RiIcon type="FolderIcon" />
33+
<Text>{row.original.namespace}</Text>
34+
</Row>
35+
),
36+
},
37+
] satisfies ColumnDef<NampespacesBrowserTableDataProps>[]
38+
39+
export const NamespacesBrowser = () => {
40+
const [selectedRowId, setSelectedRowId] = React.useState<string>('1')
41+
42+
return (
43+
<StyledNamespacesBrowser grow>
44+
<StyledRadioGroup value={selectedRowId} onChange={setSelectedRowId}>
45+
<StyledTableContainer
46+
data={EXAMPLE_DATA}
47+
columns={NAMESPACES_BROWSER_TABLE_COLUMNS}
48+
stripedRows
49+
>
50+
<Table.Root>
51+
<StyledHeader gap="m" align="center">
52+
<RiIcon type="BillingIcon" />
53+
<VerticalSeparator />
54+
<Text size="M">Scanned 10,000 / 33,645 </Text>
55+
</StyledHeader>
56+
<Table.Body />
57+
</Table.Root>
58+
</StyledTableContainer>
59+
</StyledRadioGroup>
60+
</StyledNamespacesBrowser>
61+
)
62+
}

‎redisinsight/ui/src/pages/vector-search/components/namespaces-browser/TableRowRadioButton.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { RadioGroup } from '@redis-ui/components'
3+
import { Row } from 'uiSrc/components/base/layout/table'
4+
5+
export const RowRadioButton = <T extends object>({ row }: { row: Row<T> }) => (
6+
<RadioGroup.Item
7+
value={row.id}
8+
label=""
9+
disabled={!row.getCanSelect()}
10+
onChange={() => row.toggleSelected()}
11+
/>
12+
)

‎redisinsight/ui/src/pages/vector-search/components/namespaces-browser/data.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NampespacesBrowserTableDataProps } from './types'
2+
3+
export const EXAMPLE_DATA: NampespacesBrowserTableDataProps[] = [
4+
{
5+
id: 1,
6+
namespace: 'bikes',
7+
},
8+
{
9+
id: 2,
10+
namespace: 'movies',
11+
},
12+
{
13+
id: 3,
14+
namespace: 'tv_shows',
15+
},
16+
]

‎redisinsight/ui/src/pages/vector-search/components/namespaces-browser/styles.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { RadioGroup } from '@redis-ui/components'
2+
import { Theme } from '@redis-ui/styles'
3+
import styled from 'styled-components'
4+
5+
import { FlexGroup, Row } from 'uiSrc/components/base/layout/flex'
6+
import { Table } from 'uiSrc/components/base/layout/table'
7+
8+
export const StyledNamespacesBrowser = styled(FlexGroup)`
9+
max-width: 300px;
10+
`
11+
12+
export const StyledHeader = styled(Row)`
13+
padding: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
14+
`
15+
16+
export const VerticalSeparator = styled.div`
17+
width: 1px;
18+
background-color: ${({ theme }: { theme: Theme }) =>
19+
theme.semantic.color.border.neutral400};
20+
height: 16px;
21+
`
22+
23+
export const StyledRadioGroup = styled(RadioGroup.Compose)`
24+
flex-grow: 1;
25+
padding: 0;
26+
`
27+
28+
export const StyledTableContainer = styled(Table.Compose)`
29+
height: 100%;
30+
`

‎redisinsight/ui/src/pages/vector-search/components/namespaces-browser/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface NampespacesBrowserTableDataProps {
2+
id: number
3+
namespace: string
4+
}

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React, { useState } from 'react'
22

3-
import { Col, FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
3+
import {
4+
Col,
5+
FlexGroup,
6+
FlexItem,
7+
Row,
8+
} from 'uiSrc/components/base/layout/flex'
49
import { Text } from 'uiSrc/components/base/text'
510
import { FieldBoxesGroup } from 'uiSrc/components/new-index/create-index-step/field-boxes-group/FieldBoxesGroup'
611
import { VectorSearchBox } from 'uiSrc/components/new-index/create-index-step/field-box/types'
@@ -14,6 +19,7 @@ import { bikesIndexFieldsBoxes, moviesIndexFieldsBoxes } from './data'
1419
import { SearchInputWrapper } from './styles'
1520
import { PreviewCommandDrawer } from './PreviewCommandDrawer'
1621
import { IStepComponent, SampleDataContent, StepComponentProps } from '../types'
22+
import { NamespacesBrowser } from '../../components/namespaces-browser/NameSpacesBrowser'
1723

1824
// eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
1925
const useIndexFieldsBoxes = (
@@ -45,8 +51,11 @@ export const CreateIndexStep: IStepComponent = ({
4551

4652
return (
4753
<FlexGroup direction="column" data-testid="create-index-step2">
48-
<Col justify="between" gap="xxl">
49-
<Col gap="xxl">
54+
<Row justify="between" gap="xxl">
55+
<Col>
56+
<NamespacesBrowser />
57+
</Col>
58+
<Col gap="xxl" grow>
5059
<FlexItem direction="column" $gap="m">
5160
<Text>Create index</Text>
5261
<Text size="S" color="secondary">
@@ -75,16 +84,16 @@ export const CreateIndexStep: IStepComponent = ({
7584
/>
7685
</FlexGroup>
7786
</Col>
78-
<FlexGroup justify="end" grow={false}>
87+
{/* <FlexGroup justify="end" grow={false}>
7988
<EmptyButton
8089
icon={PlayFilledIcon}
8190
onClick={handlePreviewCommandClick}
8291
data-testid="preview-command-button"
8392
>
8493
Command preview
8594
</EmptyButton>
86-
</FlexGroup>
87-
</Col>
95+
</FlexGroup> */}
96+
</Row>
8897
<PreviewCommandDrawer
8998
commandContent={generateFtCreateCommand({
9099
indexName: parameters.indexName,

0 commit comments

Comments
 (0)