[ui-storagebrowser] adds extract archive action (#3950)

* [ui-storagebrowser] adds extract action * fixes the display message
cloudera · Jan 20, 2025 · ab69060 · ab69060
1 parent 5c18a60
commit ab69060
Show file tree

Hide file tree

Showing 20 changed files with 409 additions and 150 deletions.
diff --git a/...rageBrowserActions/Compress/Compress.scss → ...ns/CompressionModal/CompressionModal.scss b/...rageBrowserActions/Compress/Compress.scss → ...ns/CompressionModal/CompressionModal.scss
diff --git a/...BrowserActions/Compress/Compress.test.tsx → ...ompressionModal/CompressionModal.test.tsx b/...BrowserActions/Compress/Compress.test.tsx → ...ompressionModal/CompressionModal.test.tsx
@@ -17,9 +17,8 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import CompressAction from './Compress';
+import CompressionModal from './CompressionModal';
 import { StorageDirectoryTableData } from '../../../../../reactComponents/FileChooser/types';
-import { COMPRESS_API_URL } from '../../../../../reactComponents/FileChooser/api';
 
 const mockFiles: StorageDirectoryTableData[] = [
   {
@@ -55,7 +54,7 @@ jest.mock('../../../../../utils/hooks/useSaveData', () => ({
   }))
 }));
 
