瀏覽代碼

962 - bulk connectors operations linters fix

Kamila Alekbaeva 2 年之前
父節點
當前提交
52fa539e3f

+ 3 - 9
kafka-ui-react-app/src/components/Connect/Details/Actions/Actions.tsx

@@ -60,9 +60,7 @@ const Actions: React.FC = () => {
     };
     };
   };
   };
   const restartConnectorHandler = () =>
   const restartConnectorHandler = () =>
-    stateMutation.mutateAsync(
-      mutationParams(ConnectorAction.RESTART)
-    );
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESTART));
   const restartAllTasksHandler = () =>
   const restartAllTasksHandler = () =>
     stateMutation.mutateAsync(
     stateMutation.mutateAsync(
       mutationParams(ConnectorAction.RESTART_ALL_TASKS)
       mutationParams(ConnectorAction.RESTART_ALL_TASKS)
@@ -72,13 +70,9 @@ const Actions: React.FC = () => {
       mutationParams(ConnectorAction.RESTART_FAILED_TASKS)
       mutationParams(ConnectorAction.RESTART_FAILED_TASKS)
     );
     );
   const pauseConnectorHandler = () =>
   const pauseConnectorHandler = () =>
-    stateMutation.mutateAsync(
-      mutationParams(ConnectorAction.PAUSE)
-    );
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.PAUSE));
   const resumeConnectorHandler = () =>
   const resumeConnectorHandler = () =>
-    stateMutation.mutateAsync(
-      mutationParams(ConnectorAction.RESUME)
-    );
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESUME));
 
 
   return (
   return (
     <S.ConnectorActionsWrapperStyled>
     <S.ConnectorActionsWrapperStyled>

+ 19 - 23
kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/Actions.spec.tsx

@@ -142,7 +142,7 @@ describe('Actions', () => {
           action: ConnectorAction.RESTART,
           action: ConnectorAction.RESTART,
           clusterName: 'myCluster',
           clusterName: 'myCluster',
           connectName: 'myConnect',
           connectName: 'myConnect',
-          connectorName: 'myConnector'
+          connectorName: 'myConnector',
         });
         });
       });
       });
 
 
@@ -160,7 +160,7 @@ describe('Actions', () => {
           action: ConnectorAction.RESTART_ALL_TASKS,
           action: ConnectorAction.RESTART_ALL_TASKS,
           clusterName: 'myCluster',
           clusterName: 'myCluster',
           connectName: 'myConnect',
           connectName: 'myConnect',
-          connectorName: 'myConnector'
+          connectorName: 'myConnector',
         });
         });
       });
       });
 
 
@@ -175,10 +175,10 @@ describe('Actions', () => {
           screen.getByRole('menuitem', { name: 'Restart Failed Tasks' })
           screen.getByRole('menuitem', { name: 'Restart Failed Tasks' })
         );
         );
         expect(restartFailedTasks).toHaveBeenCalledWith({
         expect(restartFailedTasks).toHaveBeenCalledWith({
-          'action': ConnectorAction.RESTART_FAILED_TASKS,
-          'clusterName': 'myCluster',
-          'connectName': 'myConnect',
-          "connectorName": 'myConnector'
+          action: ConnectorAction.RESTART_FAILED_TASKS,
+          clusterName: 'myCluster',
+          connectName: 'myConnect',
+          connectorName: 'myConnector',
         });
         });
       });
       });
 
 
@@ -189,15 +189,13 @@ describe('Actions', () => {
         }));
         }));
         renderComponent();
         renderComponent();
         await afterClickRestartButton();
         await afterClickRestartButton();
-        await userEvent.click(screen.getByRole('menuitem', {name: 'Pause'}));
-        expect(pauseConnector).toHaveBeenCalledWith(
-          {
-            'action': ConnectorAction.PAUSE,
-            'clusterName': 'myCluster',
-            'connectName': 'myConnect',
-            "connectorName": 'myConnector'
-          }
-        );
+        await userEvent.click(screen.getByRole('menuitem', { name: 'Pause' }));
+        expect(pauseConnector).toHaveBeenCalledWith({
+          action: ConnectorAction.PAUSE,
+          clusterName: 'myCluster',
+          connectName: 'myConnect',
+          connectorName: 'myConnector',
+        });
       });
       });
 
 
       it('calls resumeConnector when resume button clicked', async () => {
       it('calls resumeConnector when resume button clicked', async () => {
@@ -211,14 +209,12 @@ describe('Actions', () => {
         renderComponent();
         renderComponent();
         await afterClickRestartButton();
         await afterClickRestartButton();
         await userEvent.click(screen.getByRole('menuitem', { name: 'Resume' }));
         await userEvent.click(screen.getByRole('menuitem', { name: 'Resume' }));
-        expect(resumeConnector).toHaveBeenCalledWith(
-          {
-            'action': ConnectorAction.RESUME,
-            'clusterName': 'myCluster',
-            'connectName': 'myConnect',
-            "connectorName": 'myConnector'
-          }
-        );
+        expect(resumeConnector).toHaveBeenCalledWith({
+          action: ConnectorAction.RESUME,
+          clusterName: 'myCluster',
+          connectName: 'myConnect',
+          connectorName: 'myConnector',
+        });
       });
       });
     });
     });
   });
   });

