ui(files): add pull file modal

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

@@ -15,8 +15,8 @@ interface FormikValues {
 }
 
 interface File {
-    file: string,
-    mode: string,
+    file: string;
+    mode: string;
 }
 
 type OwnProps = RequiredModalProps & { files: File[] };

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

@@ -16,10 +16,13 @@ import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
 import UploadButton from '@/components/server/files/UploadButton';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
-import { useStoreActions } from '@/state/hooks';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
+import PullFileModal from '@/components/server/files/PullFileModal';
 import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
 import { hashToPath } from '@/helpers';
+import { useStoreActions } from '@/state/hooks';
+import { useStoreState } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -27,16 +30,20 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 };
 
 export default () => {
+    const pullFiles = useStoreState((state: ApplicationStore) => state.settings.data!.features.pullFiles);
+
     const id = ServerContext.useStoreState(state => state.server.data!.id);
-    const { hash } = useLocation();
-    const { data: files, error, mutate } = useFileManagerSwr();
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
     const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
 
+    const clearFlashes = useStoreActions(actions => actions.flashes.clearFlashes);
+
+    const { hash } = useLocation();
+    const { data: files, error, mutate } = useFileManagerSwr();
+
     useEffect(() => {
         clearFlashes('files');
         setSelectedFiles([]);
@@ -75,6 +82,7 @@ export default () => {
                 <Can action={'file.create'}>
                     <ErrorBoundary>
                         <div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-nowrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
+                            {pullFiles && <PullFileModal css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>}
                             <NewDirectoryButton css={tw`w-full flex-none mt-4 sm:mt-0 sm:w-auto sm:mr-4`}/>
                             <UploadButton css={tw`flex-1 mr-4 sm:flex-none sm:mt-0`}/>
                             <NavLink

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

@@ -68,7 +68,7 @@ export default ({ className }: WithClassname) => {
                 validationSchema={object().shape({
                     directoryName: string()
                         .required('A valid directory name must be provided.')
-                        .test('unique', 'Directory with that name already exists.', v => {
+                        .test('unique', 'File or directory with that name already exists.', v => {
                             return v !== undefined &&
                                 data !== undefined &&
                                 data.filter(f => f.name.toLowerCase() === v.toLowerCase()).length < 1;

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

@@ -0,0 +1,121 @@
+import { Form, Formik, FormikHelpers } from 'formik';
+import React, { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+import { object, string } from 'yup';
+import pullFile from '@/api/server/files/pullFile';
+import { WithClassname } from '@/components/types';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import Modal from '@/components/elements/Modal';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { join } from 'path';
+
+interface Values {
+    url: string;
+}
+
+const generateFileData = (name: string): FileObject => ({
+    key: `file_${name.split('/', 1)[0] ?? name}`,
+    name: name,
+    mode: 'rw-rw-rw-',
+    modeBits: '0644',
+    size: 0,
+    isFile: true,
+    isSymlink: false,
+    mimetype: '',
+    createdAt: new Date(),
+    modifiedAt: new Date(),
+    isArchiveType: () => false,
+    isEditable: () => false,
+});
+
+export default ({ className }: WithClassname) => {
+    const [ visible, setVisible ] = useState(false);
+
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const directory = ServerContext.useStoreState(state => state.files.directory);
+
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { data, mutate } = useFileManagerSwr();
+
+    useEffect(() => {
+        if (!visible) return;
+
+        return () => {
+            clearFlashes('files:pull-modal');
+        };
+    }, [ visible ]);
+
+    const submit = ({ url }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        pullFile(uuid, directory, url)
+            .then(() => mutate(data => [ ...data!, generateFileData(new URL(url).pathname.split('/').pop() || '') ], false))
+            .then(() => setVisible(false))
+            .catch(error => {
+                console.error(error);
+                setSubmitting(false);
+                clearAndAddHttpError({ key: 'files:pull-modal', error });
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{ url: '' }}
+                validationSchema={object().shape({
+                    url: string()
+                        .required()
+                        .url()
+                        .test('unique', 'File or directory with that name already exists.', v => {
+                            return v !== undefined &&
+                                data !== undefined &&
+                                data.filter(f => f.name.toLowerCase() === v.toLowerCase()).length < 1;
+                        }),
+                })}
+            >
+                {({ resetForm, isSubmitting, values }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            setVisible(false);
+                            resetForm();
+                        }}
+                    >
+                        <FlashMessageRender key={'files:pull-modal'}/>
+                        <Form css={tw`m-0`}>
+                            <Field
+                                type={'text'}
+                                id={'url'}
+                                name={'url'}
+                                label={'URL'}
+                                autoFocus
+                            />
+                            <p css={tw`text-xs mt-2 text-neutral-400 break-all`}>
+                                <span css={tw`text-neutral-200`}>This file will be downloaded to</span>
+                                &nbsp;/home/container/
+                                <span css={tw`text-cyan-200`}>
+                                    {values.url !== '' ? join(directory, new URL(values.url).pathname.split('/').pop() || '').substr(1) : ''}
+                                </span>
+                            </p>
+                            <div css={tw`flex justify-end`}>
+                                <Button type={'submit'} css={tw`mt-8`}>
+                                    Pull File
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+            <Button onClick={() => setVisible(true)} className={className} isSecondary>
+                Pull Remote File
+            </Button>
+        </>
+    );
+};