Skip to content

Commit 4a234af

Browse files
notAreYouScarednotAreYouScared
committed
Minor changes
Changes CopyOnClick to allow any. Allows database information to be copied on click. Changes layouts on database/backups to match the network tab. Changes text to lighten it one level from 400 to 300 for easier visibility. Moves database api endpoints to their own folder for some organization.
1 parent 2d19c12 commit 4a234af

File tree

13 files changed

+47
-44
lines changed

13 files changed

+47
-44
lines changed

resources/scripts/api/server/createServerDatabase.ts renamed to resources/scripts/api/server/databases/createServerDatabase.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
1+
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
22
import http from '@/api/http';
33

44
export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {

resources/scripts/api/server/deleteServerDatabase.ts renamed to resources/scripts/api/server/databases/deleteServerDatabase.ts

File renamed without changes.

resources/scripts/api/server/getServerDatabases.ts renamed to resources/scripts/api/server/databases/getServerDatabases.ts

File renamed without changes.

resources/scripts/api/server/rotateDatabasePassword.ts renamed to resources/scripts/api/server/databases/rotateDatabasePassword.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
1+
import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
22
import http from '@/api/http';
33

44
export default (uuid: string, database: string): Promise<ServerDatabase> => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Toast = styled.div`
1919
}
2020
`;
2121

22-
const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
22+
const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
2323
const [ copied, setCopied ] = useState(false);
2424

2525
useEffect(() => {

‎resources/scripts/components/server/backups/BackupContainer.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default () => {
3434
<ServerContentBlock title={'Backups'}>
3535
<FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
3636
{!backups.items.length ?
37-
<p css={tw`text-center text-sm text-neutral-400`}>
37+
<p css={tw`text-center text-sm text-neutral-300`}>
3838
There are no backups stored for this server.
3939
</p>
4040
:
@@ -47,21 +47,21 @@ export default () => {
4747
</div>
4848
}
4949
{backupLimit === 0 &&
50-
<p css={tw`text-center text-sm text-neutral-400`}>
50+
<p css={tw`text-center text-sm text-neutral-300`}>
5151
Backups cannot be created for this server.
5252
</p>
5353
}
5454
<Can action={'backup.create'}>
55-
{(backupLimit > 0 && backups.items.length > 0) &&
56-
<p css={tw`text-center text-xs text-neutral-400 mt-2`}>
57-
{backups.items.length} of {backupLimit} backups have been created for this server.
58-
</p>
59-
}
60-
{backupLimit > 0 && backupLimit !== backups.items.length &&
61-
<div css={tw`mt-6 flex justify-end`}>
62-
<CreateBackupButton/>
55+
<div css={tw`mt-6 sm:flex items-center justify-end`}>
56+
{(backupLimit > 0 && backups.items.length > 0) &&
57+
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
58+
{backups.items.length} of {backupLimit} backups have been created for this server.
59+
</p>
60+
}
61+
{backupLimit > 0 && backupLimit !== backups.items.length &&
62+
<CreateBackupButton css={tw`w-full sm:w-auto`}/>
63+
}
6364
</div>
64-
}
6565
</Can>
6666
</ServerContentBlock>
6767
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Modal from '@/components/elements/Modal';
33
import { Form, Formik, FormikHelpers } from 'formik';
44
import Field from '@/components/elements/Field';
55
import { object, string } from 'yup';
6-
import createServerDatabase from '@/api/server/createServerDatabase';
6+
import createServerDatabase from '@/api/server/databases/createServerDatabase';
77
import { ServerContext } from '@/state/server';
88
import { httpErrorToHuman } from '@/api/http';
99
import FlashMessageRender from '@/components/FlashMessageRender';

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
77
import { object, string } from 'yup';
88
import FlashMessageRender from '@/components/FlashMessageRender';
99
import { ServerContext } from '@/state/server';
10-
import deleteServerDatabase from '@/api/server/deleteServerDatabase';
10+
import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
1111
import { httpErrorToHuman } from '@/api/http';
1212
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
1313
import Can from '@/components/elements/Can';
14-
import { ServerDatabase } from '@/api/server/getServerDatabases';
14+
import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
1515
import useFlash from '@/plugins/useFlash';
1616
import tw from 'twin.macro';
1717
import Button from '@/components/elements/Button';
1818
import Label from '@/components/elements/Label';
1919
import Input from '@/components/elements/Input';
2020
import GreyRowBox from '@/components/elements/GreyRowBox';
21+
import CopyOnClick from '@/components/elements/CopyOnClick';
2122

2223
interface Props {
2324
database: ServerDatabase;
@@ -113,29 +114,31 @@ export default ({ database, className }: Props) => {
113114
<h3 css={tw`mb-6`}>Database connection details</h3>
114115
<div>
115116
<Label>Endpoint</Label>
116-
<Input type={'text'} readOnly value={database.connectionString} />
117+
<CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
117118
</div>
118119
<div css={tw`mt-6`}>
119120
<Label>Connections from</Label>
120121
<Input type={'text'} readOnly value={database.allowConnectionsFrom} />
121122
</div>
122123
<div css={tw`mt-6`}>
123124
<Label>Username</Label>
124-
<Input type={'text'} readOnly value={database.username} />
125+
<CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
125126
</div>
126127
<Can action={'database.view_password'}>
127128
<div css={tw`mt-6`}>
128129
<Label>Password</Label>
129-
<Input type={'text'} readOnly value={database.password}/>
130+
<CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
130131
</div>
131132
</Can>
132133
<div css={tw`mt-6`}>
133134
<Label>JBDC Connection String</Label>
134-
<Input
135-
type={'text'}
136-
readOnly
137-
value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
138-
/>
135+
<CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
136+
<Input
137+
type={'text'}
138+
readOnly
139+
value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
140+
/>
141+
</CopyOnClick>
139142
</div>
140143
<div css={tw`mt-6 text-right`}>
141144
<Can action={'database.update'}>
@@ -151,18 +154,18 @@ export default ({ database, className }: Props) => {
151154
<FontAwesomeIcon icon={faDatabase} fixedWidth/>
152155
</div>
153156
<div css={tw`flex-1 ml-4`}>
154-
<p css={tw`text-lg`}>{database.name}</p>
157+
<CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
155158
</div>
156159
<div css={tw`ml-8 text-center hidden md:block`}>
157-
<p css={tw`text-sm`}>{database.connectionString}</p>
160+
<CopyOnClick text={database.connectionString}><p css={tw`text-sm`}>{database.connectionString}</p></CopyOnClick>
158161
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
159162
</div>
160163
<div css={tw`ml-8 text-center hidden md:block`}>
161164
<p css={tw`text-sm`}>{database.allowConnectionsFrom}</p>
162165
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
163166
</div>
164167
<div css={tw`ml-8 text-center hidden md:block`}>
165-
<p css={tw`text-sm`}>{database.username}</p>
168+
<CopyOnClick text={database.username}><p css={tw`text-sm`}>{database.username}</p></CopyOnClick>
166169
<p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
167170
</div>
168171
<div css={tw`ml-8`}>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import getServerDatabases from '@/api/server/getServerDatabases';
2+
import getServerDatabases from '@/api/server/databases/getServerDatabases';
33
import { ServerContext } from '@/state/server';
44
import { httpErrorToHuman } from '@/api/http';
55
import FlashMessageRender from '@/components/FlashMessageRender';
@@ -62,17 +62,17 @@ export default () => {
6262
</p>
6363
}
6464
<Can action={'database.create'}>
65-
{(databaseLimit > 0 && databases.length > 0) &&
66-
<p css={tw`text-center text-xs text-neutral-400 mt-2`}>
67-
{databases.length} of {databaseLimit} databases have been allocated to this
68-
server.
69-
</p>
70-
}
71-
{databaseLimit > 0 && databaseLimit !== databases.length &&
72-
<div css={tw`mt-6 flex justify-end`}>
73-
<CreateDatabaseButton/>
65+
<div css={tw`mt-6 sm:flex items-center justify-end`}>
66+
{(databaseLimit > 0 && databases.length > 0) &&
67+
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
68+
{databases.length} of {databaseLimit} databases have been allocated to this
69+
server.
70+
</p>
71+
}
72+
{databaseLimit > 0 && databaseLimit !== databases.length &&
73+
<CreateDatabaseButton css={tw`w-full sm:w-auto`}/>
74+
}
7475
</div>
75-
}
7676
</Can>
7777
</>
7878
</Fade>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState } from 'react';
2-
import rotateDatabasePassword from '@/api/server/rotateDatabasePassword';
2+
import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
33
import { Actions, useStoreActions } from 'easy-peasy';
44
import { ApplicationStore } from '@/state';
55
import { ServerContext } from '@/state/server';
6-
import { ServerDatabase } from '@/api/server/getServerDatabases';
6+
import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
77
import { httpErrorToHuman } from '@/api/http';
88
import Button from '@/components/elements/Button';
99
import tw from 'twin.macro';

0 commit comments

Comments
 (0)