+ 33 - 14
kafka-ui-react-app/src/components/Connect/List/BatchActionsBar.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import React from 'react';
-import { Action, ResourceType, ConnectorAction, Connector } from 'generated-sources';
+import {
+  Action,
+  ResourceType,
+  ConnectorAction,
+  Connector,
+} from 'generated-sources';
 import useAppParams from 'lib/hooks/useAppParams';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import { RouterParamsClusterConnectConnector } from 'lib/paths';
 import { RouterParamsClusterConnectConnector } from 'lib/paths';
 import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { ActionCanButton } from 'components/common/ActionComponent';
 import { ActionCanButton } from 'components/common/ActionComponent';
 import { usePermission } from 'lib/hooks/usePermission';
 import { usePermission } from 'lib/hooks/usePermission';
-import { useDeleteConnector, useUpdateConnectorState } from 'lib/hooks/api/kafkaConnect';
+import {
+  useDeleteConnector,
+  useUpdateConnectorState,
+} from 'lib/hooks/api/kafkaConnect';
 import { Row } from '@tanstack/react-table';
 import { Row } from '@tanstack/react-table';
 
 
-
 interface BatchActionsBarProps {
 interface BatchActionsBarProps {
   rows: Row<Connector>[];
   rows: Row<Connector>[];
   resetRowSelection(): void;
   resetRowSelection(): void;
@@ -19,7 +26,6 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
   rows,
   rows,
   resetRowSelection,
   resetRowSelection,
 }) => {
 }) => {
-
   const confirm = useConfirm();
   const confirm = useConfirm();
 
 
   const selectedConnectors = rows.map(({ original }) => original);
   const selectedConnectors = rows.map(({ original }) => original);
@@ -45,9 +51,7 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
   const deleteConnectorMutation = useDeleteConnector(routerProps);
   const deleteConnectorMutation = useDeleteConnector(routerProps);
   const deleteConnectorsHandler = () =>
   const deleteConnectorsHandler = () =>
     confirm(
     confirm(
-      <>
-        Are you sure you want to remove selected connectors?
-      </>,
+      <>Are you sure you want to remove selected connectors?</>,
       async () => {
       async () => {
         try {
         try {
           await deleteConnectorMutation.mutateAsync();
           await deleteConnectorMutation.mutateAsync();
@@ -63,14 +67,14 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
     confirm(message, async () => {
     confirm(message, async () => {
       try {
       try {
         await Promise.all(
         await Promise.all(
-          selectedConnectors.map((connector) => (
+          selectedConnectors.map((connector) =>
             stateMutation.mutateAsync({
             stateMutation.mutateAsync({
               clusterName,
               clusterName,
               connectName: connector.connect,
               connectName: connector.connect,
               connectorName: connector.name,
               connectorName: connector.name,
               action,
               action,
             })
             })
-          ))
+          )
         );
         );
         resetRowSelection();
         resetRowSelection();
       } catch (e) {
       } catch (e) {
@@ -81,16 +85,31 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
     });
     });
   };
   };
   const restartConnectorHandler = () => {
   const restartConnectorHandler = () => {
-    updateConnector(ConnectorAction.RESTART, 'Are you sure you want to restart selected connectors?');
+    updateConnector(
+      ConnectorAction.RESTART,
+      'Are you sure you want to restart selected connectors?'
+    );
   };
   };
   const restartAllTasksHandler = () =>
   const restartAllTasksHandler = () =>
-    updateConnector(ConnectorAction.RESTART_ALL_TASKS, 'Are you sure you want to restart all tasks in selected connectors?');
+    updateConnector(
+      ConnectorAction.RESTART_ALL_TASKS,
+      'Are you sure you want to restart all tasks in selected connectors?'
+    );
   const restartFailedTasksHandler = () =>
   const restartFailedTasksHandler = () =>
-    updateConnector(ConnectorAction.RESTART_FAILED_TASKS, 'Are you sure you want to restart failed tasks in selected connectors?');
+    updateConnector(
+      ConnectorAction.RESTART_FAILED_TASKS,
+      'Are you sure you want to restart failed tasks in selected connectors?'
+    );
   const pauseConnectorHandler = () =>
   const pauseConnectorHandler = () =>
-    updateConnector(ConnectorAction.PAUSE, 'Are you sure you want to pause selected connectors?');
+    updateConnector(
+      ConnectorAction.PAUSE,
+      'Are you sure you want to pause selected connectors?'
+    );
   const resumeConnectorHandler = () =>
   const resumeConnectorHandler = () =>
-    updateConnector(ConnectorAction.RESUME, 'Are you sure you want to resume selected connectors?');
+    updateConnector(
+      ConnectorAction.RESUME,
+      'Are you sure you want to resume selected connectors?'
+    );
 
 
   return (
   return (
     <>
     <>

+ 1 - 3
kafka-ui-react-app/src/components/Connect/List/ConnectorCell.tsx

@@ -14,9 +14,7 @@ const ConnectorCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
   const path = clusterConnectConnectorPath(clusterName, connect, name);
   const path = clusterConnectConnectorPath(clusterName, connect, name);
   const handleOnClick = () => navigate(path);
   const handleOnClick = () => navigate(path);
 
 
-  return (
-    <div onClick={handleOnClick}> {name} </div>
-  );
+  return <div onClick={handleOnClick}> {name} </div>;
 };
 };
 
 
 export default ConnectorCell;
 export default ConnectorCell;

+ 1 - 1
kafka-ui-react-app/src/components/Connect/List/List.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
 import useAppParams from 'lib/hooks/useAppParams';
 import { ClusterNameRoute } from 'lib/paths';
 import { ClusterNameRoute } from 'lib/paths';
 import Table, { TagCell } from 'components/common/NewTable';
 import Table, { TagCell } from 'components/common/NewTable';
-import {FullConnectorInfo} from 'generated-sources';
+import { FullConnectorInfo } from 'generated-sources';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { ColumnDef } from '@tanstack/react-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { useSearchParams } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom';

+ 10 - 3
kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx

@@ -9,7 +9,11 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import userEvent from '@testing-library/user-event';
 import { render, WithRoute } from 'lib/testHelpers';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterConnectConnectorPath, clusterConnectorsPath } from 'lib/paths';
 import { clusterConnectConnectorPath, clusterConnectorsPath } from 'lib/paths';
-import { useConnectors, useDeleteConnector, useUpdateConnectorState } from 'lib/hooks/api/kafkaConnect';
+import {
+  useConnectors,
+  useDeleteConnector,
+  useUpdateConnectorState,
+} from 'lib/hooks/api/kafkaConnect';
 
 
 const mockedUsedNavigate = jest.fn();
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
 const mockDelete = jest.fn();
@@ -55,7 +59,9 @@ describe('Connectors List', () => {
     it('opens broker when row clicked', async () => {
     it('opens broker when row clicked', async () => {
       renderComponent();
       renderComponent();
 
 
-      const link = await screen.findByRole('cell', {name: 'hdfs-source-connector'});
+      const link = await screen.findByRole('cell', {
+        name: 'hdfs-source-connector',
+      });
 
 
       await userEvent.click(link);
       await userEvent.click(link);
       await waitFor(() => {
       await waitFor(() => {
@@ -77,7 +83,8 @@ describe('Connectors List', () => {
     });
     });
 
 
     describe('Batch actions bar', () => {
     describe('Batch actions bar', () => {
-      const getButtonByName = (name: string) => screen.getByRole('button', { name });
+      const getButtonByName = (name: string) =>
+        screen.getByRole('button', { name });
 
 
       beforeEach(async () => {
       beforeEach(async () => {
         (useDeleteConnector as jest.Mock).mockImplementation(() => ({
         (useDeleteConnector as jest.Mock).mockImplementation(() => ({

+ 6 - 8
kafka-ui-react-app/src/lib/hooks/api/__tests__/kafkaConnect.spec.ts

@@ -92,14 +92,12 @@ describe('kafkaConnect hooks', () => {
           { wrapper: TestQueryClientProvider }
           { wrapper: TestQueryClientProvider }
         );
         );
         await act(() => {
         await act(() => {
-          result.current.mutateAsync(
-            {
-              clusterName,
-              connectName,
-              connectorName,
-              action,
-            },
-          )
+          result.current.mutateAsync({
+            clusterName,
+            connectName,
+            connectorName,
+            action,
+          });
         });
         });
         await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
         await waitFor(() => expect(result.current.isSuccess).toBeTruthy());
         expect(mock.calls()).toHaveLength(1);
         expect(mock.calls()).toHaveLength(1);

+ 6 - 1
kafka-ui-react-app/src/lib/hooks/api/kafkaConnect.ts

@@ -1,4 +1,9 @@
-import {Connect, Connector, NewConnector, UpdateConnectorStateRequest} from 'generated-sources';
+import {
+  Connect,
+  Connector,
+  NewConnector,
+  UpdateConnectorStateRequest,
+} from 'generated-sources';
 import { kafkaConnectApiClient as api } from 'lib/api';
 import { kafkaConnectApiClient as api } from 'lib/api';
 import sortBy from 'lodash/sortBy';
 import sortBy from 'lodash/sortBy';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';