import React, { useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faDatabase, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import Modal from '@/components/elements/Modal'; import { Form, Formik, FormikHelpers } from 'formik'; import Field from '@/components/elements/Field'; import { object, string } from 'yup'; import FlashMessageRender from '@/components/FlashMessageRender'; import { ServerContext } from '@/state/server'; import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase'; import { httpErrorToHuman } from '@/api/http'; import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton'; import Can from '@/components/elements/Can'; import { ServerDatabase } from '@/api/server/databases/getServerDatabases'; import useFlash from '@/plugins/useFlash'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import Label from '@/components/elements/Label'; import Input from '@/components/elements/Input'; import GreyRowBox from '@/components/elements/GreyRowBox'; import CopyOnClick from '@/components/elements/CopyOnClick'; interface Props { database: ServerDatabase; className?: string; } export default ({ database, className }: Props) => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const { addError, clearFlashes } = useFlash(); const [ visible, setVisible ] = useState(false); const [ connectionVisible, setConnectionVisible ] = useState(false); const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase); const removeDatabase = ServerContext.useStoreActions(actions => actions.databases.removeDatabase); const schema = object().shape({ confirm: string() .required('The database name must be provided.') .oneOf([ database.name.split('_', 2)[1], database.name ], 'The database name must be provided.'), }); const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => { clearFlashes(undefined); deleteServerDatabase(uuid, database.id) .then(() => { setVisible(false); setTimeout(() => removeDatabase(database.id), 150); }) .catch(error => { console.error(error); setSubmitting(false); addError({ key: 'database:delete', message: httpErrorToHuman(error) }); }); }; return ( <> { ({ isSubmitting, isValid, resetForm }) => ( { setVisible(false); resetForm(); }} >

Confirm database deletion

Deleting a database is a permanent action, it cannot be undone. This will permanetly delete the {database.name} database and remove all associated data.

) }
setConnectionVisible(false)}>

Database connection details

{database.name}

); };