misc_pterodactyl-panel/resources/scripts/components/server/files/FileEditContainer.tsx

158 lines
6.4 KiB
TypeScript
Raw Normal View History

2019-10-20 00:35:01 +00:00
import React, { lazy, useEffect, useState } from 'react';
import getFileContents from '@/api/server/files/getFileContents';
2019-10-26 20:16:27 +00:00
import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import saveFileContents from '@/api/server/files/saveFileContents';
import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
import { useHistory, useLocation, useParams } from 'react-router';
2019-12-22 00:38:40 +00:00
import FileNameModal from '@/components/server/files/FileNameModal';
import Can from '@/components/elements/Can';
import FlashMessageRender from '@/components/FlashMessageRender';
import PageContentBlock from '@/components/elements/PageContentBlock';
import ServerError from '@/components/screens/ServerError';
2020-07-05 00:57:24 +00:00
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Select from '@/components/elements/Select';
import modes from '@/modes';
import useFlash from '@/plugins/useFlash';
2020-08-26 04:39:00 +00:00
import { ServerContext } from '@/state/server';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
2019-10-12 22:29:45 +00:00
2020-09-13 23:17:40 +00:00
const LazyCodemirrorEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/CodemirrorEditor'));
2019-08-17 18:40:51 +00:00
export default () => {
const [ error, setError ] = useState('');
2019-12-22 00:38:40 +00:00
const { action } = useParams();
const [ loading, setLoading ] = useState(action === 'edit');
2019-10-20 00:35:01 +00:00
const [ content, setContent ] = useState('');
2019-12-22 00:38:40 +00:00
const [ modalVisible, setModalVisible ] = useState(false);
2020-09-13 23:17:40 +00:00
const [ mode, setMode ] = useState('text/plain');
2019-10-26 20:16:27 +00:00
const history = useHistory();
const { hash } = useLocation();
2020-08-26 04:39:00 +00:00
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();
2019-10-26 20:16:27 +00:00
let fetchFileContent: null | (() => Promise<string>) = null;
2019-10-12 22:29:45 +00:00
useEffect(() => {
if (action === 'new') return;
setError('');
setLoading(true);
setDirectory(hash.replace(/^#/, '').split('/').filter(v => !!v).slice(0, -1).join('/'));
getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent)
.catch(error => {
console.error(error);
setError(httpErrorToHuman(error));
})
.then(() => setLoading(false));
}, [ action, uuid, hash ]);
2019-08-17 18:40:51 +00:00
2019-12-22 00:38:40 +00:00
const save = (name?: string) => {
2019-10-26 20:16:27 +00:00
if (!fetchFileContent) {
return;
}
setLoading(true);
clearFlashes('files:view');
fetchFileContent()
.then(content => saveFileContents(uuid, name || hash.replace(/^#/, ''), content))
2019-12-22 00:38:40 +00:00
.then(() => {
if (name) {
2019-12-22 01:43:50 +00:00
history.push(`/server/${id}/files/edit#/${name}`);
2019-12-22 00:38:40 +00:00
return;
}
return Promise.resolve();
2019-10-26 20:16:27 +00:00
})
.catch(error => {
console.error(error);
addError({ message: httpErrorToHuman(error), key: 'files:view' });
2019-10-26 20:16:27 +00:00
})
.then(() => setLoading(false));
};
if (error) {
return (
<ServerError message={error} onBack={() => history.goBack()}/>
);
}
2019-08-17 18:40:51 +00:00
return (
<PageContentBlock>
2020-07-05 00:57:24 +00:00
<FlashMessageRender byKey={'files:view'} css={tw`mb-4`}/>
<ErrorBoundary>
<FileManagerBreadcrumbs withinFileEditor isNewFile={action !== 'edit'}/>
</ErrorBoundary>
2020-07-05 00:57:24 +00:00
{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`}>
You&apos;re editing
a <code css={tw`font-mono bg-black rounded py-px px-1`}>.pteroignore</code> file.
2020-04-20 03:04:39 +00:00
Any files or directories listed in here will be excluded from backups. Wildcards are supported by
2020-07-05 00:57:24 +00:00
using an asterisk (<code css={tw`font-mono bg-black rounded py-px px-1`}>*</code>). You can
2020-04-20 03:04:39 +00:00
negate a prior rule by prepending an exclamation point
2020-07-05 00:57:24 +00:00
(<code css={tw`font-mono bg-black rounded py-px px-1`}>!</code>).
2020-04-20 03:04:39 +00:00
</p>
</div>
}
2019-12-22 00:38:40 +00:00
<FileNameModal
visible={modalVisible}
onDismissed={() => setModalVisible(false)}
onFileNamed={(name) => {
setModalVisible(false);
save(name);
}}
/>
2020-07-05 00:57:24 +00:00
<div css={tw`relative`}>
2019-10-26 20:16:27 +00:00
<SpinnerOverlay visible={loading}/>
2020-09-13 23:17:40 +00:00
<LazyCodemirrorEditor
mode={mode}
filename={hash.replace(/^#/, '')}
onModeChanged={setMode}
2019-10-26 20:16:27 +00:00
initialContent={content}
fetchContent={value => {
fetchFileContent = value;
}}
onContentSaved={() => {
if (action !== 'edit') {
setModalVisible(true);
} else {
save();
}
}}
2019-10-26 20:16:27 +00:00
/>
</div>
2020-07-05 00:57:24 +00:00
<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)}>
2020-09-16 03:53:23 +00:00
{modes.map(mode => (
<option key={`${mode.name}_${mode.mime}`} value={mode.mime}>
{mode.name}
</option>
))}
</Select>
</div>
2019-12-22 00:38:40 +00:00
{action === 'edit' ?
<Can action={'file.update'}>
<Button css={tw`flex-1 sm:flex-none`} onClick={() => save()}>
Save Content
2020-07-05 00:57:24 +00:00
</Button>
</Can>
2019-12-22 00:38:40 +00:00
:
<Can action={'file.create'}>
<Button css={tw`flex-1 sm:flex-none`} onClick={() => setModalVisible(true)}>
Create File
2020-07-05 00:57:24 +00:00
</Button>
</Can>
2019-12-22 00:38:40 +00:00
}
2019-10-20 00:35:01 +00:00
</div>
</PageContentBlock>
2019-08-17 18:40:51 +00:00
);
};