Merge branch 'main' into issue/233

Author: germanosin

api/build.gradle

@@ -65,6 +65,8 @@ dependencies {
     // CVE Fixes
     implementation libs.apache.commons.compress
     implementation libs.okhttp3.logging.intercepter
+    implementation libs.reactor.netty.http
+    // CVE Fixes End
 
     implementation libs.modelcontextprotocol.spring.webflux
     implementation libs.victools.jsonschema.generator

api/src/main/java/io/kafbat/ui/serdes/ProducerRecordCreator.java

@@ -5,7 +5,7 @@
 import javax.annotation.Nullable;
 import lombok.RequiredArgsConstructor;
 import org.apache.kafka.clients.producer.ProducerRecord;
-import org.apache.kafka.common.header.Header;
+import org.apache.kafka.common.header.Headers;
 import org.apache.kafka.common.header.internals.RecordHeader;
 import org.apache.kafka.common.header.internals.RecordHeaders;
 
@@ -20,18 +20,23 @@ public ProducerRecord<byte[], byte[]> create(String topic,
                                                @Nullable String key,
                                                @Nullable String value,
                                                @Nullable Map<String, String> headers) {
+
+    Headers kafkaHeaders = createHeaders(headers);
+
     return new ProducerRecord<>(
         topic,
         partition,
-        key == null ? null : keySerializer.serialize(key),
-        value == null ? null : valuesSerializer.serialize(value),
-        headers == null ? null : createHeaders(headers)
+        key == null ? null : keySerializer.serialize(key, kafkaHeaders),
+        value == null ? null : valuesSerializer.serialize(value, kafkaHeaders),
+        kafkaHeaders
     );
   }
 
-  private Iterable<Header> createHeaders(Map<String, String> clientHeaders) {
+  private Headers createHeaders(Map<String, String> clientHeaders) {
     RecordHeaders headers = new RecordHeaders();
-    clientHeaders.forEach((k, v) -> headers.add(new RecordHeader(k, v == null ? null : v.getBytes())));
+    if (clientHeaders != null) {
+      clientHeaders.forEach((k, v) -> headers.add(new RecordHeader(k, v == null ? null : v.getBytes())));
+    }
     return headers;
   }
 

api/src/main/java/io/kafbat/ui/serdes/SerdeInstance.java

@@ -10,6 +10,7 @@
 import lombok.Getter;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.apache.kafka.common.header.Headers;
 
 @Slf4j
 @RequiredArgsConstructor
@@ -80,7 +81,17 @@ public boolean canDeserialize(String topic, Serde.Target type) {
   public Serde.Serializer serializer(String topic, Serde.Target type) {
     return wrapWithClassloader(() -> {
       var serializer = serde.serializer(topic, type);
-      return input -> wrapWithClassloader(() -> serializer.serialize(input));
+      return new Serde.Serializer() {
+        @Override
+        public byte[] serialize(String input) {
+          return wrapWithClassloader(() -> serializer.serialize(input));
+        }
+
+        @Override
+        public byte[] serialize(String input, Headers headers) {
+          return wrapWithClassloader(() -> serializer.serialize(input, headers));
+        }
+      };
     });
   }
 

frontend/src/components/Connect/List/KafkaConnectLinkCell.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { LinkCell } from 'components/common/NewTable';
+import useAppParams from 'lib/hooks/useAppParams';
+import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
+import { CellContext } from '@tanstack/react-table';
+import { FullConnectorInfo } from 'generated-sources';
+
+type KafkaConnectLinkCellProps = CellContext<FullConnectorInfo, string>;
+
+export const KafkaConnectLinkCell = ({
+  getValue,
+  row,
+}: KafkaConnectLinkCellProps) => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { connect, name } = row.original;
+  const value = getValue();
+
+  return (
+    <LinkCell
+      value={value}
+      to={clusterConnectConnectorPath(clusterName, connect, name)}
+      wordBreak
+    />
+  );
+};

frontend/src/components/Connect/List/List.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
-import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
+import { ClusterNameRoute } from 'lib/paths';
 import Table, { TagCell } from 'components/common/NewTable';
 import { FullConnectorInfo } from 'generated-sources';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
+import { useSearchParams } from 'react-router-dom';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
+import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
 import RunningTasksCell from './RunningTasksCell';
+import { KafkaConnectLinkCell } from './KafkaConnectLinkCell';
 
-const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
+const kafkaConnectColumns: ColumnDef<FullConnectorInfo, string>[] = [
   {
     header: 'Name',
     accessorKey: 'name',
-    cell: BreakableTextCell,
+    cell: KafkaConnectLinkCell,
     enableResizing: true,
   },
   {
@@ -77,7 +78,6 @@ const kafkaConnectColumns: ColumnDef<FullConnectorInfo>[] = [
 ];
 
 const List: React.FC = () => {
-  const navigate = useNavigate();
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
   const { data: connectors } = useConnectors(
@@ -95,9 +95,6 @@ const List: React.FC = () => {
       enableSorting
       enableColumnResizing
       columnSizingPersister={columnSizingPersister}
-      onRowClick={({ original: { connect, name } }) =>
-        navigate(clusterConnectConnectorPath(clusterName, connect, name))
-      }
       emptyMessage="No connectors found"
       setRowId={(originalRow) => `${originalRow.name}-${originalRow.connect}`}
       filterPersister={filterPersister}

frontend/src/components/Connect/List/__tests__/List.spec.tsx

@@ -64,18 +64,13 @@ describe('Connectors List', () => {
 
     it('opens broker when row clicked', async () => {
       renderComponent();
-      await userEvent.click(
-        screen.getByRole('row', {
-          name: 'hdfs-source-connector first SOURCE FileStreamSource a b c RUNNING 2 of 2',
-        })
-      );
-      await waitFor(() =>
-        expect(mockedUsedNavigate).toBeCalledWith(
-          clusterConnectConnectorPath(
-            clusterName,
-            'first',
-            'hdfs-source-connector'
-          )
+      screen.debug();
+      expect(screen.getByText('hdfs-source-connector')).toHaveAttribute(
+        'href',
+        clusterConnectConnectorPath(
+          clusterName,
+          'first',
+          'hdfs-source-connector'
         )
       );
     });

frontend/src/components/ConsumerGroups/Details/ResetOffsets/Form.tsx

@@ -23,6 +23,7 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { useResetConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
 import { FlexFieldset, StyledForm } from 'components/common/Form/Form.styled';
 import ControlledSelect from 'components/common/Select/ControlledSelect';
+import { useTimezone } from 'lib/hooks/useTimezones';
 
 import * as S from './ResetOffsets.styled';
 
@@ -38,6 +39,7 @@ const resetTypeOptions = Object.values(ConsumerGroupOffsetsResetType).map(
 
 const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
   const navigate = useNavigate();
+  const { getDateInCurrentTimezone } = useTimezone();
   const routerParams = useAppParams<ClusterGroupParam>();
   const reset = useResetConsumerGroupOffsetsMutation(routerParams);
   const topicOptions = React.useMemo(
@@ -142,8 +144,12 @@ const Form: React.FC<FormProps> = ({ defaultValues, partitions, topics }) => {
                   render={({ field: { onChange, onBlur, value, ref } }) => (
                     <S.DatePickerInput
                       ref={ref}
-                      selected={new Date(value as number)}
-                      onChange={(e: Date | null) => onChange(e?.getTime())}
+                      selected={getDateInCurrentTimezone(
+                        new Date(value as number)
+                      )}
+                      onChange={(selectedDate: Date | null) => {
+                        onChange(selectedDate?.getTime());
+                      }}
                       onBlur={onBlur}
                     />
                   )}

frontend/src/components/NavBar/NavBar.tsx

@@ -12,6 +12,7 @@ import ProductHuntIcon from 'components/common/Icons/ProductHuntIcon';
 import { Button } from 'components/common/Button/Button';
 import MenuIcon from 'components/common/Icons/MenuIcon';
 
+import { UserTimezone } from './UserTimezone/UserTimezone';
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './NavBar.styled';
 
@@ -73,6 +74,8 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
         </S.NavbarBrand>
       </S.NavbarBrand>
       <S.NavbarSocial>
+        <UserTimezone />
+
         <Select
           options={options}
           value={themeMode}

frontend/src/components/NavBar/UserTimezone/UserTimezone.styled.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const SelectedTimezoneContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+
+export const ContentContainer = styled.div`
+  display: flex;
+  width: 320px;
+  flex-direction: column;
+  max-height: 640px;
+  gap: 8px;
+`;
+
+export const InputContainer = styled.div`
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 1;
+`;
+
+export const ItemsContainer = styled.div`
+  overflow-y: auto;
+`;

frontend/src/components/NavBar/UserTimezone/UserTimezone.tsx

@@ -0,0 +1,75 @@
+import { Button } from 'components/common/Button/Button';
+import ChevronDownIcon from 'components/common/Icons/ChevronDownIcon';
+import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import React, { useMemo, useState } from 'react';
+import Input from 'components/common/Input/Input';
+import { TIMEZONES, useTimezone } from 'lib/hooks/useTimezones';
+
+import * as S from './UserTimezone.styled';
+
+export const UserTimezone = () => {
+  const { currentTimezone, availableTimezones, setTimezone } = useTimezone();
+
+  const [searchValue, setSearchValue] = useState('');
+
+  const filteredTimezones = useMemo(() => {
+    if (!searchValue.trim()) return availableTimezones;
+
+    const searchLower = searchValue.toLowerCase();
+    return TIMEZONES.filter(
+      (timezone) =>
+        timezone.value.toLowerCase().includes(searchLower) ||
+        timezone.offset.toLowerCase().includes(searchLower)
+    );
+  }, [searchValue]);
+
+  const handleTimezoneSelect = (timezone: typeof currentTimezone) => {
+    setTimezone(timezone);
+    setSearchValue('');
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  return (
+    <Dropdown
+      onClose={() => setSearchValue('')}
+      align="center"
+      aria-label="user-timezone-dropdown"
+      openBtnEl={
+        <Button buttonType="text" buttonSize="L">
+          <S.SelectedTimezoneContainer>
+            <p>{currentTimezone.UTCOffset}</p>
+            <ChevronDownIcon fill="currentColor" width="16" height="16" />
+          </S.SelectedTimezoneContainer>
+        </Button>
+      }
+    >
+      <S.ContentContainer>
+        <S.InputContainer>
+          <Input
+            id="user-timezone-search"
+            type="text"
+            placeholder="Search timezone..."
+            value={searchValue}
+            onChange={handleSearchChange}
+            inputSize="M"
+            search
+          />
+        </S.InputContainer>
+
+        <S.ItemsContainer>
+          {filteredTimezones.map((timezone) => (
+            <DropdownItem
+              key={timezone.value}
+              onClick={() => handleTimezoneSelect(timezone)}
+            >
+              {timezone.label}
+            </DropdownItem>
+          ))}
+        </S.ItemsContainer>
+      </S.ContentContainer>
+    </Dropdown>
+  );
+};