Add support for compressing items in the file manager

resources/scripts/api/server/files/compressFiles.ts

@@ -0,0 +1,12 @@
+import { FileObject } from '@/api/server/files/loadDirectory';
+import http from '@/api/http';
+import { rawDataToFileObject } from '@/api/transformers';
+
+export default async (uuid: string, directory: string, files: string[]): Promise<FileObject> => {
+    const { data } = await http.post(`/api/client/servers/${uuid}/files/compress`, { root: directory, files }, {
+        timeout: 300000,
+        timeoutErrorMessage: 'It looks like this archive is taking a long time to generate. It will appear when completed.',
+    });
+
+    return rawDataToFileObject(data);
+};

resources/scripts/api/server/files/loadDirectory.ts

@@ -1,5 +1,5 @@
 import http from '@/api/http';
-import v4 from 'uuid/v4';
+import { rawDataToFileObject } from '@/api/transformers';
 
 export interface FileObject {
     uuid: string;
@@ -19,16 +19,5 @@ export default async (uuid: string, directory?: string): Promise<FileObject[]> =
         params: { directory },
     });
 
-    return (data.data || []).map((item: any): FileObject => ({
-        uuid: v4(),
-        name: item.attributes.name,
-        mode: item.attributes.mode,
-        size: Number(item.attributes.size),
-        isFile: item.attributes.is_file,
-        isSymlink: item.attributes.is_symlink,
-        isEditable: item.attributes.is_editable,
-        mimetype: item.attributes.mimetype,
-        createdAt: new Date(item.attributes.created_at),
-        modifiedAt: new Date(item.attributes.modified_at),
-    }));
+    return (data.data || []).map(rawDataToFileObject);
 };

resources/scripts/api/transformers.ts

@@ -1,5 +1,7 @@
 import { Allocation } from '@/api/server/getServer';
 import { FractalResponseData } from '@/api/http';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import v4 from 'uuid/v4';
 
 export const rawDataToServerAllocation = (data: FractalResponseData): Allocation => ({
     id: data.attributes.id,
@@ -9,3 +11,16 @@ export const rawDataToServerAllocation = (data: FractalResponseData): Allocation
     notes: data.attributes.notes,
     isDefault: data.attributes.is_default,
 });
+
+export const rawDataToFileObject = (data: FractalResponseData): FileObject => ({
+    uuid: v4(),
+    name: data.attributes.name,
+    mode: data.attributes.mode,
+    size: Number(data.attributes.size),
+    isFile: data.attributes.is_file,
+    isSymlink: data.attributes.is_symlink,
+    isEditable: data.attributes.is_editable,
+    mimetype: data.attributes.mimetype,
+    createdAt: new Date(data.attributes.created_at),
+    modifiedAt: new Date(data.attributes.modified_at),
+});

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faCopy,
     faEllipsisH,
+    faFileArchive,
     faFileDownload,
     faLevelUpAlt,
     faPencilAlt,
@@ -25,6 +26,7 @@ import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import DropdownMenu from '@/components/elements/DropdownMenu';
 import styled from 'styled-components/macro';
 import useEventListener from '@/plugins/useEventListener';
+import compressFiles from '@/api/server/files/compressFiles';
 
 type ModalType = 'rename' | 'move';
 
@@ -81,10 +83,8 @@ export default ({ file }: { file: FileObject }) => {
 
         copyFile(uuid, join(directory, file.name))
             .then(() => mutate())
-            .catch(error => {
-                setShowSpinner(false);
-                clearAndAddHttpError({ key: 'files', error });
-            });
+            .catch(error => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
     };
 
     const doDownload = () => {
@@ -100,6 +100,16 @@ export default ({ file }: { file: FileObject }) => {
             .then(() => setShowSpinner(false));
     };
 
+    const doArchive = () => {
+        setShowSpinner(true);
+        clearFlashes('files');
+
+        compressFiles(uuid, directory, [ file.name ])
+            .then(() => mutate())
+            .catch(error => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
+    };
+
     return (
         <DropdownMenu
             ref={onClickRef}
@@ -125,6 +135,9 @@ export default ({ file }: { file: FileObject }) => {
                 <Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
             </Can>
             }
+            <Can action={'file.archive'}>
+                <Row onClick={doArchive} icon={faFileArchive} title={'Archive'}/>
+            </Can>
             <Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
             <Can action={'file.delete'}>
                 <Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>