RI-7190 Field Box component (#4716)

* feat: created base field box component
* feat: created field boxes group component

re #RI-7190

Author: valkirilov

redisinsight/ui/src/components/new-index/CreateIndexStep/CreateIndexStepWrapper.spec.tsx renamed to redisinsight/ui/src/components/new-index/create-index-step/CreateIndexStepWrapper.spec.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
-import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { CreateIndexStepWrapper } from './CreateIndexStepWrapper'
 
 const renderComponent = () => render(<CreateIndexStepWrapper />)
 
 describe('CreateIndexStepWrapper', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
   it('should render', () => {
     const { container } = renderComponent()
 
@@ -37,7 +41,7 @@ describe('CreateIndexStepWrapper', () => {
     expect(buildNewIndexTabContent).toBeInTheDocument()
   })
 
-  it('shouldn\'t switch to "Build new index" tab when clicked, since it is disabled', () => {
+  it("shouldn't switch to 'Build new index' tab when clicked, since it is disabled", () => {
     renderComponent()
 
     const buildNewIndexTabTriggerLabel = screen.getByText('Build new index')

redisinsight/ui/src/components/new-index/CreateIndexStep/CreateIndexStepWrapper.tsx renamed to redisinsight/ui/src/components/new-index/create-index-step/CreateIndexStepWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { TabsProps } from '@redis-ui/components'
 import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
-import { BuildNewIndexTabTrigger } from './BuildNewIndex/BuildNewIndexTabTrigger'
+import { BuildNewIndexTabTrigger } from './build-new-index-tab/BuildNewIndexTabTrigger'
 
 export enum VectorIndexTab {
   BuildNewIndex = 'build-new-index',

redisinsight/ui/src/components/new-index/CreateIndexStep/BuildNewIndex/BuildNewIndexTabTrigger.styles.ts renamed to redisinsight/ui/src/components/new-index/create-index-step/build-new-index-tab/BuildNewIndexTabTrigger.styles.ts

@@ -0,0 +1,84 @@
+import React from 'react'
+import { BoxSelectionGroup } from '@redis-ui/components'
+
+import { FieldTypes } from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
+import { MOCK_VECTOR_SEARCH_BOX } from 'uiSrc/constants/mocks/mock-vector-index-search'
+import { cleanup, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+
+import { FieldBox, FieldBoxProps } from './FieldBox'
+import { VectorSearchBox } from './types'
+
+const renderFieldBoxComponent = (props?: FieldBoxProps) => {
+  const defaultProps: FieldBoxProps = {
+    box: MOCK_VECTOR_SEARCH_BOX,
+  }
+
+  return render(
+    <BoxSelectionGroup.Compose>
+      <FieldBox {...defaultProps} {...props} />
+    </BoxSelectionGroup.Compose>,
+  )
+}
+
+describe('CreateIndexStepWrapper', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it('should render', () => {
+    const props: FieldBoxProps = {
+      box: {
+        ...MOCK_VECTOR_SEARCH_BOX,
+        value: 'id',
+        label: 'id',
+        text: 'Unique product identifier',
+        tag: FieldTypes.TAG,
+        disabled: false,
+      },
+    }
+
+    const { container } = renderFieldBoxComponent(props)
+
+    expect(container).toBeTruthy()
+
+    // Check if the box is rendered with the correct visual elements
+    const label = screen.getByText(props.box.label!)
+    const description = screen.getByText(props.box.text!)
+    const tag = screen.getByText(props.box.tag.toUpperCase()!)
+    const checkbox = screen.getByRole('checkbox')
+
+    expect(label).toBeInTheDocument()
+    expect(description).toBeInTheDocument()
+    expect(tag).toBeInTheDocument()
+    expect(checkbox).toBeInTheDocument()
+  })
+
+  it('should select the box when clicked', () => {
+    renderFieldBoxComponent()
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+
+    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+    fireEvent.click(box)
+
+    expect(checkbox).toBeChecked()
+  })
+
+  it('should not select the box when clicked if disabled', () => {
+    const disabledBox: VectorSearchBox = {
+      ...MOCK_VECTOR_SEARCH_BOX,
+      disabled: true,
+    }
+
+    renderFieldBoxComponent({ box: disabledBox })
+
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+
+    const box = screen.getByTestId(`field-box-${disabledBox.value}`)
+    fireEvent.click(box)
+
+    expect(checkbox).not.toBeChecked()
+  })
+})

redisinsight/ui/src/components/new-index/CreateIndexStep/BuildNewIndex/BuildNewIndexTabTrigger.tsx renamed to redisinsight/ui/src/components/new-index/create-index-step/build-new-index-tab/BuildNewIndexTabTrigger.tsx

@@ -0,0 +1,25 @@
+import { BoxSelectionGroup } from '@redis-ui/components'
+import styled from 'styled-components'
+
+export const StyledFieldBox = styled(BoxSelectionGroup.Item.Compose)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  padding: ${({ theme }) => theme.core.space.space100};
+  gap: ${({ theme }) => theme.components.boxSelectionGroup.defaultItem.gap};
+`
+
+export const BoxHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const BoxHeaderActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.components.boxSelectionGroup.defaultItem.gap};
+`
+
+export const BoxContent = styled.div``

redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import {
+  BoxSelectionGroup,
+  BoxSelectionGroupItemComposeProps,
+  Checkbox,
+} from '@redis-ui/components'
+
+import { EditIcon } from 'uiSrc/components/base/icons'
+import { IconButton } from 'uiSrc/components/base/forms/buttons/IconButton'
+import { Text } from 'uiSrc/components/base/text'
+
+import {
+  BoxContent,
+  BoxHeader,
+  BoxHeaderActions,
+  StyledFieldBox,
+} from './FieldBox.styles'
+import { FieldTag } from './FieldTag'
+import { VectorSearchBox } from './types'
+
+export interface FieldBoxProps extends BoxSelectionGroupItemComposeProps {
+  box: VectorSearchBox
+}
+
+export const FieldBox = ({ box, ...rest }: FieldBoxProps) => {
+  const { label, text, tag, disabled } = box
+
+  return (
+    <StyledFieldBox box={box} data-testid={`field-box-${box.value}`} {...rest}>
+      <BoxHeader>
+        <BoxSelectionGroup.Item.StateIndicator>
+          {(props) => <Checkbox {...props} />}
+        </BoxSelectionGroup.Item.StateIndicator>
+
+        <BoxHeaderActions>
+          <FieldTag tag={tag} />
+          <IconButton icon={EditIcon} size="XL" disabled={disabled} />
+        </BoxHeaderActions>
+      </BoxHeader>
+      <BoxContent>
+        <Text size="L" variant="semiBold">
+          {label}
+        </Text>
+
+        {text && (
+          <Text size="L" color="secondary" ellipsis tooltipOnEllipsis>
+            {text}
+          </Text>
+        )}
+      </BoxContent>
+    </StyledFieldBox>
+  )
+}

redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.styles.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Badge } from '@redis-ui/components'
+import {
+  FIELD_TYPE_OPTIONS,
+  FieldTypes,
+} from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
+
+// TODO: Add colors mapping for tags when @redis-ui/components v38.6.0 is released
+export const FieldTag = ({ tag }: { tag: FieldTypes }) => {
+  const tagLabel = FIELD_TYPE_OPTIONS.find(
+    (option) => option.value === tag,
+  )?.text
+
+  return tagLabel ? <Badge label={tagLabel} /> : null
+}

redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldBox.tsx

@@ -0,0 +1,7 @@
+import { BoxSelectionGroupBox } from '@redis-ui/components'
+import { FieldTypes } from 'uiSrc/pages/browser/components/create-redisearch-index/constants'
+
+export interface VectorSearchBox extends BoxSelectionGroupBox {
+  text: string
+  tag: FieldTypes
+}

redisinsight/ui/src/components/new-index/create-index-step/field-box/FieldTag.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { MOCK_VECTOR_SEARCH_BOX } from 'uiSrc/constants/mocks/mock-vector-index-search'
+import { FieldBoxesGroup, FieldBoxesGroupProps } from './FieldBoxesGroup'
+
+const renderFieldBoxesGroupComponent = (
+  props?: Partial<FieldBoxesGroupProps>,
+) => {
+  const defaultProps: FieldBoxesGroupProps = {
+    boxes: [MOCK_VECTOR_SEARCH_BOX],
+    value: [MOCK_VECTOR_SEARCH_BOX.value],
+    onChange: jest.fn(),
+  }
+
+  return render(<FieldBoxesGroup {...defaultProps} {...props} />)
+}
+
+describe('FieldBoxesGroup', () => {
+  it('should render', () => {
+    const { container } = renderFieldBoxesGroupComponent()
+
+    expect(container).toBeTruthy()
+
+    const fieldBoxesGroup = screen.getByTestId('field-boxes-group')
+    expect(fieldBoxesGroup).toBeInTheDocument()
+
+    const fieldBoxes = screen.getAllByTestId(/field-box-/)
+    expect(fieldBoxes).toHaveLength(1)
+  })
+
+  it('should call onChange when clicking on a box to select it', () => {
+    const onChangeMock = jest.fn()
+    const value: string[] = []
+
+    renderFieldBoxesGroupComponent({ value, onChange: onChangeMock })
+
+    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+
+    fireEvent.click(box)
+    expect(onChangeMock).toHaveBeenCalledWith([MOCK_VECTOR_SEARCH_BOX.value])
+  })
+
+  it('should call onChange when clicking on a box to deselect it', () => {
+    const onChangeMock = jest.fn()
+    const value: string[] = [MOCK_VECTOR_SEARCH_BOX.value]
+
+    renderFieldBoxesGroupComponent({ value, onChange: onChangeMock })
+
+    const box = screen.getByTestId(`field-box-${MOCK_VECTOR_SEARCH_BOX.value}`)
+
+    fireEvent.click(box)
+    expect(onChangeMock).toHaveBeenCalledWith([])
+  })
+})