Merge branch 'develop' of https://github.com/Pterodactyl/Panel into develop
This commit is contained in:
Dane Everitt
commit
af360d49dd
19 changed files with 287 additions and 58 deletions
14
resources/scripts/api/server/files/chmodFiles.ts
Normal file
14
resources/scripts/api/server/files/chmodFiles.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import http from '@/api/http';
|
||||
|
||||
interface Data {
|
||||
file: string;
|
||||
mode: string;
|
||||
}
|
||||
|
||||
export default (uuid: string, directory: string, files: Data[]): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post(`/api/client/servers/${uuid}/files/chmod`, { root: directory, files })
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
|
|
@ -5,6 +5,7 @@ export interface FileObject {
|
|||
key: string;
|
||||
name: string;
|
||||
mode: string;
|
||||
modeBits: string,
|
||||
size: number;
|
||||
isFile: boolean;
|
||||
isSymlink: boolean;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export const rawDataToFileObject = (data: FractalResponseData): FileObject => ({
|
|||
key: `${data.attributes.is_file ? 'file' : 'dir'}_${data.attributes.name}`,
|
||||
name: data.attributes.name,
|
||||
mode: data.attributes.mode,
|
||||
modeBits: data.attributes.mode_bits,
|
||||
size: Number(data.attributes.size),
|
||||
isFile: data.attributes.is_file,
|
||||
isSymlink: data.attributes.is_symlink,
|
||||
|
|
|
|||
|
|
@ -5,23 +5,24 @@ import config from '../../../../tailwind.config';
|
|||
|
||||
const SubNavigation = styled.div`
|
||||
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
|
||||
|
||||
|
||||
& > div {
|
||||
${tw`flex items-center text-sm mx-auto px-2`};
|
||||
max-width: 1200px;
|
||||
|
||||
|
||||
& > a, & > div {
|
||||
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
|
||||
|
||||
|
||||
&:not(:first-of-type) {
|
||||
${tw`ml-2`};
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
|
||||
&:hover {
|
||||
${tw`text-neutral-100`};
|
||||
}
|
||||
|
||||
&:active, &:hover, &.active {
|
||||
|
||||
&:active, &.active {
|
||||
${tw`text-neutral-100`};
|
||||
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
75
resources/scripts/components/server/files/ChmodFileModal.tsx
Normal file
75
resources/scripts/components/server/files/ChmodFileModal.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
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';
|
||||
import chmodFiles from '@/api/server/files/chmodFiles';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
interface FormikValues {
|
||||
mode: string;
|
||||
}
|
||||
|
||||
interface File {
|
||||
file: string,
|
||||
mode: string,
|
||||
}
|
||||
|
||||
type OwnProps = RequiredModalProps & { files: File[] };
|
||||
|
||||
const ChmodFileModal = ({ files, ...props }: OwnProps) => {
|
||||
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 submit = ({ 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), false);
|
||||
|
||||
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 => {
|
||||
mutate();
|
||||
setSubmitting(false);
|
||||
clearAndAddHttpError({ key: 'files', error });
|
||||
})
|
||||
.then(() => props.onDismissed());
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik onSubmit={submit} initialValues={{ mode: files.length > 1 ? '' : (files[0].mode || '') }}>
|
||||
{({ isSubmitting }) => (
|
||||
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
|
||||
<Form css={tw`m-0`}>
|
||||
<div css={tw`flex flex-wrap items-end`}>
|
||||
<div css={tw`w-full sm:flex-1 sm:mr-4`}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'file_mode'}
|
||||
name={'mode'}
|
||||
label={'File Mode'}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`w-full sm:w-auto mt-4 sm:mt-0`}>
|
||||
<Button css={tw`w-full`}>Update</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChmodFileModal;
|
||||
|
|
@ -5,6 +5,7 @@ import {
|
|||
faCopy,
|
||||
faEllipsisH,
|
||||
faFileArchive,
|
||||
faFileCode,
|
||||
faFileDownload,
|
||||
faLevelUpAlt,
|
||||
faPencilAlt,
|
||||
|
|
@ -30,8 +31,9 @@ import compressFiles from '@/api/server/files/compressFiles';
|
|||
import decompressFiles from '@/api/server/files/decompressFiles';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import ChmodFileModal from '@/components/server/files/ChmodFileModal';
|
||||
|
||||
type ModalType = 'rename' | 'move';
|
||||
type ModalType = 'rename' | 'move' | 'chmod';
|
||||
|
||||
const StyledRow = styled.div<{ $danger?: boolean }>`
|
||||
${tw`p-2 flex items-center rounded`};
|
||||
|
|
@ -140,14 +142,23 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
|
|||
renderToggle={onClick => (
|
||||
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
{!!modal &&
|
||||
<RenameFileModal
|
||||
visible
|
||||
appear
|
||||
files={[ file.name ]}
|
||||
useMoveTerminology={modal === 'move'}
|
||||
onDismissed={() => setModal(null)}
|
||||
/>
|
||||
{modal ?
|
||||
modal === 'chmod' ?
|
||||
<ChmodFileModal
|
||||
visible
|
||||
appear
|
||||
files={[ { file: file.name, mode: file.modeBits } ]}
|
||||
onDismissed={() => setModal(null)}
|
||||
/>
|
||||
:
|
||||
<RenameFileModal
|
||||
visible
|
||||
appear
|
||||
files={[ file.name ]}
|
||||
useMoveTerminology={modal === 'move'}
|
||||
onDismissed={() => setModal(null)}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
|
||||
</div>
|
||||
|
|
@ -156,6 +167,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
|
|||
<Can action={'file.update'}>
|
||||
<Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/>
|
||||
<Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/>
|
||||
<Row onClick={() => setModal('chmod')} icon={faFileCode} title={'Permissions'}/>
|
||||
</Can>
|
||||
{file.isFile &&
|
||||
<Can action={'file.create'}>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
|
||||
<div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
|
||||
{(files && files.length > 0 && !params?.action) ?
|
||||
<FileActionCheckbox
|
||||
type={'checkbox'}
|
||||
|
|
|
|||
|
|
@ -51,9 +51,28 @@ export default () => {
|
|||
|
||||
return (
|
||||
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
|
||||
<ErrorBoundary>
|
||||
<FileManagerBreadcrumbs/>
|
||||
</ErrorBoundary>
|
||||
<div css={tw`flex flex-wrap-reverse md:flex-no-wrap justify-center mb-4`}>
|
||||
<ErrorBoundary>
|
||||
<FileManagerBreadcrumbs/>
|
||||
</ErrorBoundary>
|
||||
|
||||
<Can action={'file.create'}>
|
||||
<ErrorBoundary>
|
||||
<div css={tw`flex flex-shrink-0 flex-wrap-reverse md:flex-no-wrap justify-end mb-4 md:mb-0 ml-0 md:ml-auto`}>
|
||||
<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
|
||||
to={`/server/${id}/files/new${window.location.hash}`}
|
||||
css={tw`flex-1 sm:flex-none sm:mt-0`}
|
||||
>
|
||||
<Button css={tw`w-full`}>
|
||||
New File
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
</Can>
|
||||
</div>
|
||||
{
|
||||
!files ?
|
||||
<Spinner size={'large'} centered/>
|
||||
|
|
@ -83,22 +102,6 @@ export default () => {
|
|||
</div>
|
||||
</CSSTransition>
|
||||
}
|
||||
<Can action={'file.create'}>
|
||||
<ErrorBoundary>
|
||||
<div css={tw`flex flex-wrap-reverse justify-end mt-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
|
||||
to={`/server/${id}/files/new${window.location.hash}`}
|
||||
css={tw`flex-1 sm:flex-none sm:mt-0`}
|
||||
>
|
||||
<Button css={tw`w-full`}>
|
||||
New File
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
</Can>
|
||||
</>
|
||||
}
|
||||
</ServerContentBlock>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,11 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
|
|||
>
|
||||
<SelectFileCheckbox name={file.name}/>
|
||||
<Clickable file={file}>
|
||||
<div css={tw`flex-none self-center text-neutral-400 mr-4 text-lg pl-3 ml-6`}>
|
||||
<div css={tw`w-24 ml-6 pl-3 hidden md:block`}>
|
||||
{file.mode}
|
||||
</div>
|
||||
|
||||
<div css={tw`flex-none self-center text-neutral-400 ml-6 md:ml-0 mr-4 text-lg pl-3`}>
|
||||
{file.isFile ?
|
||||
<FontAwesomeIcon icon={file.isSymlink ? faFileImport : file.isArchiveType() ? faFileArchive : faFileAlt}/>
|
||||
:
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ const schema = object().shape({
|
|||
const generateDirectoryData = (name: string): FileObject => ({
|
||||
key: `dir_${name.split('/', 1)[0] ?? name}`,
|
||||
name: name.replace(/^(\/*)/, '').split('/', 1)[0] ?? name,
|
||||
mode: '0644',
|
||||
mode: 'drwxr-xr-x',
|
||||
modeBits: '0755',
|
||||
size: 0,
|
||||
isFile: false,
|
||||
isSymlink: false,
|
||||
|
|
|
|||
|
|
@ -48,21 +48,23 @@ export default ({ subuser }: Props) => {
|
|||
</p>
|
||||
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
|
||||
</div>
|
||||
<Can action={'user.update'}>
|
||||
{subuser.uuid !== uuid &&
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Edit subuser'}
|
||||
css={tw`block text-sm p-1 md:p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencilAlt}/>
|
||||
</button>
|
||||
}
|
||||
</Can>
|
||||
<Can action={'user.delete'}>
|
||||
<RemoveSubuserButton subuser={subuser}/>
|
||||
</Can>
|
||||
{subuser.uuid !== uuid &&
|
||||
<>
|
||||
<Can action={'user.update'}>
|
||||
<button
|
||||
type={'button'}
|
||||
aria-label={'Edit subuser'}
|
||||
css={tw`block text-sm p-1 md:p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencilAlt} />
|
||||
</button>
|
||||
</Can>
|
||||
<Can action={'user.delete'}>
|
||||
<RemoveSubuserButton subuser={subuser} />
|
||||
</Can>
|
||||
</>
|
||||
}
|
||||
</GreyRowBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,3 +20,33 @@ export const randomInt = (low: number, high: number) => Math.floor(Math.random()
|
|||
export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');
|
||||
|
||||
export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
|
||||
|
||||
export function fileBitsToString (mode: string, directory: boolean): string {
|
||||
const m = parseInt(mode, 8);
|
||||
|
||||
let buf = '';
|
||||
'dalTLDpSugct?'.split('').forEach((c, i) => {
|
||||
if ((m & (1 << (32 - 1 - i))) !== 0) {
|
||||
buf = buf + c;
|
||||
}
|
||||
});
|
||||
|
||||
if (buf.length === 0) {
|
||||
// If the file is directory, make sure it has the directory flag.
|
||||
if (directory) {
|
||||
buf = 'd';
|
||||
} else {
|
||||
buf = '-';
|
||||
}
|
||||
}
|
||||
|
||||
'rwxrwxrwx'.split('').forEach((c, i) => {
|
||||
if ((m & (1 << (9 - 1 - i))) !== 0) {
|
||||
buf = buf + c;
|
||||
} else {
|
||||
buf = buf + '-';
|
||||
}
|
||||
});
|
||||
|
||||
return buf;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue