#962 Bulk connectors ops

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

@@ -51,16 +51,25 @@ const Actions: React.FC = () => {
     );
 
   const stateMutation = useUpdateConnectorState(routerProps);
+  const mutationParams = (action: ConnectorAction) => {
+    return {
+      clusterName: routerProps.clusterName,
+      connectName: routerProps.connectName,
+      connectorName: routerProps.connectorName,
+      action: action
+    }
+  }
   const restartConnectorHandler = () =>
-    stateMutation.mutateAsync(ConnectorAction.RESTART);
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESTART));
   const restartAllTasksHandler = () =>
-    stateMutation.mutateAsync(ConnectorAction.RESTART_ALL_TASKS);
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESTART_ALL_TASKS));
   const restartFailedTasksHandler = () =>
-    stateMutation.mutateAsync(ConnectorAction.RESTART_FAILED_TASKS);
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESTART_FAILED_TASKS));
   const pauseConnectorHandler = () =>
-    stateMutation.mutateAsync(ConnectorAction.PAUSE);
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.PAUSE));
   const resumeConnectorHandler = () =>
-    stateMutation.mutateAsync(ConnectorAction.RESUME);
+    stateMutation.mutateAsync(mutationParams(ConnectorAction.RESUME));
+
   return (
     <S.ConnectorActionsWrapperStyled>
       <Dropdown

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

@@ -138,7 +138,12 @@ describe('Actions', () => {
         await userEvent.click(
           screen.getByRole('menuitem', { name: 'Restart Connector' })
         );
-        expect(restartConnector).toHaveBeenCalledWith(ConnectorAction.RESTART);
+        expect(restartConnector).toHaveBeenCalledWith({
+          'action': ConnectorAction.RESTART,
+          'clusterName': 'myCluster',
+          'connectName': 'myConnect',
+          "connectorName": 'myConnector'
+        });
       });
 
       it('calls restartAllTasks', async () => {
@@ -152,7 +157,12 @@ describe('Actions', () => {
           screen.getByRole('menuitem', { name: 'Restart All Tasks' })
         );
         expect(restartAllTasks).toHaveBeenCalledWith(
-          ConnectorAction.RESTART_ALL_TASKS
+          {
+            'action': ConnectorAction.RESTART_ALL_TASKS,
+            'clusterName': 'myCluster',
+            'connectName': 'myConnect',
+            "connectorName": 'myConnector'
+          }
         );
       });
 
@@ -167,7 +177,12 @@ describe('Actions', () => {
           screen.getByRole('menuitem', { name: 'Restart Failed Tasks' })
         );
         expect(restartFailedTasks).toHaveBeenCalledWith(
-          ConnectorAction.RESTART_FAILED_TASKS
+          {
+            'action': ConnectorAction.RESTART_FAILED_TASKS,
+            'clusterName': 'myCluster',
+            'connectName': 'myConnect',
+            "connectorName": 'myConnector'
+          }
         );
       });
 
@@ -178,8 +193,15 @@ describe('Actions', () => {
         }));
         renderComponent();
         await afterClickRestartButton();
