[PoC] Namespaces Browser component

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>
+  )
+}

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()}
+  />
+)

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',
+  },
+]

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%;
+`

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

@@ -0,0 +1,4 @@
+export interface NampespacesBrowserTableDataProps {
+  id: number
+  namespace: string
+}

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,16 +84,16 @@ export const CreateIndexStep: IStepComponent = ({
             />
           </FlexGroup>
         </Col>
-        <FlexGroup justify="end" grow={false}>
+        {/* <FlexGroup justify="end" grow={false}>
           <EmptyButton
             icon={PlayFilledIcon}
             onClick={handlePreviewCommandClick}
             data-testid="preview-command-button"
           >
             Command preview
           </EmptyButton>
-        </FlexGroup>
-      </Col>
+        </FlexGroup> */}
+      </Row>
       <PreviewCommandDrawer
         commandContent={generateFtCreateCommand({
           indexName: parameters.indexName,