Apply new eslint rules; default to prettier for styling
This commit is contained in:
DaneEveritt
parent
f22cce8881
commit
dc84af9937
218 changed files with 3876 additions and 3564 deletions
|
|
@ -26,18 +26,18 @@ interface Props {
|
|||
}
|
||||
|
||||
export default ({ database, className }: Props) => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const { addError, clearFlashes } = useFlash();
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
const [ connectionVisible, setConnectionVisible ] = useState(false);
|
||||
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 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.'),
|
||||
.oneOf([database.name.split('_', 2)[1], database.name], 'The database name must be provided.'),
|
||||
});
|
||||
|
||||
const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
|
||||
|
|
@ -47,7 +47,7 @@ export default ({ database, className }: Props) => {
|
|||
setVisible(false);
|
||||
setTimeout(() => removeDatabase(database.id), 150);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setSubmitting(false);
|
||||
addError({ key: 'database:delete', message: httpErrorToHuman(error) });
|
||||
|
|
@ -56,65 +56,51 @@ export default ({ database, className }: Props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{ confirm: '' }}
|
||||
validationSchema={schema}
|
||||
isInitialValid={false}
|
||||
>
|
||||
{
|
||||
({ isSubmitting, isValid, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
setVisible(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'database:delete'} css={tw`mb-6`}/>
|
||||
<h2 css={tw`text-2xl mb-6`}>Confirm database deletion</h2>
|
||||
<p css={tw`text-sm`}>
|
||||
Deleting a database is a permanent action, it cannot be undone. This will permanently
|
||||
delete the <strong>{database.name}</strong> database and remove all associated data.
|
||||
</p>
|
||||
<Form css={tw`m-0 mt-6`}>
|
||||
<Field
|
||||
type={'text'}
|
||||
id={'confirm_name'}
|
||||
name={'confirm'}
|
||||
label={'Confirm Database Name'}
|
||||
description={'Enter the database name to confirm deletion.'}
|
||||
/>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
isSecondary
|
||||
css={tw`mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type={'submit'}
|
||||
color={'red'}
|
||||
disabled={!isValid}
|
||||
>
|
||||
Delete Database
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
<Formik onSubmit={submit} initialValues={{ confirm: '' }} validationSchema={schema} isInitialValid={false}>
|
||||
{({ isSubmitting, isValid, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
setVisible(false);
|
||||
resetForm();
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'database:delete'} css={tw`mb-6`} />
|
||||
<h2 css={tw`text-2xl mb-6`}>Confirm database deletion</h2>
|
||||
<p css={tw`text-sm`}>
|
||||
Deleting a database is a permanent action, it cannot be undone. This will permanently delete
|
||||
the <strong>{database.name}</strong> database and remove all associated data.
|
||||
</p>
|
||||
<Form css={tw`m-0 mt-6`}>
|
||||
<Field
|
||||
type={'text'}
|
||||
id={'confirm_name'}
|
||||
name={'confirm'}
|
||||
label={'Confirm Database Name'}
|
||||
description={'Enter the database name to confirm deletion.'}
|
||||
/>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Button type={'button'} isSecondary css={tw`mr-2`} onClick={() => setVisible(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type={'submit'} color={'red'} disabled={!isValid}>
|
||||
Delete Database
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
|
||||
<FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
|
||||
<FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`} />
|
||||
<h3 css={tw`mb-6 text-2xl`}>Database connection details</h3>
|
||||
<div>
|
||||
<Label>Endpoint</Label>
|
||||
<CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
|
||||
<CopyOnClick text={database.connectionString}>
|
||||
<Input type={'text'} readOnly value={database.connectionString} />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
<div css={tw`mt-6`}>
|
||||
<Label>Connections from</Label>
|
||||
|
|
@ -122,17 +108,23 @@ export default ({ database, className }: Props) => {
|
|||
</div>
|
||||
<div css={tw`mt-6`}>
|
||||
<Label>Username</Label>
|
||||
<CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
|
||||
<CopyOnClick text={database.username}>
|
||||
<Input type={'text'} readOnly value={database.username} />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
<Can action={'database.view_password'}>
|
||||
<div css={tw`mt-6`}>
|
||||
<Label>Password</Label>
|
||||
<CopyOnClick text={database.password}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
|
||||
<CopyOnClick text={database.password}>
|
||||
<Input type={'text'} readOnly value={database.password} />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
</Can>
|
||||
<div css={tw`mt-6`}>
|
||||
<Label>JDBC Connection String</Label>
|
||||
<CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
|
||||
<CopyOnClick
|
||||
text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
|
||||
>
|
||||
<Input
|
||||
type={'text'}
|
||||
readOnly
|
||||
|
|
@ -142,7 +134,7 @@ export default ({ database, className }: Props) => {
|
|||
</div>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Can action={'database.update'}>
|
||||
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
|
||||
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase} />
|
||||
</Can>
|
||||
<Button isSecondary onClick={() => setConnectionVisible(false)}>
|
||||
Close
|
||||
|
|
@ -151,13 +143,17 @@ export default ({ database, className }: Props) => {
|
|||
</Modal>
|
||||
<GreyRowBox $hoverable={false} className={className} css={tw`mb-2`}>
|
||||
<div css={tw`hidden md:block`}>
|
||||
<FontAwesomeIcon icon={faDatabase} fixedWidth/>
|
||||
<FontAwesomeIcon icon={faDatabase} fixedWidth />
|
||||
</div>
|
||||
<div css={tw`flex-1 ml-4`}>
|
||||
<CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
|
||||
<CopyOnClick text={database.name}>
|
||||
<p css={tw`text-lg`}>{database.name}</p>
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
<div css={tw`ml-8 text-center hidden md:block`}>
|
||||
<CopyOnClick text={database.connectionString}><p css={tw`text-sm`}>{database.connectionString}</p></CopyOnClick>
|
||||
<CopyOnClick text={database.connectionString}>
|
||||
<p css={tw`text-sm`}>{database.connectionString}</p>
|
||||
</CopyOnClick>
|
||||
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
|
||||
</div>
|
||||
<div css={tw`ml-8 text-center hidden md:block`}>
|
||||
|
|
@ -165,16 +161,18 @@ export default ({ database, className }: Props) => {
|
|||
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
|
||||
</div>
|
||||
<div css={tw`ml-8 text-center hidden md:block`}>
|
||||
<CopyOnClick text={database.username}><p css={tw`text-sm`}>{database.username}</p></CopyOnClick>
|
||||
<CopyOnClick text={database.username}>
|
||||
<p css={tw`text-sm`}>{database.username}</p>
|
||||
</CopyOnClick>
|
||||
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
|
||||
</div>
|
||||
<div css={tw`ml-8`}>
|
||||
<Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
|
||||
<FontAwesomeIcon icon={faEye} fixedWidth/>
|
||||
<FontAwesomeIcon icon={faEye} fixedWidth />
|
||||
</Button>
|
||||
<Can action={'database.delete'}>
|
||||
<Button color={'red'} isSecondary onClick={() => setVisible(true)}>
|
||||
<FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
|
||||
<FontAwesomeIcon icon={faTrashAlt} fixedWidth />
|
||||
</Button>
|
||||
</Can>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue