Skip to content

Commit 7e8a5f1

Browse files
DaneEverittDaneEveritt
committed
Update database screens
1 parent a288374 commit 7e8a5f1

File tree

5 files changed

+86
-76
lines changed

5 files changed

+86
-76
lines changed

‎resources/scripts/components/elements/GreyRowBox.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import styled from 'styled-components/macro';
22
import tw from 'twin.macro';
33

4-
export default styled.div`
4+
export default styled.div<{ $hoverable?: boolean }>`
55
${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
66
7-
&:not(.no-hover):hover {
8-
${tw`border-neutral-500`};
9-
}
7+
${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
108
119
& > div.icon {
1210
${tw`rounded-full bg-neutral-500 p-3`};

‎resources/scripts/components/server/databases/CreateDatabaseButton.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { httpErrorToHuman } from '@/api/http';
99
import FlashMessageRender from '@/components/FlashMessageRender';
1010
import useFlash from '@/plugins/useFlash';
1111
import useServer from '@/plugins/useServer';
12+
import Button from '@/components/elements/Button';
13+
import tw from 'twin.macro';
1214

1315
interface Values {
1416
databaseName: string;
@@ -48,7 +50,7 @@ export default () => {
4850
};
4951

5052
return (
51-
<React.Fragment>
53+
<>
5254
<Formik
5355
onSubmit={submit}
5456
initialValues={{ databaseName: '', connectionsFrom: '%' }}
@@ -65,17 +67,17 @@ export default () => {
6567
setVisible(false);
6668
}}
6769
>
68-
<FlashMessageRender byKey={'database:create'} className={'mb-6'}/>
69-
<h3 className={'mb-6'}>Create new database</h3>
70-
<Form className={'m-0'}>
70+
<FlashMessageRender byKey={'database:create'} css={tw`mb-6`}/>
71+
<h2 css={tw`text-2xl mb-6`}>Create new database</h2>
72+
<Form css={tw`m-0`}>
7173
<Field
7274
type={'string'}
7375
id={'database_name'}
7476
name={'databaseName'}
7577
label={'Database Name'}
7678
description={'A descriptive name for your database instance.'}
7779
/>
78-
<div className={'mt-6'}>
80+
<div css={tw`mt-6`}>
7981
<Field
8082
type={'string'}
8183
id={'connections_from'}
@@ -84,26 +86,27 @@ export default () => {
8486
description={'Where connections should be allowed from. Use % for wildcards.'}
8587
/>
8688
</div>
87-
<div className={'mt-6 text-right'}>
88-
<button
89+
<div css={tw`mt-6 text-right`}>
90+
<Button
8991
type={'button'}
90-
className={'btn btn-sm btn-secondary mr-2'}
92+
isSecondary
93+
css={tw`mr-2`}
9194
onClick={() => setVisible(false)}
9295
>
9396
Cancel
94-
</button>
95-
<button className={'btn btn-sm btn-primary'} type={'submit'}>
97+
</Button>
98+
<Button type={'submit'}>
9699
Create Database
97-
</button>
100+
</Button>
98101
</div>
99102
</Form>
100103
</Modal>
101104
)
102105
}
103106
</Formik>
104-
<button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
107+
<Button onClick={() => setVisible(true)}>
105108
New Database
106-
</button>
107-
</React.Fragment>
109+
</Button>
110+
</>
108111
);
109112
};

‎resources/scripts/components/server/databases/DatabaseRow.tsx‎

Lines changed: 54 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import Can from '@/components/elements/Can';
1717
import { ServerDatabase } from '@/api/server/getServerDatabases';
1818
import useServer from '@/plugins/useServer';
1919
import useFlash from '@/plugins/useFlash';
20+
import tw from 'twin.macro';
21+
import Button from '@/components/elements/Button';
22+
import Label from '@/components/elements/Label';
23+
import Input from '@/components/elements/Input';
24+
import GreyRowBox from '@/components/elements/GreyRowBox';
2025

2126
interface Props {
2227
database: ServerDatabase;
@@ -51,13 +56,14 @@ export default ({ database, className }: Props) => {
5156
addError({ key: 'database:delete', message: httpErrorToHuman(error) });
5257
});
5358
};
54-
59+
5560
return (
56-
<React.Fragment>
61+
<>
5762
<Formik
5863
onSubmit={submit}
5964
initialValues={{ confirm: '' }}
6065
validationSchema={schema}
66+
isInitialValid={false}
6167
>
6268
{
6369
({ isSubmitting, isValid, resetForm }) => (
@@ -70,98 +76,98 @@ export default ({ database, className }: Props) => {
7076
resetForm();
7177
}}
7278
>
73-
<FlashMessageRender byKey={'database:delete'} className={'mb-6'}/>
74-
<h3 className={'mb-6'}>Confirm database deletion</h3>
75-
<p className={'text-sm'}>
79+
<FlashMessageRender byKey={'database:delete'} css={tw`mb-6`}/>
80+
<h2 css={tw`text-2xl mb-6`}>Confirm database deletion</h2>
81+
<p css={tw`text-sm`}>
7682
Deleting a database is a permanent action, it cannot be undone. This will permanetly
7783
delete the <strong>{database.name}</strong> database and remove all associated data.
7884
</p>
79-
<Form className={'m-0 mt-6'}>
85+
<Form css={tw`m-0 mt-6`}>
8086
<Field
8187
type={'text'}
8288
id={'confirm_name'}
8389
name={'confirm'}
8490
label={'Confirm Database Name'}
8591
description={'Enter the database name to confirm deletion.'}
8692
/>
87-
<div className={'mt-6 text-right'}>
88-
<button
93+
<div css={tw`mt-6 text-right`}>
94+
<Button
8995
type={'button'}
90-
className={'btn btn-sm btn-secondary mr-2'}
96+
isSecondary
97+
css={tw`mr-2`}
9198
onClick={() => setVisible(false)}
9299
>
93100
Cancel
94-
</button>
95-
<button
101+
</Button>
102+
<Button
96103
type={'submit'}
97-
className={'btn btn-sm btn-red'}
104+
color={'red'}
98105
disabled={!isValid}
99106
>
100107
Delete Database
101-
</button>
108+
</Button>
102109
</div>
103110
</Form>
104111
</Modal>
105112
)
106113
}
107114
</Formik>
108115
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
109-
<FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
110-
<h3 className={'mb-6'}>Database connection details</h3>
116+
<FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
117+
<h3 css={tw`mb-6`}>Database connection details</h3>
111118
<Can action={'database.view_password'}>
112119
<div>
113-
<label className={'input-dark-label'}>Password</label>
114-
<input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
120+
<Label>Password</Label>
121+
<Input type={'text'} readOnly value={database.password}/>
115122
</div>
116123
</Can>
117-
<div className={'mt-6'}>
118-
<label className={'input-dark-label'}>JBDC Connection String</label>
119-
<input
124+
<div css={tw`mt-6`}>
125+
<Label>JBDC Connection String</Label>
126+
<Input
120127
type={'text'}
121-
className={'input-dark'}
122-
readOnly={true}
128+
readOnly
123129
value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
124130
/>
125131
</div>
126-
<div className={'mt-6 text-right'}>
132+
<div css={tw`mt-6 text-right`}>
127133
<Can action={'database.update'}>
128134
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
129135
</Can>
130-
<button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
136+
<Button isSecondary onClick={() => setConnectionVisible(false)}>
131137
Close
132-
</button>
138+
</Button>
133139
</div>
134140
</Modal>
135-
<div className={classNames('grey-row-box no-hover', className)}>
136-
<div className={'icon'}>
137-
<FontAwesomeIcon icon={faDatabase} fixedWidth={true}/>
141+
<GreyRowBox $hoverable={false} className={className}>
142+
<div>
143+
<FontAwesomeIcon icon={faDatabase} fixedWidth/>
138144
</div>
139-
<div className={'flex-1 ml-4'}>
140-
<p className={'text-lg'}>{database.name}</p>
145+
<div css={tw`flex-1 ml-4`}>
146+
<p css={tw`text-lg`}>{database.name}</p>
141147
</div>
142-
<div className={'ml-8 text-center'}>
143-
<p className={'text-sm'}>{database.connectionString}</p>
144-
<p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Endpoint</p>
148+
<div css={tw`ml-8 text-center`}>
149+
<p css={tw`text-sm`}>{database.connectionString}</p>
150+
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
145151
</div>
146-
<div className={'ml-8 text-center'}>
147-
<p className={'text-sm'}>{database.allowConnectionsFrom}</p>
148-
<p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Connections from</p>
152+
<div css={tw`ml-8 text-center`}>
153+
<p css={tw`text-sm`}>{database.allowConnectionsFrom}</p>
154+
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
149155
</div>
150-
<div className={'ml-8 text-center'}>
151-
<p className={'text-sm'}>{database.username}</p>
152-
<p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Username</p>
156+
<div css={tw`ml-8 text-center`}>
157+
<p css={tw`text-sm`}>{database.username}</p>
158+
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
153159
</div>
154-
<div className={'ml-8'}>
155-
<button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}>
156-
<FontAwesomeIcon icon={faEye} fixedWidth={true}/>
157-
</button>
160+
<div css={tw`ml-8`}>
161+
<Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
162+
<FontAwesomeIcon icon={faEye} fixedWidth/>
163+
</Button>
158164
<Can action={'database.delete'}>
159-
<button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
160-
<FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
161-
</button>
165+
<Button color={'red'} isSecondary onClick={() => setVisible(true)}>
166+
<FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
167+
</Button>
162168
</Can>
163169
</div>
164-
</div>
165-
</React.Fragment>
170+
</GreyRowBox>
171+
</>
166172
);
167173
};

