feat(FR-1719): use async file deletion api to handle timeout error (#4691)

resolves #4688 ([FR-1719](https://lablup.atlassian.net/browse/FR-1719))

### Implement Background File Deletion in File Explorer using Background API

This PR enhances the file deletion functionality in the File Explorer by implementing background file deletion. When users delete files, especially large ones or directories, the operation now runs asynchronously in the background, providing a better user experience.

Key changes:
- Added support for the new `delete-files-async` API endpoint when available
- Implemented visual indicators for files being deleted (loading state on delete buttons)
- Added notification system to track background deletion progress
- Added translations for deletion status messages across all supported languages
- Made the confirmation input field disabled during deletion to prevent multiple submissions

**Checklist:**
- [x] Documentation
- [x] Minium required manager version: 25.17.0 for background file deletion
- [x] Specific setting for review: Test with large file/folder deletion
- [x] Minimum requirements to check during review: Verify loading indicators appear and notifications show progress
- [x] Test case(s): Delete a large folder and verify the UI remains responsive

[FR-1719]: https://lablup.atlassian.net/browse/FR-1719?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: ironAiken2

packages/backend.ai-ui/src/components/BAIConfirmModalWithInput.tsx

@@ -1,7 +1,7 @@
 import BAIFlex from './BAIFlex';
 import BAIModal, { BAIModalProps } from './BAIModal';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { Form, Input, Typography } from 'antd';
+import { Form, Input, InputProps, theme, Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,6 +14,7 @@ export interface BAIConfirmModalWithInputProps
   title: React.ReactNode;
   icon?: React.ReactNode;
   okButtonProps?: Omit<BAIModalProps['okButtonProps'], 'disabled' | 'danger'>;
+  inputProps?: InputProps;
 }
 
 const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
@@ -23,9 +24,11 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
   icon,
   onOk,
   onCancel,
-  ...props
+  inputProps,
+  ...modalProps
 }) => {
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const [form] = Form.useForm();
   const typedText = Form.useWatch('confirmText', form);
 
@@ -37,7 +40,7 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
           <Text strong>
             {icon ?? (
               <ExclamationCircleFilled
-                style={{ color: '#faad14', marginRight: 5 }}
+                style={{ color: token.colorWarning, marginRight: 5 }}
               />
             )}
             {title}
@@ -52,9 +55,9 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
         form.resetFields();
         onCancel?.(e);
       }}
-      {...props}
+      {...modalProps}
       okButtonProps={{
-        ...props.okButtonProps,
+        ...modalProps.okButtonProps,
         disabled: confirmText !== typedText,
         danger: true,
       }}
@@ -83,9 +86,11 @@ const BAIConfirmModalWithInput: React.FC<BAIConfirmModalWithInputProps> = ({
               autoFocus
               autoComplete="off"
               allowClear
+              {...inputProps}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                inputProps?.onClick?.(e);
               }}
             />
           </Form.Item>

packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx

@@ -57,6 +57,13 @@ export interface BAIFileExplorerProps {
   enableWrite?: boolean;
   onChangeFetchKey?: (fetchKey: string) => void;
   ref?: React.Ref<BAIFileExplorerRef>;
+  onDeleteFilesInBackground?: (
+    bgTaskId: string,
+    targetVFolderId: string,
+    deletingFilePaths: Array<string>,
+  ) => void;
+  // FIXME: need to delete when `delete-file-async` API returns deleting file paths
+  deletingFilePaths?: Array<string>;
 }
 
 const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
@@ -68,6 +75,8 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
   enableDownload = false,
   enableDelete = false,
   enableWrite = false,
