Skip to content

RI-7873 Fix identifier field being cut off in create index form #5332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dantovska merged 7 commits into from
Dec 16, 2025
Merged

RI-7873 Fix identifier field being cut off in create index form #5332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4349d18
change the min-height to 100% to make sure all available space is taken
dantovska Dec 15, 2025
31bf47c
change the scroll to thin to match the add key style
dantovska Dec 15, 2025
a823352
surround AddMultipleFields with div, which actually fixes the issue
dantovska Dec 15, 2025
9c723dc
adjust surrounding spaces from spacer and cols to follow existing pat…
dantovska Dec 15, 2025
f3d1c02
fix(ui): prevent identifier field from being cut off in create index …
dantovska Dec 15, 2025
52227a0
leave the linter fix, remove other unneeded changes
dantovska Dec 15, 2025
ab5017b
fix: prevent IdentifierInfo tooltip state loss by using function call…
dantovska Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion redisinsight/ui/src/pages/browser/components/add-multiple-fields/AddMultipleFields.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ import { Col } from 'uiSrc/components/base/layout/flex'
export const ItemsWrapper = styled(Col)`
overflow: auto;
flex: 1;
min-height: 0;
min-height: 100%;
`
98 changes: 50 additions & 48 deletions ...insight/ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { RiTooltip } from 'uiSrc/components/base'
import { TextInput } from 'uiSrc/components/base/inputs'
import { CreateRedisearchIndexDto } from 'apiSrc/modules/browser/redisearch/dto'
import { Panel } from 'uiSrc/components/panel'
import { HorizontalRule, Spacer } from 'uiSrc/components/base/layout'
import { HorizontalRule } from 'uiSrc/components/base/layout'

import { KEY_TYPE_OPTIONS, RedisearchIndexKeyType } from './constants'

Expand Down Expand Up @@ -70,6 +70,7 @@ const StyledContent = styled(Col)`
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
overscroll-behavior: contain;
`

Expand All @@ -88,8 +89,6 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
initialFieldValue(fieldTypeOptions),
])



const lastAddedIdentifier = useRef<HTMLInputElement>(null)
const prevCountFields = useRef<number>(0)

Expand Down Expand Up @@ -212,8 +211,7 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {

return (
<>
<StyledContent gap="xl">
<Spacer size="xs" />
<StyledContent gap="l">
<Row gap="m" grow={false}>
<FlexItem grow>
<FormField label="Index Name">
Expand Down Expand Up @@ -262,53 +260,57 @@ const CreateRedisearchIndex = ({ onClosePanel, onCreateIndex }: Props) => {
/>
</FlexItem>
</Row>
<HorizontalRule margin="s" colorVariable="separatorColor" />
<Col grow={false} gap="s">
<HorizontalRule margin="m" colorVariable="separatorColor" />
<Col grow={false} gap="m">
<Row align="center" gap="xs">
<Text>Identifier</Text>
{IdentifierInfo()}
</Row>
<AddMultipleFields
items={fields}
isClearDisabled={isClearDisabled}
onClickRemove={onClickRemove}
onClickAdd={addField}
>
{(item, index) => (
<Row align="center" gap="m">
<FlexItem grow>
<FormField>
<TextInput
name={`identifier-${item.id}`}
id={`identifier-${item.id}`}
placeholder="Enter Identifier"
value={item.identifier}
onChange={(value) =>
handleFieldChange('identifier', item.id, value)
}
ref={
index === fields.length - 1 ? lastAddedIdentifier : null
}
autoComplete="off"
data-testid={`identifier-${item.id}`}
/>
</FormField>
</FlexItem>
<FlexItem grow>
<FormField>
<RiSelect
options={fieldTypeOptions}
value={item.fieldType}
onChange={(value: string) =>
handleFieldChange('fieldType', item.id, value)
}
data-testid={`field-type-${item.id}`}
/>
</FormField>
</FlexItem>
</Row>
)}
</AddMultipleFields>
<div>
<AddMultipleFields
items={fields}
isClearDisabled={isClearDisabled}
onClickRemove={onClickRemove}
onClickAdd={addField}
>
{(item, index) => (
<Row align="center" gap="m">
<FlexItem grow>
<FormField>
<TextInput
name={`identifier-${item.id}`}
id={`identifier-${item.id}`}
placeholder="Enter Identifier"
value={item.identifier}
onChange={(value) =>
handleFieldChange('identifier', item.id, value)
}
ref={
index === fields.length - 1
? lastAddedIdentifier
: null
}
autoComplete="off"
data-testid={`identifier-${item.id}`}
/>
</FormField>
</FlexItem>
<FlexItem grow>
<FormField>
<RiSelect
options={fieldTypeOptions}
value={item.fieldType}
onChange={(value: string) =>
handleFieldChange('fieldType', item.id, value)
}
data-testid={`field-type-${item.id}`}
/>
</FormField>
</FlexItem>
</Row>
)}
</AddMultipleFields>
</div>
</Col>
</StyledContent>
<HorizontalRule margin="xs" colorVariable="separatorColor" />
Expand Down
8 changes: 3 additions & 5 deletions .../ui/src/pages/browser/components/create-redisearch-index/CreateRedisearchIndexWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const CreateRedisearchIndexWrapper = ({
onCreateIndex,
}: Props) => (
<StyledCreateRedisearchIndexWrapper data-testid="create-index-panel">
<StyledHeader>
<Spacer size="m" />
<Spacer size="m" />
<StyledHeader gap="xl">
<Row justify="between">
<Title size="M">New Index</Title>
{!arePanelsCollapsed && (
Expand All @@ -55,7 +55,6 @@ const CreateRedisearchIndexWrapper = ({
</RiTooltip>
)}
</Row>
<Spacer size="xl" />
<FlexItem>
<Text size="s">
Use CLI or Workbench to create more advanced indexes. See more details
Expand All @@ -73,9 +72,8 @@ const CreateRedisearchIndexWrapper = ({
</Link>
</Text>
</FlexItem>
<Spacer size="xl" />
</StyledHeader>
<HorizontalRule margin="xs" colorVariable="separatorColor" />
<HorizontalRule margin="l" colorVariable="separatorColor" />
<CreateRedisearchIndex
onCreateIndex={onCreateIndex}
onClosePanel={onClosePanel}
Expand Down
Loading