Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

25
resources/scripts/components/server/files/ChmodFileModal.tsx
View file

@ -1,6 +1,5 @@
import { fileBitsToString } from '@/helpers';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
@ -22,29 +21,29 @@ interface File {
type OwnProps = RequiredModalProps & { files: File[] };
const ChmodFileModal = ({ files, ...props }: OwnProps) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const submit = ({ mode }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
const submit = async ({ mode }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
clearFlashes('files');
mutate(
(data) =>
data.map((f) =>
f.name === files[0].file ? { ...f, mode: fileBitsToString(mode, !f.isFile), modeBits: mode } : f
await mutate(
data =>
data!.map(f =>
f.name === files[0]?.file ? { ...f, mode: fileBitsToString(mode, !f.isFile), modeBits: mode } : f,
),
false
false,
);
const data = files.map((f) => ({ file: f.file, mode: mode }));
const data = files.map(f => ({ file: f.file, mode: mode }));
chmodFiles(uuid, directory, data)
.then((): Promise<any> => (files.length > 0 ? mutate() : Promise.resolve()))
.then(() => setSelectedFiles([]))
.catch((error) => {
.catch(error => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });
@ -53,7 +52,7 @@ const ChmodFileModal = ({ files, ...props }: OwnProps) => {
};
return (
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : files[0].mode || '' }}>
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : files[0]?.mode ?? '' }}>
{({ isSubmitting }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
<Form css={tw`m-0`}>

31
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -1,4 +1,5 @@
import React, { memo, useRef, useState } from 'react';
import { memo, useRef, useState } from 'react';
import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faBoxOpen,
@ -14,7 +15,7 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server';
import { join } from 'path';
import { join } from 'pathe';
import deleteFiles from '@/api/server/files/deleteFiles';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import copyFile from '@/api/server/files/copyFile';
@ -25,7 +26,7 @@ import tw from 'twin.macro';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import DropdownMenu from '@/components/elements/DropdownMenu';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import useEventListener from '@/plugins/useEventListener';
import compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles';
@ -37,7 +38,7 @@ type ModalType = 'rename' | 'move' | 'chmod';
const StyledRow = styled.div<{ $danger?: boolean }>`
${tw`p-2 flex items-center rounded`};
${(props) =>
${props =>
props.$danger ? tw`hover:bg-red-100 hover:text-red-700` : tw`hover:bg-neutral-100 hover:text-neutral-700`};
`;
@ -60,10 +61,10 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
const [modal, setModal] = useState<ModalType | null>(null);
const [showConfirmation, setShowConfirmation] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearAndAddHttpError, clearFlashes } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
useEventListener(`pterodactyl:files:ctx:${file.key}`, (e: CustomEvent) => {
if (onClickRef.current) {
@ -71,14 +72,14 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
}
});
const doDeletion = () => {
const doDeletion = async () => {
clearFlashes('files');
// For UI speed, immediately remove the file from the listing before calling the deletion function.
// If the delete actually fails, we'll fetch the current directory contents again automatically.
mutate((files) => files.filter((f) => f.key !== file.key), false);
await mutate(files => files!.filter(f => f.key !== file.key), false);
deleteFiles(uuid, directory, [file.name]).catch((error) => {
deleteFiles(uuid, directory, [file.name]).catch(error => {
mutate();
clearAndAddHttpError({ key: 'files', error });
});
@ -90,7 +91,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
copyFile(uuid, join(directory, file.name))
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -99,11 +100,11 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
clearFlashes('files');
getFileDownloadUrl(uuid, join(directory, file.name))
.then((url) => {
.then(url => {
// @ts-expect-error this is valid
window.location = url;
})
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -113,7 +114,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
compressFiles(uuid, directory, [file.name])
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -123,7 +124,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
decompressFiles(uuid, directory, file.name)
.then(() => mutate())
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
@ -141,7 +142,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
</Dialog.Confirm>
<DropdownMenu
ref={onClickRef}
renderToggle={(onClick) => (
renderToggle={onClick => (
<div css={tw`px-4 py-2 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH} />
{modal ? (

68
resources/scripts/components/server/files/FileEditContainer.tsx
View file

@ -1,25 +1,27 @@
import React, { useEffect, useState } from 'react';
import getFileContents from '@/api/server/files/getFileContents';
import type { LanguageDescription } from '@codemirror/language';
import { dirname } from 'pathe';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import tw from 'twin.macro';
import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import getFileContents from '@/api/server/files/getFileContents';
import saveFileContents from '@/api/server/files/saveFileContents';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import { useHistory, useLocation, useParams } from 'react-router';
import FileNameModal from '@/components/server/files/FileNameModal';
import Can from '@/components/elements/Can';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import Can from '@/components/elements/Can';
import Select from '@/components/elements/Select';
import PageContentBlock from '@/components/elements/PageContentBlock';
import { ServerError } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Select from '@/components/elements/Select';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import FileNameModal from '@/components/server/files/FileNameModal';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { Editor } from '@/components/elements/editor';
import modes from '@/modes';
import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { encodePathSegments, hashToPath } from '@/helpers';
import { dirname } from 'path';
import CodemirrorEditor from '@/components/elements/CodemirrorEditor';
export default () => {
const [error, setError] = useState('');
@ -28,13 +30,14 @@ export default () => {
const [content, setContent] = useState('');
const [modalVisible, setModalVisible] = useState(false);
const [mode, setMode] = useState('text/plain');
const [language, setLanguage] = useState<LanguageDescription>();
const history = useHistory();
const { hash } = useLocation();
const navigate = useNavigate();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const setDirectory = ServerContext.useStoreActions((actions) => actions.files.setDirectory);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const { addError, clearFlashes } = useFlash();
let fetchFileContent: null | (() => Promise<string>) = null;
@ -48,7 +51,7 @@ export default () => {
setDirectory(dirname(path));
getFileContents(uuid, path)
.then(setContent)
.catch((error) => {
.catch(error => {
console.error(error);
setError(httpErrorToHuman(error));
})
@ -63,16 +66,16 @@ export default () => {
setLoading(true);
clearFlashes('files:view');
fetchFileContent()
.then((content) => saveFileContents(uuid, name || hashToPath(hash), content))
.then(content => saveFileContents(uuid, name || hashToPath(hash), content))
.then(() => {
if (name) {
history.push(`/server/${id}/files/edit#/${encodePathSegments(name)}`);
navigate(`/server/${id}/files/edit#/${encodePathSegments(name)}`);
return;
}
return Promise.resolve();
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ message: httpErrorToHuman(error), key: 'files:view' });
})
@ -80,17 +83,20 @@ export default () => {
};
if (error) {
return <ServerError message={error} onBack={() => history.goBack()} />;
// TODO: onBack
return <ServerError message={error} />;
}
return (
<PageContentBlock>
<FlashMessageRender byKey={'files:view'} css={tw`mb-4`} />
<ErrorBoundary>
<div css={tw`mb-4`}>
<FileManagerBreadcrumbs withinFileEditor isNewFile={action !== 'edit'} />
</div>
</ErrorBoundary>
{hash.replace(/^#/, '').endsWith('.pteroignore') && (
<div css={tw`mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400`}>
<p css={tw`text-neutral-300 text-sm`}>
@ -102,22 +108,24 @@ export default () => {
</p>
</div>
)}
<FileNameModal
visible={modalVisible}
onDismissed={() => setModalVisible(false)}
onFileNamed={(name) => {
onFileNamed={name => {
setModalVisible(false);
save(name);
}}
/>
<div css={tw`relative`}>
<SpinnerOverlay visible={loading} />
<CodemirrorEditor
mode={mode}
<Editor
filename={hash.replace(/^#/, '')}
onModeChanged={setMode}
initialContent={content}
fetchContent={(value) => {
language={language}
onLanguageChanged={setLanguage}
fetchContent={value => {
fetchFileContent = value;
}}
onContentSaved={() => {
@ -129,16 +137,18 @@ export default () => {
}}
/>
</div>
<div css={tw`flex justify-end mt-4`}>
<div css={tw`flex-1 sm:flex-none rounded bg-neutral-900 mr-4`}>
<Select value={mode} onChange={(e) => setMode(e.currentTarget.value)}>
{modes.map((mode) => (
<Select value={mode} onChange={e => setMode(e.currentTarget.value)}>
{modes.map(mode => (
<option key={`${mode.name}_${mode.mime}`} value={mode.mime}>
{mode.name}
</option>
))}
</Select>
</div>
{action === 'edit' ? (
<Can action={'file.update'}>
<Button css={tw`flex-1 sm:flex-none`} onClick={() => save()}>

18
resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { Fragment, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { NavLink, useLocation } from 'react-router-dom';
import { encodePathSegments, hashToPath } from '@/helpers';
@ -12,8 +12,8 @@ interface Props {
export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
const [file, setFile] = useState<string | null>(null);
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { hash } = useLocation();
useEffect(() => {
@ -28,7 +28,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
const breadcrumbs = (): { name: string; path?: string }[] =>
directory
.split('/')
.filter((directory) => !!directory)
.filter(directory => !!directory)
.map((directory, index, dirs) => {
if (!withinFileEditor && index === dirs.length - 1) {
return { name: directory };
@ -46,7 +46,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
/
{breadcrumbs().map((crumb, index) =>
crumb.path ? (
<React.Fragment key={index}>
<Fragment key={index}>
<NavLink
to={`/server/${id}/files#${encodePathSegments(crumb.path)}`}
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
@ -54,17 +54,17 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
{crumb.name}
</NavLink>
/
</React.Fragment>
</Fragment>
) : (
<span key={index} css={tw`px-1 text-neutral-300`}>
{crumb.name}
</span>
)
),
)}
{file && (
<React.Fragment>
<Fragment>
<span css={tw`px-1 text-neutral-300`}>{file}</span>
</React.Fragment>
</Fragment>
)}
</div>
);

34
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -1,6 +1,8 @@
import React, { useEffect } from 'react';
import type { ChangeEvent } from 'react';
import { useEffect } from 'react';
import tw from 'twin.macro';
import { httpErrorToHuman } from '@/api/http';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import FileObjectRow from '@/components/server/files/FileObjectRow';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
@ -9,7 +11,6 @@ import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
import { NavLink, useLocation } from 'react-router-dom';
import Can from '@/components/elements/Can';
import { ServerError } from '@/components/elements/ScreenBlock';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import { ServerContext } from '@/state/server';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
@ -22,24 +23,25 @@ import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
import { hashToPath } from '@/helpers';
import style from './style.module.css';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const sortFiles = (files: FileObject[]): FileObject[] => {
const sortedFiles: FileObject[] = files
.sort((a, b) => a.name.localeCompare(b.name))
.sort((a, b) => (a.isFile === b.isFile ? 0 : a.isFile ? 1 : -1));
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1].name);
return sortedFiles.filter((file, index) => index === 0 || file.name !== sortedFiles[index - 1]?.name);
};
export default () => {
const id = ServerContext.useStoreState((state) => state.server.data!.id);
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 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 setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
useEffect(() => {
clearFlashes('files');
@ -48,11 +50,11 @@ export default () => {
}, [hash]);
useEffect(() => {
mutate();
void mutate();
}, [directory]);
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map((file) => file.name) || [] : []);
const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? files?.map(file => file.name) || [] : []);
};
if (error) {
@ -92,7 +94,7 @@ export default () => {
{!files.length ? (
<p css={tw`text-sm text-neutral-400 text-center`}>This directory seems to be empty.</p>
) : (
<CSSTransition classNames={'fade'} timeout={150} appear in>
<FadeTransition duration="duration-150" appear show>
<div>
{files.length > 250 && (
<div css={tw`rounded bg-yellow-400 mb-px p-3`}>
@ -102,12 +104,12 @@ export default () => {
</p>
</div>
)}
{sortFiles(files.slice(0, 250)).map((file) => (
{sortFiles(files.slice(0, 250)).map(file => (
<FileObjectRow key={file.key} file={file} />
))}
<MassActionsBar />
</div>
</CSSTransition>
</FadeTransition>
)}
</>
)}

23
resources/scripts/components/server/files/FileManagerStatus.tsx
View file

@ -1,12 +1,13 @@
import React, { useContext, useEffect } from 'react';
import { ServerContext } from '@/state/server';
import { CloudUploadIcon, XIcon } from '@heroicons/react/solid';
import asDialog from '@/hoc/asDialog';
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
import { useSignal } from '@preact/signals-react';
import { useContext, useEffect } from 'react';
import { Button } from '@/components/elements/button/index';
import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import Code from '@/components/elements/Code';
import { useSignal } from '@preact/signals-react';
import asDialog from '@/hoc/asDialog';
import { ServerContext } from '@/state/server';
const svgProps = {
cx: 16,
@ -32,10 +33,10 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
const FileUploadList = () => {
const { close } = useContext(DialogWrapperContext);
const removeFileUpload = ServerContext.useStoreActions((actions) => actions.files.removeFileUpload);
const clearFileUploads = ServerContext.useStoreActions((actions) => actions.files.clearFileUploads);
const uploads = ServerContext.useStoreState((state) =>
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b))
const removeFileUpload = ServerContext.useStoreActions(actions => actions.files.removeFileUpload);
const clearFileUploads = ServerContext.useStoreActions(actions => actions.files.clearFileUploads);
const uploads = ServerContext.useStoreState(state =>
Object.entries(state.files.uploads).sort(([a], [b]) => a.localeCompare(b)),
);
return (
@ -74,8 +75,8 @@ const FileUploadListDialog = asDialog({
export default () => {
const open = useSignal(false);
const count = ServerContext.useStoreState((state) => Object.keys(state.files.uploads).length);
const progress = ServerContext.useStoreState((state) => ({
const count = ServerContext.useStoreState(state => Object.keys(state.files.uploads).length);
const progress = ServerContext.useStoreState(state => ({
uploaded: Object.values(state.files.uploads).reduce((count, file) => count + file.loaded, 0),
total: Object.values(state.files.uploads).reduce((count, file) => count + file.total, 0),
}));

5
resources/scripts/components/server/files/FileNameModal.tsx
View file

@ -1,10 +1,9 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import Field from '@/components/elements/Field';
import { ServerContext } from '@/state/server';
import { join } from 'path';
import { join } from 'pathe';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
@ -17,7 +16,7 @@ interface Values {
}
export default ({ onFileNamed, onDismissed, ...props }: Props) => {
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
onFileNamed(join(directory, values.fileName));

95
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -1,69 +1,74 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileAlt, faFileArchive, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
import { encodePathSegments } from '@/helpers';
import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
import React, { memo } from 'react';
import type { ReactNode } from 'react';
import { memo } from 'react';
import isEqual from 'react-fast-compare';
import { NavLink } from 'react-router-dom';
import tw from 'twin.macro';
import { join } from 'pathe';
import { encodePathSegments } from '@/helpers';
import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import isEqual from 'react-fast-compare';
import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
import { usePermissions } from '@/plugins/usePermissions';
import { join } from 'path';
import { bytesToString } from '@/lib/formatters';
import { usePermissions } from '@/plugins/usePermissions';
import { ServerContext } from '@/state/server';
import styles from './style.module.css';
const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
function Clickable({ file, children }: { file: FileObject; children: ReactNode }) {
const [canReadContents] = usePermissions(['file.read-content']);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const match = useRouteMatch();
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
return !canReadContents || (file.isFile && !file.isEditable()) ? (
<div className={styles.details}>{children}</div>
) : (
<NavLink
className={styles.details}
to={`${match.url}${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
to={`/server/${id}/files${file.isFile ? '/edit' : ''}#${encodePathSegments(join(directory, file.name))}`}
>
{children}
</NavLink>
);
}, isEqual);
}
const FileObjectRow = ({ file }: { file: FileObject }) => (
<div
className={styles.file_row}
key={file.name}
onContextMenu={(e) => {
e.preventDefault();
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
}}
>
<SelectFileCheckbox name={file.name} />
<Clickable file={file}>
<div css={tw`flex-none text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
{file.isFile ? (
<FontAwesomeIcon
icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}
/>
) : (
<FontAwesomeIcon icon={faFolder} />
)}
</div>
<div css={tw`flex-1 truncate`}>{file.name}</div>
{file.isFile && <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>{bytesToString(file.size)}</div>}
<div css={tw`w-1/5 text-right mr-4 hidden md:block`} title={file.modifiedAt.toString()}>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48
? format(file.modifiedAt, 'MMM do, yyyy h:mma')
: formatDistanceToNow(file.modifiedAt, { addSuffix: true })}
</div>
</Clickable>
<FileDropdownMenu file={file} />
</div>
);
const MemoizedClickable = memo(Clickable, isEqual);
function FileObjectRow({ file }: { file: FileObject }) {
return (
<div
className={styles.file_row}
key={file.name}
onContextMenu={e => {
e.preventDefault();
window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.key}`, { detail: e.clientX }));
}}
>
<SelectFileCheckbox name={file.name} />
<MemoizedClickable file={file}>
<div css={tw`flex-none text-neutral-400 ml-6 mr-4 text-lg pl-3`}>
{file.isFile ? (
<FontAwesomeIcon
icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}
/>
) : (
<FontAwesomeIcon icon={faFolder} />
)}
</div>
<div css={tw`flex-1 truncate`}>{file.name}</div>
{file.isFile && <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>{bytesToString(file.size)}</div>}
<div css={tw`w-1/5 text-right mr-4 hidden md:block`} title={file.modifiedAt.toString()}>
{Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48
? format(file.modifiedAt, 'MMM do, yyyy h:mma')
: formatDistanceToNow(file.modifiedAt, { addSuffix: true })}
</div>
</MemoizedClickable>
<FileDropdownMenu file={file} />
</div>
);
}
export default memo(FileObjectRow, (prevProps, nextProps) => {
/* eslint-disable @typescript-eslint/no-unused-vars */

52
resources/scripts/components/server/files/MassActionsBar.tsx
View file

@ -1,19 +1,19 @@
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { Button } from '@/components/elements/button/index';
import Fade from '@/components/elements/Fade';
import { useEffect, useState } from 'react';
import compressFiles from '@/api/server/files/compressFiles';
import deleteFiles from '@/api/server/files/deleteFiles';
import { Button } from '@/components/elements/button';
import { Dialog } from '@/components/elements/dialog';
import Portal from '@/components/elements/Portal';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import useFlash from '@/plugins/useFlash';
import compressFiles from '@/api/server/files/compressFiles';
import { ServerContext } from '@/state/server';
import deleteFiles from '@/api/server/files/deleteFiles';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import Portal from '@/components/elements/Portal';
import { Dialog } from '@/components/elements/dialog';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
const MassActionsBar = () => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
@ -21,10 +21,10 @@ const MassActionsBar = () => {
const [loadingMessage, setLoadingMessage] = useState('');
const [showConfirm, setShowConfirm] = useState(false);
const [showMove, setShowMove] = useState(false);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const directory = ServerContext.useStoreState(state => state.files.directory);
const selectedFiles = ServerContext.useStoreState((state) => state.files.selectedFiles);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const selectedFiles = ServerContext.useStoreState(state => state.files.selectedFiles);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
useEffect(() => {
if (!loading) setLoadingMessage('');
@ -38,7 +38,7 @@ const MassActionsBar = () => {
compressFiles(uuid, directory, selectedFiles)
.then(() => mutate())
.then(() => setSelectedFiles([]))
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setLoading(false));
};
@ -49,12 +49,12 @@ const MassActionsBar = () => {
setLoadingMessage('Deleting files...');
deleteFiles(uuid, directory, selectedFiles)
.then(() => {
mutate((files) => files.filter((f) => selectedFiles.indexOf(f.name) < 0), false);
.then(async () => {
await mutate(files => files!.filter(f => selectedFiles.indexOf(f.name) < 0), false);
setSelectedFiles([]);
})
.catch((error) => {
mutate();
.catch(async error => {
await mutate();
clearAndAddHttpError({ key: 'files', error });
})
.then(() => setLoading(false));
@ -62,7 +62,7 @@ const MassActionsBar = () => {
return (
<>
<div css={tw`pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center`}>
<div className="pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center">
<SpinnerOverlay visible={loading} size={'large'} fixed>
{loadingMessage}
</SpinnerOverlay>
@ -73,12 +73,12 @@ const MassActionsBar = () => {
onClose={() => setShowConfirm(false)}
onConfirmed={onClickConfirmDeletion}
>
<p className={'mb-2'}>
<p className="mb-2">
Are you sure you want to delete&nbsp;
<span className={'font-semibold text-gray-50'}>{selectedFiles.length} files</span>? This is a
<span className="font-semibold text-gray-50">{selectedFiles.length} files</span>? This is a
permanent action and the files cannot be recovered.
</p>
{selectedFiles.slice(0, 15).map((file) => (
{selectedFiles.slice(0, 15).map(file => (
<li key={file}>{file}</li>
))}
{selectedFiles.length > 15 && <li>and {selectedFiles.length - 15} others</li>}
@ -93,16 +93,16 @@ const MassActionsBar = () => {
/>
)}
<Portal>
<div className={'fixed bottom-0 mb-6 flex justify-center w-full z-50'}>
<Fade timeout={75} in={selectedFiles.length > 0} unmountOnExit>
<div css={tw`flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50`}>
<div className="fixed bottom-0 mb-6 flex justify-center w-full z-50">
<FadeTransition duration="duration-75" show={selectedFiles.length > 0} appear unmount>
<div className="flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50">
<Button onClick={() => setShowMove(true)}>Move</Button>
<Button onClick={onClickCompress}>Archive</Button>
<Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>
Delete
</Button.Danger>
</div>
</Fade>
</FadeTransition>
</div>
</Portal>
</div>

12
resources/scripts/components/server/files/NewDirectoryButton.tsx
View file

@ -1,8 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import { join } from 'path';
import { join } from 'pathe';
import { object, string } from 'yup';
import createDirectory from '@/api/server/files/createDirectory';
import tw from 'twin.macro';
@ -42,8 +42,8 @@ const generateDirectoryData = (name: string): FileObject => ({
const NewDirectoryDialog = asDialog({
title: 'Create Directory',
})(() => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { mutate } = useFileManagerSwr();
const { close } = useContext(DialogWrapperContext);
@ -57,9 +57,9 @@ const NewDirectoryDialog = asDialog({
const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
createDirectory(uuid, directory, directoryName)
.then(() => mutate((data) => [...data, generateDirectoryData(directoryName)], false))
.then(() => mutate(data => [...data!, generateDirectoryData(directoryName)], false))
.then(() => close())
.catch((error) => {
.catch(error => {
setSubmitting(false);
clearAndAddHttpError(error);
});

19
resources/scripts/components/server/files/RenameFileModal.tsx
View file

@ -1,8 +1,7 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import { join } from 'path';
import { join } from 'pathe';
import renameFiles from '@/api/server/files/renameFiles';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
@ -17,11 +16,11 @@ interface FormikValues {
type OwnProps = RequiredModalProps & { files: string[]; useMoveTerminology?: boolean };
const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState((state) => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions((actions) => actions.files.setSelectedFiles);
const directory = ServerContext.useStoreState(state => state.files.directory);
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const submit = ({ name }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
clearFlashes('files');
@ -30,24 +29,24 @@ const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
if (files.length === 1) {
if (!useMoveTerminology && len === 1) {
// Rename the file within this directory.
mutate((data) => data.map((f) => (f.name === files[0] ? { ...f, name } : f)), false);
mutate(data => data!.map(f => (f.name === files[0] ? { ...f, name } : f)), false);
} else if (useMoveTerminology || len > 1) {
// Remove the file from this directory since they moved it elsewhere.
mutate((data) => data.filter((f) => f.name !== files[0]), false);
mutate(data => data!.filter(f => f.name !== files[0]), false);
}
}
let data;
if (useMoveTerminology && files.length > 1) {
data = files.map((f) => ({ from: f, to: join(name, f) }));
data = files.map(f => ({ from: f, to: join(name, f) }));
} else {
data = files.map((f) => ({ from: f, to: name }));
data = files.map(f => ({ from: f, to: name }));
}
renameFiles(uuid, directory, data)
.then((): Promise<any> => (files.length > 0 ? mutate() : Promise.resolve()))
.then(() => setSelectedFiles([]))
.catch((error) => {
.catch(error => {
mutate();
setSubmitting(false);
clearAndAddHttpError({ key: 'files', error });

10
resources/scripts/components/server/files/SelectFileCheckbox.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import * as React from 'react';
import tw from 'twin.macro';
import { ServerContext } from '@/state/server';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import Input from '@/components/elements/Input';
export const FileActionCheckbox = styled(Input)`
@ -15,9 +15,9 @@ export const FileActionCheckbox = styled(Input)`
`;
export default ({ name }: { name: string }) => {
const isChecked = ServerContext.useStoreState((state) => state.files.selectedFiles.indexOf(name) >= 0);
const appendSelectedFile = ServerContext.useStoreActions((actions) => actions.files.appendSelectedFile);
const removeSelectedFile = ServerContext.useStoreActions((actions) => actions.files.removeSelectedFile);
const isChecked = ServerContext.useStoreState(state => state.files.selectedFiles.indexOf(name) >= 0);
const appendSelectedFile = ServerContext.useStoreActions(actions => actions.files.appendSelectedFile);
const removeSelectedFile = ServerContext.useStoreActions(actions => actions.files.removeSelectedFile);
return (
<label css={tw`flex-none px-4 py-2 absolute self-center z-30 cursor-pointer`}>

57
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -1,25 +1,26 @@
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { useEffect, useRef } from 'react';
import tw from 'twin.macro';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import { Button } from '@/components/elements/button/index';
import React, { useEffect, useRef } from 'react';
import { ModalMask } from '@/components/elements/Modal';
import Fade from '@/components/elements/Fade';
import Portal from '@/components/elements/Portal';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
import type { WithClassname } from '@/components/types';
import useEventListener from '@/plugins/useEventListener';
import { useFlashKey } from '@/plugins/useFlash';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import { ServerContext } from '@/state/server';
import { WithClassname } from '@/components/types';
import Portal from '@/components/elements/Portal';
import { CloudUploadIcon } from '@heroicons/react/outline';
import { useSignal } from '@preact/signals-react';
function isFileOrDirectory(event: DragEvent): boolean {
if (!event.dataTransfer?.types) {
return false;
}
return event.dataTransfer.types.some((value) => value.toLowerCase() === 'files');
return event.dataTransfer.types.some(value => value.toLowerCase() === 'files');
}
export default ({ className }: WithClassname) => {
@ -31,22 +32,22 @@ export default ({ className }: WithClassname) => {
const { mutate } = useFileManagerSwr();
const { addError, clearAndAddHttpError } = useFlashKey('files');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const directory = ServerContext.useStoreState((state) => state.files.directory);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const { clearFileUploads, removeFileUpload, pushFileUpload, setUploadProgress } = ServerContext.useStoreActions(
(actions) => actions.files
actions => actions.files,
);
useEventListener(
'dragenter',
(e) => {
e => {
e.preventDefault();
e.stopPropagation();
if (isFileOrDirectory(e)) {
visible.value = true;
}
},
{ capture: true }
{ capture: true },
);
useEventListener('dragexit', () => (visible.value = false), { capture: true });
@ -67,16 +68,16 @@ export default ({ className }: WithClassname) => {
const onFileSubmission = (files: FileList) => {
clearAndAddHttpError();
const list = Array.from(files);
if (list.some((file) => !file.size || (!file.type && file.size === 4096))) {
if (list.some(file => !file.size || (!file.type && file.size === 4096))) {
return addError('Folder uploads are not supported at this time.', 'Error');
}
const uploads = list.map((file) => {
const uploads = list.map(file => {
const controller = new AbortController();
pushFileUpload({ name: file.name, data: { abort: controller, loaded: 0, total: file.size } });
return () =>
getFileUploadUrl(uuid).then((url) =>
getFileUploadUrl(uuid).then(url =>
axios.post(
url,
{ files: file },
@ -84,15 +85,15 @@ export default ({ className }: WithClassname) => {
signal: controller.signal,
headers: { 'Content-Type': 'multipart/form-data' },
params: { directory },
onUploadProgress: (data) => onUploadProgress(data, file.name),
}
)
onUploadProgress: data => onUploadProgress(data, file.name),
},
),
);
});
Promise.all(uploads.map((fn) => fn()))
Promise.all(uploads.map(fn => fn()))
.then(() => mutate())
.catch((error) => {
.catch(error => {
clearFileUploads();
clearAndAddHttpError(error);
});
@ -101,16 +102,18 @@ export default ({ className }: WithClassname) => {
return (
<>
<Portal>
<Fade appear in={visible.value} timeout={75} key={'upload_modal_mask'} unmountOnExit>
<FadeTransition show={visible.value} duration="duration-75" key="upload_modal_mask" appear unmount>
<ModalMask
onClick={() => (visible.value = false)}
onDragOver={(e) => e.preventDefault()}
onDrop={(e) => {
onDragOver={e => e.preventDefault()}
onDrop={e => {
e.preventDefault();
e.stopPropagation();
visible.value = false;
if (!e.dataTransfer?.files.length) return;
if (!e.dataTransfer?.files.length) {
return;
}
onFileSubmission(e.dataTransfer.files);
}}
@ -128,13 +131,13 @@ export default ({ className }: WithClassname) => {
</div>
</div>
</ModalMask>
</Fade>
</FadeTransition>
</Portal>
<input
type={'file'}
ref={fileUploadInput}
css={tw`hidden`}
onChange={(e) => {
onChange={e => {
if (!e.currentTarget.files) return;
onFileSubmission(e.currentTarget.files);