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

import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
import React, { useState } from 'react';
import tw from 'twin.macro';
import createEggVariable, { CreateEggVariable } from '@/api/admin/eggs/createEggVariable';
import { useEggFromRoute } from '@/api/admin/egg';
import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
import Modal from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import useFlash from '@/plugins/useFlash';

export default function NewVariableButton () {
    const { setValues } = useFormikContext();
    const [ visible, setVisible ] = useState(false);
    const { clearFlashes, clearAndAddHttpError } = useFlash();

    const { data: egg, mutate } = useEggFromRoute();

    if (!egg) {
        return null;
    }

    const submit = (values: CreateEggVariable, { setSubmitting }: FormikHelpers<CreateEggVariable>) => {
        clearFlashes('variable:create');

        createEggVariable(egg.id, values)
            .then(async (variable) => {
                setValues([ ...egg.relationships.variables, variable ]);
                await mutate(egg => ({ ...egg!, relationships: { ...egg!.relationships, variables: [ ...egg!.relationships.variables, variable ] } }));
                setVisible(false);
            })
            .catch(error => {
                clearAndAddHttpError({ key: 'variable:create', error });
                setSubmitting(false);
            });
    };

    return (
        <>
            <Formik
                onSubmit={submit}
                initialValues={{
                    name: '',
                    description: '',
                    environmentVariable: '',
                    defaultValue: '',
                    isUserViewable: false,
                    isUserEditable: false,
                    rules: '',
                }}
                validationSchema={validationSchema}
            >
                {({ isSubmitting, isValid, resetForm }) => (
                    <Modal
                        visible={visible}
                        dismissable={!isSubmitting}
                        showSpinnerOverlay={isSubmitting}
                        onDismissed={() => {
                            resetForm();
                            setVisible(false);
                        }}
                    >
                        <FlashMessageRender byKey={'variable:create'} css={tw`mb-6`}/>

                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Variable</h2>

                        <Form css={tw`m-0`}>
                            <EggVariableForm prefix={''}/>

                            <div css={tw`flex flex-wrap justify-end mt-6`}>
                                <Button
                                    type={'button'}
                                    isSecondary
                                    css={tw`w-full sm:w-auto sm:mr-2`}
                                    onClick={() => setVisible(false)}
                                >
                                    Cancel
                                </Button>
                                <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'} disabled={isSubmitting || !isValid}>
                                    Create Variable
                                </Button>
                            </div>
                        </Form>
                    </Modal>
                )}
            </Formik>

            <Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
                New Variable
            </Button>
        </>
    );
}