From 9974892ecf2db033adbe7ab839549732f7194ddf Mon Sep 17 00:00:00 2001
From: Valentin Kirilov <valentin.kirilov@redis.com>
Date: Fri, 3 Oct 2025 16:56:21 +0300
Subject: [PATCH] feat(ui): created simple proof-of-copncept for namepsaces
 browser component

---
 .../namespaces-browser/NamespacesBrowser.tsx  | 62 +++++++++++++++++++
 .../TableRowRadioButton.tsx                   | 12 ++++
 .../components/namespaces-browser/data.ts     | 16 +++++
 .../components/namespaces-browser/styles.ts   | 30 +++++++++
 .../components/namespaces-browser/types.ts    |  4 ++
 .../create-index/steps/CreateIndexStep.tsx    | 21 +++++--
 6 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 redisinsight/ui/src/pages/vector-search/components/namespaces-browser/NamespacesBrowser.tsx
 create mode 100644 redisinsight/ui/src/pages/vector-search/components/namespaces-browser/TableRowRadioButton.tsx
 create mode 100644 redisinsight/ui/src/pages/vector-search/components/namespaces-browser/data.ts
 create mode 100644 redisinsight/ui/src/pages/vector-search/components/namespaces-browser/styles.ts
 create mode 100644 redisinsight/ui/src/pages/vector-search/components/namespaces-browser/types.ts

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 }) => <RowRadioButton row={row} />,
+    // Or we can use the built-in checkbox selection
+    // cell: ({ row }) => <Table.RowSelectionButton row={row} />,
+  },
+  {
+    accessorKey: 'namespace',
+    id: 'namespace',
+    cell: ({ row }) => (
+      <Row gap="s">
+        <RiIcon type="FolderIcon" />
+        <Text>{row.original.namespace}</Text>
+      </Row>
+    ),
+  },
+] satisfies ColumnDef<NampespacesBrowserTableDataProps>[]
+
+export const NamespacesBrowser = () => {
+  const [selectedRowId, setSelectedRowId] = React.useState<string>('1')
+
+  return (
+    <StyledNamespacesBrowser grow>
+      <StyledRadioGroup value={selectedRowId} onChange={setSelectedRowId}>
+        <StyledTableContainer
+          data={EXAMPLE_DATA}
+          columns={NAMESPACES_BROWSER_TABLE_COLUMNS}
+          stripedRows
+        >
+          <Table.Root>
+            <StyledHeader gap="m" align="center">
+              <RiIcon type="BillingIcon" />
+              <VerticalSeparator />
+              <Text size="M">Scanned 10,000 / 33,645 </Text>
+            </StyledHeader>
+            <Table.Body />
+          </Table.Root>
+        </StyledTableContainer>
+      </StyledRadioGroup>
+    </StyledNamespacesBrowser>
+  )
+}
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 = <T extends object>({ row }: { row: Row<T> }) => (
+  <RadioGroup.Item
+    value={row.id}
+    label=""
+    disabled={!row.getCanSelect()}
+    onChange={() => 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 (
     <FlexGroup direction="column" data-testid="create-index-step2">
-      <Col justify="between" gap="xxl">
-        <Col gap="xxl">
+      <Row justify="between" gap="xxl">
+        <Col>
+          <NamespacesBrowser />
+        </Col>
+        <Col gap="xxl" grow>
           <FlexItem direction="column" $gap="m">
             <Text>Create index</Text>
             <Text size="S" color="secondary">
@@ -75,7 +84,7 @@ export const CreateIndexStep: IStepComponent = ({
             />
           </FlexGroup>
         </Col>
-        <FlexGroup justify="end" grow={false}>
+        {/* <FlexGroup justify="end" grow={false}>
           <EmptyButton
             icon={PlayFilledIcon}
             onClick={handlePreviewCommandClick}
@@ -83,8 +92,8 @@ export const CreateIndexStep: IStepComponent = ({
           >
             Command preview
           </EmptyButton>
-        </FlexGroup>
-      </Col>
+        </FlexGroup> */}
+      </Row>
       <PreviewCommandDrawer
         commandContent={generateFtCreateCommand({
           indexName: parameters.indexName,