diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx index b6e6cf3e65..b0679486ce 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx @@ -357,42 +357,40 @@ const Filters: React.FC = ({ value={query} onChange={({ target: { value } }) => setQuery(value)} /> - {isSeekTypeControlVisible && ( - - setCurrentSeekType(option as SeekType)} + value={currentSeekType} + selectSize="M" + minWidth="100px" + options={SeekTypeOptions} + disabled={isLive} + /> + {currentSeekType === SeekType.OFFSET ? ( + setOffset(value)} disabled={isLive} /> - {currentSeekType === SeekType.OFFSET ? ( - setOffset(value)} - disabled={isLive} - /> - ) : ( - setTimestamp(date)} - showTimeInput - timeInputLabel="Time:" - dateFormat="MMMM d, yyyy HH:mm" - className="date-picker" - placeholderText="Select timestamp" - disabled={isLive} - /> - )} - - )} + ) : ( + setTimestamp(date)} + showTimeInput + timeInputLabel="Time:" + dateFormat="MMMM d, yyyy HH:mm" + className="date-picker" + placeholderText="Select timestamp" + disabled={isLive} + /> + )} + ({ label: `Partition #${p.partition.toString()}`, diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx index 05d9eb0a46..d2a92c09e3 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/Messages.spec.tsx @@ -35,14 +35,14 @@ describe('Messages', () => { setUpComponent(); }); 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 ); }); it('should check the SeekDirection select changes', () => { - const seekDirectionSelect = screen.getByRole('listbox'); - const seekDirectionOption = screen.getByRole('option'); + const seekDirectionSelect = screen.getAllByRole('listbox')[1]; + const seekDirectionOption = screen.getAllByRole('option')[1]; expect(seekDirectionOption).toHaveTextContent( SeekDirectionOptionsObj[SeekDirection.FORWARD].label @@ -69,7 +69,7 @@ describe('Messages', () => { setUpComponent( searchParams.replace(SeekDirection.FORWARD, SeekDirection.BACKWARD) ); - expect(screen.getByRole('listbox')).toHaveTextContent( + expect(screen.getAllByRole('listbox')[1]).toHaveTextContent( SeekDirectionOptionsObj[SeekDirection.BACKWARD].label ); });