Merge branch 'main' into main

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

frontend/src/components/ACLPage/List/List.styled.ts

@@ -7,9 +7,7 @@ export const EnumCell = styled.div`
 `;
 
 export const DeleteCell = styled.div`
-  svg {
-    cursor: pointer;
-  }
+  display: flex;
 `;
 
 export const Chip = styled.div<{

frontend/src/components/ACLPage/List/List.tsx

@@ -25,6 +25,7 @@ import Search from 'components/common/Search/Search';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
+import { ActionPermissionWrapper } from 'components/common/ActionComponent';
 
 import * as S from './List.styled';
 
@@ -163,13 +164,23 @@ const ACList: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ row }) => {
           return (
-            <S.DeleteCell onClick={() => handleDeleteClick(row.original)}>
-              <DeleteIcon
-                fill={
-                  rowId === row.id ? theme.acl.table.deleteIcon : 'transparent'
-                }
-              />
-            </S.DeleteCell>
+            <ActionPermissionWrapper
+              onAction={() => handleDeleteClick(row.original)}
+              permission={{
+                resource: ResourceType.ACL,
+                action: Action.EDIT,
+              }}
+            >
+              <S.DeleteCell>
+                <DeleteIcon
+                  fill={
+                    rowId === row.id
+                      ? theme.acl.table.deleteIcon
+                      : 'transparent'
+                  }
+                />
+              </S.DeleteCell>
+            </ActionPermissionWrapper>
           );
         },
         size: 76,

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