0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove offset input render condition in topic messages filters (#1876)

Browse source
This commit is contained in:
Arsen Simonyan 2022-04-22 12:33:03 +04:00 • committed by GitHub
parent f70809128b
commit 4c76d07f04
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
View file

@ -357,42 +357,40 @@ const Filters: React.FC<FiltersProps> = ({
value={query} value={query}
onChange={({ target: { value } }) => setQuery(value)} onChange={({ target: { value } }) => setQuery(value)}
/> />
{isSeekTypeControlVisible && ( <S.SeekTypeSelectorWrapper>
<S.SeekTypeSelectorWrapper> <Select
<Select id="selectSeekType"
id="selectSeekType" onChange={(option) => setCurrentSeekType(option as SeekType)}
onChange={(option) => setCurrentSeekType(option as SeekType)} value={currentSeekType}
value={currentSeekType} selectSize="M"
selectSize="M" minWidth="100px"
minWidth="100px" options={SeekTypeOptions}
options={SeekTypeOptions} disabled={isLive}
/>
{currentSeekType === SeekType.OFFSET ? (
<Input
id="offset"
type="text"
inputSize="M"
value={offset}
className="offset-selector"
placeholder="Offset"
onChange={({ target: { value } }) => setOffset(value)}
disabled={isLive} disabled={isLive}
/> />
{currentSeekType === SeekType.OFFSET ? ( ) : (
<Input <DatePicker
id="offset" selected={timestamp}
type="text" onChange={(date: Date | null) => setTimestamp(date)}
inputSize="M" showTimeInput
value={offset} timeInputLabel="Time:"
className="offset-selector" dateFormat="MMMM d, yyyy HH:mm"
placeholder="Offset" className="date-picker"
onChange={({ target: { value } }) => setOffset(value)} placeholderText="Select timestamp"
disabled={isLive} disabled={isLive}
/> />
) : ( )}
<DatePicker </S.SeekTypeSelectorWrapper>
selected={timestamp}
onChange={(date: Date | null) => setTimestamp(date)}
showTimeInput
timeInputLabel="Time:"
dateFormat="MMMM d, yyyy HH:mm"
className="date-picker"
placeholderText="Select timestamp"
disabled={isLive}
/>
)}
</S.SeekTypeSelectorWrapper>
)}
<MultiSelect <MultiSelect
options={partitions.map((p) => ({ options={partitions.map((p) => ({
label: `Partition #${p.partition.toString()}`, label: `Partition #${p.partition.toString()}`,

8
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx
View file

@ -35,14 +35,14 @@ describe('Messages', () => {
setUpComponent(); setUpComponent();
}); });
it('should check default seekDirection if it actually take the value from the url', () => { it('should check default seekDirection if it actually take the value from the url', () => {
expect(screen.getByRole('listbox')).toHaveTextContent( expect(screen.getAllByRole('listbox')[1]).toHaveTextContent(
SeekDirectionOptionsObj[SeekDirection.FORWARD].label SeekDirectionOptionsObj[SeekDirection.FORWARD].label
); );
}); });
it('should check the SeekDirection select changes', () => { it('should check the SeekDirection select changes', () => {
const seekDirectionSelect = screen.getByRole('listbox'); const seekDirectionSelect = screen.getAllByRole('listbox')[1];
const seekDirectionOption = screen.getByRole('option'); const seekDirectionOption = screen.getAllByRole('option')[1];
expect(seekDirectionOption).toHaveTextContent( expect(seekDirectionOption).toHaveTextContent(
SeekDirectionOptionsObj[SeekDirection.FORWARD].label SeekDirectionOptionsObj[SeekDirection.FORWARD].label
@ -69,7 +69,7 @@ describe('Messages', () => {
setUpComponent( setUpComponent(
searchParams.replace(SeekDirection.FORWARD, SeekDirection.BACKWARD) searchParams.replace(SeekDirection.FORWARD, SeekDirection.BACKWARD)
); );
expect(screen.getByRole('listbox')).toHaveTextContent( expect(screen.getAllByRole('listbox')[1]).toHaveTextContent(
SeekDirectionOptionsObj[SeekDirection.BACKWARD].label SeekDirectionOptionsObj[SeekDirection.BACKWARD].label
); );
}); });