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.

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

@@ -3,7 +3,7 @@ import Modal from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
-import createServerDatabase from '@/api/server/createServerDatabase';
+import createServerDatabase from '@/api/server/databases/createServerDatabase';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';

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

@@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
-import deleteServerDatabase from '@/api/server/deleteServerDatabase';
+import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
 import { httpErrorToHuman } from '@/api/http';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
 import Can from '@/components/elements/Can';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Label from '@/components/elements/Label';
 import Input from '@/components/elements/Input';
 import GreyRowBox from '@/components/elements/GreyRowBox';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 interface Props {
     database: ServerDatabase;
@@ -113,7 +114,7 @@ export default ({ database, className }: Props) => {
                 <h3 css={tw`mb-6`}>Database connection details</h3>
                 <div>
                     <Label>Endpoint</Label>
-                    <Input type={'text'} readOnly value={database.connectionString} />
+                    <CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Connections from</Label>
@@ -121,21 +122,23 @@ export default ({ database, className }: Props) => {
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Username</Label>
-                    <Input type={'text'} readOnly value={database.username} />
+                    <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>
-                        <Input type={'text'} readOnly value={database.password}/>
+                        <CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
                     </div>
                 </Can>
                 <div css={tw`mt-6`}>
                     <Label>JBDC Connection String</Label>
-                    <Input
-                        type={'text'}
-                        readOnly
-                        value={`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
+                            value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
+                        />
+                    </CopyOnClick>
                 </div>
                 <div css={tw`mt-6 text-right`}>
                     <Can action={'database.update'}>
@@ -151,10 +154,10 @@ export default ({ database, className }: Props) => {
                     <FontAwesomeIcon icon={faDatabase} fixedWidth/>
                 </div>
                 <div css={tw`flex-1 ml-4`}>
-                    <p css={tw`text-lg`}>{database.name}</p>
+                    <CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
-                    <p css={tw`text-sm`}>{database.connectionString}</p>
+                    <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`}>
@@ -162,7 +165,7 @@ 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`}>
-                    <p css={tw`text-sm`}>{database.username}</p>
+                    <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`}>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import getServerDatabases from '@/api/server/getServerDatabases';
+import getServerDatabases from '@/api/server/databases/getServerDatabases';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -62,17 +62,17 @@ export default () => {
                             </p>
                         }
                         <Can action={'database.create'}>
-                            {(databaseLimit > 0 && databases.length > 0) &&
-                            <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                                {databases.length} of {databaseLimit} databases have been allocated to this
-                                server.
-                            </p>
-                            }
-                            {databaseLimit > 0 && databaseLimit !== databases.length &&
-                            <div css={tw`mt-6 flex justify-end`}>
-                                <CreateDatabaseButton/>
+                            <div css={tw`mt-6 sm: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`w-full sm:w-auto`}/>
+                                }
                             </div>
-                            }
                         </Can>
                     </>
                 </Fade>

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

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import rotateDatabasePassword from '@/api/server/rotateDatabasePassword';
+import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import { httpErrorToHuman } from '@/api/http';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';