-        await userEvent.click(screen.getByRole('menuitem', { name: 'Pause' }));
-        expect(pauseConnector).toHaveBeenCalledWith(ConnectorAction.PAUSE);
+        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 () => {
@@ -193,7 +215,14 @@ describe('Actions', () => {
         renderComponent();
         await afterClickRestartButton();
         await userEvent.click(screen.getByRole('menuitem', { name: 'Resume' }));
-        expect(resumeConnector).toHaveBeenCalledWith(ConnectorAction.RESUME);
+        expect(resumeConnector).toHaveBeenCalledWith(
+          {
+            'action': ConnectorAction.RESUME,
+            'clusterName': 'myCluster',
+            'connectName': 'myConnect',
+            "connectorName": 'myConnector'
+          }
+        );
       });
     });
   });

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import {Action, ResourceType, ConnectorAction, Connector} from 'generated-sources';
+import useAppParams from 'lib/hooks/useAppParams';
+import { useConfirm } from 'lib/hooks/useConfirm';
+import { RouterParamsClusterConnectConnector } from 'lib/paths';
+import {useIsMutating} from '@tanstack/react-query';
+import {ActionCanButton} from 'components/common/ActionComponent';
+import { usePermission } from 'lib/hooks/usePermission';
+import {useDeleteConnector, useUpdateConnectorState} from 'lib/hooks/api/kafkaConnect';
+import {Row} from '@tanstack/react-table';
+import { useQueryClient } from '@tanstack/react-query';
+
+interface BatchActionsBarProps {
+  rows: Row<Connector>[];
+  resetRowSelection(): void;
+}
+
+const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
+  rows,
+  resetRowSelection,
+}) => {
+
+  const confirm = useConfirm();
+
+  const selectedConnectors = rows.map(({ original }) => original);
+
+  const mutationsNumber = useIsMutating();
+  const isMutating = mutationsNumber > 0;
+
+  const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+  const clusterName = routerProps.clusterName;
+  const client = useQueryClient();
+
+  const canEdit = usePermission(
+    ResourceType.CONNECT,
+    Action.EDIT,
+    routerProps.connectorName
+  );
+  const canDelete = usePermission(
+    ResourceType.CONNECT,
+    Action.DELETE,
+    routerProps.connectorName
+  );
+
+  const deleteConnectorMutation = useDeleteConnector(routerProps);
+  const deleteConnectorsHandler = () =>
+    confirm(
+      <>
+        Are you sure you want to remove selected connectors?
+      </>,
+      async () => {
+        try {
+          await deleteConnectorMutation.mutateAsync();
+          resetRowSelection();
+        } catch {
+          // do not redirect
+        }
+      }
+    );
+
+  const stateMutation = useUpdateConnectorState(routerProps);
+  const updateConnector = (action: ConnectorAction, message: string) => {
+    confirm(message, async () => {
+      try {
+        await Promise.all(
+          selectedConnectors.map((connector) => (
+            stateMutation.mutateAsync({
+              clusterName,
+              connectName: connector.connect,
+              connectorName: connector.name,
+              action,
+            })
+          ))
+        );
+        resetRowSelection();
+      } catch (e) {
+        // do nothing;
+      } finally {
+        client.invalidateQueries(['clusters', clusterName, 'connectors']);
+      }
+    });
+  };
+  const restartConnectorHandler = () => {
+    updateConnector(ConnectorAction.RESTART, 'Are you sure you want to restart selected connectors?');
+  };
+  const restartAllTasksHandler = () =>
+    updateConnector(ConnectorAction.RESTART_ALL_TASKS, 'Are you sure you want to restart all tasks in selected connectors?');
+  const restartFailedTasksHandler = () =>
+    updateConnector(ConnectorAction.RESTART_FAILED_TASKS, 'Are you sure you want to restart failed tasks in selected connectors?');
+  const pauseConnectorHandler = () =>
+    updateConnector(ConnectorAction.PAUSE, 'Are you sure you want to pause selected connectors?');
+  const resumeConnectorHandler = () =>
+    updateConnector(ConnectorAction.RESUME, 'Are you sure you want to resume selected connectors?');
+
+  return (
+    <>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={pauseConnectorHandler}
+        disabled={isMutating}
+        canDoAction={canEdit}
+      >
+        Pause
+      </ActionCanButton>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={resumeConnectorHandler}
+        disabled={isMutating}
+        canDoAction={canEdit}
+      >
+        Resume
+      </ActionCanButton>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={restartConnectorHandler}
+        disabled={isMutating}
+        canDoAction={canEdit}
+      >
+        Restart Connector
+      </ActionCanButton>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={restartAllTasksHandler}
+        disabled={isMutating}
+        canDoAction={canEdit}
+      >
+        Restart All Tasks
+      </ActionCanButton>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={restartFailedTasksHandler}
+        disabled={isMutating}
+        canDoAction={canEdit}
+      >
+        Restart Failed Tasks
+      </ActionCanButton>
+      <ActionCanButton
+        buttonSize="M"
+        buttonType="secondary"
+        onClick={deleteConnectorsHandler}
+        disabled={isMutating}
+        canDoAction={canDelete}
+      >
+        Delete
+      </ActionCanButton>
+    </>
+  );
+};
+
+export default BatchActionsBar;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FullConnectorInfo } from 'generated-sources';
+import { useNavigate } from 'react-router-dom';
+import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
+import useAppParams from 'lib/hooks/useAppParams';
+
+const ConnectorCell: React.FC<{ row: FullConnectorInfo }> = ({ row: { original } }) => {
+  const navigate = useNavigate();
+  const { name, connect } = original;
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const path = clusterConnectConnectorPath(clusterName, connect, name);
+  const handleOnClick = () => navigate(path);
+
+  return (
+    <div onClick={handleOnClick}> {name} </div>
+  );
+};
+
+export default ConnectorCell;

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

@@ -1,18 +1,19 @@
 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 {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 { useSearchParams } from 'react-router-dom';
 
 import ActionsCell from './ActionsCell';
 import TopicsCell from './TopicsCell';
+import ConnectorCell from './ConnectorCell';
 import RunningTasksCell from './RunningTasksCell';
+import BatchActionsBar from './BatchActionsBar';
 
 const List: React.FC = () => {
-  const navigate = useNavigate();
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
   const { data: connectors } = useConnectors(
@@ -22,7 +23,7 @@ const List: React.FC = () => {
 
   const columns = React.useMemo<ColumnDef<FullConnectorInfo>[]>(
     () => [
-      { header: 'Name', accessorKey: 'name' },
+      { header: 'Name', accessorKey: 'name', cell: ConnectorCell },
       { header: 'Connect', accessorKey: 'connect' },
       { header: 'Type', accessorKey: 'type' },
       { header: 'Plugin', accessorKey: 'connectorClass' },
@@ -39,9 +40,8 @@ const List: React.FC = () => {
       data={connectors || []}
       columns={columns}
       enableSorting
-      onRowClick={({ original: { connect, name } }) =>
-        navigate(clusterConnectConnectorPath(clusterName, connect, name))
-      }
+      batchActionsBar={BatchActionsBar}
+      enableRowSelection={true}
       emptyMessage="No connectors found"
     />
   );