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

Author: simonyandev

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

@@ -357,42 +357,40 @@ const Filters: React.FC<FiltersProps> = ({
             value={query}
             onChange={({ target: { value } }) => setQuery(value)}
           />
-          {isSeekTypeControlVisible && (
-            <S.SeekTypeSelectorWrapper>
-              <Select
-                id="selectSeekType"
-                onChange={(option) => setCurrentSeekType(option as SeekType)}
-                value={currentSeekType}
-                selectSize="M"
-                minWidth="100px"
-                options={SeekTypeOptions}
+          <S.SeekTypeSelectorWrapper>
+            <Select
+              id="selectSeekType"
+              onChange={(option) => setCurrentSeekType(option as SeekType)}
+              value={currentSeekType}
+              selectSize="M"
+              minWidth="100px"
+              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}
               />
-              {currentSeekType === SeekType.OFFSET ? (
-                <Input
-                  id="offset"
-                  type="text"
-                  inputSize="M"
-                  value={offset}
-                  className="offset-selector"
-                  placeholder="Offset"
-                  onChange={({ target: { value } }) => setOffset(value)}
-                  disabled={isLive}
-                />
-              ) : (
-                <DatePicker
-                  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>
-          )}
+            ) : (
+              <DatePicker
+                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
             options={partitions.map((p) => ({
               label: `Partition #${p.partition.toString()}`,

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