-describe('CompressAction Component', () => {
+describe('CompressionModal Component', () => {
   const mockOnSuccess = jest.fn();
   const mockOnError = jest.fn();
   const mockOnClose = jest.fn();
@@ -67,7 +66,7 @@ describe('CompressAction Component', () => {
 
   it('should render the Compress modal with the correct title and buttons', () => {
     const { getByText, getByRole } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -86,7 +85,7 @@ describe('CompressAction Component', () => {
 
   it('should display the correct list of files to be compressed', () => {
     const { getByText } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -104,7 +103,7 @@ describe('CompressAction Component', () => {
 
   it('should call handleCompress with the correct data when "Compress" is clicked', async () => {
     const { getByText } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -124,12 +123,12 @@ describe('CompressAction Component', () => {
 
     fireEvent.click(getByText('Compress'));
 
-    expect(mockSave).toHaveBeenCalledWith(formData, { url: COMPRESS_API_URL });
+    expect(mockSave).toHaveBeenCalledWith(formData);
   });
 
   it('should update the compressed file name when input value changes', () => {
     const { getByRole } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -148,7 +147,7 @@ describe('CompressAction Component', () => {
 
   it('should call onClose when the modal is closed', () => {
     const { getByText } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -169,7 +168,7 @@ describe('CompressAction Component', () => {
     });
 
     const { getByText } = render(
-      <CompressAction
+      <CompressionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}

diff --git a/...orageBrowserActions/Compress/Compress.tsx → ...ons/CompressionModal/CompressionModal.tsx b/...orageBrowserActions/Compress/Compress.tsx → ...ons/CompressionModal/CompressionModal.tsx
@@ -22,9 +22,9 @@ import { StorageDirectoryTableData } from '../../../../../reactComponents/FileCh
 import { COMPRESS_API_URL } from '../../../../../reactComponents/FileChooser/api';
 import { Input } from 'antd';
 
-import './Compress.scss';
+import './CompressionModal.scss';
 
-interface CompressActionProps {
+interface CompressionModalProps {
   currentPath: string;
   isOpen?: boolean;
   files: StorageDirectoryTableData[];
@@ -34,25 +34,22 @@ interface CompressActionProps {
   onClose: () => void;
 }
 
-const CompressAction = ({
+const CompressionModal = ({
   currentPath,
   isOpen = true,
   files,
   setLoading,
   onSuccess,
   onError,
   onClose
-}: CompressActionProps): JSX.Element => {
+}: CompressionModalProps): JSX.Element => {
   const initialName = currentPath.split('/').pop() + '.zip';
   const [value, setValue] = useState<string>(initialName);
   const { t } = i18nReact.useTranslation();
 
-  const { save: saveForm, loading } = useSaveData(undefined, {
+  const { save: saveForm, loading } = useSaveData(COMPRESS_API_URL, {
     postOptions: {
-      qsEncodeData: false,
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      }
+      qsEncodeData: false
     },
     skip: !files.length,
     onSuccess,
@@ -69,7 +66,7 @@ const CompressAction = ({
     formData.append('upload_path', currentPath);
     formData.append('archive_name', value);
 
-    saveForm(formData, { url: COMPRESS_API_URL });
+    saveForm(formData);
   };
 
   return (
@@ -106,4 +103,4 @@ const CompressAction = ({
   );
 };
 
-export default CompressAction;
+export default CompressionModal;
diff --git a/...rageBrowserActions/Delete/Delete.test.tsx → ...ions/DeletionModal/DeletionModal.test.tsx b/...rageBrowserActions/Delete/Delete.test.tsx → ...ions/DeletionModal/DeletionModal.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import DeleteAction from './Delete';
+import DeletionModal from './DeletionModal';
 import { StorageDirectoryTableData } from '../../../../../reactComponents/FileChooser/types';
 import {
   BULK_DELETION_API_URL,
@@ -42,7 +42,7 @@ jest.mock('../../../../../utils/hooks/useSaveData', () => ({
   }))
 }));
 
-describe('DeleteAction Component', () => {
+describe('DeletionModal Component', () => {
   const mockOnSuccess = jest.fn();
   const mockOnError = jest.fn();
   const mockOnClose = jest.fn();
@@ -54,7 +54,7 @@ describe('DeleteAction Component', () => {
 
   it('should render the Delete modal with the correct title and buttons', () => {
     const { getByText, getByRole } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -73,7 +73,7 @@ describe('DeleteAction Component', () => {
 
   it('should render the Delete modal with the correct title and buttons when trash is not enabled', () => {
     const { getByText, queryByText, getByRole } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -92,7 +92,7 @@ describe('DeleteAction Component', () => {
 
   it('should call handleDeletion with the correct data for single delete when "Delete Permanently" is clicked', async () => {
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={[mockFiles[0]]}
         setLoading={setLoading}
@@ -105,13 +105,16 @@ describe('DeleteAction Component', () => {
 
     fireEvent.click(getByText('Delete Permanently'));
 
-    const payload = { path: mockFiles[0].path, skip_trash: true };
-    expect(mockSave).toHaveBeenCalledWith(payload, { url: DELETION_API_URL });
+    const formData = new FormData();
+    formData.append('path', mockFiles[0].path);
+    formData.append('skip_trash', 'true');
+
+    expect(mockSave).toHaveBeenCalledWith(formData, { url: DELETION_API_URL });
   });
 
   it('should call handleDeletion with the correct data for bulk delete when "Delete Permanently" is clicked', async () => {
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -135,7 +138,7 @@ describe('DeleteAction Component', () => {
 
   it('should call handleDeletion with the correct data for trash delete when "Move to Trash" is clicked', async () => {
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={[mockFiles[0]]}
         setLoading={setLoading}
@@ -148,13 +151,15 @@ describe('DeleteAction Component', () => {
 
     fireEvent.click(getByText('Move to Trash'));
 
-    const payload = { path: mockFiles[0].path };
-    expect(mockSave).toHaveBeenCalledWith(payload, { url: DELETION_API_URL });
+    const formData = new FormData();
+    formData.append('path', mockFiles[0].path);
+
+    expect(mockSave).toHaveBeenCalledWith(formData, { url: DELETION_API_URL });
   });
 
   it('should call handleDeletion with the correct data for bulk trash delete when "Move to Trash" is clicked', async () => {
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -180,7 +185,7 @@ describe('DeleteAction Component', () => {
       mockOnError(new Error());
     });
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}
@@ -198,7 +203,7 @@ describe('DeleteAction Component', () => {
 
   it('should call onClose when the modal is closed', () => {
     const { getByText } = render(
-      <DeleteAction
+      <DeletionModal
         isOpen={true}
         files={mockFiles}
         setLoading={setLoading}

diff --git a/...e/StorageBrowserActions/Delete/Delete.tsx → ...erActions/DeletionModal/DeletionModal.tsx b/...e/StorageBrowserActions/Delete/Delete.tsx → ...erActions/DeletionModal/DeletionModal.tsx
@@ -24,7 +24,7 @@ import {
   DELETION_API_URL
 } from '../../../../../reactComponents/FileChooser/api';
 
-interface DeleteActionProps {
+interface DeletionModalProps {
   isOpen?: boolean;
   isTrashEnabled?: boolean;
   files: StorageDirectoryTableData[];
@@ -34,58 +34,45 @@ interface DeleteActionProps {
   onClose: () => void;
 }
 
-const DeleteAction = ({
+const DeletionModal = ({
   isOpen = true,
   isTrashEnabled = false,
   files,
   setLoading,
   onSuccess,
   onError,
   onClose
-}: DeleteActionProps): JSX.Element => {
+}: DeletionModalProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
 
-  const { save, loading: saveLoading } = useSaveData(undefined, {
-    skip: !files.length,
-    onSuccess,
-    onError
-  });
-
-  const { save: saveForm, loading: saveFormLoading } = useSaveData(undefined, {
+  const { save, loading } = useSaveData(undefined, {
     postOptions: {
-      qsEncodeData: false,
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      }
+      qsEncodeData: false
     },
     skip: !files.length,
     onSuccess,
     onError
   });
 
   const handleDeletion = (isForedSkipTrash: boolean = false) => {
-    const isSkipTrash = !isTrashEnabled || isForedSkipTrash;
     setLoading(true);
+    const isSkipTrash = !isTrashEnabled || isForedSkipTrash;
 
-    const isBulkDelete = files.length > 1;
-    if (isBulkDelete) {
-      const formData = new FormData();
-      files.forEach(selectedFile => {
-        formData.append('path', selectedFile.path);
-      });
-      if (isSkipTrash) {
-        formData.append('skip_trash', String(isSkipTrash));
-      }
+    const formData = new FormData();
+    files.forEach(selectedFile => {
+      formData.append('path', selectedFile.path);
+    });
+    if (isSkipTrash) {
+      formData.append('skip_trash', String(isSkipTrash));
+    }
 
-      saveForm(formData, { url: BULK_DELETION_API_URL });
+    if (files.length > 1) {
+      save(formData, { url: BULK_DELETION_API_URL });
     } else {
-      const payload = { path: files[0].path, skip_trash: isSkipTrash ? true : undefined };
-      save(payload, { url: DELETION_API_URL });
+      save(formData, { url: DELETION_API_URL });
     }
   };
 
-  const loading = saveFormLoading || saveLoading;
-
   return (
     <Modal
       cancelText={t('Cancel')}
@@ -112,4 +99,4 @@ const DeleteAction = ({
   );
 };
 
-export default DeleteAction;
+export default DeletionModal;