962 - bulk connectors operations tests are added

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

@@ -2,12 +2,11 @@ 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 {clusterConnectorsPath, RouterParamsClusterConnectConnector} from 'lib/paths';
+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 {useNavigate} from 'react-router-dom';
 import {Row} from '@tanstack/react-table';
 import { useQueryClient } from '@tanstack/react-query';
 
@@ -22,7 +21,6 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
 }) => {
 
   const confirm = useConfirm();
-  const navigate = useNavigate();
 
   const selectedConnectors = rows.map(({ original }) => original);
 
@@ -45,16 +43,15 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
   );
 
   const deleteConnectorMutation = useDeleteConnector(routerProps);
-  const deleteConnectorHandler = () =>
+  const deleteConnectorsHandler = () =>
     confirm(
       <>
-        Are you sure you want to remove <b>{routerProps.connectorName}</b>{' '}
-        connector?
+        Are you sure you want to remove selected connectors?
       </>,
       async () => {
         try {
           await deleteConnectorMutation.mutateAsync();
-          navigate(clusterConnectorsPath(clusterName));
+          resetRowSelection();
         } catch {
           // do not redirect
         }
@@ -145,7 +142,7 @@ const BatchActionsBar: React.FC<BatchActionsBarProps> = ({
       <ActionCanButton
         buttonSize="M"
         buttonType="secondary"
-        onClick={deleteConnectorHandler}
+        onClick={deleteConnectorsHandler}
         disabled={isMutating}
         canDoAction={canDelete}
       >

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

@@ -1,28 +1,18 @@
 import React from 'react';
-import { CellContext } from '@tanstack/react-table';
-import {FullConnectorInfo} from 'generated-sources';
-import { NavLink, useNavigate, useSearchParams } from 'react-router-dom';
+import { FullConnectorInfo } from 'generated-sources';
+import { useNavigate } from 'react-router-dom';
 import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
-import { LinkCell } from 'components/common/NewTable';
 
-
-const ConnectorCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
-  row: { original },
-}) => {
+const ConnectorCell: React.FC<{ row: FullConnectorInfo }> = ({ row: { original } }) => {
   const navigate = useNavigate();
-  const { clusterName } = useAppParams<ClusterNameRoute>();
   const { name, connect } = original;
+  const { clusterName } = useAppParams<ClusterNameRoute>();
   const path = clusterConnectConnectorPath(clusterName, connect, name);
+  const handleOnClick = () => navigate(path);
+
   return (
-    <LinkCell
-      onClick={() => navigate(path)}
-      value={name}
-      to={path}
-    />
-    // <div title={name} onClick={() => navigate(path)}>
-    //   {name}
-    // </div>
+    <div onClick={handleOnClick}> {name} </div>
   );
 };
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import useAppParams from 'lib/hooks/useAppParams';
 import { ClusterNameRoute } from 'lib/paths';
-import Table, { TagCell, LinkCell } from 'components/common/NewTable';
+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';

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

@@ -9,14 +9,14 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render, WithRoute } from 'lib/testHelpers';
 import { clusterConnectConnectorPath, clusterConnectorsPath } from 'lib/paths';
-import { useConnectors, useDeleteConnector } from 'lib/hooks/api/kafkaConnect';
-import { BrowserRouter } from "react-router-dom";
+import { useConnectors, useDeleteConnector, useUpdateConnectorState } from 'lib/hooks/api/kafkaConnect';
 
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
+const mockUpdate = jest.fn();
 
 jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+  ...jest.requireActual('react-router-dom') as any,
   useNavigate: () => mockedUsedNavigate,
 }));
 
@@ -55,16 +55,146 @@ describe('Connectors List', () => {
     it('opens broker when row clicked', async () => {
       renderComponent();
 
-      await userEvent.click(screen.getByRole('link', { name: 'hdfs-source-connector' }));
-      await waitFor(() =>
+      const link = await screen.findByRole('cell', {name: 'hdfs-source-connector'});
+
+      await userEvent.click(link);
+      await waitFor(() => {
         expect(mockedUsedNavigate).toBeCalledWith(
           clusterConnectConnectorPath(
             clusterName,
             'first',
             'hdfs-source-connector'
           )
-        )
-      );
+        );
+      });
+    });
+
+    describe('Selectable rows', () => {
+      it('renders selectable rows', () => {
+        renderComponent();
+        expect(screen.getAllByRole('checkbox').length).toEqual(3);
+      });
+    });
+
+    describe('Batch actions bar', () => {
+      const getButtonByName = (name: string) => screen.getByRole('button', { name });
+
+      beforeEach(async () => {
+        useDeleteConnector.mockClear();
+        (useDeleteConnector as jest.Mock).mockImplementation(() => ({
+          mutateAsync: mockDelete,
+        }));
+        (useUpdateConnectorState as jest.Mock).mockImplementation(() => ({
+          mutateAsync: mockUpdate,
+        }));
+
+        renderComponent();
+        await userEvent.click(screen.getAllByRole('checkbox')[1]);
+      });
+      it('renders batch actions bar', () => {
+        expect(getButtonByName('Pause')).toBeInTheDocument();
+        expect(getButtonByName('Resume')).toBeInTheDocument();
+        expect(getButtonByName('Restart Connector')).toBeInTheDocument();
+        expect(getButtonByName('Restart All Tasks')).toBeInTheDocument();
+        expect(getButtonByName('Restart Failed Tasks')).toBeInTheDocument();
+        expect(getButtonByName('Delete')).toBeInTheDocument();
+      });
+
+      it('handles delete button click', async () => {
+        const button = getButtonByName('Delete');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to remove selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockDelete).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockDelete).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
+
+      it('handles pause button click', async () => {
+        const button = getButtonByName('Pause');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to pause selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockUpdate).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockUpdate).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
+
+      it('handles resume button click', async () => {
+        const button = getButtonByName('Resume');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to resume selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockUpdate).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockUpdate).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
+
+      it('handles restart connector button click', async () => {
+        const button = getButtonByName('Restart Connector');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to restart selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockUpdate).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockUpdate).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
+
+      it('handles restart all tasks button click', async () => {
+        const button = getButtonByName('Restart All Tasks');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to restart all tasks in selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockUpdate).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockUpdate).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
+
+      it('handles restart failed tasks button click', async () => {
+        const button = getButtonByName('Restart Failed Tasks');
+        await userEvent.click(button);
+        expect(
+          screen.getByText(
+            'Are you sure you want to restart failed tasks in selected connectors?'
+          )
+        ).toBeInTheDocument();
+        const confirmBtn = getButtonByName('Confirm');
+        expect(mockUpdate).not.toHaveBeenCalled();
+        await userEvent.click(confirmBtn);
+        expect(mockUpdate).toHaveBeenCalledTimes(1);
+        expect(screen.getAllByRole('checkbox')[1]).not.toBeChecked();
+        expect(screen.getAllByRole('checkbox')[2]).not.toBeChecked();
+      });
     });
   });