import React, { useState } from 'react'; import { ServerDatabase } from '@/api/server/getServerDatabases'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase'; import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'; import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'; import classNames from 'classnames'; import Modal from '@/components/elements/Modal'; import { Form, Formik, FormikActions } from 'formik'; import Field from '@/components/elements/Field'; import { object, string } from 'yup'; import FlashMessageRender from '@/components/FlashMessageRender'; import { Actions, useStoreActions } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import { ServerContext } from '@/state/server'; import deleteServerDatabase from '@/api/server/deleteServerDatabase'; import { httpErrorToHuman } from '@/api/http'; import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton'; interface Props { databaseId: string | number; className?: string; onDelete: () => void; } export default ({ databaseId, className, onDelete }: Props) => { const [visible, setVisible] = useState(false); const database = ServerContext.useStoreState(state => state.databases.items.find(item => item.id === databaseId)); const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase); const [connectionVisible, setConnectionVisible] = useState(false); const { addFlash, clearFlashes } = useStoreActions((actions: Actions) => actions.flashes); const server = ServerContext.useStoreState(state => state.server.data!); if (!database) { return null; } 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 }: FormikActions<{ confirm: string }>) => { clearFlashes(); deleteServerDatabase(server.uuid, database.id) .then(() => { setVisible(false); setTimeout(() => onDelete(), 150); }) .catch(error => { console.error(error); setSubmitting(false); addFlash({ key: 'delete-database-modal', type: 'error', title: 'Error', 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}

Endpoint:

{database.connectionString}

Connections From:

{database.allowConnectionsFrom}

Username:

{database.username}

); };