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
|
|
@ -21,16 +21,19 @@ const schema = object().shape({
|
|||
.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(/^[\w\-.]{3,48}$/, 'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.'),
|
||||
.matches(
|
||||
/^[\w\-.]{3,48}$/,
|
||||
'Database name should only contain alphanumeric characters, underscores, dashes, and/or periods.'
|
||||
),
|
||||
connectionsFrom: string().matches(/^[\w\-/.%:]+$/, 'A valid host address must be provided.'),
|
||||
});
|
||||
|
||||
export default () => {
|
||||
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 [visible, setVisible] = useState(false);
|
||||
|
||||
const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase);
|
||||
const appendDatabase = ServerContext.useStoreActions((actions) => actions.databases.appendDatabase);
|
||||
|
||||
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('database:create');
|
||||
|
|
@ -38,11 +41,11 @@ export default () => {
|
|||
databaseName: values.databaseName,
|
||||
connectionsFrom: values.connectionsFrom || '%',
|
||||
})
|
||||
.then(database => {
|
||||
.then((database) => {
|
||||
appendDatabase(database);
|
||||
setVisible(false);
|
||||
})
|
||||
.catch(error => {
|
||||
.catch((error) => {
|
||||
addError({ key: 'database:create', message: httpErrorToHuman(error) });
|
||||
setSubmitting(false);
|
||||
});
|
||||
|
|
@ -55,57 +58,55 @@ export default () => {
|
|||
initialValues={{ databaseName: '', connectionsFrom: '' }}
|
||||
validationSchema={schema}
|
||||
>
|
||||
{
|
||||
({ isSubmitting, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
resetForm();
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'database:create'} css={tw`mb-6`}/>
|
||||
<h2 css={tw`text-2xl mb-6`}>Create new database</h2>
|
||||
<Form css={tw`m-0`}>
|
||||
{({ isSubmitting, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
resetForm();
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'database:create'} css={tw`mb-6`} />
|
||||
<h2 css={tw`text-2xl mb-6`}>Create new database</h2>
|
||||
<Form css={tw`m-0`}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'database_name'}
|
||||
name={'databaseName'}
|
||||
label={'Database Name'}
|
||||
description={'A descriptive name for your database instance.'}
|
||||
/>
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'database_name'}
|
||||
name={'databaseName'}
|
||||
label={'Database Name'}
|
||||
description={'A descriptive name for your database instance.'}
|
||||
id={'connections_from'}
|
||||
name={'connectionsFrom'}
|
||||
label={'Connections From'}
|
||||
description={
|
||||
'Where connections should be allowed from. Leave blank to allow connections from anywhere.'
|
||||
}
|
||||
/>
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
type={'string'}
|
||||
id={'connections_from'}
|
||||
name={'connectionsFrom'}
|
||||
label={'Connections From'}
|
||||
description={'Where connections should be allowed from. Leave blank to allow connections from anywhere.'}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`flex flex-wrap justify-end mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
isSecondary
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
|
||||
Create Database
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div css={tw`flex flex-wrap justify-end mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
isSecondary
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
|
||||
Create Database
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
<Button onClick={() => setVisible(true)}>
|
||||
New Database
|
||||
</Button>
|
||||
<Button onClick={() => setVisible(true)}>New Database</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,22 +14,22 @@ import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
|||
import { useDeepMemoize } from '@/plugins/useDeepMemoize';
|
||||
|
||||
export default () => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const databaseLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.databases);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const databaseLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.databases);
|
||||
|
||||
const { addError, clearFlashes } = useFlash();
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const databases = useDeepMemoize(ServerContext.useStoreState(state => state.databases.data));
|
||||
const setDatabases = ServerContext.useStoreActions(state => state.databases.setDatabases);
|
||||
const databases = useDeepMemoize(ServerContext.useStoreState((state) => state.databases.data));
|
||||
const setDatabases = ServerContext.useStoreActions((state) => state.databases.setDatabases);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(!databases.length);
|
||||
clearFlashes('databases');
|
||||
|
||||
getServerDatabases(uuid)
|
||||
.then(databases => setDatabases(databases))
|
||||
.catch(error => {
|
||||
.then((databases) => setDatabases(databases))
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
addError({ key: 'databases', message: httpErrorToHuman(error) });
|
||||
})
|
||||
|
|
@ -38,13 +38,13 @@ export default () => {
|
|||
|
||||
return (
|
||||
<ServerContentBlock title={'Databases'}>
|
||||
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
|
||||
{(!databases.length && loading) ?
|
||||
<Spinner size={'large'} centered/>
|
||||
:
|
||||
<FlashMessageRender byKey={'databases'} css={tw`mb-4`} />
|
||||
{!databases.length && loading ? (
|
||||
<Spinner size={'large'} centered />
|
||||
) : (
|
||||
<Fade timeout={150}>
|
||||
<>
|
||||
{databases.length > 0 ?
|
||||
{databases.length > 0 ? (
|
||||
databases.map((database, index) => (
|
||||
<DatabaseRow
|
||||
key={database.id}
|
||||
|
|
@ -52,31 +52,29 @@ export default () => {
|
|||
className={index > 0 ? 'mt-1' : undefined}
|
||||
/>
|
||||
))
|
||||
:
|
||||
) : (
|
||||
<p css={tw`text-center text-sm text-neutral-300`}>
|
||||
{databaseLimit > 0 ?
|
||||
'It looks like you have no databases.'
|
||||
:
|
||||
'Databases cannot be created for this server.'
|
||||
}
|
||||
{databaseLimit > 0
|
||||
? 'It looks like you have no databases.'
|
||||
: 'Databases cannot be created for this server.'}
|
||||
</p>
|
||||
}
|
||||
)}
|
||||
<Can action={'database.create'}>
|
||||
<div css={tw`mt-6 flex items-center justify-end`}>
|
||||
{(databaseLimit > 0 && databases.length > 0) &&
|
||||
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
|
||||
{databases.length} of {databaseLimit} databases have been allocated to this
|
||||
server.
|
||||
</p>
|
||||
}
|
||||
{databaseLimit > 0 && databaseLimit !== databases.length &&
|
||||
<CreateDatabaseButton css={tw`flex justify-end mt-6`}/>
|
||||
}
|
||||
{databaseLimit > 0 && databases.length > 0 && (
|
||||
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
|
||||
{databases.length} of {databaseLimit} databases have been allocated to this
|
||||
server.
|
||||
</p>
|
||||
)}
|
||||
{databaseLimit > 0 && databaseLimit !== databases.length && (
|
||||
<CreateDatabaseButton css={tw`flex justify-end mt-6`} />
|
||||
)}
|
||||
</div>
|
||||
</Can>
|
||||
</>
|
||||
</Fade>
|
||||
}
|
||||
)}
|
||||
</ServerContentBlock>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,13 +8,10 @@ import { httpErrorToHuman } from '@/api/http';
|
|||
import Button from '@/components/elements/Button';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default ({ databaseId, onUpdate }: {
|
||||
databaseId: string;
|
||||
onUpdate: (database: ServerDatabase) => void;
|
||||
}) => {
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (database: ServerDatabase) => void }) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
const server = ServerContext.useStoreState((state) => state.server.data!);
|
||||
|
||||
if (!databaseId) {
|
||||
return null;
|
||||
|
|
@ -25,8 +22,8 @@ export default ({ databaseId, onUpdate }: {
|
|||
clearFlashes();
|
||||
|
||||
rotateDatabasePassword(server.uuid, databaseId)
|
||||
.then(database => onUpdate(database))
|
||||
.catch(error => {
|
||||
.then((database) => onUpdate(database))
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
addFlash({
|
||||
type: 'error',
|
||||
|
|
|
|||
Reference in a new issue