Merge branch 'main' into issue/1262

germanosin · web-flow · commit 795f16ec8e4b · 2025-09-12T16:41:09.000+02:00
diff --git a/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx b/frontend/src/components/Nav/ClusterMenu/ClusterMenu.tsx
@@ -14,7 +14,7 @@ import {
   clusterTopicsPath,
   kafkaConnectPath,
 } from 'lib/paths';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useLocalStorage } from 'lib/hooks/useLocalStorage';
 import { ClusterColorKey } from 'theme/theme';
 import useScrollIntoView from 'lib/hooks/useScrollIntoView';
@@ -34,8 +34,10 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
 }) => {
   const hasFeatureConfigured = (key: ClusterFeaturesEnum) =>
     features?.includes(key);
+
   const [isOpen, setIsOpen] = useState(!!opened);
   const location = useLocation();
+  const navigate = useNavigate();
   const [colorKey, setColorKey] = useLocalStorage<ClusterColorKey>(
     `clusterColor-${name}`,
     'transparent'
@@ -47,13 +49,25 @@ const ClusterMenu: FC<ClusterMenuProps> = ({
 
   const { ref } = useScrollIntoView<HTMLUListElement>(opened);
 
+  const handleClusterNameClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    navigate(clusterBrokersPath(name));
+  };
+
+  const handleToggleMenu = () => {
+    setIsOpen((prev) => !prev);
+  };
+
   return (
     <S.ClusterList role="menu" $colorKey={colorKey} ref={ref}>
       <MenuTab
         title={name}
         status={status}
         isOpen={isOpen}
-        toggleClusterMenu={() => setIsOpen((prev) => !prev)}
+        toggleClusterMenu={handleToggleMenu}
+        onClusterNameClick={handleClusterNameClick}
         setColorKey={setColorKey}
         isActive={opened}
       />
diff --git a/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx b/frontend/src/components/Nav/ClusterMenu/__tests__/ClusterMenu.spec.tsx
@@ -22,25 +22,33 @@ describe('ClusterMenu', () => {
     />
   );
   const getMenuItems = () => screen.getAllByRole('menuitem');
-  const getMenuItem = () => screen.getByRole('menuitem');
   const getBrokers = () => screen.getByTitle('Brokers');
-  const getTopics = () => screen.getByTitle('Brokers');
-  const getConsumers = () => screen.getByTitle('Brokers');
+  const getTopics = () => screen.getByTitle('Topics');
+  const getConsumers = () => screen.getByTitle('Consumers');
   const getKafkaConnect = () => screen.getByTitle('Kafka Connect');
   const getCluster = () => screen.getByText(onlineClusterPayload.name);
 
+  // Хелпер для клика по шеврону - ищем SVG с шевроном
+  const clickChevron = async () => {
+    const chevronSvg = document.querySelector('svg[viewBox="0 0 10 6"]');
+    if (chevronSvg) {
+      await userEvent.click(chevronSvg as Element);
+    }
+  };
+
   it('renders cluster menu with default set of features', async () => {
     render(setupComponent(onlineClusterPayload));
     expect(getCluster()).toBeInTheDocument();
 
     expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
+    await clickChevron();
     expect(getMenuItems().length).toEqual(4);
 
     expect(getBrokers()).toBeInTheDocument();
     expect(getTopics()).toBeInTheDocument();
     expect(getConsumers()).toBeInTheDocument();
   });
+
   it('renders cluster menu with correct set of features', async () => {
     render(
       setupComponent({
@@ -53,7 +61,7 @@ describe('ClusterMenu', () => {
       })
     );
     expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
+    await clickChevron();
     expect(getMenuItems().length).toEqual(7);
 
     expect(getBrokers()).toBeInTheDocument();
@@ -63,6 +71,7 @@ describe('ClusterMenu', () => {
     expect(getKafkaConnect()).toBeInTheDocument();
     expect(screen.getByTitle('KSQL DB')).toBeInTheDocument();
   });
+
   it('renders open cluster menu', () => {
     render(setupComponent(onlineClusterPayload, true), {
       initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)],
@@ -74,6 +83,7 @@ describe('ClusterMenu', () => {
     expect(getTopics()).toBeInTheDocument();
     expect(getConsumers()).toBeInTheDocument();
   });
+
   it('makes Kafka Connect link active', async () => {
     render(
       setupComponent({
@@ -83,7 +93,7 @@ describe('ClusterMenu', () => {
       { initialEntries: [clusterConnectorsPath(onlineClusterPayload.name)] }
     );
     expect(getMenuItems().length).toEqual(1);
-    await userEvent.click(getMenuItem());
+    await clickChevron();
     expect(getMenuItems().length).toEqual(5);
 
     const kafkaConnect = getKafkaConnect();
diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx
@@ -10,43 +10,55 @@ export interface MenuTabProps {
   status: ServerStatus;
   isOpen: boolean;
   toggleClusterMenu: () => void;
+  onClusterNameClick: () => void;
   setColorKey: Dispatch<SetStateAction<ClusterColorKey>>;
   isActive?: boolean;
 }
 
 const MenuTab: FC<MenuTabProps> = ({
   title,
   toggleClusterMenu,
+  onClusterNameClick,
   status,
   isOpen,
   setColorKey,
   isActive = false,
-}) => (
-  <S.MenuItem
-    $variant="primary"
-    onClick={toggleClusterMenu}
-    $isActive={isActive}
-  >
-    <S.ContentWrapper>
-      <S.StatusIconWrapper>
-        <S.StatusIcon status={status} aria-label="status">
-          <title>{status}</title>
-        </S.StatusIcon>
-      </S.StatusIconWrapper>
-
-      <S.Title title={title}>{title}</S.Title>
-    </S.ContentWrapper>
-
-    <S.ActionsWrapper>
-      <S.ColorPickerWrapper>
-        <MenuColorPicker setColorKey={setColorKey} />
-      </S.ColorPickerWrapper>
-
-      <S.ChevronWrapper>
-        <S.ChevronIcon $isOpen={isOpen} />
-      </S.ChevronWrapper>
-    </S.ActionsWrapper>
-  </S.MenuItem>
-);
+}) => {
+  const handleNameClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClusterNameClick();
+  };
+
+  const handleChevronClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleClusterMenu();
+  };
+
+  return (
+    <S.MenuItem $variant="primary" $isActive={isActive}>
+      <S.ContentWrapper onClick={handleNameClick} style={{ cursor: 'pointer' }}>
+        <S.StatusIconWrapper>
+          <S.StatusIcon status={status} aria-label="status">
+            <title>{status}</title>
+          </S.StatusIcon>
+        </S.StatusIconWrapper>
+
+        <S.Title title={title}>{title}</S.Title>
+      </S.ContentWrapper>
+
+      <S.ActionsWrapper>
+        <S.ColorPickerWrapper>
+          <MenuColorPicker setColorKey={setColorKey} />
+        </S.ColorPickerWrapper>
+
+        <S.ChevronClickArea onClick={handleChevronClick}>
+          <S.ChevronWrapper>
+            <S.ChevronIcon $isOpen={isOpen} />
+          </S.ChevronWrapper>
+        </S.ChevronClickArea>
+      </S.ActionsWrapper>
+    </S.MenuItem>
+  );
+};
 
 export default MenuTab;
diff --git a/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx b/frontend/src/components/Nav/Menu/__tests__/MenuTab.spec.tsx
@@ -11,6 +11,7 @@ const toggleClusterMenuMock = jest.fn();
 describe('MenuTab component', () => {
   const setupWrapper = (props?: Partial<MenuTabProps>) => (
     <MenuTab
+      onClusterNameClick={() => {}}
       setColorKey={() => {}}
       status={ServerStatus.ONLINE}
       isOpen
diff --git a/frontend/src/components/Nav/Menu/styled.ts b/frontend/src/components/Nav/Menu/styled.ts
@@ -50,6 +50,7 @@ export const ContentWrapper = styled.div`
   display: flex;
   align-items: center;
   column-gap: 4px;
+  width: 100%;
 `;
 
 export const Title = styled.div`
@@ -85,6 +86,16 @@ export const StatusIcon = styled.circle.attrs({
   `;
 });
 
+export const ChevronClickArea = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  border-radius: 4px;
+`;
+
 export const ChevronWrapper = styled.svg.attrs({
   viewBox: '0 0 10 6',
   xmlns: 'http://www.w3.org/2000/svg',
diff --git a/frontend/src/components/Schemas/List/List.tsx b/frontend/src/components/Schemas/List/List.tsx
@@ -13,7 +13,13 @@ import Search from 'components/common/Search/Search';
 import PlusIcon from 'components/common/Icons/PlusIcon';
 import Table, { LinkCell } from 'components/common/NewTable';
 import { ColumnDef } from '@tanstack/react-table';
-import { Action, SchemaSubject, ResourceType } from 'generated-sources';
+import {
+  Action,
+  SchemaSubject,
+  ResourceType,
+  SchemaColumnsToSort,
+  SortOrder,
+} from 'generated-sources';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { PER_PAGE } from 'lib/constants';
 import { useGetSchemas } from 'lib/hooks/api/schemas';
@@ -27,14 +33,18 @@ const List: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const {
-    isFetching,
+    isInitialLoading,
     isError,
     data = { pageCount: 1, schemas: [] as SchemaSubject[] },
   } = useGetSchemas({
     clusterName,
     page: Number(searchParams.get('page') || 1),
     perPage: Number(searchParams.get('perPage') || PER_PAGE),
     search: searchParams.get('q') || '',
+    orderBy: (searchParams.get('sortBy') as SchemaColumnsToSort) ?? undefined,
+    sortOrder:
+      (searchParams.get('sortDirection')?.toUpperCase() as SortOrder) ||
+      undefined,
   });
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
@@ -53,7 +63,12 @@ const List: React.FC = () => {
       },
       { header: 'Id', accessorKey: 'id', size: 120 },
       { header: 'Type', accessorKey: 'schemaType', size: 120 },
-      { header: 'Version', accessorKey: 'version', size: 120 },
+      {
+        header: 'Version',
+        accessorKey: 'version',
+        size: 120,
+        enableSorting: false,
+      },
       {
         header: 'Compatibility',
         accessorKey: 'compatibilityLevel',
@@ -86,7 +101,7 @@ const List: React.FC = () => {
       <ControlPanelWrapper hasInput>
         <Search placeholder="Search by Schema Name" />
       </ControlPanelWrapper>
-      {isFetching || isError ? (
+      {isInitialLoading || isError ? (
         <PageLoader />
       ) : (
         <Table
diff --git a/frontend/src/components/Schemas/Schemas.tsx b/frontend/src/components/Schemas/Schemas.tsx
@@ -1,26 +1,30 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import {
   clusterSchemaEditRelativePath,
   clusterSchemaNewRelativePath,
   clusterSchemaSchemaDiffRelativePath,
   RouteParams,
 } from 'lib/paths';
-import List from 'components/Schemas/List/List';
 import Details from 'components/Schemas/Details/Details';
 import New from 'components/Schemas/New/New';
 import Edit from 'components/Schemas/Edit/Edit';
 import Diff from 'components/Schemas/Diff/Diff';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+
+const List = React.lazy(() => import('./List/List'));
 
 const Schemas: React.FC = () => {
   return (
-    <Routes>
-      <Route index element={<List />} />
-      <Route path={clusterSchemaNewRelativePath} element={<New />} />
-      <Route path={RouteParams.subject} element={<Details />} />
-      <Route path={clusterSchemaEditRelativePath} element={<Edit />} />
-      <Route path={clusterSchemaSchemaDiffRelativePath} element={<Diff />} />
-    </Routes>
+    <Suspense fallback={<PageLoader />}>
+      <Routes>
+        <Route index element={<List />} />
+        <Route path={clusterSchemaNewRelativePath} element={<New />} />
+        <Route path={RouteParams.subject} element={<Details />} />
+        <Route path={clusterSchemaEditRelativePath} element={<Edit />} />
+        <Route path={clusterSchemaSchemaDiffRelativePath} element={<Diff />} />
+      </Routes>
+    </Suspense>
   );
 };
 
diff --git a/frontend/src/lib/hooks/api/schemas.ts b/frontend/src/lib/hooks/api/schemas.ts
@@ -45,15 +45,28 @@ export function useGetSchemas({
   page,
   perPage,
   search,
+  orderBy,
+  sortOrder,
 }: GetSchemasRequest) {
   return useQuery<SchemaSubjectsResponse>({
-    queryKey: [SCHEMA_QUERY_KEY, clusterName, page, perPage, search],
+    queryKey: [
+      SCHEMA_QUERY_KEY,
+      clusterName,
+      page,
+      perPage,
+      search,
+      sortOrder,
+      orderBy,
+    ],
+    keepPreviousData: true,
     queryFn: () =>
       schemasApiClient.getSchemas({
         clusterName,
         page,
         perPage,
         search: search || undefined,
+        sortOrder,
+        orderBy,
       }),
   });
 }
