misc_pterodactyl-panel/resources/scripts/components/admin/nests/eggs/EggInstallContainer.tsx

105 lines
3.9 KiB
TypeScript
Raw Normal View History

2021-11-04 20:32:42 +00:00
import { useEggFromRoute } from '@/api/admin/egg';
2021-09-17 20:33:38 +00:00
import updateEgg from '@/api/admin/eggs/updateEgg';
import Field from '@/components/elements/Field';
import useFlash from '@/plugins/useFlash';
2021-07-21 18:18:53 +00:00
import { shell } from '@codemirror/legacy-modes/mode/shell';
2021-09-17 20:33:38 +00:00
import { faScroll } from '@fortawesome/free-solid-svg-icons';
import { Form, Formik, FormikHelpers } from 'formik';
import React from 'react';
import tw from 'twin.macro';
import AdminBox from '@/components/admin/AdminBox';
import Button from '@/components/elements/Button';
2021-07-21 18:18:53 +00:00
import Editor from '@/components/elements/Editor';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
2021-09-17 20:33:38 +00:00
interface Values {
scriptContainer: string;
scriptEntry: string;
scriptInstall: string;
}
2021-11-04 20:32:42 +00:00
export default function EggInstallContainer () {
2021-09-17 20:33:38 +00:00
const { clearFlashes, clearAndAddHttpError } = useFlash();
2021-11-04 20:32:42 +00:00
const { data: egg } = useEggFromRoute();
if (!egg) {
return null;
}
let fetchFileContent: (() => Promise<string>) | null = null;
2021-09-17 20:33:38 +00:00
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
if (fetchFileContent === null) {
return;
}
values.scriptInstall = await fetchFileContent();
clearFlashes('egg');
updateEgg(egg.id, values)
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'egg', error });
})
.then(() => setSubmitting(false));
};
return (
2021-09-17 20:33:38 +00:00
<Formik
onSubmit={submit}
initialValues={{
scriptContainer: egg.scriptContainer,
scriptEntry: egg.scriptEntry,
scriptInstall: '',
}}
>
{({ isSubmitting, isValid }) => (
2021-10-04 00:26:44 +00:00
<AdminBox icon={faScroll} title={'Install Script'} noPadding>
2021-09-17 20:33:38 +00:00
<div css={tw`relative pb-4`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form>
<Editor
overrides={tw`h-96 mb-4`}
initialContent={egg.scriptInstall || ''}
mode={shell}
fetchContent={value => {
fetchFileContent = value;
}}
/>
<div css={tw`mx-6 mb-4`}>
<div css={tw`grid grid-cols-3 gap-x-8 gap-y-6`}>
<Field
id={'scriptContainer'}
name={'scriptContainer'}
label={'Install Container'}
type={'text'}
description={'The Docker image to use for running this installation script.'}
/>
<Field
id={'scriptEntry'}
name={'scriptEntry'}
label={'Install Entrypoint'}
type={'text'}
description={'The command that should be used to run this script inside of the installation container.'}
/>
</div>
</div>
<div css={tw`flex flex-row border-t border-neutral-600`}>
<Button type={'submit'} size={'small'} css={tw`ml-auto mr-6 mt-4`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
</Form>
</div>
2021-09-17 20:33:38 +00:00
</AdminBox>
)}
</Formik>
);
2021-09-17 20:33:38 +00:00
}