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(); 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 permanently delete the {database.name} database and remove all associated data.

)}
setConnectionVisible(false)}>

Database connection details

{database.name}

); };