‎resources/scripts/components/server/databases/DatabasesContainer.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import Can from '@/components/elements/Can';
1111
import useFlash from '@/plugins/useFlash';
1212
import useServer from '@/plugins/useServer';
1313
import PageContentBlock from '@/components/elements/PageContentBlock';
14+
import tw from 'twin.macro';
15+
import Fade from '@/components/elements/Fade';
1416

1517
export default () => {
1618
const { uuid, featureLimits } = useServer();
@@ -35,11 +37,11 @@ export default () => {
3537

3638
return (
3739
<PageContentBlock>
38-
<FlashMessageRender byKey={'databases'} className={'mb-4'}/>
40+
<FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
3941
{(!databases.length && loading) ?
40-
<Spinner size={'large'} centered={true}/>
42+
<Spinner size={'large'} centered/>
4143
:
42-
<CSSTransition classNames={'fade'} timeout={250}>
44+
<Fade timeout={250}>
4345
<>
4446
{databases.length > 0 ?
4547
databases.map((database, index) => (
@@ -50,28 +52,28 @@ export default () => {
5052
/>
5153
))
5254
:
53-
<p className={'text-center text-sm text-neutral-400'}>
55+
<p css={tw`text-center text-sm text-neutral-400`}>
5456
{featureLimits.databases > 0 ?
55-
`It looks like you have no databases.`
57+
'It looks like you have no databases.'
5658
:
57-
`Databases cannot be created for this server.`
59+
'Databases cannot be created for this server.'
5860
}
5961
</p>
6062
}
6163
<Can action={'database.create'}>
6264
{(featureLimits.databases > 0 && databases.length > 0) &&
63-
<p className="text-center text-xs text-neutral-400 mt-2">
65+
<p css={tw`text-center text-xs text-neutral-400 mt-2`}>
6466
{databases.length} of {featureLimits.databases} databases have been allocated to this server.
6567
</p>
6668
}
6769
{featureLimits.databases > 0 && featureLimits.databases !== databases.length &&
68-
<div className={'mt-6 flex justify-end'}>
70+
<div css={tw`mt-6 flex justify-end`}>
6971
<CreateDatabaseButton/>
7072
</div>
7173
}
7274
</Can>
7375
</>
74-
</CSSTransition>
76+
</Fade>
7577
}
7678
</PageContentBlock>
7779
);

‎resources/scripts/components/server/databases/RotatePasswordButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ServerContext } from '@/state/server';
66
import { ServerDatabase } from '@/api/server/getServerDatabases';
77
import { httpErrorToHuman } from '@/api/http';
88
import Button from '@/components/elements/Button';
9+
import tw from 'twin.macro';
910

1011
export default ({ databaseId, onUpdate }: {
1112
databaseId: string;
@@ -38,7 +39,7 @@ export default ({ databaseId, onUpdate }: {
3839
};
3940

4041
return (
41-
<Button className={'btn-secondary mr-2'} onClick={rotate} isLoading={loading}>
42+
<Button isSecondary color={'primary'} css={tw`mr-2`} onClick={rotate} isLoading={loading}>
4243
Rotate Password
4344
</Button>
4445
);

0 commit comments

Comments
 (0)