Implement batch test case removal

Author: yelyzavetakhokhlova

app/src/common/urls.js

@@ -376,7 +376,7 @@ export const URLS = {
 
   testCaseDetails: (projectKey, testCaseId) =>
     `${urlBase}project/${projectKey}/tms/test-case/${testCaseId}`,
-  bulkUpdateTestCases: (projectKey) => `${urlBase}project/${projectKey}/tms/test-case/batch`,
+  testCasesBatch: (projectKey) => `${urlBase}project/${projectKey}/tms/test-case/batch`,
   testCaseBatchDuplicate: (projectKey) =>
     `${urlBase}project/${projectKey}/tms/test-case/batch/duplicate`,
   testCases: (projectKey, query = {}) =>

app/src/controllers/testCase/index.ts

@@ -18,6 +18,7 @@ export {
   getFoldersAction,
   getAllTestCasesAction,
   getTestCaseByFolderIdAction,
+  updateFolderCounterAction,
 } from './actionCreators';
 export { testCaseSagas } from './sagas';
 export * from './constants';

app/src/controllers/testCase/selectors.ts

@@ -35,7 +35,7 @@ export interface TestCaseState {
   };
   testCases?: {
     isLoading?: boolean;
-    list?: unknown[];
+    list?: TestCase[];
     page: Page | null;
   };
   details?: {
@@ -69,7 +69,8 @@ export const isLoadingFolderSelector = (state: RootState): boolean =>
 export const isLoadingTestCasesSelector = (state: RootState) =>
   state.testCase?.testCases?.isLoading || false;
 
-export const testCasesSelector = (state: RootState) => state.testCase?.testCases?.list || [];
+export const testCasesSelector = (state: RootState): TestCase[] =>
+  state.testCase?.testCases?.list || [];
 
 export const testCasesPageSelector = (state: RootState): Page | null =>
   state.testCase?.testCases?.page || null;

app/src/pages/inside/common/testCaseList/testCaseList.tsx

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { memo, SetStateAction, useState } from 'react';
+import { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { xor } from 'es-toolkit';
 import { BubblesLoader, FilterOutlineIcon, Table } from '@reportportal/ui-kit';
 
 import { createClassnames } from 'common/utils';
@@ -25,6 +24,7 @@ import { ExtendedTestCase } from 'pages/inside/testCaseLibraryPage/types';
 import { INSTANCE_KEYS } from 'pages/inside/common/expandedOptions/folder/useFolderTooltipItems';
 import { TestCasePriority } from 'pages/inside/common/priorityIcon/types';
 import { useUserPermissions } from 'hooks/useUserPermissions';
+import { SelectedTestCaseRow } from 'pages/inside/testCaseLibraryPage/allTestCasesPage/allTestCasesPage';
 
 import { TestCaseNameCell } from './testCaseNameCell';
 import { TestCaseExecutionCell } from './testCaseExecutionCell';
@@ -45,7 +45,8 @@ interface TestCaseListProps {
   folderTitle: string;
   searchValue?: string;
   selectedRowIds: (number | string)[];
-  handleSelectedRowIds: (value: SetStateAction<(number | string)[]>) => void;
+  selectedRows: SelectedTestCaseRow[];
+  handleSelectedRows: (rows: SelectedTestCaseRow[]) => void;
   onSearchChange?: (value: string) => void;
   selectable?: boolean;
   instanceKey: INSTANCE_KEYS;
@@ -57,7 +58,8 @@ export const TestCaseList = memo(
     loading = false,
     currentPage = DEFAULT_CURRENT_PAGE,
     selectedRowIds,
-    handleSelectedRowIds,
+    selectedRows,
+    handleSelectedRows,
     itemsPerPage,
     searchValue = '',
     onSearchChange,
@@ -86,25 +88,37 @@ export const TestCaseList = memo(
     };
 
     const handleRowSelect = (id: number | string) => {
-      handleSelectedRowIds((selectedRows) => xor(selectedRows, [id]));
+      const testCase = testCases.find((testCase) => testCase.id === id);
+
+      if (!testCase) {
+        return;
+      }
+
+      const isCurrentlySelected = selectedRows.some((row) => row.id === id);
+
+      handleSelectedRows(
+        isCurrentlySelected
+          ? selectedRows.filter((row) => row.id !== id)
+          : [...selectedRows, { id: testCase.id, folderId: testCase.testFolder.id }],
+      );
     };
 
-    const handleAllSelect = () => {
-      handleSelectedRowIds((prevSelectedRowIds) => {
-        const currentDataIds: (string | number)[] = currentData.map(
-          ({ id }: { id: string | number }) => id,
-        );
-        if (currentDataIds.every((rowId) => prevSelectedRowIds.includes(rowId))) {
-          return prevSelectedRowIds.filter(
-            (selectedRowId) => !currentDataIds.includes(selectedRowId),
-          );
-        }
-
-        return [
-          ...prevSelectedRowIds,
-          ...currentDataIds.filter((id) => !prevSelectedRowIds.includes(id)),
-        ];
-      });
+    const handleSelectAll = () => {
+      const currentPageTestCaseIds = currentData.map(({ id }) => id);
+      const isAllCurrentPageSelected = currentPageTestCaseIds.every((testCaseId) =>
+        selectedRowIds.includes(testCaseId),
+      );
+
+      const newSelectedRows = isAllCurrentPageSelected
+        ? selectedRows.filter((row) => !currentPageTestCaseIds.includes(row.id))
+        : [
+            ...selectedRows,
+            ...currentData
+              .filter((testCase) => !selectedRowIds.includes(testCase.id))
+              .map((testCase) => ({ id: testCase.id, folderId: testCase.testFolder.id })),
+          ];
+
+      handleSelectedRows(newSelectedRows);
     };
 
     const selectedTestCase = testCases.find((testCase) => testCase.id === selectedTestCaseId);
@@ -201,7 +215,7 @@ export const TestCaseList = memo(
                 fixedColumns={fixedColumns}
                 primaryColumn={primaryColumn}
                 sortableColumns={[]}
-                onToggleAllRowsSelection={handleAllSelect}
+                onToggleAllRowsSelection={handleSelectAll}
                 className={cx('test-case-table')}
                 rowClassName={cx('test-case-table-row')}
               />

app/src/pages/inside/testCaseLibraryPage/allTestCasesPage/allTestCasesPage.tsx

@@ -17,7 +17,7 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
-import { isEmpty, noop, compact } from 'es-toolkit/compat';
+import { isEmpty, noop, compact, countBy } from 'es-toolkit/compat';
 import { Button, MeatballMenuIcon, Pagination, Selection } from '@reportportal/ui-kit';
 
 import { createClassnames } from 'common/utils';
@@ -47,6 +47,7 @@ import { messages } from './messages';
 import { FolderEmptyState } from '../emptyState/folder/folderEmptyState';
 import { useAddTestCasesToTestPlanModal } from '../addTestCasesToTestPlanModal/useAddTestCasesToTestPlanModal';
 import { useBatchDuplicateToFolderModal } from './batchDuplicateToFolderModal';
+import { useBatchDeleteTestCasesModal } from './batchDeleteTestCasesModal';
 
 import styles from './allTestCasesPage.scss';
 
@@ -63,6 +64,11 @@ interface AllTestCasesPageProps {
 
 const FIRST_PAGE_NUMBER = 1;
 
+export interface SelectedTestCaseRow {
+  id: number;
+  folderId: number;
+}
+
 export const AllTestCasesPage = ({
   testCases,
   loading,
@@ -77,13 +83,15 @@ export const AllTestCasesPage = ({
       totalItems: testCasesPageData?.totalElements,
       itemsPerPage: TestCasePageDefaultValues.limit,
     });
-  const [selectedRowIds, setSelectedRowIds] = useState<number[]>([]);
+  const [selectedRows, setSelectedRows] = useState<SelectedTestCaseRow[]>([]);
   const folderId = useSelector(urlFolderIdSelector);
   const folders = useSelector(foldersSelector);
   const dispatch = useDispatch();
-  const isAnyRowSelected = !isEmpty(selectedRowIds);
+  const isAnyRowSelected = !isEmpty(selectedRows);
+  const selectedRowIds = useMemo(() => selectedRows.map((row) => row.id), [selectedRows]);
   const { openModal: openAddToTestPlanModal } = useAddTestCasesToTestPlanModal();
   const { openModal: openBatchDuplicateToFolderModal } = useBatchDuplicateToFolderModal();
+  const { openModal: openBatchDeleteTestCasesModal } = useBatchDeleteTestCasesModal();
   const { canDeleteTestCase, canDuplicateTestCase, canEditTestCase } = useUserPermissions();
 
   useEffect(() => {
@@ -127,7 +135,15 @@ export const AllTestCasesPage = ({
     canDeleteTestCase && {
       label: formatMessage(COMMON_LOCALE_KEYS.DELETE),
       variant: 'destructive',
-      onClick: noop,
+      onClick: () => {
+        const folderDeltasMap = countBy(selectedRows, (row) => String(row.folderId));
+
+        openBatchDeleteTestCasesModal({
+          selectedTestCaseIds: selectedRowIds,
+          folderDeltasMap,
+          onClearSelection,
+        });
+      },
     },
   ]);
 
@@ -147,7 +163,9 @@ export const AllTestCasesPage = ({
     return <FolderEmptyState folderTitle={folderTitle} />;
   }
 
-  const onClearSelection = () => setSelectedRowIds([]);
+  const onClearSelection = () => setSelectedRows([]);
+
+  const handleSelectedRows = (rows: SelectedTestCaseRow[]) => setSelectedRows(rows);
 
   const setTestCasesPage = (page: number): void => {
     const params = {
@@ -198,7 +216,8 @@ export const AllTestCasesPage = ({
           searchValue={searchValue}
           onSearchChange={handleSearchChange}
           selectedRowIds={selectedRowIds}
-          handleSelectedRowIds={setSelectedRowIds}
+          selectedRows={selectedRows}
+          handleSelectedRows={handleSelectedRows}
           folderTitle={folderTitle}
           instanceKey={instanceKey}
         />

app/src/pages/inside/testCaseLibraryPage/allTestCasesPage/batchDeleteTestCasesModal/batchDeleteTestCasesModal.scss

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.batch-delete-modal {
+  &__text {
+    &--bold {
+      font-weight: 600;
+    }
+  }
+}

app/src/pages/inside/testCaseLibraryPage/allTestCasesPage/batchDeleteTestCasesModal/batchDeleteTestCasesModal.tsx

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo, useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { noop } from 'es-toolkit';
+import { Modal } from '@reportportal/ui-kit';
+
+import { UseModalData } from 'common/hooks';
+import { createClassnames } from 'common/utils';
+import { withModal, hideModalAction } from 'controllers/modal';
+import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
+import { ModalLoadingOverlay } from 'components/modalLoadingOverlay';
+
+import { useBatchDeleteTestCases } from './useBatchDeleteTestCases';
+import { messages } from './messages';
+
+import styles from './batchDeleteTestCasesModal.scss';
+
+const cx = createClassnames(styles);
+
+export const BATCH_DELETE_TEST_CASES_MODAL_KEY = 'batchDeleteTestCasesModalKey';
+
+export interface BatchDeleteTestCasesModalData {
+  selectedTestCaseIds: number[];
+  folderDeltasMap: Record<number, number>;
+  onClearSelection?: () => void;
+}
+
+type BatchDeleteTestCasesModalProps = UseModalData<BatchDeleteTestCasesModalData>;
+
+const BatchDeleteTestCasesModal = ({
+  data: {
+    selectedTestCaseIds = [],
+    folderDeltasMap = {},
+    onClearSelection = noop,
+  } = {} as BatchDeleteTestCasesModalData,
+}: BatchDeleteTestCasesModalProps) => {
+  const { formatMessage } = useIntl();
+  const dispatch = useDispatch();
+  const { isLoading, batchDelete } = useBatchDeleteTestCases({
+    onSuccess: () => {
+      dispatch(hideModalAction());
+      onClearSelection();
+    },
+  });
+
+  const hideModal = () => dispatch(hideModalAction());
+
+  const handleDelete = useCallback(() => {
+    batchDelete(selectedTestCaseIds, folderDeltasMap).catch(noop);
+  }, [batchDelete, selectedTestCaseIds, folderDeltasMap]);
+
+  const okButton = useMemo(
+    () => ({
+      children: formatMessage(COMMON_LOCALE_KEYS.DELETE),
+      disabled: isLoading,
+      variant: 'danger' as const,
+      onClick: handleDelete,
+    }),
+    [formatMessage, isLoading, handleDelete],
+  );
+
+  const cancelButton = useMemo(
+    () => ({
+      children: formatMessage(COMMON_LOCALE_KEYS.CANCEL),
+      disabled: isLoading,
+    }),
+    [formatMessage, isLoading],
+  );
+
+  return (
+    <Modal
+      title={formatMessage(messages.batchDeleteTestCasesTitle)}
+      okButton={okButton}
+      cancelButton={cancelButton}
+      onClose={hideModal}
+    >
+      <div>
+        {formatMessage(messages.batchDeleteDescription, {
+          count: selectedTestCaseIds.length,
+          b: (text) => <span className={cx('batch-delete-modal__text--bold')}>{text}</span>,
+        })}
+        <ModalLoadingOverlay isVisible={isLoading} />
+      </div>
+    </Modal>
+  );
+};
+
+export default withModal(BATCH_DELETE_TEST_CASES_MODAL_KEY)(BatchDeleteTestCasesModal);

app/src/pages/inside/testCaseLibraryPage/allTestCasesPage/batchDeleteTestCasesModal/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { useBatchDeleteTestCasesModal } from './useBatchDeleteTestCasesModal';
+export { BATCH_DELETE_TEST_CASES_MODAL_KEY } from './batchDeleteTestCasesModal';