+  onDeleteFilesInBackground,
+  deletingFilePaths,
   style,
   ref,
 }) => {
@@ -187,7 +196,17 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
     {
       title: t('comp:FileExplorer.Controls'),
       width: 80,
-      render: (_, record) => {
+      render: (_controls, record) => {
+        // true if the file is being deleted or its parent directory is being deleted
+        const isPendingDelete =
+          _.includes(deletingFilePaths, `${currentPath}/${record.name}`) ||
+          _.some(deletingFilePaths, (path) =>
+            _.startsWith(
+              currentPath,
+              _.endsWith(path, '/') ? path : `${path}/`,
+            ),
+          );
+
         return (
           <Suspense fallback={<Skeleton.Button size="small" active />}>
             <FileItemControls
@@ -197,6 +216,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
               }}
               enableDownload={enableDownload}
               enableDelete={enableDelete}
+              deleteButtonProps={{ loading: isPendingDelete }}
             />
           </Suspense>
         );
@@ -288,6 +308,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
             enableDelete={enableDelete}
             enableWrite={enableWrite}
             onUpload={(files, currentPath) => onUpload(files, currentPath)}
+            onDeleteFilesInBackground={onDeleteFilesInBackground}
             onRequestClose={(
               success: boolean,
               modifiedItems?: Array<VFolderFile>,
@@ -364,6 +385,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
         <DeleteSelectedItemsModal
           open={!!selectedSingleItem}
           selectedFiles={selectedSingleItem ? [selectedSingleItem] : []}
+          onDeleteFilesInBackground={onDeleteFilesInBackground}
           onRequestClose={(success: boolean) => {
             if (success) {
               setSelectedItems((prev) =>

packages/backend.ai-ui/src/components/baiClient/FileExplorer/DeleteSelectedItemsModal.tsx

@@ -9,13 +9,19 @@ import _ from 'lodash';
 import { use } from 'react';
 import { useTranslation } from 'react-i18next';
 
-interface DeleteSelectedItemsModalProps extends ModalProps {
-  onRequestClose: (success: boolean) => void;
+export interface DeleteSelectedItemsModalProps extends ModalProps {
+  onRequestClose: (success: boolean, deletingFilePaths?: Array<string>) => void;
+  onDeleteFilesInBackground?: (
+    bgTaskId: string,
+    targetVFolderId: string,
+    deletingFilePaths: Array<string>,
+  ) => void;
   selectedFiles: Array<VFolderFile>;
 }
 
 const DeleteSelectedItemsModal: React.FC<DeleteSelectedItemsModalProps> = ({
   onRequestClose,
+  onDeleteFilesInBackground,
   selectedFiles,
   ...modalProps
 }) => {
@@ -49,11 +55,19 @@ const DeleteSelectedItemsModal: React.FC<DeleteSelectedItemsModalProps> = ({
         recursive: true,
         name: targetVFolderId,
       })
-      .then(() => {
-        onRequestClose(true);
-        message.success(
-          t('comp:FileExplorer.SelectedItemsDeletedSuccessfully'),
-        );
+      .then(({ bgtask_id }: { bgtask_id: string }) => {
+        onRequestClose(true, selectedFileNames);
+        if (bgtask_id) {
+          onDeleteFilesInBackground?.(
+            bgtask_id,
+            targetVFolderId,
+            selectedFileNames,
+          );
+        } else {
+          message.success(
+            t('comp:FileExplorer.SelectedItemsDeletedSuccessfully'),
+          );
+        }
       })
       .catch((err) => {
         if (err && err.message) {
@@ -69,6 +83,7 @@ const DeleteSelectedItemsModal: React.FC<DeleteSelectedItemsModalProps> = ({
       title={t('comp:FileExplorer.DeleteSelectedItemsDialog')}
       okText={t('general.button.Delete')}
       okButtonProps={{ danger: true, loading: deleteFilesMutation.isPending }}
+      inputProps={{ disabled: deleteFilesMutation.isPending }}
       onOk={handleDelete}
       onCancel={() => onRequestClose(false)}
       confirmText={

packages/backend.ai-ui/src/components/baiClient/FileExplorer/ExplorerActionControls.tsx

@@ -2,7 +2,9 @@ import { BAITrashBinIcon } from '../../../icons';
 import BAIFlex from '../../BAIFlex';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import CreateDirectoryModal from './CreateDirectoryModal';
-import DeleteSelectedItemsModal from './DeleteSelectedItemsModal';
+import DeleteSelectedItemsModal, {
+  DeleteSelectedItemsModalProps,
+} from './DeleteSelectedItemsModal';
 import { useUploadVFolderFiles } from './hooks';
 import {
   FileAddOutlined,
@@ -36,6 +38,7 @@ interface ExplorerActionControlsProps {
     modifiedItems?: Array<VFolderFile>,
   ) => void;
   onUpload: (files: Array<RcFile>, currentPath: string) => void;
+  onDeleteFilesInBackground: DeleteSelectedItemsModalProps['onDeleteFilesInBackground'];
   enableDelete?: boolean;
   enableWrite?: boolean;
   // onClickRefresh?: (key: string) => void;
@@ -46,6 +49,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
   selectedFiles,
   onRequestClose,
   onUpload,
+  onDeleteFilesInBackground,
   enableDelete = false,
   enableWrite = false,
   extra,
@@ -149,6 +153,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
         destroyOnHidden
         open={openDeleteModal}
         selectedFiles={selectedFiles}
+        onDeleteFilesInBackground={onDeleteFilesInBackground}
         onRequestClose={(success: boolean) => {
           if (success) {
             onRequestClose(true, selectedFiles);

packages/backend.ai-ui/src/components/baiClient/FileExplorer/FileItemControls.tsx

@@ -1,4 +1,5 @@
 import { BAITrashBinIcon } from '../../../icons';
+import { BAIButtonProps } from '../../BAIButton';
 import BAIFlex from '../../BAIFlex';
 import useConnectedBAIClient from '../../provider/BAIClientProvider/hooks/useConnectedBAIClient';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
@@ -14,13 +15,17 @@ interface FileItemControlsProps {
   onClickDelete: () => void;
   enableDownload?: boolean;
   enableDelete?: boolean;
+  downloadButtonProps?: BAIButtonProps;
+  deleteButtonProps?: BAIButtonProps;
 }
 
 const FileItemControls: React.FC<FileItemControlsProps> = ({
   selectedItem,
   onClickDelete,
   enableDownload = false,
   enableDelete = false,
+  downloadButtonProps,
+  deleteButtonProps,
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -90,6 +95,7 @@ const FileItemControls: React.FC<FileItemControlsProps> = ({
           e.stopPropagation();
           handleDownload();
         }}
+        {...downloadButtonProps}
       />
       <Button
         type="text"
@@ -100,6 +106,7 @@ const FileItemControls: React.FC<FileItemControlsProps> = ({
           e.stopPropagation();
           onClickDelete();
         }}
+        {...deleteButtonProps}
       />
     </BAIFlex>
   );

packages/backend.ai-ui/src/components/provider/BAIClientProvider/types.ts

@@ -47,6 +47,7 @@ export interface BAIClient {
   email: string;
   accessKey: string;
   _config: BackendAIConfig;
+  supports: (feature: string) => boolean;
 }
 
 export type BackendAIConfig = {

react/src/components/FolderExplorerModal.tsx

@@ -1,5 +1,6 @@
 import { useFileUploadManager } from './FileUploadManager';
 import FolderExplorerHeader from './FolderExplorerHeader';
+import { useFolderExplorerOpener } from './FolderExplorerOpener';
 import VFolderNodeDescription from './VFolderNodeDescription';
 import { Alert, Divider, Grid, Skeleton, Splitter, theme } from 'antd';
 import { createStyles } from 'antd-style';
@@ -8,13 +9,14 @@ import {
   BAIFileExplorer,
   BAIFileExplorerRef,
   BAIFlex,
+  BAILink,
   BAIModal,
   BAIModalProps,
   toGlobalId,
   useInterval,
 } from 'backend.ai-ui';
 import _ from 'lodash';
-import { Suspense, useDeferredValue, useEffect, useRef } from 'react';
+import { Suspense, useDeferredValue, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 import { FolderExplorerModalQuery } from 'src/__generated__/FolderExplorerModalQuery.graphql';
@@ -23,6 +25,7 @@ import {
   useFetchKey,
   useSuspendedBackendaiClient,
 } from 'src/hooks';
+import { useSetBAINotification } from 'src/hooks/useBAINotification';
 import { useCurrentProjectValue } from 'src/hooks/useCurrentProject';
 import { useMergedAllowedStorageHostPermission } from 'src/hooks/useMergedAllowedStorageHostPermission';
 
@@ -94,6 +97,11 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
         deferredOpen && modalProps.open ? 'network-only' : 'store-only',
     },
   );
+
+  // FIXME: This is a temporary workaround to notify file deletion to use WebUI Notification.
+  const { upsertNotification, closeNotification } = useSetBAINotification();
+  const { generateFolderPath } = useFolderExplorerOpener();
+  const [deletingFilePaths, setDeletingFilePaths] = useState<Array<string>>([]);
   const { uploadStatus, uploadFiles } = useFileUploadManager(
     vfolder_node?.id,
     vfolder_node?.name || undefined,
@@ -136,10 +144,53 @@ const FolderExplorerModal: React.FC<FolderExplorerProps> = ({
     <BAIFileExplorer
       ref={fileExplorerRef}
       targetVFolderId={vfolderID}
+      deletingFilePaths={deletingFilePaths}
       fetchKey={fetchKey}
       onUpload={(files: RcFile[], currentPath: string) => {
         uploadFiles(files, vfolderID, currentPath);
       }}
+      onDeleteFilesInBackground={(
+        bgTaskId,
+        targetVFolderId,
+        deletingFilePaths,
+      ) => {
+        setDeletingFilePaths(deletingFilePaths);
+        upsertNotification({
+          key: `delete:${bgTaskId}`,
+          open: true,
+          message: (
+            <span>
+              {t('explorer.VFolder')}:&nbsp;
+              <BAILink
+                style={{
+                  fontWeight: 'normal',
+                }}
+                to={generateFolderPath(targetVFolderId)}
+                onClick={() => {
+                  closeNotification(`delete:${bgTaskId}`);
+                }}
+              >{`${vfolder_node.name}`}</BAILink>
+            </span>
+          ),
+          backgroundTask: {
+            status: 'pending',
+            taskId: bgTaskId,
+            promise: null,
+            percent: 0,
+            onChange: {
+              pending: t('explorer.DeletingSelectedItems'),
+              resolved: () => {
+                setDeletingFilePaths([]);
+                return t('explorer.SelectedItemsDeletedSuccessfully');
+              },
+              rejected: () => {
+                setDeletingFilePaths([]);
+                return t('explorer.SelectedItemsDeletionFailed');
+              },
+            },
+          },
+        });
+      }}
       enableDownload={hasDownloadContentPermission}
       enableDelete={hasDeleteContentPermission}
       enableWrite={hasWriteContentPermission}

resources/i18n/de.json

@@ -659,6 +659,7 @@
     "Title": "Es ist ein Fehler aufgetreten."
   },
   "explorer": {
+    "DeletingSelectedItems": "Die ausgewählten Dateien werden gelöscht. Bitte warten.",
     "FileUploadCancelled": "Das Datei -Upload wurde durch Benutzeranforderung storniert.",
     "FileUploadFailed": "Es wurden einige Dateien nicht in Ordner '{{folderName}}' hochgeladen.",
     "Filename": "Dateiname",
@@ -667,6 +668,8 @@
     "NoExplorerSupportForUnmanagedFolder": "Nicht verwaltete Ordner unterstützen den Datei -Explorer nicht.",
     "NoPermissions": "Keine Berechtigungen für den Zugriff auf diesen Ordner",
     "ProcessingUpload": "Ihre Datei wird hochgeladen. \nBitte warten.",
+    "SelectedItemsDeletedSuccessfully": "Die ausgewählte Datei wurde erfolgreich gelöscht.",
+    "SelectedItemsDeletionFailed": "Beim Löschen der Dateien ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
     "SuccessfullyUploadedToFolder": "Dateien erfolgreich hochgeladen.",
     "UploadFailed": "Upload fehlgeschlagen in '{{folderName}}' '",
     "UploadingFiles": "Dateien werden hochgeladen...",

resources/i18n/el.json

@@ -656,6 +656,7 @@
     "Title": "Εμφανίστηκε σφάλμα."
   },
   "explorer": {
+    "DeletingSelectedItems": "Διαγράφονται τα επιλεγμένα αρχεία. Παρακαλώ περιμένετε.",
     "FileUploadCancelled": "Η μεταφόρτωση αρχείων ακυρώθηκε με αίτημα χρήστη.",
     "FileUploadFailed": "Απέτυχε να ανεβάσει κάποια αρχεία στο φάκελο '{{folderName}}'.",
     "Filename": "Όνομα αρχείου",
@@ -664,6 +665,8 @@
     "NoExplorerSupportForUnmanagedFolder": "Οι μη διαχειριζόμενοι φάκελοι δεν υποστηρίζουν τον εξερευνητή αρχείων.",
     "NoPermissions": "Δεν υπάρχουν δικαιώματα πρόσβασης σε αυτόν τον φάκελο",
     "ProcessingUpload": "Το αρχείο σας μεταφορτώνεται. \nΠεριμένετε.",
+    "SelectedItemsDeletedSuccessfully": "Το επιλεγμένο αρχείο διαγράφηκε με επιτυχία.",
+    "SelectedItemsDeletionFailed": "Προέκυψε σφάλμα κατά τη διαγραφή των αρχείων. Παρακαλώ δοκιμάστε ξανά.",
     "SuccessfullyUploadedToFolder": "Τα αρχεία μεταφορτώθηκαν με επιτυχία.",
     "UploadFailed": "Η μεταφόρτωση απέτυχε στο '{{folderName}}'",
     "UploadingFiles": "Μεταφόρτωση αρχείων...",