diff --git a/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/NamespacesBrowser.tsx b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/NamespacesBrowser.tsx
new file mode 100644
index 0000000000..070db9bb72
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/NamespacesBrowser.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+
+import { ColumnDef, Table } from 'uiSrc/components/base/layout/table'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { RiIcon } from 'uiSrc/components/base/icons'
+import { Text } from 'uiSrc/components/base/text'
+import {
+ StyledHeader,
+ StyledNamespacesBrowser,
+ StyledRadioGroup,
+ StyledTableContainer,
+ VerticalSeparator,
+} from './styles'
+import { RowRadioButton } from './TableRowRadioButton'
+import { NampespacesBrowserTableDataProps } from './types'
+import { EXAMPLE_DATA } from './data'
+
+export const NAMESPACES_BROWSER_TABLE_COLUMNS = [
+ {
+ id: 'row-selection',
+ size: 10,
+ // We can implement customn selection via a radio button
+ cell: ({ row }) => ,
+ // Or we can use the built-in checkbox selection
+ // cell: ({ row }) =>
,
+ },
+ {
+ accessorKey: 'namespace',
+ id: 'namespace',
+ cell: ({ row }) => (
+
+
+ {row.original.namespace}
+
+ ),
+ },
+] satisfies ColumnDef[]
+
+export const NamespacesBrowser = () => {
+ const [selectedRowId, setSelectedRowId] = React.useState('1')
+
+ return (
+
+
+
+
+
+
+
+ Scanned 10,000 / 33,645
+
+
+
+
+
+
+ )
+}
diff --git a/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/TableRowRadioButton.tsx b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/TableRowRadioButton.tsx
new file mode 100644
index 0000000000..d5b2a57cc6
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/TableRowRadioButton.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { RadioGroup } from '@redis-ui/components'
+import { Row } from 'uiSrc/components/base/layout/table'
+
+export const RowRadioButton = ({ row }: { row: Row }) => (
+ row.toggleSelected()}
+ />
+)
diff --git a/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/data.ts b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/data.ts
new file mode 100644
index 0000000000..59746bce1a
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/data.ts
@@ -0,0 +1,16 @@
+import { NampespacesBrowserTableDataProps } from './types'
+
+export const EXAMPLE_DATA: NampespacesBrowserTableDataProps[] = [
+ {
+ id: 1,
+ namespace: 'bikes',
+ },
+ {
+ id: 2,
+ namespace: 'movies',
+ },
+ {
+ id: 3,
+ namespace: 'tv_shows',
+ },
+]
diff --git a/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/styles.ts b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/styles.ts
new file mode 100644
index 0000000000..e702944130
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/styles.ts
@@ -0,0 +1,30 @@
+import { RadioGroup } from '@redis-ui/components'
+import { Theme } from '@redis-ui/styles'
+import styled from 'styled-components'
+
+import { FlexGroup, Row } from 'uiSrc/components/base/layout/flex'
+import { Table } from 'uiSrc/components/base/layout/table'
+
+export const StyledNamespacesBrowser = styled(FlexGroup)`
+ max-width: 300px;
+`
+
+export const StyledHeader = styled(Row)`
+ padding: ${({ theme }: { theme: Theme }) => theme.core.space.space150};
+`
+
+export const VerticalSeparator = styled.div`
+ width: 1px;
+ background-color: ${({ theme }: { theme: Theme }) =>
+ theme.semantic.color.border.neutral400};
+ height: 16px;
+`
+
+export const StyledRadioGroup = styled(RadioGroup.Compose)`
+ flex-grow: 1;
+ padding: 0;
+`
+
+export const StyledTableContainer = styled(Table.Compose)`
+ height: 100%;
+`
diff --git a/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/types.ts b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/types.ts
new file mode 100644
index 0000000000..c8c6de6fcf
--- /dev/null
+++ b/redisinsight/ui/src/pages/vector-search/components/namespaces-browser/types.ts
@@ -0,0 +1,4 @@
+export interface NampespacesBrowserTableDataProps {
+ id: number
+ namespace: string
+}
diff --git a/redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx b/redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx
index 830431b764..b2b071c128 100644
--- a/redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx
+++ b/redisinsight/ui/src/pages/vector-search/create-index/steps/CreateIndexStep.tsx
@@ -1,6 +1,11 @@
import React, { useState } from 'react'
-import { Col, FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
+import {
+ Col,
+ FlexGroup,
+ FlexItem,
+ Row,
+} from 'uiSrc/components/base/layout/flex'
import { Text } from 'uiSrc/components/base/text'
import { FieldBoxesGroup } from 'uiSrc/components/new-index/create-index-step/field-boxes-group/FieldBoxesGroup'
import { VectorSearchBox } from 'uiSrc/components/new-index/create-index-step/field-box/types'
@@ -14,6 +19,7 @@ import { bikesIndexFieldsBoxes, moviesIndexFieldsBoxes } from './data'
import { SearchInputWrapper } from './styles'
import { PreviewCommandDrawer } from './PreviewCommandDrawer'
import { IStepComponent, SampleDataContent, StepComponentProps } from '../types'
+import { NamespacesBrowser } from '../../components/namespaces-browser/NameSpacesBrowser'
// eslint-disable-next-line arrow-body-style, @typescript-eslint/no-unused-vars
const useIndexFieldsBoxes = (
@@ -45,8 +51,11 @@ export const CreateIndexStep: IStepComponent = ({
return (
-
-
+
+
+
+
+
Create index
@@ -75,7 +84,7 @@ export const CreateIndexStep: IStepComponent = ({
/>
-
+ {/*
Command preview
-
-
+ */}
+