import React, { useState } from 'react'; import Modal from '@/components/elements/Modal'; import { Form, Formik, FormikHelpers } from 'formik'; import Field from '@/components/elements/Field'; import { object, string } from 'yup'; import createServerDatabase from '@/api/server/databases/createServerDatabase'; import { ServerContext } from '@/state/server'; import { httpErrorToHuman } from '@/api/http'; import FlashMessageRender from '@/components/FlashMessageRender'; import useFlash from '@/plugins/useFlash'; import Button from '@/components/elements/Button'; import tw from 'twin.macro'; interface Values { databaseName: string; connectionsFrom: string; } const schema = object().shape({ databaseName: string() .required('A database name must be provided.') .min(3, 'Database name must be at least 3 characters.') .max(48, 'Database name must not exceed 48 characters.') .matches(/^[A-Za-z0-9_\-.]{3,48}$/, 'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.'), connectionsFrom: string() .required('A connection value must be provided.') .matches(/^([0-9]{1,3}|%)(\.([0-9]{1,3}|%))?(\.([0-9]{1,3}|%))?(\.([0-9]{1,3}|%))?$/, 'A valid connection address must be provided.'), }); export default () => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const { addError, clearFlashes } = useFlash(); const [ visible, setVisible ] = useState(false); const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase); const submit = (values: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('database:create'); createServerDatabase(uuid, { ...values }) .then(database => { appendDatabase(database); setVisible(false); }) .catch(error => { console.log(error); addError({ key: 'database:create', message: httpErrorToHuman(error) }); setSubmitting(false); }); }; return ( <> { ({ isSubmitting, resetForm }) => ( { resetForm(); setVisible(false); }} >

Create new database

) }
); };