diff --git a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx index c36c9109c..962debcd4 100644 --- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx @@ -1,5 +1,8 @@ +import updateEgg from '@/api/admin/eggs/updateEgg'; +import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton'; +import Button from '@/components/elements/Button'; import Editor from '@/components/elements/Editor'; -import Field from '@/components/elements/Field'; +import Field, { TextareaField } from '@/components/elements/Field'; import Input from '@/components/elements/Input'; import Label from '@/components/elements/Label'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; @@ -9,9 +12,10 @@ import { faEgg, faTerminal } from '@fortawesome/free-solid-svg-icons'; import React from 'react'; import AdminBox from '@/components/admin/AdminBox'; import { Egg } from '@/api/admin/eggs/getEgg'; +import { useHistory } from 'react-router-dom'; import tw from 'twin.macro'; import { object } from 'yup'; -import { Form, Formik, useFormikContext } from 'formik'; +import { Form, Formik, FormikHelpers, useFormikContext } from 'formik'; function EggInformationContainer () { const { isSubmitting } = useFormikContext(); @@ -91,6 +95,13 @@ function EggImageContainer () { return ( + + ); } @@ -113,11 +124,11 @@ function EggStopContainer () { ); } -function EggProcessContainer ({ egg }: { egg: Egg }) { +function EggProcessContainer ({ className, egg }: { className?: string, egg: Egg }) { const { isSubmitting } = useFormikContext(); return ( - +
@@ -141,11 +152,30 @@ function EggProcessContainer ({ egg }: { egg: Egg }) { ); } -export default function EggSettingsContainer ({ egg }: { egg: Egg }) { - const { clearFlashes } = useFlash(); +interface Values { + name: string; + description: string; + startup: string; + dockerImages: string; + stopCommand: string; +} - const submit = () => { +export default function EggSettingsContainer ({ egg }: { egg: Egg }) { + const history = useHistory(); + + const { clearFlashes, clearAndAddHttpError } = useFlash(); + + const submit = (values: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('egg'); + + // TODO: Send data from code blocks. + + updateEgg(egg.id, { ...values, dockerImages: values.dockerImages.split('\n') }) + .catch(error => { + console.error(error); + clearAndAddHttpError({ key: 'egg', error }); + }) + .then(() => setSubmitting(false)); }; return ( @@ -154,29 +184,42 @@ export default function EggSettingsContainer ({ egg }: { egg: Egg }) { initialValues={{ name: egg.name, description: egg.description || '', - startup: egg.startup, - - stopCommand: egg.configStop, + dockerImages: egg.dockerImages.join('\n'), + stopCommand: egg.configStop || '', }} validationSchema={object().shape({ })} > -
-
- - -
+ {({ isSubmitting, isValid }) => ( + +
+ + +
- + -
- - -
+
+ + +
- - + + +
+
+ history.push('/admin/eggs')} + /> + +
+
+ + )} ); } diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx index f45ce0fb4..5840983ed 100644 --- a/resources/scripts/components/elements/Field.tsx +++ b/resources/scripts/components/elements/Field.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; import { Field as FormikField, FieldProps } from 'formik'; -import Input from '@/components/elements/Input'; +import Input, { Textarea } from '@/components/elements/Input'; import Label from '@/components/elements/Label'; import InputError from '@/components/elements/InputError'; import tw from 'twin.macro'; @@ -43,4 +43,33 @@ const Field = forwardRef(({ id, name, light = false, la )); Field.displayName = 'Field'; +type Props2 = OwnProps & Omit, 'name'>; + +export const TextareaField = forwardRef( + function TextareaField ({ id, name, light = false, label, description, validate, ...props }, ref) { + return ( + + { + ({ field, form: { errors, touched } }: FieldProps) => ( +
+ {label && } +